Adds multi-select support

src/wwwroot/css/genpage.css

@@ -835,6 +835,16 @@ body {
     margin-left: 0.5rem;
     opacity: 0.8;
 }
+.browser-multiselect-toggle-active,
+.browser-multiselect-item-selected {
+    outline: 2px solid var(--emphasis) !important;
+    outline-offset: 1px;
+}
+.browser-multiselect-action-select {
+    max-width: 11rem;
+    margin-left: 0.15rem;
+    vertical-align: middle;
+}
 .browser-fullcontent-container {
     margin-left: 0.2rem;
     display: inline-block;

src/wwwroot/js/genpage/gentab/outputhistory.js

@@ -2,8 +2,8 @@
 let registeredMediaButtons = [];
 
 /** Registers a media button for extensions. 'mediaTypes' filters by type eg ['audio'], null means all. 'isDefault' promotes to visible (vs More dropdown). 'showInHistory' controls whether button appears in the History panel. */
-function registerMediaButton(name, action, title = '', mediaTypes = null, isDefault = false, showInHistory = true, href = null, is_download = false, can_multi = false, multi_only = false) {
-    registeredMediaButtons.push({ name, action, title, mediaTypes, isDefault, showInHistory, href, is_download, can_multi, multi_only });
+function registerMediaButton(name, action, title = '', mediaTypes = null, isDefault = false, showInHistory = true, href = null, is_download = false, can_multi = false, multi_only = false, max_selected = null) {
+    registeredMediaButtons.push({ name, action, title, mediaTypes, isDefault, showInHistory, href, is_download, can_multi, multi_only, max_selected });
 }
 
 function listOutputHistoryFolderAndFiles(path, isRefresh, callback, depth) {
@@ -65,7 +65,15 @@ function buttonsForImage(fullsrc, src, metadata, isCurrentImage = false) {
     let mediaType = getMediaType(src);
     buttons = [];
     if (permissions.hasPermission('user_star_images') && !isDataImage) {
-        let metaParsed = JSON.parse(metadata);
+        let getMeta = (metadata) => metadata ? (JSON.parse(metadata) || {}) : {};
+        let metaParsed = getMeta(metadata);
+        let isStarred = (e) => {
+            let currentMeta = e && e.dataset ? getMeta(e.dataset.metadata) : {};
+            if (Object.keys(currentMeta).length == 0) {
+                currentMeta = metaParsed;
+            }
+            return currentMeta.is_starred;
+        };
         buttons.push({
             label: (metadata && metaParsed.is_starred) ? 'Unstar' : 'Star',
             title: 'Star or unstar this image - starred images get moved to a separate folder and highlighted.',
@@ -78,18 +86,18 @@ function buttonsForImage(fullsrc, src, metadata, isCurrentImage = false) {
             label: 'Enable Starred',
             title: 'Marks all selected images as starred if they are not already',
             onclick: (e) => {
-                if (!metaParsed.is_starred) {
+                if (!isStarred(e)) {
                     toggleStar(fullsrc, src);
                 }
             },
             can_multi: true,
             multi_only: true
         });
         buttons.push({
-            label: 'Disabled Starred',
+            label: 'Disable Starred',
             title: 'Marks all selected images as NOT starred if they are currently starred',
             onclick: (e) => {
-                if (metaParsed.is_starred) {
+                if (isStarred(e)) {
                     toggleStar(fullsrc, src);
                 }
             },
@@ -182,6 +190,7 @@ function buttonsForImage(fullsrc, src, metadata, isCurrentImage = false) {
                 is_download: reg.is_download,
                 can_multi: reg.can_multi,
                 multi_only: reg.multi_only,
+                max_selected: reg.max_selected,
                 onclick: () => reg.action(src)
             });
         }
@@ -247,6 +256,7 @@ function selectOutputInHistory(image, div) {
 
 let imageHistoryBrowser = new GenPageBrowserClass('image_history', listOutputHistoryFolderAndFiles, 'imagehistorybrowser', 'Thumbnails', describeOutputFile, selectOutputInHistory,
     `<label for="image_history_sort_by">Sort:</label> <select id="image_history_sort_by"><option>Name</option><option>Date</option></select> <input type="checkbox" id="image_history_sort_reverse"> <label for="image_history_sort_reverse">Reverse</label> &emsp; <input type="checkbox" id="image_history_allow_anims" checked autocomplete="off"> <label for="image_history_allow_anims">Allow Animation</label>`);
+imageHistoryBrowser.allowMultiSelect = true;
 
 function storeImageToHistoryWithCurrentParams(img) {
     let data = getGenInput();