Skip to content

Commit c0c46e5

Browse files
YohnYohn
authored
Merge pull request #6 from SmileYzn/main
Updated settings in readme.md
2 parents fe8eed2 + 3deb9ac commit c0c46e5

File tree

3 files changed

+84
-24
lines changed

3 files changed

+84
-24
lines changed

‎README.md‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ npm i @skem9/dselect
2727

2828
Install from cdn
2929
```html
30-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Yohn/dselect@1.1.0/dist/css/dselect.min.css">
31-
<script src="https://cdn.jsdelivr.net/gh/Yohn/[email protected].0/dist/js/dselect.min.js"></script>
30+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Yohn/dselect@latest/dist/css/dselect.min.css">
31+
<script src="https://cdn.jsdelivr.net/gh/Yohn/[email protected].5/dist/js/dselect.min.js"></script>
3232
```
3333
## Usage/Examples
3434

@@ -56,6 +56,7 @@ const config = {
5656
size: '', // Can be "sm" or "lg". Default ''
5757
classTag: 'text-bg-dark bg-gradient', // a class to be added to the tag badges
5858
searchPlaceholder: 'Search..', // when search: true the placeholder in input box
59+
searchExtraClass: '', // extra class to be added to the search input
5960
noResultsPlaceholder: 'No results found', // when search finds no results
6061
addOptionPlaceholder: 'Press Enter to add "&lt;strong&gt;[searched-term]&lt;/strong&gt;"', // when creatable: true the help text under the search box
6162
itemClass: '', // an additional css class to be added to each item within the dropdown menu
@@ -78,6 +79,7 @@ dselect(document.querySelector('#dselect-example'), config)
7879
data-dselect-max-height="300px"
7980
data-dselect-class-tag="text-bg-dark bg-gradient"
8081
data-dselect-search-placeholder="Search.."
82+
data-dselect-search-extra-class=""
8183
data-dselect-no-results-placeholder="No results found"
8284
data-dselect-add-option-placeholder="Press Enter to add new tag.">
8385
<option value="">Choose browser</option>
@@ -106,4 +108,4 @@ multiple.addEventListener('change', () => {
106108
.map((option) => option.value);
107109
console.innerHTML = JSON.stringify(selectedValues);
108110
})
109-
```
111+
```

‎index.html‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -373,16 +373,17 @@ <h2 class="border-bottom border-1 border-primary-subtle">
373373
<pre><code class="language-javascript">
374374
const element = document.querySelector('#select-element');
375375
dselect(element, {
376-
search: false, // search items
377-
creatable: false, // allow to create new elements
378-
clearable: false, // to remove the selection
379-
maxHeight: '360px', // height of the dropdown menu
380-
size: '', // 'sm' or 'lg' according to
381-
classTag: 'text-bg-dark bg-gradient', // a class to be added to the tag badges
382-
searchPlaceholder: 'Search..', // when search: true the placeholder in input box
383-
noResultsPlaceholder: 'No results found', // when search finds no results
384-
addOptionPlaceholder: 'Press Enter to add "&lt;strong&gt;[searched-term]&lt;/strong&gt;"', // when creatable: true the help text under the search box
385-
itemClass: '', // an additional css class to be added to each item within the dropdown menu
376+
search: false, // Toggle search feature. Default: false
377+
creatable: false, // Creatable selection. Default: false
378+
clearable: false, // Clearable selection. Default: false
379+
maxHeight: '360px', // Max height for showing scrollbar. Default: 360px
380+
size: '', // Can be "sm" or "lg". Default ''
381+
classTag: 'text-bg-dark bg-gradient', // a class to be added to the tag badges
382+
searchPlaceholder: 'Search..', // when search: true the placeholder in input box
383+
searchExtraClass: '', // extra class to be added to the search input
384+
noResultsPlaceholder: 'No results found', // when search finds no results
385+
addOptionPlaceholder: 'Press Enter to add "&lt;strong&gt;[searched-term]&lt;/strong&gt;"', // when creatable: true the help text under the search box
386+
itemClass: '', // an additional css class to be added to each item within the dropdown menu
386387
})
387388
</code></pre>
388389
<hr>
@@ -423,6 +424,7 @@ <h2 class="border-bottom border-1 border-primary-subtle">
423424
size: '', // 'sm' or 'lg' according to
424425
classTag: 'text-bg-primary bg-gradient', // a class to be added to the tag badges
425426
searchPlaceholder: 'Favorite Framework', // when search: true the placeholder in input box
427+
searchExtraClass: '', // extra class to be added to the search input
426428
noResultsPlaceholder: 'No results found', // when search finds no results
427429
itemClass: 'active', // an additional css class to be added to each item within the dropdown menu
428430
})
@@ -509,4 +511,4 @@ <h2 class="border-bottom border-1 border-primary-subtle">
509511
</script>
510512
</body>
511513

512-
</html>
514+
</html>

‎source/js/dselect.js‎

Lines changed: 66 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,18 @@ function dselectUpdate(button, classElement, classToggler) {
33
const target = button.closest(`.${classElement}`).previousElementSibling;
44
const toggler = target.nextElementSibling.getElementsByClassName(classToggler)[0];
55
const input = target.nextElementSibling.querySelector("input");
6+
7+
if (target)
8+
{
9+
target.dispatchEvent(new CustomEvent("update", {
10+
detail: {
11+
button: button,
12+
classElement: classElement,
13+
classToggler: classToggler
14+
}
15+
}));
16+
}
17+
618
if (target.multiple) {
719
Array.from(target.options).filter((option) => option.value === value)[0].selected = true;
820
} else {
@@ -22,6 +34,18 @@ function dselectRemoveTag(button, classElement, classToggler) {
2234
const target = button.closest(`.${classElement}`).previousElementSibling;
2335
const toggler = target.nextElementSibling.getElementsByClassName(classToggler)[0];
2436
const input = target.nextElementSibling.querySelector("input");
37+
38+
if (target)
39+
{
40+
target.dispatchEvent(new CustomEvent("removeTag", {
41+
detail: {
42+
button: button,
43+
classElement: classElement,
44+
classToggler: classToggler
45+
}
46+
}));
47+
}
48+
2549
Array.from(target.options).filter((option) => option.value === value)[0].selected = false;
2650
target.dispatchEvent(new Event("change"));
2751
toggler.click();
@@ -35,6 +59,21 @@ function dselectSearch(event, input, classElement, classToggler, creatable, loca
3559
const headers = Array.from(itemsContainer.querySelectorAll(".dropdown-header"));
3660
const items = Array.from(itemsContainer.querySelectorAll(".dropdown-item"));
3761
const noResults = itemsContainer.nextElementSibling;
62+
const target = input.closest(`.${classElement}`).previousElementSibling;
63+
64+
if (target)
65+
{
66+
target.dispatchEvent(new CustomEvent("search", {
67+
detail: {
68+
event: event,
69+
input: input,
70+
classElement: classElement,
71+
classToggler: classToggler,
72+
creatable: creatable,
73+
localization: localization
74+
}
75+
}));
76+
}
3877

3978
headers.forEach((header) => header.classList.add("d-none"));
4079

@@ -75,7 +114,6 @@ function dselectSearch(event, input, classElement, classToggler, creatable, loca
75114
if (creatable) {
76115
noResults.innerHTML = localization.replace("[searched-term]", input.value);
77116
if (event.key === "Enter") {
78-
const target = input.closest(`.${classElement}`).previousElementSibling;
79117
const toggler = target.nextElementSibling.querySelector(`.${classToggler}`);
80118
target.insertAdjacentHTML("afterbegin", `<option value="${input.value}" selected>${input.value}</option>`);
81119
target.dispatchEvent(new Event("change"));
@@ -92,6 +130,17 @@ function dselectSearch(event, input, classElement, classToggler, creatable, loca
92130
}
93131
function dselectClear(button, classElement) {
94132
const target = button.closest(`.${classElement}`).previousElementSibling;
133+
134+
if (target)
135+
{
136+
target.dispatchEvent(new CustomEvent("clear", {
137+
detail: {
138+
event: button,
139+
input: classElement
140+
}
141+
}));
142+
}
143+
95144
Array.from(target.options).forEach((option) => option.selected = false);
96145
target.dispatchEvent(new Event("change"));
97146
}
@@ -112,8 +161,8 @@ function dselect(el, option = {}) {
112161
const defaultSize = "";
113162
const defaultItemClass = "";
114163
const defaultSearchPlaceholder = "Search..";
115-
const defaultSearchExtraClass = "";
116-
const defaultAddOptionPlaceholder = 'Press Enter to add &quot;<strong>[searched-term]</strong>&quot;';
164+
const defaultSearchExtraClass = "";
165+
const defaultAddOptionPlaceholder = "Press Enter to add '<b>[searched-term]</b>'";
117166
const defaultNoResultsPlaceholder = "No results found";
118167
const search = attrBool("search") || option.search || defaultSearch;
119168
const creatable = attrBool("creatable") || option.creatable || defaultCreatable;
@@ -122,7 +171,7 @@ function dselect(el, option = {}) {
122171
const classTagTemp = el.dataset.dselectClassTag || option.classTag || defaultClassTag;
123172
const classTag = `${dselectClassTag} ${classTagTemp}`;
124173
const searchPlaceholder = el.dataset.dselectSearchPlaceholder || option.searchPlaceholder || defaultSearchPlaceholder;
125-
const searchExtraClass = el.dataset.dselectSearchExtraClass || option.searchSearchExtraClass || defaultSearchExtraClass;
174+
const searchExtraClass = el.dataset.dselectSearchExtraClass || option.searchExtraClass || defaultSearchExtraClass;
126175
const noResultsPlaceholder = el.dataset.dselectNoResultsPlaceholder || option.noResultsPlaceholder || defaultNoResultsPlaceholder;
127176
const addOptionPlaceholder = el.dataset.dselectAddOptionPlaceholder || option.addOptionPlaceholder || defaultAddOptionPlaceholder;
128177
const itemClass = el.dataset.dselectItemClass || option.ItemClass || defaultItemClass;
@@ -143,7 +192,10 @@ function dselect(el, option = {}) {
143192
}
144193
}
145194
function isPlaceholder(option2) {
146-
return option2.getAttribute("value") === "";
195+
if (option2) {
196+
return option2.getAttribute("value") === "";
197+
}
198+
return true;
147199
}
148200
function selectedTag(options, multiple) {
149201
if (multiple) {
@@ -166,7 +218,11 @@ function dselect(el, option = {}) {
166218
return tag.join("");
167219
} else {
168220
const selectedOption = options[options.selectedIndex];
169-
return isPlaceholder(selectedOption) ? `<span class="${classPlaceholder}">${selectedOption.innerHTML}</span>` : selectedOption.innerHTML;
221+
if (selectedOption) {
222+
return isPlaceholder(selectedOption) ? `<span class="${classPlaceholder}">${selectedOption.innerHTML}</span>` : selectedOption.innerHTML;
223+
} else {
224+
return `<span class="${classPlaceholder}">${searchPlaceholder}</span>`;
225+
}
170226
}
171227
}
172228
function selectedText(options) {
@@ -226,6 +282,7 @@ function dselect(el, option = {}) {
226282
</svg>
227283
</button>
228284
` : "";
285+
const items = itemTags(el.querySelectorAll("*"));
229286
const template = `
230287
<div class="dropdown ${classElement} ${additionalClass}">
231288
<button class="${classToggler} ${!el.multiple && clearable ? classTogglerClearable : ""}" data-dselect-text="${!el.multiple && selectedText(el.options)}" type="button" data-bs-toggle="dropdown" aria-expanded="false"${autoclose}>
@@ -235,14 +292,13 @@ function dselect(el, option = {}) {
235292
<div class="d-flex flex-column">
236293
${searchInput}
237294
<div class="dselect-items" style="max-height:${maxHeight};overflow:auto">
238-
${itemTags(el.querySelectorAll("*"))}
295+
${items}
239296
</div>
240-
<div class="${classNoResults} d-none">${noResultsPlaceholder}</div>
297+
<div class="${classNoResults} ${items.length ? 'd-none' : ''}">${noResultsPlaceholder}</div>
241298
</div>
242299
</div>
243300
${clearBtn}
244-
</div>
245-
`;
301+
</div>`;
246302
removePrev();
247303
el.insertAdjacentHTML("afterend", template);
248304
const dropdownElement = el.nextElementSibling;

0 commit comments

Comments
 (0)