Updates

* View thumbnail button will now use SweetAlert instead of Bulma's modal (preview: https://i.fiery.me/HDwX.png). It can be made more pretty but this will do for now.

* Fixed a bug where "Copy link to clipboard" button in albums list would only copy its identifier instead of the full URL.

Some other code improvements:

* All instances of adding/removing class names with Element.className will now use Element.classList. So instead of appending and replacing the string, it will now use add/remove functions, thus making it much easier to understand.

* "onkeypress" in auth page moved into a single addEventListener, sort of.

* Removed VSCode's discord extension entry from workspace settings. Eh, I'll go with user settings for this one.

.vscode/settings.json

@@ -6,7 +6,6 @@
             "indent_char": " "
         }
     },
-    "discord.enabled": true,
     "editor.formatOnPaste": false,
     "editor.formatOnSave": false,
     "editor.rulers": [

public/css/dashboard.css

@@ -213,23 +213,3 @@ html {
 .table td a:not([href]) {
   text-decoration: line-through;
 }
-
-#modal .modal-content {
-  background-color: #31363b;
-  border-radius: 5px;
-  -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .1);
-  box-shadow: 0 2px 3px rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .1);
-  padding: 20px;
-  width: auto;
-}
-
-#modal .modal-content .image {
-  width: 200px;
-  height: 200px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}

public/js/auth.js

@@ -35,12 +35,6 @@ page.do = async dest => {
   window.location = 'dashboard'
 }
 
-page.onkeypress = (event, element) => {
-  event = event || window.event
-  if (!event) { return }
-  if (event.keyCode === 13 || event.which === 13) { page.do('login') }
-}
-
 page.verify = async () => {
   if (!page.token) { return }
 
@@ -62,4 +56,12 @@ page.verify = async () => {
 
 window.onload = () => {
   page.verify()
+
+  document.body.addEventListener('keydown', event => {
+    event = event || window.event
+    if (!event) { return }
+    const id = event.target.id
+    if (!['user', 'pass'].includes(id)) { return }
+    if (event.keyCode === 13 || event.which === 13) { page.do('login') }
+  })
 }

public/js/dashboard.js

@@ -105,17 +105,10 @@ page.logout = () => {
   location.reload('.')
 }
 
-page.closeModal = () => {
-  document.getElementById('modal').className = 'modal'
-}
-
 page.isLoading = (element, state) => {
   if (!element) { return }
-  if (state && !element.className.includes(' is-loading')) {
-    element.className += ' is-loading'
-  } else if (!state && element.className.includes(' is-loading')) {
-    element.className = element.className.replace(' is-loading', '')
-  }
+  if (state) { return element.classList.add('is-loading') }
+  element.classList.remove('is-loading')
 }
 
 page.getUploads = (album, pageNum, element) => {
@@ -293,7 +286,7 @@ page.getUploads = (album, pageNum, element) => {
             <td>${file.size}</td>
             <td>${file.date}</td>
             <td style="text-align: right">
-              <a class="button is-small is-primary" title="View thumbnail" onclick="page.displayThumbnailModal(${file.thumb ? `'${file.thumb}'` : null})"${file.thumb ? '' : ' disabled'}>
+              <a class="button is-small is-primary" title="View thumbnail" onclick="page.displayThumbnail(${file.thumb ? `'${file.thumb}'` : null}, '${file.name}')"${file.thumb ? '' : ' disabled'}>
                 <span class="icon">
                   <i class="icon-picture-1"></i>
                 </span>
@@ -341,10 +334,16 @@ page.setFilesView = (view, element) => {
   page.getUploads(page.currentView.album, page.currentView.pageNum, element)
 }
 
-page.displayThumbnailModal = thumb => {
-  if (!thumb) { return }
-  document.getElementById('modalImage').src = thumb
-  document.getElementById('modal').className += ' is-active'
+page.displayThumbnail = (src, text) => {
+  if (!src) { return }
+  swal({
+    text,
+    content: {
+      element: 'img',
+      attributes: { src }
+    },
+    button: true
+  })
 }
 
 page.selectAllFiles = element => {
@@ -735,7 +734,7 @@ page.getAlbums = () => {
                 <i class="icon-pencil-1"></i>
               </span>
             </a>
-            <a class="button is-small is-info clipboard-js" title="Copy link to clipboard" ${album.public ? `data-clipboard-text="${album.identifier}"` : 'disabled'}>
+            <a class="button is-small is-info clipboard-js" title="Copy link to clipboard" ${album.public ? `data-clipboard-text="${albumUrl}"` : 'disabled'}>
               <span class="icon is-small">
                 <i class="icon-clipboard-1"></i>
               </span>
@@ -1177,18 +1176,18 @@ page.sendNewPassword = (pass, element) => {
     })
 }
 
-page.setActiveMenu = item => {
+page.setActiveMenu = activeItem => {
   const menu = document.getElementById('menu')
   const items = menu.getElementsByTagName('a')
-  for (const item of items) { item.className = '' }
+  for (const item of items) { item.classList.remove('is-active') }
 
-  item.className = 'is-active'
+  activeItem.classList.add('is-active')
 }
 
 window.onload = () => {
   // Add 'no-touch' class to non-touch devices
   if (!('ontouchstart' in document.documentElement)) {
-    document.documentElement.className += ' no-touch'
+    document.documentElement.classList.add('no-touch')
   }
 
   const selectedFiles = localStorage.selectedFiles

views/_globals.njk

@@ -12,7 +12,7 @@
   v1: CSS and JS files.
   v2: Images and config files (manifest.json, browserconfig.xml, etcetera).
 #}
-{% set v1 = "aP7qgfND6s" %}
+{% set v1 = "J0YdFIdpEH" %}
 {% set v2 = "MSEpgpfFIQ" %}
 
 {#

views/auth.njk

@@ -30,12 +30,12 @@
           </h2>
           <div class="field">
             <div class="control">
-              <input id="user" class="input" type="text" onkeypress="page.onkeypress(event, this)" placeholder="Your username">
+              <input id="user" class="input" type="text" placeholder="Your username">
             </div>
           </div>
           <div class="field">
             <div class="control">
-              <input id="pass" class="input" type="password" onkeypress="page.onkeypress(event, this)" placeholder="Your password">
+              <input id="pass" class="input" type="password" placeholder="Your password">
             </div>
           </div>
           <div class="field is-grouped is-grouped-right">

views/dashboard.njk

@@ -89,15 +89,5 @@
   </div>
 </section>
 
-<div id="modal" class="modal">
-  <div class="modal-background" onclick="page.closeModal()"></div>
-  <div class="modal-content">
-    <figure class="image">
-      <img id="modalImage" alt="modal-image">
-    </figure>
-  </div>
-  <button class="modal-close is-large" aria-label="close" onclick="page.closeModal()"></button>
-</div>
-
 {% include "_partial/noscript.njk" %}
 {% endblock %}