| | |
| | | class HandleSelection { |
| | | constructor(container, options = {}) { |
| | | constructor(container, options = {}, hasTable = false) { |
| | | this.container = container; |
| | | const defaults = { |
| | | selectAll: { |
| | |
| | | count: '.selected-count, .selected .info', |
| | | bulkControls: '.bulk-actions', |
| | | }, |
| | | items: '.item-grid', |
| | | items: '.item-grid, table', |
| | | wrapper: { |
| | | wrapper: ':has(.item-grid, [data-select-all])', |
| | | wrapper: ':has(.item-grid, [data-select-all]):not([hidden]), table', |
| | | id: 'selection', |
| | | }, |
| | | item: { |
| | |
| | | wrappers: {}, |
| | | }; |
| | | this.selectors = window.deepMerge(defaults, options); |
| | | |
| | | this.hasTable = hasTable; |
| | | this.a11y = window.jvbA11y; |
| | | |
| | | this.selectedItems = new Set(); |
| | |
| | | this.index = 0; |
| | | let selectors = this.removeDataReferences(); |
| | | this.ui = window.uiFromSelectors(selectors, this.container); |
| | | if (this.hasTable) { |
| | | this.checkForTable(); |
| | | } |
| | | |
| | | this.container.querySelectorAll(this.selectors.wrapper.wrapper).forEach(wrapper => { |
| | | this.addWrapper(wrapper); |
| | | }); |
| | | } |
| | | checkForTable() { |
| | | if (!Object.hasOwn(this.ui.wrapper, 'table') || !this.ui.wrapper.table) { |
| | | this.ui.wrapper.table = this.container.querySelector('table'); |
| | | } |
| | | } |
| | | addWrapper(el) { |
| | | let id = this.selectors.wrapper.id; |
| | | if (!Object.hasOwn(el.dataset, id)) { |
| | |
| | | this.index++; |
| | | } |
| | | let selectors = this.removeDataReferences().selectAll; |
| | | |
| | | console.log('Adding wrapper from element: ', el); |
| | | //store the DOM of the grid and selectAll |
| | | this.ui.wrappers[el.dataset[id]] = { |
| | | element: el, |
| | |
| | | |
| | | // Do range selection |
| | | const currentId = this.getItemId(item); |
| | | |
| | | const items = this.getWrapperChildren(wrapper); |
| | | const lastIndex = items.findIndex(itemId => itemId === this.lastSelected); |
| | | const currentIndex = items.findIndex(itemId => itemId === currentId); |
| | |
| | | } |
| | | |
| | | getWrapperChildren(wrapper) { |
| | | return Array.from(wrapper.items.children) |
| | | |
| | | return Array.from(wrapper.tagName === 'TABLE' ? Array.from(wrapper.children)[1].children : wrapper.items.children) |
| | | .map(item => this.getItemId(item)); |
| | | } |
| | | |
| | | getItemWrapper(item) { |
| | | if (!item) return null; |
| | | console.log('Wrapper: ',this.selectors.wrapper.wrapper); |
| | | let wrapper = item.closest(this.selectors.wrapper.wrapper); |
| | | console.log('Found wrapper: ', wrapper); |
| | | if (!wrapper)return null; |
| | | return this.getWrapper(wrapper); |
| | | } |
| | | |
| | | getWrapper(wrapper) { |
| | | if (this.hasTable) { |
| | | //Find the table, if available |
| | | this.checkForTable(); |
| | | if (!this.ui.wrapper.table.hidden) { |
| | | return this.ui.wrapper.table; |
| | | } |
| | | } |
| | | return this.ui.wrappers[wrapper.dataset[this.selectors.wrapper.id]]??null; |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | // Update label text |
| | | if (wrapper.selectAll.span) { |
| | | if (Object.hasOwn(wrapper, 'selectAll') && Object.hasOwn(Object.selectAll,'span') && wrapper.selectAll.span) { |
| | | wrapper.selectAll.span.textContent = (trigger.checked && ids.length > 0) ? 'Clear Selection' : 'Select All'; |
| | | } |
| | | |
| | |
| | | * PUBLIC API |
| | | *******************************************************************/ |
| | | select(id, updateCheckbox = true, updateUI = true) { |
| | | console.log('Selecting items...'); |
| | | if (this.selectedItems.has(id)) return; |
| | | console.log('Not already selected...'); |
| | | |
| | | this.selectedItems.add(id); |
| | | let item = this.getItem(id); |
| | | console.log('Got item: ', item); |
| | | if (item) item.element.classList.add('selected'); |
| | | if (updateCheckbox) this.setCheckboxState(id, true); |
| | | if (updateUI) { |