Updates and more features

Former-commit-id: 9f1f09311813203910d5b323ba80712553ee2741 [formerly 0be00be1de305d786affc6bf0886aed9b20fbc51] [formerly 04597463117e94830b24b87faaaccf3d35284427 [formerly 3f2dc3f1c56a7a636a836d36b94c052f55f32d93]]
Former-commit-id: 8d26cc1d96faed73c7974ea7e5e78bf268af3ad9 [formerly a083ac8f68c90a636843c3565bd349657c0ec383]
Former-commit-id: ef10f3b3c388d65ceac40785b45dbac190a6cc99

_assets/src/components/DeleteButton.vue

@@ -1,8 +1,8 @@
 <template>
-    <button @click="show" aria-label="Delete"  title="Delete" class="action">
-        <i class="material-icons">delete</i>
-        <span>Delete</span>
-    </button>
+  <button @click="show" aria-label="Delete"  title="Delete" class="action">
+    <i class="material-icons">delete</i>
+    <span>Delete</span>
+  </button>
 </template>
 
 <script>

_assets/src/components/DeletePrompt.vue

@@ -1,30 +1,33 @@
 <template>
   <div class="prompt">
     <h3>Delete files</h3>
-    <p v-show="$store.state.req.kind !== 'listing'">Are you sure you want to delete this file/folder?</p>
-    <p v-show="$store.state.req.kind === 'listing'">Are you sure you want to delete {{ $store.getters.selectedCount }} file(s)?</p>
+    <p v-show="req.kind !== 'listing'">Are you sure you want to delete this file/folder?</p>
+    <p v-show="req.kind === 'listing'">Are you sure you want to delete {{ selectedCount }} file(s)?</p>
     <div>
       <button @click="submit" autofocus>Delete</button>
-      <button @click="cancel" class="cancel">Cancel</button>
+      <button @click="showDelete(false)" class="cancel">Cancel</button>
     </div>
   </div>
 </template>
 
 <script>
-import webdav from '../webdav'
-import page from '../page'
+import {mapGetters, mapMutations, mapState} from 'vuex'
+import webdav from '../utils/webdav'
+import page from '../utils/page'
 
 export default {
   name: 'delete-prompt',
+  computed: {
+    ...mapGetters(['selectedCount']),
+    ...mapState(['req', 'selected'])
+  },
   methods: {
-    cancel: function (event) {
-      this.$store.commit('showDelete', false)
-    },
+    ...mapMutations(['showDelete']),
     submit: function (event) {
-      this.$store.commit('showDelete', false)
+      this.showDelete(false)
       // buttons.setLoading('delete')
 
-      if (this.$store.state.req.kind !== 'listing') {
+      if (this.req.kind !== 'listing') {
         webdav.trash(window.location.pathname)
           .then(() => {
             // buttons.setDone('delete')
@@ -38,13 +41,13 @@ export default {
         return
       }
 
-      if (this.$store.getters.selectedCount === 0) {
+      if (this.selectedCount === 0) {
         // This shouldn't happen...
         return
       }
 
-      if (this.$store.getters.selectedCount === 1) {
-        webdav.trash(this.$store.state.req.data.items[this.$store.state.selected[0]].url)
+      if (this.selectedCount === 1) {
+        webdav.trash(this.req.data.items[this.selected[0]].url)
           .then(() => {
             // buttons.setDone('delete')
             page.reload()
@@ -60,8 +63,8 @@ export default {
       // More than one item!
       let promises = []
 
-      for (let index of this.$store.state.selected) {
-        promises.push(webdav.trash(this.$store.state.req.data.items[index].url))
+      for (let index of this.selected) {
+        promises.push(webdav.trash(this.req.data.items[index].url))
       }
 
       Promise.all(promises)

_assets/src/components/DownloadButton.vue

@@ -1,38 +1,28 @@
 <template>
-    <button @click="download" aria-label="Download" title="Download" class="action">
-        <i class="material-icons">file_download</i>
-        <span>Download</span>
-        <span v-if="count() > 0" class="counter">{{ count() }}</span>
-    </button>
+  <button @click="download" aria-label="Download" title="Download" class="action">
+    <i class="material-icons">file_download</i>
+    <span>Download</span>
+    <span v-if="selectedCount > 0" class="counter">{{ selectedCount }}</span>
+  </button>
 </template>
 
 <script>
-var $ = window.info
+import {mapGetters, mapState} from 'vuex'
 
 export default {
   name: 'download-button',
+  computed: {
+    ...mapState(['req']),
+    ...mapGetters(['selectedCount'])
+  },
   methods: {
-    count: function () {
-      return this.$store.getters.selectedCount
-    },
     download: function (event) {
-      if ($.req.kind !== 'listing') {
-        window.location = window.location.pathname + '?download=true'
+      if (this.req.kind !== 'listing') {
+        window.open(`${window.location.pathname}?download=true`)
         return
       }
 
-      /*
-           <ul class="dropdown" id="download-drop">
-            <a tabindex="0" aria-label="Download as Zip" data-format="zip" href="?download=zip"><li>zip</li></a>
-            <a tabindex="0" aria-label="Download as Tar" data-format="tar" href="?download=tar"><li>tar</li></a>
-            <a tabindex="0" aria-label="Download as TarGz" data-format="targz" href="?download=targz"><li>tar.gz</li></a>
-            <a tabindex="0" aria-label="Download as TarBz2" data-format="tarbz2" href="?download=tarbz2"><li>tar.bz2</li></a>
-            <a tabindex="0" aria-label="Download as TarXz" data-format="tarbz2" href="?download=tarxz"><li>tar.xz</li></a>
-        </ul>
-        */
-      // document.getElementById('upload-input').click()
-      // TODO
-      alert('Not Implemented!')
+      this.$store.commit('showDownload', true)
     }
   }
 }

_assets/src/components/DownloadPrompt.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="prompt" id="download">
+    <h3>Download files</h3>
+    <p>Choose the format you want to download.</p>
+    <button @click="download('zip')" autofocus>zip</button>
+    <button @click="download('tar')" autofocus>tar</button>
+    <button @click="download('targz')" autofocus>tar.gz</button>
+    <button @click="download('tarbz2')" autofocus>tar.bz2</button>
+    <button @click="download('tarxz')" autofocus>tar.xz</button>
+  </div>
+</template>
+
+<script>
+import {mapGetters, mapState} from 'vuex'
+
+export default {
+  name: 'download-prompt',
+  computed: {
+    ...mapState(['selected', 'req']),
+    ...mapGetters(['selectedCount'])
+  },
+  methods: {
+    download: function (format) {
+      let uri = `${window.location.pathname}?download=${format}`
+
+      if (this.selectedCount > 0) {
+        let files = ''
+
+        for (let i of this.selected) {
+          files += this.req.data.items[i].url.replace(window.location.pathname, '') + ','
+        }
+
+        files = files.substring(0, files.length - 1)
+        files = encodeURIComponent(files)
+        uri += `&files=${files}`
+      }
+
+      window.open(uri)
+    }
+  }
+}
+</script>

_assets/src/components/InfoPrompt.vue

@@ -27,6 +27,7 @@
 </template>
 
 <script>
+import {mapState} from 'vuex'
 import filesize from 'filesize'
 import moment from 'moment'
 
@@ -35,6 +36,7 @@ export default {
   data: function () {
     return window.info
   },
+  computed: mapState(['req', 'selected']),
   methods: {
     humanSize: function () {
       if (this.selected.length === 0 || this.req.kind !== 'listing') {

_assets/src/components/Listing.vue

@@ -1,8 +1,8 @@
 <template>
-    <div id="listing" 
-      :class="req.data.display" 
+    <div id="listing"
+      :class="req.data.display"
       @drop="drop"
-      @dragenter="dragEnter" 
+      @dragenter="dragEnter"
       @dragend="dragEnd">
         <div>
             <div class="item header">
@@ -35,7 +35,7 @@
             v-bind:name="item.name"
             v-bind:isDir="item.isDir"
             v-bind:url="item.url"
-            v-bind:modified="item.modified"  
+            v-bind:modified="item.modified"
             v-bind:type="item.type"
             v-bind:size="item.size">
           </item>
@@ -51,14 +51,14 @@
             v-bind:name="item.name"
             v-bind:isDir="item.isDir"
             v-bind:url="item.url"
-            v-bind:modified="item.modified"  
+            v-bind:modified="item.modified"
             v-bind:type="item.type"
             v-bind:size="item.size">
           </item>
         </div>
 
         <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" value="Upload" multiple>
-        
+
         <div v-show="$store.state.multiple" :class="{ active: $store.state.multiple }" id="multiple-selection">
           <p>Multiple selection enabled</p>
           <div @click="$store.commit('multiple', false)" tabindex="0" role="button" title="Clear" aria-label="Clear" class="action">
@@ -70,8 +70,8 @@
 
 <script>
 import Item from './ListingItem'
-import webdav from '../webdav.js'
-import page from '../page.js'
+import webdav from '../utils/webdav'
+import page from '../utils/page'
 
 export default {
   name: 'listing',

_assets/src/components/ListingItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="item" 
+    <div class="item"
         draggable="true"
         @dragstart="dragStart"
         @dragover="dragOver"
@@ -28,8 +28,8 @@
 import { mapMutations, mapGetters } from 'vuex'
 import filesize from 'filesize'
 import moment from 'moment'
-import webdav from '../webdav.js'
-import page from '../page.js'
+import webdav from '../utils/webdav.js'
+import page from '../utils/page.js'
 
 export default {
   name: 'item',

_assets/src/components/MovePrompt.vue

@@ -17,8 +17,8 @@
 </template>
 
 <script>
-import page from '../page'
-import webdav from '../webdav'
+import page from '../utils/page'
+import webdav from '../utils/webdav'
 
 var $ = window.info
 

_assets/src/components/NewDirPrompt.vue

@@ -11,8 +11,8 @@
 </template>
 
 <script>
-import page from '../page'
-import webdav from '../webdav'
+import page from '../utils/page'
+import webdav from '../utils/webdav'
 
 export default {
   name: 'new-dir-prompt',

_assets/src/components/NewFilePrompt.vue

@@ -11,8 +11,8 @@
 </template>
 
 <script>
-import page from '../page'
-import webdav from '../webdav'
+import page from '../utils/page'
+import webdav from '../utils/webdav'
 
 export default {
   name: 'new-file-prompt',

_assets/src/components/Preview.vue

@@ -4,7 +4,7 @@
             <button @click="back" class="action" aria-label="Close Preview" id="close">
                 <i class="material-icons">close</i>
             </button>
-            
+
             <rename-button v-if="allowEdit()"></rename-button>
             <delete-button v-if="allowEdit()"></delete-button>
             <download-button></download-button>
@@ -27,7 +27,7 @@
 </template>
 
 <script>
-import page from '../page'
+import page from '../utils/page'
 import InfoButton from './InfoButton'
 import DeleteButton from './DeleteButton'
 import RenameButton from './RenameButton'

_assets/src/components/RenamePrompt.vue

@@ -11,8 +11,8 @@
 </template>
 
 <script>
-import page from '../page'
-import webdav from '../webdav'
+import page from '../utils/page'
+import webdav from '../utils/webdav'
 
 var $ = window.info
 

_assets/src/components/Search.vue

@@ -7,7 +7,7 @@
       v-on:blur="focus = false"
       v-on:keyup="keyup"
       v-on:keyup.enter="submit"
-      aria-label="Write here to search" 
+      aria-label="Write here to search"
       :placeholder="placeholder()">
     <div v-on:mouseover="hover = true">
       <div>
@@ -26,7 +26,7 @@
 
 <script>
 import { mapState } from 'vuex'
-import page from '../page'
+import page from '../utils/page'
 
 export default {
   name: 'search',

_assets/src/components/SwitchViewButton.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import page from '../page'
+import page from '../utils/page'
 
 export default {
   name: 'switch-button',