Fixes #37 Add unselect all button

static/public/css/style.css

@@ -133,10 +133,16 @@ body.filter-active #pch-navbar .bt-filter-inactive {
     transition: scale 700ms;
 }
 
-#pch-mediaList.selection > .pch-image input,
-#pch-mediaList.selection > .pch-image button {
+body.media-selection #pch-mediaList > .pch-image input,
+body.media-selection #pch-mediaList > .pch-image button {
     visibility: visible;
 }
+#pch-navbar .navbar-nav .nav-item > a#pch-navbar-unselectAll {
+    display: none;
+}
+body.media-selection #pch-navbar .navbar-nav .nav-item > a#pch-navbar-unselectAll {
+    display: inline-block;
+}
 
 #pch-mediaList > .pch-image:hover input {
     visibility: visible;

static/public/js/uiCommon.js

@@ -18,6 +18,7 @@ $(() => {
             triggerClosePopinsRequestHandlers();
     });
 
+    document.getElementById("pch-navbar-unselectAll").addEventListener("click", e => { e.preventDefault(); unselectAll(); });
     document.getElementById("pch-navbar-reload").addEventListener("click", e => { e.preventDefault(); reloadServerDb(); });
     document.getElementById("pch-navbar-share").addEventListener("click", e => { e.preventDefault(); showShareUi(); });
     document.getElementById("pch-navbar-autotags").addEventListener("click", e => { e.preventDefault(); showAutoTagsUi(); });

static/public/js/uiMedia.js

@@ -5,12 +5,12 @@ $(() => {
     var lastSelection = null;
 
     function onItemSelected(mediaItem) {
-        document.getElementById("pch-mediaList").classList.add("selection");
+        document.body.classList.add("media-selection");
     }
 
     function onItemDeselected(mediaItem) {
         if (!selectedThumbnails.length)
-            document.getElementById("pch-mediaList").classList.remove("selection");
+            document.body.classList.remove("media-selection");
     }
 
     let setSelectionCheckboxValue = function(media, value) {
@@ -140,10 +140,8 @@ $(() => {
     let targetDisplayedItems = displayItemBatchCount;
 
     function unselectAll() {
-        for (let i of selectedThumbnails) {
-            let media = MediaStorage.Instance.getMediaLocal(i);
-            setSelectionCheckboxValue(media, false);
-        }
+        selectedThumbnails.map(x => MediaStorage.Instance.getMediaLocal(x)).forEach(x => setSelectionCheckboxValue(x, false));
+        selectedThumbnails = [];
         lastSelection = null;
     }
 
@@ -197,6 +195,7 @@ $(() => {
         setSelectionCheckboxValue(evt.detail, false);
     });
 
+    window.unselectAll = unselectAll;
     window.displayMoreMedia = () => {
         targetDisplayedItems += displayItemBatchCount;
         let container = document.getElementById('pch-mediaList');

templates/_menu.js

@@ -5,6 +5,9 @@ module.exports = `
     <nav id="pch-navbar" class="navbar navbar-expand-lg bg-body-tertiary">
         <div class="container-fluid" id="navbarSupportedContent">
             <ul class="navbar-nav col justify-content-end">
+                <li class="nav-item">
+                    <a class="nav-link" href="#" role="button" id="pch-navbar-unselectAll"><i class="bi bi-check2-all">&nbsp;</i></a>
+                </li>
                 <li class="nav-item">
                     <a class="nav-link hidden" href="#" role="button" id="pch-navbar-reload"><i class="bi bi-database-gear">&nbsp;</i></a>
                 </li>