Adds multi-select support #1360
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -107,6 +107,10 @@ class GenPageBrowserClass { | |
| this.runAfterUpdate = []; | ||
| this.refreshHandler = (callback) => callback(); | ||
| this.checkIsSmall(); | ||
| this.allowMultiSelect = false; | ||
| this.multiSelectActive = false; | ||
| this.multiSelectToggleButton = null; | ||
| this.multiSelectActionSelect = null; | ||
| } | ||
|
|
||
| /** | ||
|
|
@@ -138,6 +142,7 @@ class GenPageBrowserClass { | |
| this.chunksRendered = 0; | ||
| this.folder = folder; | ||
| this.selected = null; | ||
| this.clearMultiSelection(); | ||
| this.update(false, callback); | ||
| } | ||
|
|
||
|
|
@@ -455,6 +460,9 @@ class GenPageBrowserClass { | |
| } | ||
| let img = document.createElement('img'); | ||
| img.addEventListener('click', () => { | ||
| if (this.handleMultiSelectTileClick(div)) { | ||
| return; | ||
| } | ||
| this.select(file, div); | ||
| }); | ||
| img.classList.add('image-block-img-inner'); | ||
|
|
@@ -495,13 +503,21 @@ class GenPageBrowserClass { | |
| else { | ||
| textBlock.classList.add('image-preview-text-large'); | ||
| } | ||
| textBlock.addEventListener('click', (e) => { | ||
| if (this.handleMultiSelectTileClick(div, e)) { | ||
| return; | ||
| } | ||
| }); | ||
| div.appendChild(textBlock); | ||
| } | ||
| else if (this.format == 'List') { | ||
| div.className += ' browser-list-entry'; | ||
| let textBlock = createSpan(null, 'browser-list-entry-text'); | ||
| textBlock.innerText = desc.display || desc.name; | ||
| textBlock.addEventListener('click', () => { | ||
| if (this.handleMultiSelectTileClick(div)) { | ||
| return; | ||
| } | ||
| this.select(file, div); | ||
| }); | ||
| div.appendChild(textBlock); | ||
|
|
@@ -520,6 +536,9 @@ class GenPageBrowserClass { | |
| textBlock.style.width = `calc(${percent}% - ${imgAdj}rem)`; | ||
| textBlock.innerHTML = detail; | ||
| textBlock.addEventListener('click', () => { | ||
| if (this.handleMultiSelectTileClick(div)) { | ||
| return; | ||
| } | ||
| this.select(file, div); | ||
| }); | ||
| div.appendChild(textBlock); | ||
|
|
@@ -704,6 +723,37 @@ class GenPageBrowserClass { | |
| this.headerBar.appendChild(formatSelector); | ||
| this.headerBar.appendChild(buttons); | ||
| refreshButton.onclick = this.refresh.bind(this); | ||
| if (this.allowMultiSelect) { | ||
| this.multiSelectToggleButton = document.createElement('button'); | ||
| this.multiSelectToggleButton.type = 'button'; | ||
| this.multiSelectToggleButton.id = `${this.id}_multiselect_toggle`; | ||
| this.multiSelectToggleButton.className = 'refresh-button translate translate-no-text browser-multiselect-toggle'; | ||
| this.multiSelectToggleButton.title = 'Toggle multi-select mode'; | ||
| this.multiSelectToggleButton.innerHTML = '✓'; | ||
| this.multiSelectToggleButton.addEventListener('click', () => { | ||
| this.setMultiSelectActive(!this.multiSelectActive); | ||
| }); | ||
| this.multiSelectActionSelect = document.createElement('select'); | ||
| this.multiSelectActionSelect.id = `${this.id}_multiselect_action`; | ||
| this.multiSelectActionSelect.className = 'browser-format-selector browser-multiselect-action-select'; | ||
| this.multiSelectActionSelect.title = 'Bulk action'; | ||
| let placeholderOpt = document.createElement('option'); | ||
| placeholderOpt.value = ''; | ||
| placeholderOpt.className = 'translate'; | ||
| placeholderOpt.innerText = translate('Actions...'); | ||
| this.multiSelectActionSelect.appendChild(placeholderOpt); | ||
| this.multiSelectActionSelect.style.display = 'none'; | ||
| this.multiSelectActionSelect.addEventListener('change', () => { | ||
| let choice = this.multiSelectActionSelect.value; | ||
| if (!choice) { | ||
| return; | ||
| } | ||
| this.runMultiSelectAction(choice); | ||
| this.multiSelectActionSelect.value = ''; | ||
| }); | ||
| this.upButton.insertAdjacentElement('afterend', this.multiSelectToggleButton); | ||
| this.multiSelectToggleButton.insertAdjacentElement('afterend', this.multiSelectActionSelect); | ||
| } | ||
| this.fullContentDiv.appendChild(this.headerBar); | ||
| this.contentDiv = createDiv(`${this.id}-content`, 'browser-content-container'); | ||
| this.contentDiv.addEventListener('scroll', () => { | ||
|
|
@@ -755,6 +805,12 @@ class GenPageBrowserClass { | |
| }); | ||
| } | ||
| else { | ||
| if (!this.preservedMultiSelect) { | ||
| this.preservedMultiSelect = new Set(); | ||
| for (let el of this.contentDiv.querySelectorAll('.browser-multiselect-item-selected[data-name]')) { | ||
| this.preservedMultiSelect.add(el.dataset.name); | ||
| } | ||
| } | ||
| this.folderTreeDiv.innerHTML = ''; | ||
| this.contentDiv.innerHTML = ''; | ||
| this.headerPath.remove(); | ||
|
|
@@ -769,6 +825,15 @@ class GenPageBrowserClass { | |
| applyTranslations(this.headerBar); | ||
| if (!this.noContentUpdates) { | ||
| this.buildContentList(this.contentDiv, files); | ||
| if (this.preservedMultiSelect && this.preservedMultiSelect.size > 0) { | ||
| for (let child of this.contentDiv.children) { | ||
| if (child.dataset && child.dataset.name && this.preservedMultiSelect.has(child.dataset.name)) { | ||
| child.classList.add('browser-multiselect-item-selected'); | ||
| } | ||
| } | ||
| } | ||
| this.preservedMultiSelect = null; | ||
| this.syncMultiSelectHeader(); | ||
| browserUtil.makeVisible(this.contentDiv); | ||
| if (scrollOffset) { | ||
| this.contentDiv.scrollTop = scrollOffset; | ||
|
|
@@ -783,4 +848,180 @@ class GenPageBrowserClass { | |
| this.builtEvent(); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Returns multi-select items. | ||
| */ | ||
| getMultiSelectedItems() { | ||
| if (!this.contentDiv) { | ||
| return []; | ||
| } | ||
| return [...this.contentDiv.querySelectorAll(':scope > .browser-multiselect-item-selected[data-name]')]; | ||
| } | ||
|
|
||
| /** | ||
| * Clears multi-selected items. | ||
| */ | ||
| clearMultiSelection() { | ||
| if (!this.allowMultiSelect) { | ||
| return; | ||
| } | ||
| for (let item of this.getMultiSelectedItems()) { | ||
| item.classList.remove('browser-multiselect-item-selected'); | ||
| } | ||
| this.syncMultiSelectHeader(); | ||
| } | ||
|
|
||
| /** | ||
| * Turns multi-select mode on or off; exiting clears the selection. | ||
| */ | ||
| setMultiSelectActive(active) { | ||
| if (!this.allowMultiSelect) { | ||
| return; | ||
| } | ||
| this.multiSelectActive = active; | ||
| if (!active) { | ||
| this.clearMultiSelection(); | ||
| } | ||
| else { | ||
| this.syncMultiSelectHeader(); | ||
| } | ||
| this.contentDiv.classList.toggle('browser-multiselect-mode', active); | ||
| } | ||
|
|
||
| /** | ||
| * Handles an item click while multi-select mode is active. | ||
| */ | ||
| handleMultiSelectTileClick(div, event = null) { | ||
| if (!this.multiSelectActive || !this.allowMultiSelect) { | ||
| return false; | ||
| } | ||
| if (event) { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| } | ||
| div.classList.toggle('browser-multiselect-item-selected'); | ||
| this.syncMultiSelectHeader(); | ||
| return true; | ||
| } | ||
|
|
||
| /** | ||
| * Returns files in the current listing that are multi-selected. | ||
| */ | ||
| getMultiSelectedFiles() { | ||
| if (!this.lastFiles) { | ||
| return []; | ||
| } | ||
| let selectedNames = this.getMultiSelectedItems().map(entry => entry.dataset.name); | ||
| return this.lastFiles.filter(file => selectedNames.includes(file.name)); | ||
| } | ||
|
|
||
| /** | ||
| * Labels for bulk actions shared by every selected item, respecting `can_multi` / `multi_only`. | ||
|
Member
There was a problem hiding this comment. This feels like AI slop. Misinterpreted keywords and then proudly documented respect for the misunderstood keyword.
Contributor
Author
There was a problem hiding this comment. To be fair, this PR has gone through several major revisions after feedback. I try to keep comments up to date. It does point to my initial PR diffs probably being overly large if I sometimes mislabel a function, which is something I'm actively working on for the SwarmUI project. |
||
| */ | ||
| getCommonMultiSelectActionLabels() { | ||
| let files = this.getMultiSelectedFiles(); | ||
| if (files.length == 0) { | ||
| return []; | ||
| } | ||
| let eligiblePerFile = []; | ||
|
Member
There was a problem hiding this comment. actually wtf is this whole function? Why was this built like this at all??? wat.
Contributor
Author
There was a problem hiding this comment. I'm reducing the diff here, but this function actually does something important - it gates specific multi-select actions on filetypes the user selects. A user can select any number of image, video, and audio files in the history browser and select an action like Star, or Delete. However, it makes less sense for a user to select an image + audio file and allow them to do a media comparison. The current implementation just iterates through each selected file and removes actions that cannot be applied to the entire set. Slightly wordy, I can reduce the diff without getting too clever, but I would push back strongly on this being removed completely.
Contributor
Author
There was a problem hiding this comment. "image + audio" comparison is stupid and I would instead say an image + video comparison wouldn't make much sense. However, it would make more sense than image+audio. I can maybe see a scenario where a user wants to popup an image and a video into a comparison modal to eyeball a bit? Not much of a scenario but if you want this code removed now I'm open to it. |
||
| for (let file of files) { | ||
| let desc = this.describe(file); | ||
| let labels = []; | ||
| for (let button of desc.buttons) { | ||
| if (button.can_multi && (button.max_selected == null || files.length <= button.max_selected)) { | ||
|
Contributor
Author
There was a problem hiding this comment. TBH I'm not a fan of the change you made here. The previous split |
||
| labels.push(button.label); | ||
| } | ||
| } | ||
| eligiblePerFile.push(labels); | ||
| } | ||
| let first = eligiblePerFile[0]; | ||
| let common = []; | ||
| for (let label of first) { | ||
| if (eligiblePerFile.every(arr => arr.includes(label))) { | ||
| common.push(label); | ||
| } | ||
| } | ||
| common.sort((a, b) => a.localeCompare(b)); | ||
| return common; | ||
| } | ||
|
|
||
| /** | ||
| * Off: ✓ ✓ | ||
| * On: ☑ ☑ | ||
| */ | ||
| syncMultiSelectToggleAppearance() { | ||
| if (!this.multiSelectToggleButton) { | ||
| return; | ||
| } | ||
| this.multiSelectToggleButton.classList.toggle('browser-multiselect-toggle-active', this.multiSelectActive); | ||
| this.multiSelectToggleButton.innerHTML = this.multiSelectActive ? '☑' : '✓'; | ||
| } | ||
|
|
||
| /** | ||
| * Updates multi-select toggle state and action dropdown. | ||
| */ | ||
| syncMultiSelectHeader() { | ||
| this.syncMultiSelectToggleAppearance(); | ||
| if (!this.multiSelectActionSelect) { | ||
| return; | ||
| } | ||
| let show = this.multiSelectActive && this.getMultiSelectedItems().length > 0; | ||
| this.multiSelectActionSelect.style.display = show ? '' : 'none'; | ||
| if (!show) { | ||
| return; | ||
| } | ||
| while (this.multiSelectActionSelect.options.length > 1) { | ||
| this.multiSelectActionSelect.remove(1); | ||
| } | ||
| this.multiSelectActionSelect.value = ''; | ||
| for (let label of this.getCommonMultiSelectActionLabels()) { | ||
| let opt = document.createElement('option'); | ||
| opt.value = label; | ||
| opt.className = 'translate'; | ||
| opt.innerText = translate(label); | ||
| this.multiSelectActionSelect.appendChild(opt); | ||
| } | ||
| applyTranslations(this.multiSelectActionSelect); | ||
| } | ||
|
|
||
| /** | ||
| * Runs a multi-select action once per selected item. | ||
| */ | ||
| runMultiSelectAction(label) { | ||
| let files = this.getMultiSelectedFiles(); | ||
| let failed = 0; | ||
| for (let file of files) { | ||
| let div = this.getVisibleEntry(file.name); | ||
| let desc = this.describe(file); | ||
| let button = null; | ||
| for (let b of desc.buttons) { | ||
| if (b.label == label && b.onclick) { | ||
| button = b; | ||
| break; | ||
| } | ||
| } | ||
| if (!button) { | ||
| failed++; | ||
| console.error(`No bulk action '${label}' for ${file.name}`); | ||
| continue; | ||
| } | ||
| try { | ||
| button.onclick(div); | ||
| } | ||
| catch (err) { | ||
| console.error('Browser bulk action error:', err); | ||
| failed++; | ||
| } | ||
| } | ||
| if (failed > 0) { | ||
| showError(`Bulk action finished: ${failed} of ${files.length} failed - see console for details.`); | ||
| } | ||
| if (label == 'Delete') { | ||
| this.setMultiSelectActive(false); | ||
| } | ||
| else { | ||
| this.syncMultiSelectHeader(); | ||
| } | ||
| } | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a bug in your original implementation:
let metaParsed = JSON.parse(metadata);