vue updates ^_^

Former-commit-id: 336b37cf681ec2337a1e4d577213aa45f12b81d6 [formerly d8cbb6ff242f9ab3e5c857da6f6758abb0f4fc1a] [formerly 8b9089c816fae3608bf5ef8592cb776fa420a6f6 [formerly e2077efbc6]]
Former-commit-id: 30b063fdab7de6f2c1c5f46dd8a1dd354897f5b6 [formerly 8f83b525334b9430ddbe779c6eae3251a5590b75]
Former-commit-id: bbe19a047d103531a542bebb1fe0263bec4cbd88

_assets/src/components/ListingItem.vue

@@ -1,9 +1,12 @@
 <template>
     <div class="item" 
         draggable="true"
-        :id="base64()"
-        :data-dir="isDir" 
-        :data-url="url" >
+        @dragstart="dragStart"
+        @dragover="dragOver"
+        @drop="drop"
+        @click="click"
+        @dblclick="open"
+        :id="base64()">
         <div>
             <i class="material-icons">{{ icon() }}</i>
         </div>
@@ -24,10 +27,13 @@
 <script>
 import filesize from 'filesize'
 import moment from 'moment'
+import webdav from '../webdav.js'
+import page from '../page.js'
+import array from '../array.js'
 
 export default {
   name: 'item',
-  props: ['name', 'isDir', 'url', 'type', 'size', 'modified'],
+  props: ['name', 'isDir', 'url', 'type', 'size', 'modified', 'selected'],
   methods: {
     icon: function () {
       if (this.isDir) return 'folder'
@@ -44,6 +50,76 @@ export default {
     },
     base64: function () {
       return window.btoa(this.name)
+    },
+    dragStart: function (event) {
+      let el = event.target
+
+      for (let i = 0; i < 5; i++) {
+        if (!el.classList.contains('item')) {
+          el = el.parentElement
+        }
+      }
+
+      event.dataTransfer.setData('name', el.querySelector('.name').innerHTML)
+      event.dataTransfer.setData('obj-url', this.url)
+    },
+    dragOver: function (event) {
+      if (!this.isDir) return
+
+      event.preventDefault()
+      let el = event.target
+
+      for (let i = 0; i < 5; i++) {
+        if (!el.classList.contains('item')) {
+          el = el.parentElement
+        }
+      }
+
+      el.style.opacity = 1
+    },
+    drop: function (event) {
+      if (!this.isDir) return
+      event.preventDefault()
+
+      let url = event.dataTransfer.getData('obj-url')
+      let name = event.dataTransfer.getData('name')
+
+      if (name === '' || url === '' || url === this.url) return
+
+      webdav.move(url, this.url + name)
+        .then(() => page.reload())
+        .catch(error => console.log(error))
+    },
+    unselectAll: function () {
+      let items = document.getElementsByClassName('item')
+      Array.from(items).forEach(link => {
+        link.setAttribute('aria-selected', false)
+      })
+
+      this.selected.length = 0
+
+      // listing.handleSelectionChange()
+      return false
+    },
+    click: function (event) {
+      let el = event.currentTarget
+
+      if (this.selected.length !== 0) event.preventDefault()
+      if (this.selected.indexOf(el.id) === -1) {
+        if (!event.ctrlKey && !this.multiple) this.unselectAll()
+
+        el.setAttribute('aria-selected', true)
+        this.selected.push(el.id)
+      } else {
+        el.setAttribute('aria-selected', false)
+        this.selected = array.remove(this.selected, el.id)
+      }
+
+      // this.handleSelectionChange()
+      return false
+    },
+    open: function (event) {
+      page.open(this.url)
     }
   }
 }