Comments and bugfixes

assets/src/components/Files.vue

@@ -7,6 +7,11 @@
   <editor v-else-if="isEditor"></editor>
   <listing :class="{ multiple }" v-else-if="isListing"></listing>
   <preview v-else-if="isPreview"></preview>
+  <div v-else>
+    <h2 class="message">
+      <span>Loading...</span>
+    </h2>
+  </div>
 </template>
 
 <script>
@@ -16,19 +21,9 @@ import InternalError from './errors/500'
 import Preview from './Preview'
 import Listing from './Listing'
 import Editor from './Editor'
-import css from '@/utils/css'
 import api from '@/utils/api'
 import { mapGetters, mapState, mapMutations } from 'vuex'
 
-function updateColumnSizes () {
-  let columns = Math.floor(document.querySelector('main').offsetWidth / 300)
-  let items = css(['#listing.mosaic .item', '.mosaic#listing .item'])
-
-  if (columns === 0) columns = 1
-
-  items.style.width = `calc(${100 / columns}% - 1em)`
-}
-
 export default {
   name: 'files',
   components: {
@@ -72,14 +67,18 @@ export default {
     '$route': 'fetchData',
     'reload': function () {
       this.$store.commit('setReload', false)
+      this.$store.commit('resetSelected')
+      this.$store.commit('multiple', false)
+      this.$store.commit('closeHovers')
       this.fetchData()
     }
   },
   mounted () {
-    updateColumnSizes()
-    window.addEventListener('resize', updateColumnSizes)
     window.addEventListener('keydown', this.keyEvent)
   },
+  beforeDestroy () {
+    window.removeEventListener('keydown', this.keyEvent)
+  },
   methods: {
     ...mapMutations([ 'setLoading' ]),
     fetchData () {
@@ -117,17 +116,11 @@ export default {
       if (event.keyCode === 27) {
         this.$store.commit('closeHovers')
 
-        if (this.req.kind !== 'listing') {
-          return
+        // If we're on a listing, unselect all
+        // files and folders.
+        if (this.req.kind === 'listing') {
+          this.$store.commit('resetSelected')
         }
-
-        // If we're on a listing, unselect all files and folders.
-        let items = document.getElementsByClassName('item')
-        Array.from(items).forEach(link => {
-          link.setAttribute('aria-selected', false)
-        })
-
-        this.$store.commit('resetSelected')
       }
 
       // Del!

assets/src/components/Listing.vue

@@ -73,6 +73,7 @@
 <script>
 import {mapState} from 'vuex'
 import Item from './ListingItem'
+import css from '@/utils/css'
 import api from '@/utils/api'
 import buttons from '@/utils/buttons'
 
@@ -103,17 +104,38 @@ export default {
     }
   },
   mounted: function () {
-    document.addEventListener('dragover', function (event) {
-      event.preventDefault()
-    }, false)
+    // Check the columns size for the first time.
+    this.resizeEvent()
 
-    document.addEventListener('drop', this.drop, false)
+    // Add the needed event listeners to the window and document.
+    window.addEventListener('resize', this.resizeEvent)
+    document.addEventListener('dragover', this.preventDefault)
+    document.addEventListener('drop', this.drop)
+  },
+  beforeDestroy () {
+    // Remove event listeners before destroying this page.
+    window.removeEventListener('resize', this.resizeEvent)
+    document.removeEventListener('dragover', this.preventDefault)
+    document.removeEventListener('drop', this.drop)
   },
   methods: {
     base64: function (name) {
       return window.btoa(unescape(encodeURIComponent(name)))
     },
+    preventDefault (event) {
+      // Wrapper around prevent default.
+      event.preventDefault()
+    },
+    resizeEvent () {
+      // Update the columns size based on the window width.
+      let columns = Math.floor(document.querySelector('main').offsetWidth / 300)
+      let items = css(['#listing.mosaic .item', '.mosaic#listing .item'])
+      if (columns === 0) columns = 1
+      items.style.width = `calc(${100 / columns}% - 1em)`
+    },
     dragEnter: function (event) {
+      // When the user starts dragging an item, put every
+      // file on the listing with 50% opacity.
       let items = document.getElementsByClassName('item')
 
       Array.from(items).forEach(file => {

assets/src/css/styles.css

@@ -34,8 +34,7 @@
 
 .action i {
   padding: 0.4em;
-  -webkit-transition: 0.2s ease-in-out all;
-  transition: 0.2s ease-in-out all;
+  transition: .1s ease-in-out all;
   border-radius: 50%;
 }
 

assets/src/utils/buttons.js

@@ -13,7 +13,7 @@ function loading (button) {
     el.classList.add('spin')
     el.innerHTML = 'autorenew'
     el.style.opacity = 1
-  }, 0)
+  }, 100)
 }
 
 function done (button, success = true) {
@@ -30,7 +30,7 @@ function done (button, success = true) {
     el.classList.remove('spin')
     el.innerHTML = el.dataset.icon
     el.style.opacity = 1
-  }, 0)
+  }, 100)
 }
 
 export default {