Single Select Dropdown: Lazy Loading

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div style="display: flex;">
       <div onclick="dropdown.showNextResultsLoadingIndicator(true)" style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
           DEMO
           Show Next Results Loading Indicator
       </div>

       <div onclick="dropdown.showNextResultsLoadingIndicator(false)" style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
           DEMO
           Hide Next Results Loading Indicator
       </div>

       <div onclick="dropdown.showPreviousResultsLoadingIndicator(true)" style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
           DEMO
           Show Previous Results Loading Indicator
       </div>

       <div onclick="dropdown.showPreviousResultsLoadingIndicator(false)" style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
           DEMO
           Hide Previous Results Loading Indicator
       </div>
   </div>

   <div class="acl-dropdown-demo-example" style="width: 225px">
       <div>
           <h5>Single select dropdown with lazy loading</h5>
           <div class="acl-dropdown acl-select-dropdown acl-dropdown-demo-1" id="single-select-dropdown-example-id" data-dropdown-type="single-select" data-dropdown-label="Choose an item">

               <div class="acl-select-dropdown__clear">
                   <div class="acl-select-dropdown__clear-link">
                       Clear
                   </div>
               </div>

               <div class="acl-dropdown__cta acl-select-dropdown__field">
                   <div class="acl-dropdown__cta-link acl-select-dropdown__cta-link"></div>
                   <i class="aforza-icons acl-select-dropdown__cheveron">acl_down_arrow</i>
               </div>

               <div class="acl-dropdown__results acl-select-dropdown__results" data-dropdown-select="true">

                   <div class="acl-select-dropdown__results--load-previous">
                       <div class="acl-loading-dots__container">
                           <div class="acl-loading-dots">
                               <div class="bounce1"></div>
                               <div class="bounce2"></div>
                               <div class="bounce3"></div>
                           </div>
                       </div>
                   </div>

                   <div class="acl-dropdown__items acl-select-dropdown__items" style="max-height: 250px;">
                   </div>

                   <div class="acl-select-dropdown__results--load-next">
                       <div class="acl-loading-dots__container">
                           <div class="acl-loading-dots">
                               <div class="bounce1"></div>
                               <div class="bounce2"></div>
                               <div class="bounce3"></div>
                           </div>
                       </div>
                   </div>

               </div>
           </div>
       </div>
   </div>

   <script>
       let dropdownResults = [];
       for (let i = 1; i <= 10; i++) {
           dropdownResults.push({
               id: `Item-${i}`,
               value: `Example ${i}`
           })
       }
       const dropdownEl = document.querySelector('.acl-dropdown-demo-1');
       const dropdown = new acl.ACLDropdownSingleSelect(dropdownEl, dropdownResults, {
           lazyLoading: true,
           initiallyPopulateResults: true,
           scrollEventPercentageOffset: 70,
           scrollEventDebounceValue: 200,
       });
       dropdownEl.addEventListener('dropdownitemclicked',
           event => {
               console.log('dropdownitemclicked', e.detail);
           }, false);
       dropdownEl.addEventListener('scrolledtotop',
           event => {
               console.log('Custom Event: scrolledtotop');
           }, false);
       dropdownEl.addEventListener('scrolledtobottom',
           event => {
               console.log('Custom Event: scrolledtobottom');
               const dropdownItems = dropdownEl.querySelectorAll('.acl-dropdown__item');
               for (let i = dropdownItems.length + 1; i <= dropdownItems.length + 10; i++) {
                   if (i > 100) return;
                   dropdownResults.push({
                       id: `Item-${i}`,
                       value: `Example ${i}`
                   })
               }
               dropdown.updateResults(dropdownResults);
           }, false);
   </script>


        <div style="display: flex;"> <div onclick="dropdown.showNextResultsLoadingIndicator(true)"
        style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
        DEMO
        Show Next Results Loading Indicator
    </div>

        <div onclick="dropdown.showNextResultsLoadingIndicator(false)"
        style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
        DEMO
        Hide Next Results Loading Indicator
    </div>

     <div onclick="dropdown.showPreviousResultsLoadingIndicator(true)"
        style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
        DEMO
        Show Previous Results Loading Indicator
    </div>

    <div onclick="dropdown.showPreviousResultsLoadingIndicator(false)"
        style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
        DEMO
        Hide Previous Results Loading Indicator
    </div>
</div>

<div class="acl-dropdown-demo-example" style="width: 225px">
    <div>
        <h5>Single select dropdown with lazy loading</h5>
        <div class="acl-dropdown acl-select-dropdown acl-dropdown-demo-1" id="single-select-dropdown-example-id"
            data-dropdown-type="single-select" data-dropdown-label="Choose an item">

            <div class="acl-select-dropdown__clear">
                <div class="acl-select-dropdown__clear-link">
                    Clear
                </div>
            </div>

            <div class="acl-dropdown__cta acl-select-dropdown__field">
                <div class="acl-dropdown__cta-link acl-select-dropdown__cta-link"></div>
                <i class="aforza-icons acl-select-dropdown__cheveron">acl_down_arrow</i>
            </div>

            <div class="acl-dropdown__results acl-select-dropdown__results" data-dropdown-select="true" >

                <div class="acl-select-dropdown__results--load-previous">
                    <div class="acl-loading-dots__container">
                        <div class="acl-loading-dots">
                            <div class="bounce1"></div>
                            <div class="bounce2"></div>
                            <div class="bounce3"></div>
                        </div>
                    </div>
                </div>
     
                <div class="acl-dropdown__items acl-select-dropdown__items" style="max-height: 250px;">
                    {{!-- Results can be manually rendered here --}}
                </div>

                <div class="acl-select-dropdown__results--load-next">
                <div class="acl-loading-dots__container">
                    <div class="acl-loading-dots">
                        <div class="bounce1"></div>
                        <div class="bounce2"></div>
                        <div class="bounce3"></div>
                    </div>
                </div>
            </div>
            
            </div>
        </div>
    </div>
</div>

<script>
   let dropdownResults = [];

    for (let i = 1; i <= 10; i++) {
        dropdownResults.push({
            id: `Item-${i}`,
            value: `Example ${i}`
        })
    }

    const dropdownEl = document.querySelector('.acl-dropdown-demo-1');
    const dropdown = new acl.ACLDropdownSingleSelect(dropdownEl, dropdownResults, {
        lazyLoading: true,
        initiallyPopulateResults: true,
        scrollEventPercentageOffset: 70,
		scrollEventDebounceValue: 200,
    });

    dropdownEl.addEventListener('dropdownitemclicked',
        event => {
            console.log('dropdownitemclicked', e.detail);
        }, false);

    dropdownEl.addEventListener('scrolledtotop',
        event => {
            console.log('Custom Event: scrolledtotop');
        }, false);

    dropdownEl.addEventListener('scrolledtobottom',
        event => {
            console.log('Custom Event: scrolledtobottom');

              const dropdownItems = dropdownEl.querySelectorAll('.acl-dropdown__item');

            for (let i = dropdownItems.length + 1; i <= dropdownItems.length + 10; i++) {

                if (i > 100) return;

                dropdownResults.push({
                    id: `Item-${i}`,
                    value: `Example ${i}`
                })
            }

            dropdown.updateResults(dropdownResults);

        }, false);

</script>


        
            
            /* No context defined. */

File:

Content:


                                import { ACLDropdown } from '../index.js';
import { dispatchCustomEvent } from '../../../utilities';

class ACLDropdownSingleSelect extends ACLDropdown {
	constructor(
		dropdownEl,
		results,
		options = {
			showClearOnSelect: false,
			scrollEventPercentageOffset: 80,
			scrollEventDebounceValue: 2000,
			initiallyPopulateResults: true,
			readonly: false,
			dropUp: false,
			dropUpOffset: 12,
			lazyLoading: true,
			disabled: false,
		}
	) {
		super(dropdownEl, results, options);

		this.selectors = {
			...this.selectors,
			selectResultItem: 'acl-select-dropdown__item',
			selectAssociatedColour: 'acl-select-dropdown__cta-link--associated-colour',
			noResultsPlaceholder: 'acl-dropdown__no-results-placeholder',
			placeholder: 'acl-select-dropdown__placeholder',
			configurableContent: 'acl-select-dropdown__configurable-content',
		};

		this.eventName = Object.freeze({
			...this.eventName,
			DROPDOWN_ITEM_CLICKED: 'dropdownitemclicked',
		});

		this.resultItems = this.dropdownEl.querySelector(`.${this.selectors.resultItems}`);
		this.configurableContent = this.dropdownEl.querySelector(`.${this.selectors.configurableContent}`);

		if (this.dropdownType !== this.types.buttonSingleSelect) this.setPlaceholder();

		if (this.resultItems && this.options.initiallyPopulateResults) this.populateResults();

		if (this.configurableContent)
			this.configurableContent.addEventListener(this.eventName.CLICK, () => {
				this.shouldCloseDropdown = false;
			});
	}

	createResultItem(result) {
		let resultItemEl = document.createElement('div');
		let resultIconMarkup = '';

		if (result.associatedColour) resultItemEl.style.borderLeft = `3px solid ${result.associatedColour}`;

		if (result.associatedIcon)
			resultIconMarkup = `<i class="aforza-icons acl-select-dropdown__associated-icon" style="color:${result.associatedIconColour}">${result.associatedIcon}</i>`;

		resultItemEl.innerHTML = `${resultIconMarkup}${result.value}`;
		resultItemEl.classList.add(this.selectors.resultItem);
		this.isDropdownSelect ? resultItemEl.classList.add(this.selectors.selectResultItem) : '';
		resultItemEl.dataset.resultId = result.id;
		resultItemEl.dataset.resultValue = result.value;
		resultItemEl.title = result.value;

		if (result.selected || result.id === this.dropdownEl.dataset.activeSelection) {
			super.setItemAsSelected(resultItemEl);
			this.ctaEl.dataset.active = true;
		}

		resultItemEl.addEventListener(this.eventName.CLICK, this.resultItemClick.bind(this));
		this.resultItems.appendChild(resultItemEl);
	}

	populateResults() {
		if (this.results && this.results.length > 0) {
			this.results.forEach(result => this.createResultItem(result));
		} else {
			super.createEmptyResultsList();
		}
	}

	resultItemClick(event) {
		const result = event.currentTarget;

		if (result) {
			if (this.dropdownType !== this.types.buttonSingleSelect) super.setItemAsSelected(result);
			this.ctaEl.dataset.active = true;

			dispatchCustomEvent(this.dropdownEl, this.eventName.DROPDOWN_ITEM_CLICKED, {
				id: result.dataset.resultId,
				resultName: result.dataset.resultValue,
			});
		}
	}
}

export { ACLDropdownSingleSelect };

URL: /components/raw/single-select-dropdown/index.js
Filesystem Path: src/components/dropdown/single-select-dropdown/index.js
Size: 3.2 KB

Handle: @single-select-dropdown--lazy-loading
Preview:
- With layout
- Component only
Filesystem Path: src/components/dropdown/single-select-dropdown/single-select-dropdown--lazy-loading.hbs

No notes defined.