Updated dashboard

* Added "Clear selection" button. This will clear all selection, in case you have selected like hundreds of files already but decided not to do anything to them in the end.

* Bulk "Add to album" button will now only show its icon only.

* Better un/select all files logic.

* Updated icons (added "cancel" icon for the "Clear selection" button).

pages/dashboard.html

@@ -11,13 +11,13 @@
 
     <!-- Stylesheets and scripts -->
     <link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=8FbubjpYRC">
-    <link rel="stylesheet" type="text/css" href="libs/fontello/fontello.css?v=qXMCPUL26R">
+    <link rel="stylesheet" type="text/css" href="libs/fontello/fontello.css?v=ZnnW8U7YAv">
     <link rel="stylesheet" type="text/css" href="css/style.css?v=vZEyc9zyh6">
     <link rel="stylesheet" type="text/css" href="css/dashboard.css?v=RLPtEH87fK">
     <script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=8FbubjpYRC"></script>
     <script type="text/javascript" src="libs/axios/axios.min.js?v=8FbubjpYRC"></script>
     <script type="text/javascript" src="libs/clipboard.js/clipboard.min.js?v=8FbubjpYRC"></script>
-    <script type="text/javascript" src="js/dashboard.js?v=n5WyWY93dp"></script>
+    <script type="text/javascript" src="js/dashboard.js?v=ZnnW8U7YAv"></script>
 
     <!-- Open Graph tags -->
     <meta property="og:type" content="website" />

pages/home.html

@@ -11,7 +11,7 @@
 
     <!-- Stylesheets and scripts -->
     <link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=8FbubjpYRC">
-    <link rel="stylesheet" type="text/css" href="libs/fontello/fontello.css?v=qXMCPUL26R">
+    <link rel="stylesheet" type="text/css" href="libs/fontello/fontello.css?v=ZnnW8U7YAv">
     <link rel="stylesheet" type="text/css" href="css/style.css?v=vZEyc9zyh6">
     <script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=8FbubjpYRC"></script>
     <script type="text/javascript" src="libs/dropzone/dropzone.min.js?v=8FbubjpYRC"></script>

public/js/dashboard.js

@@ -146,11 +146,15 @@ panel.getUploads = (album, page, element) => {
           </a>
         </div>
         <div class="column" style="text-align: right">
-          <a class="button is-small is-warning" title="Add to album" onclick="panel.addSelectedFilesToAlbum(${album})">
+          <a class="button is-small is-info" title="Clear selection" onclick="panel.clearSelection()">
+            <span class="icon">
+              <i class="icon-cancel"></i>
+            </span>
+          </a>
+          <a class="button is-small is-warning" title="Add selected files to album" onclick="panel.addSelectedFilesToAlbum(${album})">
             <span class="icon">
               <i class="icon-plus"></i>
             </span>
-            <span>Add to album</span>
           </a>
           <a class="button is-small is-danger" title="Bulk delete" onclick="panel.deleteSelectedFiles(${album})">
             <span class="icon">
@@ -195,7 +199,7 @@ panel.getUploads = (album, page, element) => {
           div.innerHTML = `<a class="image" href="${file.file}" target="_blank"><h1 class="title">.${file.file.split('.').pop()}</h1></a>`
         }
         div.innerHTML += `
-          <input type="checkbox" class="file-checkbox" title="Select this file" onclick="panel.selectFile(${file.id}, this)"${selected ? ' checked' : ''}>
+          <input type="checkbox" class="file-checkbox" title="Select this file" data-id="${file.id}" onclick="panel.selectFile(this)"${selected ? ' checked' : ''}>
           <div class="controls">
             <a class="button is-small is-info clipboard-js" title="Copy link to clipboard" data-clipboard-text="${file.file}">
               <span class="icon">
@@ -263,7 +267,7 @@ panel.getUploads = (album, page, element) => {
 
         tr.innerHTML = `
           <tr>
-            <th><input type="checkbox" class="file-checkbox" title="Select this file" onclick="panel.selectFile(${file.id}, this)"${selected ? ' checked' : ''}></th>
+            <th><input type="checkbox" class="file-checkbox" title="Select this file" data-id="${file.id}" onclick="panel.selectFile(this)"${selected ? ' checked' : ''}></th>
             <th><a href="${file.file}" target="_blank">${file.file}</a></th>
             <th>${displayAlbumOrUser}</th>
             <td>${file.size}</td>
@@ -322,22 +326,77 @@ panel.displayThumbnailModal = thumb => {
 panel.selectAllFiles = element => {
   const table = document.getElementById('table')
   const checkboxes = table.getElementsByClassName('file-checkbox')
+
   for (const checkbox of checkboxes) {
+    const id = parseInt(checkbox.dataset.id)
+    if (isNaN(id)) { continue }
     if (checkbox.checked !== element.checked) {
-      checkbox.click()
+      checkbox.checked = element.checked
+      if (checkbox.checked) {
+        panel.selectedFiles.push(id)
+      } else {
+        panel.selectedFiles.splice(panel.selectedFiles.indexOf(id), 1)
+      }
     }
   }
+
+  if (panel.selectedFiles.length) {
+    localStorage.selectedFiles = JSON.stringify(panel.selectedFiles)
+  } else {
+    localStorage.removeItem('selectedFiles')
+  }
+
   element.title = element.checked ? 'Unselect all files' : 'Select all files'
 }
 
-panel.selectFile = (id, element) => {
+panel.selectFile = element => {
+  const id = parseInt(element.dataset.id)
+
+  if (isNaN(id)) { return }
+
   if (!panel.selectedFiles.includes(id) && element.checked) {
     panel.selectedFiles.push(id)
-    localStorage.selectedFiles = JSON.stringify(panel.selectedFiles)
   } else if (panel.selectedFiles.includes(id) && !element.checked) {
     panel.selectedFiles.splice(panel.selectedFiles.indexOf(id), 1)
-    localStorage.selectedFiles = JSON.stringify(panel.selectedFiles)
   }
+
+  if (panel.selectedFiles.length) {
+    localStorage.selectedFiles = JSON.stringify(panel.selectedFiles)
+  } else {
+    localStorage.removeItem('selectedFiles')
+  }
+}
+
+panel.clearSelection = async () => {
+  const count = panel.selectedFiles.length
+  if (!count) {
+    return swal('An error occurred!', 'You have not selected any files.', 'error')
+  }
+
+  const suffix = `file${count === 1 ? '' : 's'}`
+  const proceed = await swal({
+    title: 'Are you sure?',
+    text: `You are going to unselect ${count} ${suffix}.`,
+    buttons: true
+  })
+  if (!proceed) { return }
+
+  const table = document.getElementById('table')
+  const checkboxes = table.getElementsByClassName('file-checkbox')
+
+  for (const checkbox of checkboxes) {
+    if (checkbox.checked) {
+      checkbox.checked = false
+    }
+  }
+
+  panel.selectedFiles = []
+  localStorage.removeItem('selectedFiles')
+
+  const selectAll = document.getElementById('selectAll')
+  if (selectAll) { selectAll.checked = false }
+
+  return swal('Cleared selection!', `Unselected ${count} ${suffix}.`, 'success')
 }
 
 panel.deleteFile = (id, album, page) => {

public/libs/fontello/fontello.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'fontello';
-  src: url('fontello.eot?1863770');
-  src: url('fontello.eot?1863770#iefix') format('embedded-opentype'),
-       url('fontello.woff2?1863770') format('woff2'),
-       url('fontello.woff?1863770') format('woff'),
-       url('fontello.ttf?1863770') format('truetype'),
-       url('fontello.svg?1863770#fontello') format('svg');
+  src: url('fontello.eot?66097349');
+  src: url('fontello.eot?66097349#iefix') format('embedded-opentype'),
+       url('fontello.woff2?66097349') format('woff2'),
+       url('fontello.woff?66097349') format('woff'),
+       url('fontello.ttf?66097349') format('truetype'),
+       url('fontello.svg?66097349#fontello') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -60,4 +60,5 @@
 .icon-clipboard:before { content: '\e806'; } /* '' */
 .icon-arrows-cw:before { content: '\e807'; } /* '' */
 .icon-plus:before { content: '\e808'; } /* '' */
+.icon-cancel:before { content: '\e809'; } /* '' */
 .icon-paper-plane-empty:before { content: '\f1d9'; } /* '' */

public/libs/fontello/fontello.svg

@@ -24,6 +24,8 @@
 
 <glyph glyph-name="plus" unicode="&#xe808;" d="M0 209l0 282 359 0 0 359 282 0 0-359 359 0 0-282-359 0 0-359-282 0 0 359-359 0z" horiz-adv-x="1000" />
 
+<glyph glyph-name="cancel" unicode="&#xe809;" d="M0 71l279 279-279 279 221 221 279-279 279 279 221-221-279-279 279-279-221-221-279 279-279-279z" horiz-adv-x="1000" />
+
 <glyph glyph-name="paper-plane-empty" unicode="&#xf1d9;" d="M984 844q19-13 15-36l-142-857q-3-16-18-25-8-5-18-5-6 0-13 3l-294 120-166-182q-10-12-27-12-7 0-12 2-11 4-17 13t-6 21v252l-264 108q-20 8-22 30-2 22 18 33l928 536q20 12 38-1z m-190-837l123 739-800-462 187-76 482 356-267-444z" horiz-adv-x="1000" />
 </font>
 </defs>