Download centralized on api.js

_assets/src/components/Sidebar.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav>
+  <nav :class="{active}">
     <router-link class="action" to="/files/" aria-label="My Files" title="My Files">
       <i class="material-icons">folder</i>
       <span>My Files</span>
@@ -48,7 +48,8 @@ export default {
   name: 'sidebar',
   data: () => {
     return {
-      plugins: []
+      plugins: [],
+      active: false
     }
   },
   computed: mapState(['user']),

_assets/src/components/buttons/DownloadButton.vue

@@ -8,20 +8,23 @@
 
 <script>
 import {mapGetters, mapState} from 'vuex'
+import api from '@/utils/api'
 
 export default {
   name: 'download-button',
   computed: {
-    ...mapState(['req']),
+    ...mapState(['req', 'selected']),
     ...mapGetters(['selectedCount'])
   },
   methods: {
     download: function (event) {
       if (this.req.kind !== 'listing') {
-        let url = this.$route.params[0]
-        url = this.$store.state.baseURL + '/api/download/' + url
-        url += '?token=' + this.$store.state.jwt
-        window.open(url)
+        api.download(null, this.$route.path)
+        return
+      }
+
+      if (this.selectedCount === 1) {
+        api.download(null, this.req.items[this.selected[0]].url)
         return
       }
 

_assets/src/components/prompts/Download.vue

@@ -12,6 +12,7 @@
 
 <script>
 import {mapGetters, mapState} from 'vuex'
+import api from '@/utils/api'
 
 export default {
   name: 'download',
@@ -21,24 +22,18 @@ export default {
   },
   methods: {
     download: function (format) {
-      let uri = this.$route.params[0]
-      uri = this.$store.state.baseURL + '/api/download/' + uri
-      uri += `?token=${this.$store.state.jwt}`
-      uri += `&format=${format}`
-
-      if (this.selectedCount > 0) {
-        let files = ''
+      if (this.selectedCount === 0) {
+        api.download(format, this.$route.path)
+      } else {
+        let files = []
 
         for (let i of this.selected) {
-          files += this.req.items[i].url.replace(window.location.pathname, '') + ','
+          files.push(this.req.items[i].url)
         }
 
-        files = files.substring(0, files.length - 1)
-        files = encodeURIComponent(files)
-        uri += `&files=${files}`
+        api.download(format, ...files)
       }
 
-      window.open(uri)
       this.$store.commit('closePrompts')
     }
   }

_assets/src/css/base.css

@@ -122,6 +122,11 @@ main {
         border-top: 1px solid rgba(0, 0, 0, 0.075);
         border-right: 1px solid rgba(0, 0, 0, 0.075);
         box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
+        transition: .2s ease left;
+        left: -16em;
+    }
+    nav.active {
+        left: 0;
     }
     main {
         width: 100%;

_assets/src/utils/api.js

@@ -141,6 +141,32 @@ function search (url, search, onmessage, onclose) {
   conn.onclose = onclose
 }
 
+function download (format, ...files) {
+  let url = `${store.state.baseURL}/api/download`
+
+  if (files.length === 1) {
+    url += removePrefix(files[0]) + '?'
+  } else {
+    let arg = ''
+
+    for (let file of files) {
+      arg += removePrefix(file) + ','
+    }
+
+    arg = arg.substring(0, arg.length - 1)
+    arg = encodeURIComponent(arg)
+    url += `/?files=${arg}&`
+  }
+
+  url += `token=${store.state.jwt}`
+
+  if (format !== null) {
+    url += `&format=${format}`
+  }
+
+  window.open(url)
+}
+
 export default {
   delete: rm,
   fetch,
@@ -148,5 +174,6 @@ export default {
   move,
   put,
   command,
-  search
+  search,
+  download
 }