From 39cb2320f450248cc7fcf6e2784ac8ed702eb521 Mon Sep 17 00:00:00 2001 From: Yohn Date: Mon, 4 Nov 2024 13:47:44 -0500 Subject: [PATCH] Realized I was editing the distribution file, instead of the source file --- dist/js/dselect.js | 2 +- source/js/dselect.js | 318 ++++++++++++++++++++----------------------- 2 files changed, 148 insertions(+), 172 deletions(-) diff --git a/dist/js/dselect.js b/dist/js/dselect.js index 78c1ea4..9bb857d 100644 --- a/dist/js/dselect.js +++ b/dist/js/dselect.js @@ -108,7 +108,7 @@ function dselect(el, option = {}) { const defaultSize = ""; const defaultItemClass = ""; const defaultSearchPlaceholder = "Search.."; - const defaultAddOptionPlaceholder = 'Press Enter to add "[searched-term]"'; + const defaultAddOptionPlaceholder = "Press Enter to add "[searched-term]""; const defaultNoResultsPlaceholder = "No results found"; const search = attrBool("search") || option.search || defaultSearch; const creatable = attrBool("creatable") || option.creatable || defaultCreatable; diff --git a/source/js/dselect.js b/source/js/dselect.js index 4b5fb5d..78c1ea4 100644 --- a/source/js/dselect.js +++ b/source/js/dselect.js @@ -1,216 +1,203 @@ function dselectUpdate(button, classElement, classToggler) { - const value = button.dataset.dselectValue - const target = button.closest(`.${classElement}`).previousElementSibling - const toggler = target.nextElementSibling.getElementsByClassName(classToggler)[0] - const input = target.nextElementSibling.querySelector('input') + const value = button.dataset.dselectValue; + const target = button.closest(`.${classElement}`).previousElementSibling; + const toggler = target.nextElementSibling.getElementsByClassName(classToggler)[0]; + const input = target.nextElementSibling.querySelector("input"); if (target.multiple) { - Array.from(target.options).filter(option => option.value === value)[0].selected = true + Array.from(target.options).filter((option) => option.value === value)[0].selected = true; } else { - target.value = value + target.value = value; } if (target.multiple) { - toggler.click() + toggler.click(); } - target.dispatchEvent(new Event('change')) - toggler.focus() + target.dispatchEvent(new Event("change")); + toggler.focus(); if (input) { - input.value = '' + input.value = ""; } } function dselectRemoveTag(button, classElement, classToggler) { - const value = button.parentNode.dataset.dselectValue - const target = button.closest(`.${classElement}`).previousElementSibling - const toggler = target.nextElementSibling.getElementsByClassName(classToggler)[0] - const input = target.nextElementSibling.querySelector('input') - Array.from(target.options).filter(option => option.value === value)[0].selected = false - target.dispatchEvent(new Event('change')) - toggler.click() + const value = button.parentNode.dataset.dselectValue; + const target = button.closest(`.${classElement}`).previousElementSibling; + const toggler = target.nextElementSibling.getElementsByClassName(classToggler)[0]; + const input = target.nextElementSibling.querySelector("input"); + Array.from(target.options).filter((option) => option.value === value)[0].selected = false; + target.dispatchEvent(new Event("change")); + toggler.click(); if (input) { - input.value = '' + input.value = ""; } } function dselectSearch(event, input, classElement, classToggler, creatable, localication) { - const filterValue = input.value.toLowerCase().trim() - const itemsContainer = input.nextElementSibling - const headers = itemsContainer.querySelectorAll('.dropdown-header') - const items = itemsContainer.querySelectorAll('.dropdown-item') - const noResults = itemsContainer.nextElementSibling - - headers.forEach(i => i.classList.add('d-none')) - + const filterValue = input.value.toLowerCase().trim(); + const itemsContainer = input.nextElementSibling; + const headers = itemsContainer.querySelectorAll(".dropdown-header"); + const items = itemsContainer.querySelectorAll(".dropdown-item"); + const noResults = itemsContainer.nextElementSibling; + headers.forEach((i) => i.classList.add("d-none")); for (const item of items) { - const filterText = item.textContent + const filterText = item.textContent; if (filterText.toLowerCase().indexOf(filterValue) > -1) { - item.classList.remove('d-none') - let header = item + item.classList.remove("d-none"); + let header = item; while (header = header.previousElementSibling) { - if (header.classList.contains('dropdown-header')) { - header.classList.remove('d-none') - break + if (header.classList.contains("dropdown-header")) { + header.classList.remove("d-none"); + break; } } } else { - item.classList.add('d-none') + item.classList.add("d-none"); } } for (const header of headers) { - const filterText = header.textContent - + const filterText = header.textContent; if (filterText.toLowerCase().indexOf(filterValue) > -1) { - header.classList.remove("d-none") - let item = header + header.classList.remove("d-none"); + let item = header; while (item = item.nextElementSibling) { if (item.classList.contains("dropdown-header")) { - break + break; } - item.classList.remove("d-none") + item.classList.remove("d-none"); } } } - const found = Array.from(items).filter(i => !i.classList.contains('d-none') && !i.hasAttribute('hidden')) + const found = Array.from(items).filter((i) => !i.classList.contains("d-none") && !i.hasAttribute("hidden")); if (found.length < 1) { - noResults.classList.remove('d-none') - itemsContainer.classList.add('d-none') + noResults.classList.remove("d-none"); + itemsContainer.classList.add("d-none"); if (creatable) { - //noResults.innerHTML = `Press Enter to add "${input.value}"` - noResults.innerHTML = localication.replace('[searched-term]', input.value) - if (event.key === 'Enter') { - const target = input.closest(`.${classElement}`).previousElementSibling - const toggler = target.nextElementSibling.getElementsByClassName(classToggler)[0] - target.insertAdjacentHTML('afterbegin', ``) - target.dispatchEvent(new Event('change')) - input.value = '' - input.dispatchEvent(new Event('keyup')) - toggler.click() - toggler.focus() + noResults.innerHTML = localication.replace("[searched-term]", input.value); + if (event.key === "Enter") { + const target = input.closest(`.${classElement}`).previousElementSibling; + const toggler = target.nextElementSibling.getElementsByClassName(classToggler)[0]; + target.insertAdjacentHTML("afterbegin", ``); + target.dispatchEvent(new Event("change")); + input.value = ""; + input.dispatchEvent(new Event("keyup")); + toggler.click(); + toggler.focus(); } } } else { - noResults.classList.add('d-none') - itemsContainer.classList.remove('d-none') + noResults.classList.add("d-none"); + itemsContainer.classList.remove("d-none"); } } function dselectClear(button, classElement) { - const target = button.closest(`.${classElement}`).previousElementSibling - Array.from(target.options).forEach(option => option.selected = false) - target.dispatchEvent(new Event('change')) + const target = button.closest(`.${classElement}`).previousElementSibling; + Array.from(target.options).forEach((option) => option.selected = false); + target.dispatchEvent(new Event("change")); } function dselect(el, option = {}) { - el.style.display = 'none' - const classElement = 'dselect-wrapper' - const classNoResults = 'dselect-no-results' - const classTagRemove = 'dselect-tag-remove' - const dselectClassTag = 'dselect-tag' - const classPlaceholder = 'dselect-placeholder' - const classClearBtn = 'dselect-clear' - const classTogglerClearable = 'dselect-clearable' - const defaultClassTag = `text-bg-dark bg-gradient` - const defaultSearch = false - const defaultCreatable = false - const defaultClearable = false - const defaultMaxHeight = '360px' - const defaultSize = '' - const defaultItemClass = '' - const defaultSearchPlaceholder = 'Search..'; - const defaultAddOptionPlaceholder = 'Press Enter to add "[searched-term]"'; - const defaultNoResultsPlaceholder = 'No results found'; - const search = attrBool('search') || option.search || defaultSearch - const creatable = attrBool('creatable') || option.creatable || defaultCreatable - const clearable = attrBool('clearable') || option.clearable || defaultClearable - const maxHeight = el.dataset.dselectMaxHeight || option.maxHeight || defaultMaxHeight + el.style.display = "none"; + const classElement = "dselect-wrapper"; + const classNoResults = "dselect-no-results"; + const classTagRemove = "dselect-tag-remove"; + const dselectClassTag = "dselect-tag"; + const classPlaceholder = "dselect-placeholder"; + const classClearBtn = "dselect-clear"; + const classTogglerClearable = "dselect-clearable"; + const defaultClassTag = `text-bg-dark bg-gradient`; + const defaultSearch = false; + const defaultCreatable = false; + const defaultClearable = false; + const defaultMaxHeight = "360px"; + const defaultSize = ""; + const defaultItemClass = ""; + const defaultSearchPlaceholder = "Search.."; + const defaultAddOptionPlaceholder = 'Press Enter to add "[searched-term]"'; + const defaultNoResultsPlaceholder = "No results found"; + const search = attrBool("search") || option.search || defaultSearch; + const creatable = attrBool("creatable") || option.creatable || defaultCreatable; + const clearable = attrBool("clearable") || option.clearable || defaultClearable; + const maxHeight = el.dataset.dselectMaxHeight || option.maxHeight || defaultMaxHeight; const classTagTemp = el.dataset.dselectdClassTag || option.classTag || defaultClassTag; - const classTag = `${dselectClassTag} ${classTagTemp}` + const classTag = `${dselectClassTag} ${classTagTemp}`; const searchPlaceholder = el.dataset.dselectSearchPlaceholder || option.searchPlaceholder || defaultSearchPlaceholder; const noResultsPlaceholder = el.dataset.dselectNoResultsPlaceholder || option.noResultsPlaceholder || defaultNoResultsPlaceholder; const addOptionPlaceholder = el.dataset.dselectAddOptionPlaceholder || option.addOptionPlaceholder || defaultAddOptionPlaceholder; - const itemClass = el.dataset.dselectItemClass || option.ItemClass || defaultItemClass - const customSize = el.dataset.dselectSize || option.size || defaultSize - let size = customSize !== '' ? ` form-select-${customSize}` : '' - const classToggler = `form-select${size}` - - const searchInput = search ? `` : '' - + const itemClass = el.dataset.dselectItemClass || option.ItemClass || defaultItemClass; + const customSize = el.dataset.dselectSize || option.size || defaultSize; + let size = customSize !== "" ? ` form-select-${customSize}` : ""; + const classToggler = `form-select${size}`; + const searchInput = search ? `` : ""; function attrBool(attr) { - const attribute = `data-dselect-${attr}` - if (!el.hasAttribute(attribute)) return null - - const value = el.getAttribute(attribute) - return value.toLowerCase() === 'true' + const attribute = `data-dselect-${attr}`; + if (!el.hasAttribute(attribute)) + return null; + const value = el.getAttribute(attribute); + return value.toLowerCase() === "true"; } - function removePrev() { if (el.nextElementSibling && el.nextElementSibling.classList && el.nextElementSibling.classList.contains(classElement)) { - el.nextElementSibling.remove() + el.nextElementSibling.remove(); } } - - function isPlaceholder(option) { - return option.getAttribute('value') === '' + function isPlaceholder(option2) { + return option2.getAttribute("value") === ""; } - function selectedTag(options, multiple) { if (multiple) { - const selectedOptions = Array.from(options).filter(option => option.selected && !isPlaceholder(option)) - const placeholderOption = Array.from(options).filter(option => isPlaceholder(option)) - let tag = [] + const selectedOptions = Array.from(options).filter((option2) => option2.selected && !isPlaceholder(option2)); + const placeholderOption = Array.from(options).filter((option2) => isPlaceholder(option2)); + let tag = []; if (selectedOptions.length === 0) { - const text = placeholderOption.length ? placeholderOption[0].textContent : ' ' - tag.push(`${text}`) + const text = placeholderOption.length ? placeholderOption[0].textContent : " "; + tag.push(`${text}`); } else { - for (const option of selectedOptions) { + for (const option2 of selectedOptions) { tag.push(` -
- ${option.text} +
+ ${option2.text}
- `) + `); } } - return tag.join('') + return tag.join(""); } else { - const selectedOption = options[options.selectedIndex] - return isPlaceholder(selectedOption) - ? `${selectedOption.innerHTML}` - : selectedOption.innerHTML + const selectedOption = options[options.selectedIndex]; + return isPlaceholder(selectedOption) ? `${selectedOption.innerHTML}` : selectedOption.innerHTML; } } - function selectedText(options) { - const selectedOption = options[options.selectedIndex] - return isPlaceholder(selectedOption) ? '' : selectedOption.textContent + const selectedOption = options[options.selectedIndex]; + return isPlaceholder(selectedOption) ? "" : selectedOption.textContent; } - function itemTags(options) { let items = []; for (const option2 of options) { if (option2.tagName === "OPTGROUP") { items.push(`
${option2.getAttribute("label")}
`); } else { - const hidden = isPlaceholder(option2) ? " hidden" : "" - const active = option2.selected ? " active" : "" - const disabled = option2.selected ? " disabled" : "" - const disabledvalue = option2.getAttribute("disabled") - const btnClass = itemClass === '' ? '' : " " + itemClass - disableitem = '' + const hidden = isPlaceholder(option2) ? " hidden" : ""; + const active = option2.selected ? " active" : ""; + const disabled = option2.selected ? " disabled" : ""; + const disabledvalue = option2.getAttribute("disabled"); + const btnClass = itemClass === "" ? "" : " " + itemClass; + disableitem = ""; if (disabledvalue !== null) { - disableitem = "disabled='true'" + disableitem = "disabled='true'"; } else { - disableitem = "" + disableitem = ""; } - const value = option2.value - let text = option2.textContent - if (option2.hasAttribute('data-dselect-img') && option2.getAttribute('data-dselect-img').trim() !== '') { - const img = option2.getAttribute('data-dselect-img').trim() - let imgSize = '1rem' - if(customSize == 'sm') { - imgSize = '.7rem' - } else if (customSize == 'lg') { - imgSize = '1.2rem' + const value = option2.value; + let text = option2.textContent; + if (option2.hasAttribute("data-dselect-img") && option2.getAttribute("data-dselect-img").trim() !== "") { + const img = option2.getAttribute("data-dselect-img").trim(); + let imgSize = "1rem"; + if (customSize == "sm") { + imgSize = ".7rem"; + } else if (customSize == "lg") { + imgSize = "1.2rem"; } text = ` ${text} - ` + `; } items.push(` ${text} @@ -220,14 +207,11 @@ function dselect(el, option = {}) { items = items.join(""); return items; } - function createDom() { - const autoclose = el.multiple ? ' data-bs-auto-close="outside"' : '' - const additionalClass = Array.from(el.classList).filter(className => { - return className !== 'form-select' - && className !== 'form-select-sm' - && className !== 'form-select-lg' - }).join(' ') + const autoclose = el.multiple ? ' data-bs-auto-close="outside"' : ""; + const additionalClass = Array.from(el.classList).filter((className) => { + return className !== "form-select" && className !== "form-select-sm" && className !== "form-select-lg"; + }).join(" "); const clearBtn = clearable && !el.multiple ? ` - ` : '' + ` : ""; const template = `
-
${searchInput}
- ${itemTags(el.querySelectorAll('*'))} + ${itemTags(el.querySelectorAll("*"))}
${noResultsPlaceholder}
${clearBtn}
- ` - removePrev() - el.insertAdjacentHTML('afterend', template) // insert template after element - - - // Add event listener for dropdown shown event + `; + removePrev(); + el.insertAdjacentHTML("afterend", template); const dropdownElement = el.nextElementSibling; - dropdownElement.addEventListener('shown.bs.dropdown', function() { - // Find the search input and focus it if it exists - const searchInput = this.querySelector('input[type="text"]'); - if (searchInput) { - searchInput.focus(); + dropdownElement.addEventListener("shown.bs.dropdown", function() { + const searchInput2 = this.querySelector('input[type="text"]'); + if (searchInput2) { + searchInput2.focus(); } }); } - createDom() - + createDom(); function updateDom() { - const dropdown = el.nextElementSibling - const toggler = dropdown.getElementsByClassName(classToggler)[0] - const dSelectItems = dropdown.getElementsByClassName('dselect-items')[0] - toggler.innerHTML = selectedTag(el.options, el.multiple) - dSelectItems.innerHTML = itemTags(el.querySelectorAll('*')) + const dropdown = el.nextElementSibling; + const toggler = dropdown.getElementsByClassName(classToggler)[0]; + const dSelectItems = dropdown.getElementsByClassName("dselect-items")[0]; + toggler.innerHTML = selectedTag(el.options, el.multiple); + dSelectItems.innerHTML = itemTags(el.querySelectorAll("*")); if (!el.multiple) { - toggler.dataset.dselectText = selectedText(el.options) + toggler.dataset.dselectText = selectedText(el.options); } } - - el.addEventListener('change', updateDom) + el.addEventListener("change", updateDom); } - -// Expose functions globally for testing -if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') { +if (typeof module !== "undefined" && typeof module.exports !== "undefined") { module.exports = { dselectUpdate, dselectRemoveTag, dselectSearch, dselectClear, - dselect, + dselect }; -} \ No newline at end of file +}