vue updates ^_^

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

_assets/src/App.vue

@@ -11,7 +11,7 @@
         <div id="click-overlay"></div>
     </header>
     <nav id="sidebar">
-      <a class="action" :href="baseURL()">
+      <a class="action" :href="baseURL + '/'">
         <i class="material-icons">folder</i>
         <span>My Files</span>
       </a>
@@ -21,10 +21,10 @@
       </div>
     </nav>
     <main>
-      <listing v-if="Kind == 'listing'"></listing> 
+      <listing v-if="page.kind == 'listing'"></listing> 
     </main>
 
-    <preview v-if="Kind == 'preview'"></preview> 
+    <preview v-if="page.kind == 'preview'"></preview> 
 
     <div class="overlay"></div>
     <!-- TODO: show on listing and allowedit -->
@@ -50,17 +50,24 @@
 import Search from './components/Search'
 import Preview from './components/Preview'
 import Listing from './components/Listing'
+import css from './css.js'
+
+function updateColumnSizes () {
+  let columns = Math.floor(document.querySelector('main').offsetWidth / 300)
+  let items = css(['#listing.mosaic .item', '.mosaic#listing .item'])
+
+  items.style.width = `calc(${100 / columns}% - 1em)`
+}
 
 export default {
   name: 'app',
   components: { Search, Preview, Listing },
-  data: function () {
-    return window.page
+  mounted: function () {
+    updateColumnSizes()
+    window.addEventListener('resize', updateColumnSizes)
   },
-  methods: {
-    baseURL: function () {
-      return window.data.baseURL + '/'
-    }
+  data: function () {
+    return window.info
   }
 }
 </script>

_assets/src/array.js

@@ -0,0 +1,24 @@
+// Removes an element, if exists, from an array
+function removeElement (array, element) {
+  var i = array.indexOf(element)
+  if (i !== -1) {
+    array.splice(i, 1)
+  }
+
+  return array
+}
+
+// Replaces an element inside an array by another
+function replaceElement (array, oldElement, newElement) {
+  var i = array.indexOf(oldElement)
+  if (i !== -1) {
+    array[i] = newElement
+  }
+
+  return array
+}
+
+export default {
+  remove: removeElement,
+  replace: replaceElement
+}

_assets/src/components/Listing.vue

@@ -1,16 +1,20 @@
 <template>
-    <div id="listing" :class="Data.Display">
+    <div id="listing" 
+      :class="data.display" 
+      @drop="drop"
+      @dragenter="dragEnter" 
+      @dragend="dragEnd">
         <div>
             <div class="item header">
                 <div></div>
                 <div>
-                    <p v-bind:class="{ active: Data.Sort === 'name' }" class="name"><span>Name</span>
-                        <a v-if="Data.Sort === 'name' && Data.Order != 'asc'" href="?sort=name&order=asc"><i class="material-icons">arrow_upward</i></a>
+                    <p v-bind:class="{ active: data.sort === 'name' }" class="name"><span>Name</span>
+                        <a v-if="data.sort === 'name' && data.order != 'asc'" href="?sort=name&order=asc"><i class="material-icons">arrow_upward</i></a>
                         <a v-else href="?sort=name&order=desc"><i class="material-icons">arrow_downward</i></a>
                     </p>
 
-                    <p v-bind:class="{ active: Data.Sort === 'size' }" class="size"><span>Size</span>
-                        <a v-if="Data.Sort === 'size' && Data.Order != 'asc'" href="?sort=size&order=asc"><i class="material-icons">arrow_upward</i></a>
+                    <p v-bind:class="{ active: data.sort === 'size' }" class="size"><span>Size</span>
+                        <a v-if="data.sort === 'size' && data.order != 'asc'" href="?sort=size&order=asc"><i class="material-icons">arrow_upward</i></a>
                         <a v-else href="?sort=size&order=desc"><i class="material-icons">arrow_downward</i></a>
                     </p>
 
@@ -19,37 +23,39 @@
             </div>
         </div>
 
-        <h2 v-if="(Data.NumDirs + Data.NumFiles) == 0" class="message">It feels lonely here :'(</h2>
+        <h2 v-if="(data.numDirs + data.numFiles) == 0" class="message">It feels lonely here :'(</h2>
 
-        <h2 v-if="Data.NumDirs !== 0">Folders</h2>
-        <div v-if="Data.NumDirs !== 0">
+        <h2 v-if="data.numDirs > 0">Folders</h2>
+        <div v-if="data.numDirs > 0">
           <item
-            v-for="(item, index) in Data.Items"
-            v-if="item.IsDir"
-            :key="base64(item.Name)"
-            :id="base64(item.Name)"
-            v-bind:name="item.Name"
-            v-bind:isDir="item.IsDir"
-            v-bind:url="item.URL"
-            v-bind:modified="item.ModTime"  
-            v-bind:type="item.Type"
-            v-bind:size="item.Size">
+            v-for="(item, index) in data.items"
+            v-if="item.isDir"
+            :key="base64(item.name)"
+            :id="base64(item.name)"
+            v-bind:selected="selected"
+            v-bind:name="item.name"
+            v-bind:isDir="item.isDir"
+            v-bind:url="item.url"
+            v-bind:modified="item.modified"  
+            v-bind:type="item.type"
+            v-bind:size="item.size">
           </item>
         </div>
 
-        <h2 v-if="Data.NumItems !== 0">Files</h2>
-        <div v-if="Data.NumItems !== 0">
+        <h2 v-if="data.numFiles > 0">Files</h2>
+        <div v-if="data.numFiles > 0">
           <item
-            v-for="(item, index) in Data.Items"
-            v-if="!item.IsDir"
-            :key="base64(item.Name)"
-            :id="base64(item.Name)"
-            v-bind:name="item.Name"
-            v-bind:isDir="item.IsDir"
-            v-bind:modified="item.ModTime"  
-            v-bind:url="item.URL"
-            v-bind:type="item.Type"
-            v-bind:size="item.Size">
+            v-for="(item, index) in data.items"
+            v-if="!item.isDir"
+            :key="base64(item.name)"
+            :id="base64(item.name)"
+            v-bind:selected="selected"
+            v-bind:name="item.name"
+            v-bind:isDir="item.isDir"
+            v-bind:url="item.url"
+            v-bind:modified="item.modified"  
+            v-bind:type="item.type"
+            v-bind:size="item.size">
           </item>
         </div>
 
@@ -61,16 +67,119 @@
 
 <script>
 import Item from './ListingItem'
+import webdav from '../webdav.js'
+import page from '../page.js'
 
 export default {
   name: 'preview',
-  components: { Item },
   data: function () {
-    return window.page
+    return {
+      data: window.info.page.data,
+      selected: [],
+      multiple: false
+    }
+  },
+  components: { Item },
+  mounted: function () {
+    document.addEventListener('dragover', function (event) {
+      event.preventDefault()
+    }, false)
+
+    document.addEventListener('drop', this.drop, false)
+  },
+  beforeUpdate: function () {
+    /*
+      listing.redefineDownloadURLs()
+
+  let selectedNumber = selectedItems.length,
+    fileAction = document.getElementById('file-only')
+
+  if (selectedNumber) {
+    fileAction.classList.remove('disabled')
+
+    if (selectedNumber > 1) {
+      buttons.rename.classList.add('disabled')
+      buttons.info.classList.add('disabled')
+    }
+
+    if (selectedNumber == 1) {
+      buttons.info.classList.remove('disabled')
+      buttons.rename.classList.remove('disabled')
+    }
+
+    return false
+  }
+
+  buttons.info.classList.remove('disabled')
+  fileAction.classList.add('disabled')
+  */
+    console.log('before upding')
   },
   methods: {
     base64: function (name) {
       return window.btoa(name)
+    },
+    dragEnter: function (event) {
+      let items = document.getElementsByClassName('item')
+
+      Array.from(items).forEach(file => {
+        file.style.opacity = 0.5
+      })
+    },
+    dragEnd: function (event) {
+      let items = document.getElementsByClassName('item')
+
+      Array.from(items).forEach(file => {
+        file.style.opacity = 1
+      })
+    },
+    drop: function (event) {
+      event.preventDefault()
+
+      let dt = event.dataTransfer
+      let files = dt.files
+      let el = event.target
+
+      for (let i = 0; i < 5; i++) {
+        if (el !== null && !el.classList.contains('item')) {
+          el = el.parentElement
+        }
+      }
+
+      if (files.length > 0) {
+        if (el !== null && el.classList.contains('item') && el.dataset.dir === 'true') {
+          this.handleFiles(files, el.querySelector('.name').innerHTML + '/')
+          return
+        }
+
+        this.handleFiles(files, '')
+      } else {
+        let items = document.getElementsByClassName('item')
+
+        Array.from(items).forEach(file => {
+          file.style.opacity = 1
+        })
+      }
+    },
+    handleFiles: function (files, base) {
+      // buttons.setLoading('upload')
+      let promises = []
+
+      for (let file of files) {
+        promises.push(webdav.put(window.location.pathname + base + file.name, file))
+      }
+
+      Promise.all(promises)
+      .then(() => {
+        page.reload()
+        // buttons.setDone('upload')
+      })
+      .catch(e => {
+        console.log(e)
+        // buttons.setDone('upload', false)
+      })
+
+      return false
     }
   }
 }

_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)
     }
   }
 }

_assets/src/components/Preview.vue

@@ -1,23 +1,23 @@
 <template>
     <div id="previewer">
         <div class="bar">
-            <button class="action" aria-label="Close Preview" id="close">
+            <button @click="back" class="action" aria-label="Close Preview" id="close">
                 <i class="material-icons">close</i>
             </button>
             <!-- TODO: add more buttons -->
         </div>
 
         <div class="preview">
-            <img v-if="Data.Type == 'image'" :src="raw()">
-            <audio v-else-if="Data.Type == 'audio'" :src="raw()" controls></audio>
-            <video v-else-if="Data.Type == 'video'" :src="raw()" controls>
+            <img v-if="type == 'image'" :src="raw()">
+            <audio v-else-if="type == 'audio'" :src="raw()" controls></audio>
+            <video v-else-if="type == 'video'" :src="raw()" controls>
                 Sorry, your browser doesn't support embedded videos,
                 but don't worry, you can <a href="?download=true">download it</a>
                 and watch it with your favorite video player!
             </video>
-            <object v-else-if="Data.Extension == '.pdf'" class="pdf" :data="raw()"></object>
-            <a v-else-if="Data.Type == 'blob'" href="?download=true"><h2 class="message">Download <i class="material-icons">file_download</i></h2></a>
-            <pre v-else >{{ Data.Content }}</pre>
+            <object v-else-if="extension == '.pdf'" class="pdf" :data="raw()"></object>
+            <a v-else-if="type == 'blob'" href="?download=true"><h2 class="message">Download <i class="material-icons">file_download</i></h2></a>
+            <pre v-else >{{ content }}</pre>
         </div>
     </div>
 </template>
@@ -26,11 +26,14 @@
 export default {
   name: 'preview',
   data: function () {
-    return window.page
+    return window.info.page.data
   },
   methods: {
     raw: function () {
-      return this.Data.URL + '?raw=true'
+      return this.url + '?raw=true'
+    },
+    back: function (event) {
+      window.history.back()
     }
   }
 }

_assets/src/components/Search.vue

@@ -16,7 +16,6 @@
 </template>
 
 <script>
-
 // Remove the last directory of an url
 var removeLastDirectoryPartOf = function (url) {
   var arr = url.split('/')
@@ -26,7 +25,7 @@ var removeLastDirectoryPartOf = function (url) {
   return (arr.join('/'))
 }
 
-var data = window.data
+var user = window.info.user
 var ssl = window.ssl
 
 export default {
@@ -48,8 +47,8 @@ export default {
   },
   methods: {
     reset: function () {
-      if (data.user.AllowCommands && data.user.Commands.length > 0) {
-        this.box.innerHTML = `Search or use one of your supported commands: ${data.user.Commands.join(', ')}.`
+      if (user.allowCommands && user.commands.length > 0) {
+        this.box.innerHTML = `Search or use one of your supported commands: ${user.commands.join(', ')}.`
       } else {
         this.box.innerHTML = 'Type and press enter to search.'
       }
@@ -58,8 +57,8 @@ export default {
       let value = this.input.value
       let pieces = value.split(' ')
 
-      for (let i = 0; i < data.user.Commands.length; i++) {
-        if (pieces[0] === data.user.Commands[0]) {
+      for (let i = 0; i < user.commands.length; i++) {
+        if (pieces[0] === user.commands[0]) {
           return true
         }
       }
@@ -78,7 +77,7 @@ export default {
         return
       }
 
-      if (!this.supported() || !data.user.AllowCommands) {
+      if (!this.supported() || !user.allowCommands) {
         this.box.innerHTML = 'Press enter to search.'
       } else {
         this.box.innerHTML = 'Press enter to execute.'
@@ -96,7 +95,7 @@ export default {
 
       let protocol = ssl ? 'wss:' : 'ws:'
 
-      if (this.supported() && data.user.AllowCommands) {
+      if (this.supported() && user.allowCommands) {
         let conn = new window.WebSocket(`${protocol}//${url}?command=true`)
 
         conn.onopen = () => {

_assets/src/css.js

@@ -0,0 +1,28 @@
+export default function getRule (rules) {
+  for (let i = 0; i < rules.length; i++) {
+    rules[i] = rules[i].toLowerCase()
+  }
+
+  let result = null
+  let find = Array.prototype.find
+
+  find.call(document.styleSheets, styleSheet => {
+    result = find.call(styleSheet.cssRules, cssRule => {
+      let found = false
+
+      if (cssRule instanceof window.CSSStyleRule) {
+        for (let i = 0; i < rules.length; i++) {
+          if (cssRule.selectorText.toLowerCase() === rules[i]) {
+            found = true
+          }
+        }
+      }
+
+      return found
+    })
+
+    return result != null
+  })
+
+  return result
+}

_assets/src/main.js

@@ -2,12 +2,40 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
-
-window.data = (window.data || window.alert('Something is wrong, please refresh!'))
-window.ssl = (window.location.protocol === 'https:')
+// simport page from './page.js'
 
 Vue.config.productionTip = false
 
+window.info = (window.info || window.alert('Something is wrong, please refresh!'))
+window.ssl = (window.location.protocol === 'https:')
+
+// TODO: keep this here?
+document.title = window.info.page.name
+
+// TODO: keep this here?
+window.addEventListener('popstate', (event) => {
+  event.preventDefault()
+  event.stopPropagation()
+
+  window.info.page.kind = ''
+
+  let request = new window.XMLHttpRequest()
+  request.open('GET', event.state.url, true)
+  request.setRequestHeader('Accept', 'application/json')
+
+  request.onload = () => {
+    if (request.status === 200) {
+      window.info.page = JSON.parse(request.responseText)
+      document.title = event.state.name
+    } else {
+      console.log(request.responseText)
+    }
+  }
+
+  request.onerror = (error) => { console.log(error) }
+  request.send()
+})
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

_assets/src/page.js

@@ -0,0 +1,36 @@
+function open (url, history) {
+  window.info.page.kind = ''
+
+  let request = new window.XMLHttpRequest()
+  request.open('GET', url, true)
+  request.setRequestHeader('Accept', 'application/json')
+
+  request.onload = () => {
+    if (request.status === 200) {
+      window.info.page = JSON.parse(request.responseText)
+
+      if (history) {
+        window.history.pushState({
+          name: window.info.page.name,
+          url: url
+        }, window.info.page.name, url)
+
+        document.title = window.info.page.name
+      }
+    } else {
+      console.log(request.responseText)
+    }
+  }
+
+  request.onerror = (error) => { console.log(error) }
+  request.send()
+}
+
+export default {
+  reload: () => {
+    open(window.location.pathname, false)
+  },
+  open: (url) => {
+    open(url, true)
+  }
+}

_assets/src/webdav.js

@@ -0,0 +1,109 @@
+var info = window.info
+
+function convertURL (url) {
+  return window.location.origin + url.replace(info.baseURL + '/', info.webdavURL + '/')
+}
+
+function move (oldLink, newLink) {
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+
+    oldLink = convertURL(oldLink)
+    newLink = newLink.replace(info.baseURL + '/', info.webdavURL + '/')
+    newLink = window.location.origin + newLink.substring(info.baseURL.length)
+
+    request.open('MOVE', oldLink, true)
+    request.setRequestHeader('Destination', newLink)
+    request.onload = () => {
+      if (request.status === 201 || request.status === 204) {
+        resolve()
+      } else {
+        reject(request.statusText)
+      }
+    }
+    request.onerror = () => reject(request.statusText)
+    request.send()
+  })
+}
+
+function put (link, body, headers = {}) {
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+    request.open('PUT', convertURL(link), true)
+
+    for (let key in headers) {
+      request.setRequestHeader(key, headers[key])
+    }
+
+    request.onload = () => {
+      if (request.status === 201) {
+        resolve()
+      } else {
+        reject(request.statusText)
+      }
+    }
+    request.onerror = () => reject(request.statusText)
+    request.send(body)
+  })
+}
+
+function propfind (link, body, headers = {}) {
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+    request.open('PROPFIND', convertURL(link), true)
+
+    for (let key in headers) {
+      request.setRequestHeader(key, headers[key])
+    }
+
+    request.onload = () => {
+      if (request.status < 300) {
+        resolve(request.responseText)
+      } else {
+        reject(request.statusText)
+      }
+    }
+    request.onerror = () => reject(request.statusText)
+    request.send(body)
+  })
+}
+
+function trash (link) {
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+    request.open('DELETE', convertURL(link), true)
+    request.onload = () => {
+      if (request.status === 204) {
+        resolve()
+      } else {
+        reject(request.statusText)
+      }
+    }
+    request.onerror = () => reject(request.statusText)
+    request.send()
+  })
+}
+
+function create (link) {
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+    request.open((link.endsWith('/') ? 'MKCOL' : 'PUT'), convertURL(link), true)
+    request.onload = () => {
+      if (request.status === 201) {
+        resolve()
+      } else {
+        reject(request.statusText)
+      }
+    }
+    request.onerror = () => reject(request.statusText)
+    request.send()
+  })
+}
+
+export default {
+  create: create,
+  trash: trash,
+  propfind: propfind,
+  put: put,
+  move: move
+}