<div class="acl-dropdown-demo-example" style="width: 450px">
<div class="acl-dropdown acl-select-dropdown acl-dropdown-demo" id="single-select-dropdown-example-id" data-dropdown-type="single-select" data-dropdown-label="Select products" data-active-selection="Account Promotions">
<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" data-configurable-dropdown="true">
<div class="acl-select-dropdown__configurable-content">
<div class="acl-simple-searchbox" data-dropdown-close="false">
<div class="acl-simple-searchbox__search-icon">
<i class="aforza-icons">acl_search</i>
</div>
<input class="acl-simple-searchbox__input" id="acl-demo-simple-search" type="text" name="routeBuilderSearch" placeholder="Search">
<div class="acl-simple-searchbox__clear">
<i class="aforza-icons acl-demo__icon-catalog-icon-preview">acl_close_small</i>
</div>
<div class="acl-simple-searchbox__loading-spinner">
<svg class="acl-loader__circular" width="20px" height="20px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="acl-loader__circular-path" fill="none" stroke-width="6" cx="33" cy="33" r="30">
</circle>
</svg>
</div>
</div>
<div class="acl-select-dropdown__title">100 products</div>
<div class="acl-result-card acl-result-card__margin--bottom-small acl-result-card--border-purple acl-result-card--rounded-edges">
<div class="acl-result-card__column">
<img class="acl-promotion-catalogue-card__image acl-promotion-catalogue-card__image--small" src="/assets/img/product-ex-1.png">
</div>
<div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--right-small acl-result-card__padding--left-small">
<div class="acl-result-card__text acl-result-card__text--bold acl-result-card__hover--underline acl-result-card__elipsis acl-result-card__elipsis--one-line">
Duke’s Premium Blend Traditional Beverage 1L (20 Pack)
</div>
<div class="acl-result-card__text acl-result-card__text--extra-small acl-result-card__text--grey ">
DKE-34632
</div>
</div>
<div class="acl-result-card__column">
<div class="acl-result-card__text acl-result-card--cursor-pointer acl-result-card__text--underline acl-result-card__text--extra-small acl-result-card__text--mid-blue acl-result-card__hover--grey">
Add
</div>
</div>
</div>
<div class="acl-result-card acl-result-card__margin--bottom-small acl-result-card--border-purple acl-result-card--rounded-edges">
<div class="acl-result-card__column">
<img class="acl-promotion-catalogue-card__image acl-promotion-catalogue-card__image--small" src="/assets/img/product-ex-1.png">
</div>
<div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--right-small acl-result-card__padding--left-small">
<div class="acl-result-card__text acl-result-card__text--bold acl-result-card__hover--underline acl-result-card__elipsis acl-result-card__elipsis--one-line">
Duke’s Premium Blend Traditional Beverage 1L (20 Pack)
</div>
<div class="acl-result-card__text acl-result-card__cursor-pointer acl-result-card__text--extra-small acl-result-card__text--grey ">
DKE-34636
</div>
</div>
<div class="acl-result-card__column">
<div class="acl-result-card__text acl-result-card--cursor-pointer acl-result-card__text--underline acl-result-card__text--extra-small acl-result-card__text--mid-blue acl-result-card__hover--grey">
Add
</div>
</div>
</div>
<div class="acl-result-card acl-result-card--border-purple acl-result-card--rounded-edges">
<div class="acl-result-card__column">
<img class="acl-promotion-catalogue-card__image acl-promotion-catalogue-card__image--small" src="/assets/img/product-ex-1.png">
</div>
<div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--right-small acl-result-card__padding--left-small">
<div class="acl-result-card__text acl-result-card__text--bold acl-result-card__hover--underline acl-result-card__elipsis acl-result-card__elipsis--one-line">
Duke’s Premium Blend Traditional Beverage 1L (20 Pack)
</div>
<div class="acl-result-card__text acl-result-card__text--extra-small acl-result-card__text--grey ">
DKE-54632
</div>
</div>
<div class="acl-result-card__column">
<div class="acl-result-card__text acl-result-card--cursor-pointer acl-result-card__text--underline acl-result-card__text--extra-small acl-result-card__text--mid-blue acl-result-card__hover--grey">
Add
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
const results = [{
id: '002csgr',
value: 'Account Promotions'
},
{
id: '01sscx',
value: 'Segment Promotions'
},
{
id: 'fsx00',
value: 'Inherited Account Promotions'
}
];
const dropdownEl = document.querySelector(".acl-dropdown-demo");
const searchboxEl = document.querySelector(".acl-simple-searchbox");
const dropdown = new acl.ACLDropdownSingleSelect(dropdownEl, results);
const searchbox = new acl.ACLSearchbox(searchboxEl, 300);
dropdownEl.addEventListener('dropdownitemclicked',
function(e) {
console.log('dropdownitemclicked', `id : ${e.detail.id}`, `resultName : ${e.detail.resultName}`);
}, false);
dropdownEl.addEventListener('cleardropdown',
function(e) {
console.log('cleardropdown', `id : ${e.detail.id}`, `resultName : ${e.detail.resultName}`);
}, false);
</script>
<div class="acl-dropdown-demo-example" style="width: 450px">
<div class="acl-dropdown acl-select-dropdown acl-dropdown-demo" id="single-select-dropdown-example-id"
data-dropdown-type="single-select" data-dropdown-label="Select products"
data-active-selection="Account Promotions">
<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"
data-configurable-dropdown="true">
<div class="acl-select-dropdown__configurable-content">
<div class="acl-simple-searchbox" data-dropdown-close="false">
<div class="acl-simple-searchbox__search-icon">
<i class="aforza-icons">acl_search</i>
</div>
<input class="acl-simple-searchbox__input" id="acl-demo-simple-search" type="text" name="routeBuilderSearch"
placeholder="Search">
<div class="acl-simple-searchbox__clear">
<i class="aforza-icons acl-demo__icon-catalog-icon-preview">acl_close_small</i>
</div>
<div class="acl-simple-searchbox__loading-spinner">
<svg class="acl-loader__circular" width="20px" height="20px" viewBox="0 0 66 66"
xmlns="http://www.w3.org/2000/svg">
<circle class="acl-loader__circular-path" fill="none" stroke-width="6" cx="33" cy="33" r="30">
</circle>
</svg>
</div>
</div>
<div class="acl-select-dropdown__title">100 products</div>
<div
class="acl-result-card acl-result-card__margin--bottom-small acl-result-card--border-purple acl-result-card--rounded-edges">
<div class="acl-result-card__column">
<img class="acl-promotion-catalogue-card__image acl-promotion-catalogue-card__image--small"
src="/assets/img/product-ex-1.png">
</div>
<div
class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--right-small acl-result-card__padding--left-small">
<div
class="acl-result-card__text acl-result-card__text--bold acl-result-card__hover--underline acl-result-card__elipsis acl-result-card__elipsis--one-line">
Duke’s Premium Blend Traditional Beverage 1L (20 Pack)
</div>
<div
class="acl-result-card__text acl-result-card__text--extra-small acl-result-card__text--grey ">
DKE-34632
</div>
</div>
<div class="acl-result-card__column">
<div
class="acl-result-card__text acl-result-card--cursor-pointer acl-result-card__text--underline acl-result-card__text--extra-small acl-result-card__text--mid-blue acl-result-card__hover--grey">
Add
</div>
</div>
</div>
<div
class="acl-result-card acl-result-card__margin--bottom-small acl-result-card--border-purple acl-result-card--rounded-edges">
<div class="acl-result-card__column">
<img class="acl-promotion-catalogue-card__image acl-promotion-catalogue-card__image--small"
src="/assets/img/product-ex-1.png">
</div>
<div
class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--right-small acl-result-card__padding--left-small">
<div
class="acl-result-card__text acl-result-card__text--bold acl-result-card__hover--underline acl-result-card__elipsis acl-result-card__elipsis--one-line">
Duke’s Premium Blend Traditional Beverage 1L (20 Pack)
</div>
<div
class="acl-result-card__text acl-result-card__cursor-pointer acl-result-card__text--extra-small acl-result-card__text--grey ">
DKE-34636
</div>
</div>
<div class="acl-result-card__column">
<div
class="acl-result-card__text acl-result-card--cursor-pointer acl-result-card__text--underline acl-result-card__text--extra-small acl-result-card__text--mid-blue acl-result-card__hover--grey">
Add
</div>
</div>
</div>
<div class="acl-result-card acl-result-card--border-purple acl-result-card--rounded-edges">
<div class="acl-result-card__column">
<img class="acl-promotion-catalogue-card__image acl-promotion-catalogue-card__image--small"
src="/assets/img/product-ex-1.png">
</div>
<div
class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--right-small acl-result-card__padding--left-small">
<div
class="acl-result-card__text acl-result-card__text--bold acl-result-card__hover--underline acl-result-card__elipsis acl-result-card__elipsis--one-line">
Duke’s Premium Blend Traditional Beverage 1L (20 Pack)
</div>
<div
class="acl-result-card__text acl-result-card__text--extra-small acl-result-card__text--grey ">
DKE-54632
</div>
</div>
<div class="acl-result-card__column">
<div
class="acl-result-card__text acl-result-card--cursor-pointer acl-result-card__text--underline acl-result-card__text--extra-small acl-result-card__text--mid-blue acl-result-card__hover--grey">
Add
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
const results = [{
id: '002csgr',
value: 'Account Promotions'
},
{
id: '01sscx',
value: 'Segment Promotions'
},
{
id: 'fsx00',
value: 'Inherited Account Promotions'
}];
const dropdownEl = document.querySelector(".acl-dropdown-demo");
const searchboxEl = document.querySelector(".acl-simple-searchbox");
const dropdown = new acl.ACLDropdownSingleSelect(dropdownEl, results);
const searchbox = new acl.ACLSearchbox(searchboxEl, 300);
dropdownEl.addEventListener('dropdownitemclicked',
function (e) {
console.log('dropdownitemclicked', `id : ${e.detail.id}`, `resultName : ${e.detail.resultName}`);
}, false);
dropdownEl.addEventListener('cleardropdown',
function (e) {
console.log('cleardropdown', `id : ${e.detail.id}`, `resultName : ${e.detail.resultName}`);
}, false);
</script>
/* No context defined. */
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 };
No notes defined.