diff --git a/assets-src/js/multiselect-module.js b/assets-src/js/multiselect-module.js index fb7a5b62..dc519384 100644 --- a/assets-src/js/multiselect-module.js +++ b/assets-src/js/multiselect-module.js @@ -193,7 +193,7 @@ const MultiselectButtons = function (selectEl, params) { ulCombo.setAttribute('aria-multiselectable', 'true'); ulCombo.id = baseId + '-listbox'; ulCombo.setAttribute('aria-labelledby', baseId + '-label'); - ulCombo.classList.add('combo-menu'); + ulCombo.classList.add('combo-menu', 'clean-list'); div.appendChild(divComboBox); div.appendChild(ulCombo); diff --git a/assets-src/js/slider.js b/assets-src/js/slider.js index 4a4125a0..bfd583bb 100644 --- a/assets-src/js/slider.js +++ b/assets-src/js/slider.js @@ -66,7 +66,7 @@ let contentSlider = (function () { function createControls() { let controls = document.createElement('ul'); - controls.setAttribute('class', 'slider-controls'); + controls.setAttribute('class', 'clean-list slider-controls'); controls.setAttribute('aria-label', controlsDescription); controls.innerHTML = '
' + ''; diff --git a/assets-src/styles/sass/50-core-components/_evangelists.scss b/assets-src/styles/sass/50-core-components/_evangelists.scss index deb981c0..dc6c5019 100644 --- a/assets-src/styles/sass/50-core-components/_evangelists.scss +++ b/assets-src/styles/sass/50-core-components/_evangelists.scss @@ -45,6 +45,10 @@ padding-right: rem(24); } + .l-box { + padding: rem(24); + } + li + li { border-top: solid 1px #649bc5; } diff --git a/public/dist/assets/js/multiselect.js b/public/dist/assets/js/multiselect.js index 39e1742f..71b08c2a 100644 --- a/public/dist/assets/js/multiselect.js +++ b/public/dist/assets/js/multiselect.js @@ -151,15 +151,15 @@ const MultiselectButtons = function (selectEl, params) { selectEl.parentNode.appendChild(span); // hide the original label/hint and create new ones for the new combobox - const selectLabel = document.querySelector("label[for=".concat(selectEl.id, "]")); + const selectLabel = document.querySelector(`label[for=${selectEl.id}]`); selectLabel.hidden = true; - const selectHint = document.querySelector("#hint-".concat(selectEl.id)); + const selectHint = document.querySelector(`#hint-${selectEl.id}`); if (selectHint) { selectHint.hidden = true; } const div = document.createElement('div'); div.classList.add('combo'); - div.id = "".concat(selectEl.id, "-js-multi-buttons"); + div.id = `${selectEl.id}-js-multi-buttons`; const divComboBox = document.createElement('div'); divComboBox.setAttribute('role', 'combobox'); divComboBox.setAttribute('aria-haspopup', 'listbox'); @@ -172,7 +172,7 @@ const MultiselectButtons = function (selectEl, params) { input.setAttribute('aria-controls', baseId + '-listbox'); input.id = baseId + "-input"; if (selectHint) { - input.setAttribute('aria-describedby', "hint-".concat(input.id)); + input.setAttribute('aria-describedby', `hint-${input.id}`); } input.classList.add('combo-input'); input.setAttribute('autocomplete', 'off'); @@ -191,14 +191,14 @@ const MultiselectButtons = function (selectEl, params) { const hintComboBox = selectHint ? selectHint.cloneNode(true) : null; if (selectHint) { hintComboBox.hidden = false; - hintComboBox.id = "hint-".concat(input.id); + hintComboBox.id = `hint-${input.id}`; } const ulCombo = document.createElement('ul'); ulCombo.setAttribute('role', 'listbox'); ulCombo.setAttribute('aria-multiselectable', 'true'); ulCombo.id = baseId + '-listbox'; ulCombo.setAttribute('aria-labelledby', baseId + '-label'); - ulCombo.classList.add('combo-menu'); + ulCombo.classList.add('combo-menu', 'clean-list'); div.appendChild(divComboBox); div.appendChild(ulCombo); if (selectEl.multiple) { @@ -248,12 +248,12 @@ const MultiselectButtons = function (selectEl, params) { const listItem = document.createElement('li'); buttonEl.className = 'remove-option'; buttonEl.type = 'button'; - buttonEl.id = "".concat(this.idBase, "-remove-").concat(index); + buttonEl.id = `${this.idBase}-remove-${index}`; buttonEl.dataset.value = option.value; buttonEl.addEventListener('click', () => { this.removeOption(option); }); - buttonEl.innerHTML = "Remove ".concat(option.text, " "); + buttonEl.innerHTML = `Remove ${option.text} `; listItem.appendChild(buttonEl); this.selectedEl.appendChild(listItem); } else { @@ -281,7 +281,7 @@ MultiselectButtons.prototype.init = function () { hint = document.createElement('li'); hint.setAttribute('role', 'alert'); } - hint.innerText = "Please enter ".concat(this.minInput, " or more characters"); + hint.innerText = `Please enter ${this.minInput} or more characters`; if (!alreadyExists) { this.listboxEl.prepend(hint); } @@ -320,7 +320,7 @@ MultiselectButtons.prototype.filterOptions = async function (value) { optionEl.setAttribute('aria-setsize', count); optionEl.setAttribute('aria-posinset', k + 1); } - optionEl.id = "".concat(this.idBase, "-").concat(this.options.indexOf(o)); + optionEl.id = `${this.idBase}-${this.options.indexOf(o)}`; optionEl.className = 'combo-option'; optionEl.setAttribute('aria-selected', alreadySelected); optionEl.dataset.value = o.value; @@ -356,7 +356,7 @@ MultiselectButtons.prototype.filterOptions = async function (value) { }; MultiselectButtons.prototype.updateResults = async function () { const url = new URL(this.source, window.location.protocol + '//' + window.location.host); - url.search = "".concat(url.search ? url.search + '&' : '?', "q=").concat(this.inputEl.value, "&page=").concat(this.page); + url.search = `${url.search ? url.search + '&' : '?'}q=${this.inputEl.value}&page=${this.page}`; const response = await fetch(url); const data = await response.json(); if (this.page === 1) { @@ -364,7 +364,7 @@ MultiselectButtons.prototype.updateResults = async function () { } data.results.forEach(c => { this.ajaxResultCount = data.total; - if (!this.select.querySelector("option[value=\"".concat(c.id, "\"]"))) { + if (!this.select.querySelector(`option[value="${c.id}"]`)) { const o = document.createElement('option'); o.value = c.id; o.innerText = c.text; @@ -395,11 +395,10 @@ MultiselectButtons.prototype.onInput = async function () { await this.updateResults(); hint.remove(); } else { - var _hint; this.clearOptions(); - (_hint = hint) !== null && _hint !== void 0 ? _hint : hint = document.createElement('li'); + hint ??= document.createElement('li'); hint.setAttribute('role', 'alert'); - hint.innerText = "Please enter ".concat(this.minInput, " or more characters"); + hint.innerText = `Please enter ${this.minInput} or more characters`; this.listboxEl.prepend(hint); showHint = true; } @@ -467,11 +466,11 @@ MultiselectButtons.prototype.onInputBlur = function () { }; MultiselectButtons.prototype.onOptionChange = function (index) { this.activeIndex = index; - this.inputEl.setAttribute('aria-activedescendant', "".concat(this.idBase, "-").concat(index)); + this.inputEl.setAttribute('aria-activedescendant', `${this.idBase}-${index}`); // update active style const options = this.el.querySelectorAll('[role=option]'); - const currentOptions = this.el.querySelector("[id=".concat(this.idBase, "-").concat(index, "]")); + const currentOptions = this.el.querySelector(`[id=${this.idBase}-${index}]`); [...options].forEach(optionEl => { optionEl.classList.remove('option-current'); }); @@ -502,7 +501,7 @@ MultiselectButtons.prototype.removeOption = function (option) { // const index = this.options.indexOf(option); // update aria-selected - const o = this.el.querySelector("[data-value=\"".concat(option.value, "\"]")); + const o = this.el.querySelector(`[data-value="${option.value}"]`); if (o) { o.setAttribute('aria-selected', 'false'); o.classList.remove('option-selected'); @@ -510,7 +509,7 @@ MultiselectButtons.prototype.removeOption = function (option) { // remove button if (this.selectedEl) { - const buttonEl = this.selectedEl.querySelector("[data-value=\"".concat(option.value, "\"]")); + const buttonEl = this.selectedEl.querySelector(`[data-value="${option.value}"]`); this.selectedEl.removeChild(buttonEl.parentElement); } this.select.querySelector('option[value="' + option.value + '"]').removeAttribute('selected'); @@ -521,7 +520,7 @@ MultiselectButtons.prototype.selectOption = function (option) { this.activeIndex = index; // update aria-selected - const o = this.el.querySelector("[id=".concat(this.idBase, "-").concat(index, "]")); + const o = this.el.querySelector(`[id=${this.idBase}-${index}]`); o.setAttribute('aria-selected', 'true'); o.classList.add('option-selected'); @@ -530,7 +529,7 @@ MultiselectButtons.prototype.selectOption = function (option) { const listItem = document.createElement('li'); buttonEl.className = 'remove-option'; buttonEl.type = 'button'; - buttonEl.id = "".concat(this.idBase, "-remove-").concat(index); + buttonEl.id = `${this.idBase}-remove-${index}`; buttonEl.dataset.value = selected.value; buttonEl.addEventListener('click', () => { const sibling = listItem.nextSibling; @@ -541,7 +540,7 @@ MultiselectButtons.prototype.selectOption = function (option) { this.inputEl.focus(); } }); - buttonEl.innerHTML = "Remove ".concat(selected.text, " "); + buttonEl.innerHTML = `Remove ${selected.text} `; listItem.appendChild(buttonEl); if (this.select.multiple) { this.selectedEl.appendChild(listItem); @@ -552,7 +551,7 @@ MultiselectButtons.prototype.selectOption = function (option) { this.select.querySelector('option[value="' + option.value + '"]').setAttribute('selected', 'selected'); }; MultiselectButtons.prototype.updateOption = function (index) { - const optionEl = this.el.querySelector("[id=".concat(this.idBase, "-").concat(index, "]")); + const optionEl = this.el.querySelector(`[id=${this.idBase}-${index}]`); const isSelected = optionEl.getAttribute('aria-selected') === 'true'; this.inputEl.value = ''; if (isSelected) { @@ -567,7 +566,7 @@ MultiselectButtons.prototype.updateOption = function (index) { }; MultiselectButtons.prototype.updateMenuState = function (open) { this.open = open; - this.comboEl.setAttribute('aria-expanded', "".concat(open)); + this.comboEl.setAttribute('aria-expanded', `${open}`); open ? this.el.classList.add('open') : this.el.classList.remove('open'); }; /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MultiselectButtons); diff --git a/public/dist/assets/js/multiselect.min.js b/public/dist/assets/js/multiselect.min.js index b6c9c4ac..92e33370 100644 --- a/public/dist/assets/js/multiselect.min.js +++ b/public/dist/assets/js/multiselect.min.js @@ -1 +1 @@ -(()=>{var t=Array(21).concat([(t,e,r)=>{"use strict";r.r(e),r.d(e,{default:()=>o}),r(22);const n="ArrowDown",i=function(t,e){const r=t.id;t.hidden=!0;let n=[],i=[];t.querySelectorAll("option").forEach((t=>{const e={value:t.value,text:t.textContent,ariaLabel:t.getAttribute("aria-label")};t.disabled||n.push(e),t.defaultSelected&&i.push(t.value)}));const o=document.createElement("span");o.id=r+"-remove",o.innerText="remove",o.style.display="none",t.parentNode.appendChild(o);const u=document.querySelector("label[for=".concat(t.id,"]"));u.hidden=!0;const a=document.querySelector("#hint-".concat(t.id));a&&(a.hidden=!0);const s=document.createElement("div");s.classList.add("combo"),s.id="".concat(t.id,"-js-multi-buttons");const c=document.createElement("div");c.setAttribute("role","combobox"),c.setAttribute("aria-haspopup","listbox"),c.setAttribute("aria-expanded","false"),c.setAttribute("aria-owns",r+"-listbox"),c.classList.add("input-wrapper");const f=document.createElement("input");f.setAttribute("aria-activedescendant",""),f.setAttribute("aria-autocomplete","list"),f.setAttribute("aria-controls",r+"-listbox"),f.id=r+"-input",a&&f.setAttribute("aria-describedby","hint-".concat(f.id)),f.classList.add("combo-input"),f.setAttribute("autocomplete","off"),f.setAttribute("type","text"),t.dataset.placeholder&&f.setAttribute("placeholder",t.dataset.placeholder),f.style.backgroundImage='url("https://www.w3.org/assets/website-2021/svg/search.svg")',f.style.backgroundRepeat="no-repeat",f.style.backgroundPosition="center right 0.625rem",f.style.backgroundSize="0.9375rem",c.appendChild(f);const l=document.createElement("label");l.setAttribute("for",f.id),l.innerHTML=u.innerHTML;const h=a?a.cloneNode(!0):null;a&&(h.hidden=!1,h.id="hint-".concat(f.id));const p=document.createElement("ul");if(p.setAttribute("role","listbox"),p.setAttribute("aria-multiselectable","true"),p.id=r+"-listbox",p.setAttribute("aria-labelledby",r+"-label"),p.classList.add("combo-menu"),s.appendChild(c),s.appendChild(p),t.multiple){const e=document.createElement("ul");e.id=r+"-selected",e.classList.add("selected-options"),t.parentNode.insertBefore(e,t.parentNode.firstChild),this.selectedEl=e}t.parentNode.insertBefore(s,t.parentNode.firstChild),h&&t.parentNode.insertBefore(h,t.parentNode.firstChild),t.parentNode.insertBefore(l,t.parentNode.firstChild),this.select=t,this.el=s,this.comboEl=s.querySelector("[role=combobox]"),this.inputEl=s.querySelector("input"),this.listboxEl=s.querySelector("[role=listbox]"),this.idBase=this.inputEl.id,this.options=n,this.filteredOptions=n,this.source=e.source,this.minInput=e.minInput||2,this.page=1,this.morePages=!1,this.ajaxResultCount,this.searchStart="off"!==e.searchStart,this.searchTextOnly="off"!==e.searchTextOnly,this.activeIndex=0,this.open=!1,i.forEach((e=>{const r=this.options.find((t=>t.value===e));if(t.multiple){const t=this.options.indexOf(r),e=document.createElement("button"),n=document.createElement("li");e.className="remove-option",e.type="button",e.id="".concat(this.idBase,"-remove-").concat(t),e.dataset.value=r.value,e.addEventListener("click",(()=>{this.removeOption(r)})),e.innerHTML='Remove '.concat(r.text," "),n.appendChild(e),this.selectedEl.appendChild(n)}else this.inputEl.value=r.text}))};i.prototype.init=function(){const t=this;let e=null;this.inputEl.addEventListener("input",(async()=>{this.source&&(clearTimeout(e),await new Promise((t=>e=setTimeout(t,500)))),t.onInput()})),this.inputEl.addEventListener("blur",this.onInputBlur.bind(this)),this.inputEl.addEventListener("focus",(()=>{if(this.source){let t=this.listboxEl.querySelector("li[role=alert]");const e=!!t;t||(t=document.createElement("li"),t.setAttribute("role","alert")),t.innerText="Please enter ".concat(this.minInput," or more characters"),e||this.listboxEl.prepend(t)}this.updateMenuState(!0)})),this.inputEl.addEventListener("keydown",this.onInputKeyDown.bind(this))},i.prototype.filterOptions=async function(t){if(t){this.clearOptions();const e=[...this.select.querySelectorAll("option:checked")].map((t=>t.innerText));this.filteredOptions=this.source?this.options:function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],e=arguments.length>1?arguments[1]:void 0,r=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],n=!(arguments.length>3&&void 0!==arguments[3])||arguments[3];return t.filter((t=>{const i=t.text.toLowerCase(),o=t.value.toLowerCase();return n?r?i.startsWith(e.toLowerCase()):i.includes(e.toLowerCase()):r?i.startsWith(e.toLowerCase())||o.startsWith(e.toLowerCase()):i.includes(e.toLowerCase())||o.includes(e.toLowerCase())}))}(this.options,t,this.searchStart,this.searchTextOnly);const r=this.source?this.ajaxResultCount:this.filteredOptions.length,n=document.createDocumentFragment();this.filteredOptions.forEach(((i,o)=>{const u=e.includes(i.text),a=document.createElement("li");if(a.setAttribute("role","option"),r&&(a.setAttribute("aria-setsize",r),a.setAttribute("aria-posinset",o+1)),a.id="".concat(this.idBase,"-").concat(this.options.indexOf(i)),a.className="combo-option",a.setAttribute("aria-selected",u),a.dataset.value=i.value,a.innerText=i.text,i.ariaLabel&&a.setAttribute("aria-label",i.ariaLabel),u&&a.classList.add("option-selected"),a.addEventListener("click",(()=>{this.onOptionClick(this.options.indexOf(i))})),a.addEventListener("mousedown",this.onOptionMouseDown.bind(this)),n.appendChild(a),this.source&&this.morePages&&i===this.filteredOptions[this.filteredOptions.length-1]){const e=document.createElement("li");e.setAttribute("role","alert"),e.innerText="Loading more results",n.appendChild(e),s=this.listboxEl,c=a,f=async r=>{r&&(this.page++,await this.updateResults(),this.filterOptions(t),e.remove())},new IntersectionObserver(((t,e)=>{t.forEach((t=>{f(t.isIntersecting)}))}),{root:s,threshold:.5}).observe(c)}var s,c,f})),this.listboxEl.appendChild(n)}},i.prototype.updateResults=async function(){const t=new URL(this.source,window.location.protocol+"//"+window.location.host);t.search="".concat(t.search?t.search+"&":"?","q=").concat(this.inputEl.value,"&page=").concat(this.page);const e=await fetch(t),r=await e.json();1===this.page&&(this.options=[]),r.results.forEach((t=>{if(this.ajaxResultCount=r.total,!this.select.querySelector('option[value="'.concat(t.id,'"]'))){const e=document.createElement("option");e.value=t.id,e.innerText=t.text,this.select.appendChild(e)}const e={value:t.id,text:t.text};-1===this.options.indexOf(e)&&this.options.push(e)})),this.morePages=r.more||!1},i.prototype.onInput=async function(){const t=this.inputEl.value;let e=!1,r=this.listboxEl.querySelector("li[role=alert]");if(this.page=1,t){var n;this.source&&(t.length>=this.minInput?(r||(r=document.createElement("li"),r.setAttribute("role","alert")),r.innerText="Loading results",this.listboxEl.prepend(r),await this.updateResults(),r.remove()):(this.clearOptions(),null!==(n=r)&&void 0!==n||(r=document.createElement("li")),r.setAttribute("role","alert"),r.innerText="Please enter ".concat(this.minInput," or more characters"),this.listboxEl.prepend(r),e=!0)),(!this.source||this.source&&t.length>=this.minInput)&&this.filterOptions(t);const i=this.filteredOptions.length>0||e;this.open!==i&&this.updateMenuState(i)}else this.clearOptions()},i.prototype.onInputKeyDown=function(t){const{key:e}=t,r=this.filteredOptions.length-1,i=this.filteredOptions.indexOf(this.options[this.activeIndex]),o=function(t,e){return e||t!==n?t===n?4:"ArrowUp"===t?6:"Home"===t?2:"End"===t?3:"Escape"===t?0:"Enter"===t?1:"Backspace"===t||"Clear"===t||1===t.length?9:void 0:5}(e,this.open);switch(o){case 4:case 3:case 2:case 6:t.preventDefault();const e=function(t,e,r){switch(r){case 2:return 0;case 3:return e;case 6:return Math.max(0,t-1);case 4:return Math.min(e,t+1);default:return t}}(i,r,o),n=this.options.indexOf(this.filteredOptions[e]);return this.onOptionChange(n);case 1:return t.preventDefault(),this.onOptionClick(this.activeIndex);case 0:return t.preventDefault(),this.updateMenuState(!1);case 5:return this.updateMenuState(!0)}},i.prototype.onInputBlur=function(){if(this.ignoreBlur)this.ignoreBlur=!1;else{if(this.inputEl.value="",!this.select.multiple){const t=this.select.querySelector("option:checked");t&&(this.inputEl.value=t.innerText)}""===this.inputEl.value&&this.clearOptions(),this.open&&this.updateMenuState(!1)}},i.prototype.onOptionChange=function(t){this.activeIndex=t,this.inputEl.setAttribute("aria-activedescendant","".concat(this.idBase,"-").concat(t));const e=this.el.querySelectorAll("[role=option]"),r=this.el.querySelector("[id=".concat(this.idBase,"-").concat(t,"]"));var n;[...e].forEach((t=>{t.classList.remove("option-current")})),r&&(r.classList.add("option-current"),this.open&&(n=this.listboxEl)&&n.clientHeight