From 55c097b2aa0b6cabfa953202588d8196a0d21538 Mon Sep 17 00:00:00 2001
From: Henrique Dias <hacdias@gmail.com>
Date: Sat, 8 Jul 2017 12:32:25 +0100
Subject: [PATCH] Comments and bugfixes

---
 assets/src/components/Files.vue   | 37 +++++++++++++------------------
 assets/src/components/Listing.vue | 30 +++++++++++++++++++++----
 assets/src/css/styles.css         |  3 +--
 assets/src/utils/buttons.js       |  4 ++--
 4 files changed, 44 insertions(+), 30 deletions(-)

diff --git a/assets/src/components/Files.vue b/assets/src/components/Files.vue
index 4ef96b6a..546e1dab 100644
--- a/assets/src/components/Files.vue
+++ b/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!
diff --git a/assets/src/components/Listing.vue b/assets/src/components/Listing.vue
index 4e22fcec..f6dfbab0 100644
--- a/assets/src/components/Listing.vue
+++ b/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 => {
diff --git a/assets/src/css/styles.css b/assets/src/css/styles.css
index 3f654e0c..3b356c8f 100644
--- a/assets/src/css/styles.css
+++ b/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%;
 }
 
diff --git a/assets/src/utils/buttons.js b/assets/src/utils/buttons.js
index 10206638..bf083ece 100644
--- a/assets/src/utils/buttons.js
+++ b/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 {