Skip to content

Commit 39ebe26

Browse files
mrholekmrholek
committed
refactor: improvements and new features
1 parent ff8046e commit 39ebe26

File tree

1 file changed

+77
-61
lines changed

1 file changed

+77
-61
lines changed

‎js/src/select.js

Lines changed: 77 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,10 @@ const RIGHT_MOUSE_BUTTON = 2
3232
const SELECTOR_INPUT = '.c-select-search'
3333
const SELECTOR_LIST = '.c-select-options'
3434
const SELECTOR_MULTI_SELECT = '.c-select'
35+
const SELECTOR_OPTGROUP = '.c-select-optgroup'
3536
const SELECTOR_OPTION = '.c-select-option'
3637
const SELECTOR_OPTIONS = '.c-select-options'
38+
const SELECTOR_OPTIONS_EMPTY = '.c-select-options-empty'
3739
const SELECTOR_SELECTED = '.c-selected'
3840
const SELECTOR_SELECTION = '.c-select-selection'
3941
const SELECTOR_TAGS = '.c-select-tags'
@@ -53,6 +55,7 @@ const CLASS_NAME_OPTGROUP = 'c-select-optgroup'
5355
const CLASS_NAME_OPTGROUP_LABEL = 'c-select-optgroup-label'
5456
const CLASS_NAME_OPTION = 'c-select-option'
5557
const CLASS_NAME_OPTIONS = 'c-select-options'
58+
const CLASS_NAME_OPTIONS_EMPTY = 'c-select-options-empty'
5659
const CLASS_NAME_SEARCH = 'c-select-search'
5760
const CLASS_NAME_SELECTED = 'c-selected'
5861
const CLASS_NAME_SELECTION = 'c-select-selection'
@@ -66,17 +69,18 @@ const Default = {
6669
inline: false,
6770
multiple: false,
6871
options: [],
72+
optionsEmptyPlaceholder: 'no items',
6973
search: false,
7074
searchPlaceholder: 'Select...',
7175
selectionType: 'counter',
72-
selected: [],
73-
tags: false
76+
selected: []
7477
}
7578

7679
const DefaultType = {
7780
inline: 'boolean',
7881
multiple: 'boolean',
7982
options: 'array',
83+
optionsEmptyPlaceholder: 'string',
8084
search: 'boolean',
8185
searchPlaceholder: 'string',
8286
selectionType: 'string',
@@ -183,7 +187,7 @@ class Select {
183187
const key = event.keyCode || event.charCode
184188

185189
if ((key === 8 || key === 46) && event.target.value.length === 0) {
186-
this._deleteLastTag()
190+
this._selectionDeleteLast()
187191
}
188192
})
189193
EventHandler.on(this._optionsElement, EVENT_CLICK, event => {
@@ -328,6 +332,7 @@ class Select {
328332
this._createSelection()
329333
if (this._config.search) {
330334
this._createSearchInput()
335+
this._updateSearch()
331336
}
332337

333338
this._createOptionsContainer()
@@ -347,18 +352,18 @@ class Select {
347352
_createSearchInput() {
348353
const input = document.createElement('input')
349354
input.classList.add(CLASS_NAME_SEARCH)
350-
if (this._selection.length === 0) {
351-
input.placeholder = this._config.searchPlaceholder
352-
}
355+
// if (this._selection.length === 0) {
356+
// input.placeholder = this._config.searchPlaceholder
357+
// }
353358

354-
if (this._selection.length > 0 && !this._config.multiple) {
355-
input.placeholder = this._selection[0].text
356-
this._selectionElement.style.display = 'none'
357-
}
359+
// if (this._selection.length > 0 && !this._config.multiple) {
360+
// input.placeholder = this._selection[0].text
361+
// this._selectionElement.style.display = 'none'
362+
// }
358363

359-
if (this._selection.length > 0 && this._config.multiple) {
360-
input.placeholder = ''
361-
}
364+
// if (this._selection.length > 0 && this._config.multiple) {
365+
// input.placeholder = ''
366+
// }
362367

363368
this._clone.append(input)
364369
this._searchElement = input
@@ -425,6 +430,7 @@ class Select {
425430
tag.remove()
426431
this._selectionDelete(value)
427432
this._updateOptionsList()
433+
this._updateSearch()
428434
})
429435

430436
return tag
@@ -460,41 +466,16 @@ class Select {
460466

461467
if (this._config.multiple && element.classList.contains(CLASS_NAME_SELECTED)) {
462468
this._selectionDelete(value)
463-
}
464-
465-
if (this._config.multiple && !element.classList.contains(CLASS_NAME_SELECTED)) {
469+
} else if (this._config.multiple && !element.classList.contains(CLASS_NAME_SELECTED)) {
466470
this._selectionAdd(value, text)
467-
}
468-
469-
if (!this._config.multiple) {
471+
} else if (!this._config.multiple) {
470472
this._selectionAdd(value, text)
471473
}
472474

473475
this._updateSelection()
474476
this._updateSearch()
475477
}
476478

477-
_onListClick(element) {
478-
if (!element.classList.contains(CLASS_NAME_OPTION) || element.classList.contains(CLASS_NAME_LABEL)) {
479-
return
480-
}
481-
482-
const value = String(element.dataset.value)
483-
const text = element.textContent
484-
485-
if (this._config.multiple) {
486-
if (element.classList.contains(CLASS_NAME_SELECTED)) {
487-
this._selectionDelete(value)
488-
} else {
489-
this._selectionAdd(value, text)
490-
}
491-
} else {
492-
this._selectionAdd(value, element.textContent)
493-
}
494-
495-
this._updateSearch()
496-
}
497-
498479
_selectionAdd(value, text) {
499480
if (!this._config.multiple) {
500481
this._selectionClear()
@@ -516,10 +497,19 @@ class Select {
516497
}
517498

518499
_selectionDelete(value) {
519-
this._selection = this._selection.filter(e => e.value !== value)
500+
const selected = this._selection.filter(e => e.value !== value)
501+
this._selection = selected
520502
this._unSelectOption(value)
521503
}
522504

505+
_selectionDeleteLast() {
506+
if (this._selection.length > 0) {
507+
const last = this._selection.pop()
508+
this._selectionDelete(last.value)
509+
this._updateSelection()
510+
this._updateSearch()
511+
}
512+
}
523513
// .c-select-selections
524514

525515
_updateSelection() {
@@ -546,34 +536,28 @@ class Select {
546536
if (this._selection.length > 0) {
547537
selection.innerHTML = this._selection[0].text
548538
}
549-
550-
// selection.innerHTML = this._selection[0].text
551-
// console.log(this._selection)
552539
}
553540

554541
_updateSearch() {
555-
// if (this._selection.length === 0) {
556-
// this._searchElement.placeholder = this._config.searchPlaceholder
557-
// }
558-
559542
if (this._selection.length > 0 && !this._config.multiple) {
560543
this._searchElement.placeholder = this._selection[0].text
561544
this._selectionElement.style.display = 'none'
562545
}
563546

564-
if (this._selection.length > 0 && this._config.multiple) {
547+
if (this._selection.length > 0 && this._config.multiple && this._config.selectionType !== 'counter') {
565548
this._searchElement.placeholder = ''
566549
this._selectionElement.style.display = 'initial'
567550
}
568551

552+
if (this._selection.length === 0 && this._config.multiple) {
553+
this._searchElement.placeholder = this._config.searchPlaceholder
554+
this._selectionElement.style.display = 'initial'
555+
}
569556

570-
// if (!this._config.multiple) {
571-
// if (this._selection.length > 0) {
572-
// this._searchElement.placeholder = this._selection[0].text
573-
// }
574-
575-
// return
576-
// }
557+
if (this._config.multiple && this._config.selectionType === 'counter') {
558+
this._searchElement.placeholder = `${this._selection.length} item(s) selected`
559+
this._selectionElement.style.display = 'none'
560+
}
577561
}
578562

579563
// .c-select-selections
@@ -634,22 +618,54 @@ class Select {
634618
})
635619
}
636620

621+
_isHidden(element) {
622+
return element.offsetParent === null
623+
}
624+
625+
_isVisible(element) {
626+
const style = window.getComputedStyle(element)
627+
return (style.display !== 'none')
628+
}
629+
637630
_filterOptionsList() {
638631
const options = SelectorEngine.find(SELECTOR_OPTION, this._clone)
632+
let visibleOptions = 0
639633

640634
options.forEach(option => {
641635
if (option.textContent.toLowerCase().indexOf(this._search) === -1) {
642636
option.style.display = 'none'
643637
} else {
644638
option.style.display = 'block'
639+
visibleOptions++
640+
}
641+
642+
const optgroup = option.closest(SELECTOR_OPTGROUP)
643+
if (optgroup) {
644+
if (SelectorEngine.children(optgroup, SELECTOR_OPTION).filter(element => this._isVisible(element)).length > 0) {
645+
optgroup.style.display = 'block'
646+
} else {
647+
optgroup.style.display = 'none'
648+
}
645649
}
646650
})
647-
}
648651

649-
_deleteLastTag() {
650-
const lastVal = Object.keys(this._selection)[Object.keys(this._selection).length - 1]
651-
this._selectionDelete(lastVal)
652-
this._updateSelection()
652+
if (visibleOptions > 0) {
653+
if (SelectorEngine.findOne(SELECTOR_OPTIONS_EMPTY, this._clone)) {
654+
SelectorEngine.findOne(SELECTOR_OPTIONS_EMPTY, this._clone).remove()
655+
}
656+
657+
return
658+
}
659+
660+
if (visibleOptions === 0) {
661+
const placeholder = document.createElement('div')
662+
placeholder.classList.add(CLASS_NAME_OPTIONS_EMPTY)
663+
placeholder.innerHTML = this._config.optionsEmptyPlaceholder
664+
665+
if (!SelectorEngine.findOne(SELECTOR_OPTIONS_EMPTY, this._clone)) {
666+
SelectorEngine.findOne(SELECTOR_OPTIONS, this._clone).append(placeholder)
667+
}
668+
}
653669
}
654670

655671
// Static

0 commit comments

Comments
 (0)