Updates :D

Former-commit-id: 4aab1964b9462d1fdee92999dd5a7d03f17b4457 [formerly 22352202547980b191886cf29f68ce8e9cc4c39b] [formerly 1a66bae34022092936c2912ea3a323a6984fe7e4 [formerly 1e7c4e6468]]
Former-commit-id: 94170b15369b05e8f4985e88242ba453b5545116 [formerly 2a0b57bebcd48c0189974f4f9e72679b5c67f37b]
Former-commit-id: 635be5ad2826c1659670997900122d024a46de24

_assets/_old/js/listing.js

@@ -80,36 +80,6 @@ listing.addDoubleTapEvent = function () {
   })
 }
 
-listing.selectMoveFolder = function (event) {
-  if (event.target.getAttribute('aria-selected') === 'true') {
-    event.target.setAttribute('aria-selected', false)
-    return
-  } else {
-    if (document.querySelector('.file-list li[aria-selected=true]')) {
-      document.querySelector('.file-list li[aria-selected=true]').setAttribute('aria-selected', false)
-    }
-    event.target.setAttribute('aria-selected', true)
-    return
-  }
-}
-
-listing.getJSON = function (link) {
-  return new Promise((resolve, reject) => {
-    let request = new XMLHttpRequest()
-    request.open('GET', link)
-    request.setRequestHeader('Accept', 'application/json')
-    request.onload = () => {
-      if (request.status == 200) {
-        resolve(request.responseText)
-      } else {
-        reject(request.statusText)
-      }
-    }
-    request.onerror = () => reject(request.statusText)
-    request.send()
-  })
-}
-
 listing.moveMakeItem = function (url, name) {
   let node = document.createElement('li'),
     count = 0
@@ -135,43 +105,6 @@ listing.moveMakeItem = function (url, name) {
   return node
 }
 
-listing.moveDialogNext = function (event) {
-  let request = new XMLHttpRequest(),
-    prompt = document.querySelector('form.prompt.active'),
-    list = prompt.querySelector('div.file-list ul')
-
-  prompt.addEventListener('submit', listing.moveSelected)
-
-  listing.getJSON(event.target.dataset.url)
-    .then((data) => {
-      let dirs = 0
-
-      prompt.querySelector('ul').innerHTML = ''
-      prompt.querySelector('code').innerHTML = event.target.dataset.url
-
-      if (event.target.dataset.url != baseURL + '/') {
-        let node = listing.moveMakeItem(removeLastDirectoryPartOf(event.target.dataset.url) + '/', '..')
-        list.appendChild(node)
-      }
-
-      if (JSON.parse(data) == null) {
-        prompt.querySelector('p').innerHTML = `There aren't any folders in this directory.`
-        return
-      }
-
-      for (let f of JSON.parse(data)) {
-        if (f.IsDir === true) {
-          dirs++
-          list.appendChild(listing.moveMakeItem(f.URL, f.Name))
-        }
-      }
-
-      if (dirs === 0)
-        prompt.querySelector('p').innerHTML = `There aren't any folders in this directory.`
-    })
-    .catch(e => console.log(e))
-}
-
 listing.moveSelected = function (event) {
   event.preventDefault()
 
@@ -203,40 +136,6 @@ listing.moveSelected = function (event) {
     })
 }
 
-listing.moveEvent = function (event) {
-  if (event.currentTarget.classList.contains('disabled'))
-    return
-
-  listing.getJSON(window.location.pathname)
-    .then((data) => {
-      let prompt = document.importNode(templates.move.content, true),
-        list = prompt.querySelector('div.file-list ul'),
-        dirs = 0
-
-      prompt.querySelector('form').addEventListener('submit', listing.moveSelected)
-      prompt.querySelector('code').innerHTML = window.location.pathname
-
-      if (window.location.pathname !== baseURL + '/') {
-        list.appendChild(listing.moveMakeItem(removeLastDirectoryPartOf(window.location.pathname) + '/', '..'))
-      }
-
-      for (let f of JSON.parse(data)) {
-        if (f.IsDir === true) {
-          dirs++
-          list.appendChild(listing.moveMakeItem(f.URL, f.Name))
-        }
-      }
-
-      if (dirs === 0) {
-        prompt.querySelector('p').innerHTML = `There aren't any folders in this directory.`
-      }
-
-      document.body.appendChild(prompt)
-      document.querySelector('.overlay').classList.add('active')
-      document.querySelector('.prompt').classList.add('active')
-    })
-    .catch(e => console.log(e))
-}
 
 document.addEventListener('DOMContentLoaded', event => {
   listing.updateColumns()

_assets/_old/templates/templates.tmpl

@@ -20,25 +20,4 @@
         </div>
     </div>
 </template>
-
-<template id="move-template">
-    <form class="prompt">
-        <h3>Move</h3>
-        <p>Choose new house for your file(s)/folder(s):</p>
-
-        <div class="file-list">
-            <ul>
-            </ul>
-        </div>
-
-        <p>Currently navigating on: <code></code>.</p>
-
-        <div>
-            <button type="submit" autofocus class="ok">Move</button>
-            <button class="cancel" onclick="closePrompt(event);">Cancel</button>
-        </div>
-    </form>
-</template>
-
-
 {{ end }}

_assets/index.html

@@ -43,10 +43,8 @@
       showDelete: false,
       showRename: false,
       showMove: false,
-      listing: {
+      selected: [],
-        selected: [],
+      multiple: false
-        multiple: false
-      }
     }
     </script>
     <div id="app">

_assets/src/App.vue

@@ -7,7 +7,7 @@
       </div>
       <div>
         <rename-button v-show="showRenameButton()"></rename-button>
-        <move-button v-show="showDeleteButton()"></move-button>
+        <move-button v-show="showMoveButton()"></move-button>
         <delete-button v-show="showDeleteButton()"></delete-button>
         <switch-button v-show="req.kind !== 'editor'"></switch-button>
         <download-button></download-button>
@@ -50,6 +50,7 @@
     <rename-prompt v-show="showRename" :class="{ active: showRename }"></rename-prompt>
     <delete-prompt v-show="showDelete" :class="{ active: showDelete }"></delete-prompt>
     <info-prompt v-show="showInfo" :class="{ active: showInfo }"></info-prompt>
+    <move-prompt v-if="showMove" :class="{ active: showMove }"></move-prompt>
     <help v-show="showHelp" :class="{ active: showHelp }"></help>
 
     <div v-show="showOverlay()" @click="resetPrompts" class="overlay" :class="{ active: showOverlay() }"></div>
@@ -73,8 +74,11 @@ import UploadButton from './components/UploadButton'
 import DownloadButton from './components/DownloadButton'
 import SwitchButton from './components/SwitchViewButton'
 import MoveButton from './components/MoveButton'
+import MovePrompt from './components/MovePrompt'
 import css from './css.js'
 
+var $ = window.info
+
 function updateColumnSizes () {
   let columns = Math.floor(document.querySelector('main').offsetWidth / 300)
   let items = css(['#listing.mosaic .item', '.mosaic#listing .item'])
@@ -83,11 +87,11 @@ function updateColumnSizes () {
 }
 
 function resetPrompts () {
-  window.info.showHelp = false
+  $.showHelp = false
-  window.info.showInfo = false
+  $.showInfo = false
-  window.info.showDelete = false
+  $.showDelete = false
-  window.info.showRename = false
+  $.showRename = false
-  window.info.showMove = false
+  $.showMove = false
 }
 
 window.addEventListener('keydown', (event) => {
@@ -96,13 +100,13 @@ window.addEventListener('keydown', (event) => {
     resetPrompts()
 
     // Unselect all files and folders.
-    if (window.info.req.kind === 'listing') {
+    if ($.req.kind === 'listing') {
       let items = document.getElementsByClassName('item')
       Array.from(items).forEach(link => {
         link.setAttribute('aria-selected', false)
       })
 
-      window.info.listing.selected.length = 0
+      $.selected = []
     }
 
     return
@@ -110,18 +114,18 @@ window.addEventListener('keydown', (event) => {
 
   // Del!
   if (event.keyCode === 46) {
-    window.info.showDelete = true
+    $.showDelete = true
   }
 
   // F1!
   if (event.keyCode === 112) {
     event.preventDefault()
-    window.info.showHelp = true
+    $.showHelp = true
   }
 
   // F2!
   if (event.keyCode === 113) {
-    window.info.showRename = true
+    $.showRename = true
   }
 
   // CTRL + S
@@ -130,7 +134,7 @@ window.addEventListener('keydown', (event) => {
       case 's':
         event.preventDefault()
 
-        if (window.info.req.kind !== 'editor') {
+        if ($.req.kind !== 'editor') {
           window.location = '?download=true'
           return
         }
@@ -156,7 +160,8 @@ export default {
     DownloadButton,
     UploadButton,
     SwitchButton,
-    MoveButton
+    MoveButton,
+    MovePrompt
   },
   mounted: function () {
     updateColumnSizes()
@@ -175,29 +180,40 @@ export default {
     },
     showUpload: function () {
       if (this.req.kind === 'editor') return false
-      return this.user.allowNew
+      return $.user.allowNew
     },
     showDeleteButton: function () {
       if (this.req.kind === 'listing') {
-        if (this.listing.selected.length === 0) {
+        if (this.selected.length === 0) {
           return false
         }
 
-        return this.user.allowEdit
+        return $.user.allowEdit
       }
 
-      return this.user.allowEdit
+      return $.user.allowEdit
     },
     showRenameButton: function () {
       if (this.req.kind === 'listing') {
-        if (this.listing.selected.length === 1) {
+        if (this.selected.length === 1) {
-          return this.user.allowEdit
+          return $.user.allowEdit
         }
 
         return false
       }
 
-      return this.user.allowEdit
+      return $.user.allowEdit
+    },
+    showMoveButton: function () {
+      if (this.req.kind !== 'listing') {
+        return false
+      }
+
+      if (this.selected.length > 0) {
+        return $.user.allowEdit
+      }
+
+      return false
     },
     resetPrompts: resetPrompts
   }

_assets/src/components/DeletePrompt.vue

@@ -2,7 +2,7 @@
   <div class="prompt">
     <h3>Delete files</h3>
     <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 {{ listing.selected.length }} file(s)?</p>
+    <p v-show="req.kind === 'listing'">Are you sure you want to delete {{ selected.length }} file(s)?</p>
     <div>
       <button @click="submit" autofocus>Delete</button>
       <button @click="cancel" class="cancel">Cancel</button>
@@ -14,6 +14,8 @@
 import webdav from '../webdav'
 import page from '../page'
 
+var $ = window.info
+
 export default {
   name: 'delete-prompt',
   data: function () {
@@ -21,13 +23,13 @@ export default {
   },
   methods: {
     cancel: function (event) {
-      this.showDelete = false
+      $.showDelete = false
     },
     submit: function (event) {
-      this.showDelete = false
+      $.showDelete = false
       // buttons.setLoading('delete')
 
-      if (this.req.kind !== 'listing') {
+      if ($.req.kind !== 'listing') {
         webdav.trash(window.location.pathname)
           .then(() => {
             // buttons.setDone('delete')
@@ -41,13 +43,13 @@ export default {
         return
       }
 
-      if (this.listing.selected.length === 0) {
+      if ($.selected.length === 0) {
         // This shouldn't happen...
         return
       }
 
-      if (this.listing.selected.length === 1) {
+      if ($.selected.length === 1) {
-        webdav.trash(this.req.data.items[this.listing.selected[0]].url)
+        webdav.trash($.req.data.items[$.selected[0]].url)
           .then(() => {
             // buttons.setDone('delete')
             page.reload()
@@ -63,8 +65,8 @@ export default {
       // More than one item!
       let promises = []
 
-      for (let index of this.listing.selected) {
+      for (let index of $.selected) {
-        promises.push(webdav.trash(this.req.data.items[index].url))
+        promises.push(webdav.trash($.req.data.items[index].url))
       }
 
       Promise.all(promises)

_assets/src/components/InfoPrompt.vue

@@ -2,13 +2,13 @@
     <div class="prompt">
         <h3>File Information</h3>
 
-        <p v-show="listing.selected.length > 1">{{ listing.selected.length }} files selected.</p>
+        <p v-show="selected.length > 1">{{ selected.length }} files selected.</p>
 
-        <p v-show="listing.selected.length < 2"><strong>Display Name:</strong> {{ name() }}</p>
+        <p v-show="selected.length < 2"><strong>Display Name:</strong> {{ name() }}</p>
         <p><strong>Size:</strong> <span id="content_length"></span>{{ humanSize() }}</p>
-        <p v-show="listing.selected.length < 2"><strong>Last Modified:</strong> {{ humanTime() }}</p>
+        <p v-show="selected.length < 2"><strong>Last Modified:</strong> {{ humanTime() }}</p>
 
-        <section v-show="dir() && listing.selected.length === 0">
+        <section v-show="dir() && selected.length === 0">
           <p><strong>Number of files:</strong> {{ req.data.numFiles }}</p>
           <p><strong>Number of directories:</strong> {{ req.data.numDirs }}</p>
         </section>
@@ -37,43 +37,43 @@ export default {
   },
   methods: {
     humanSize: function () {
-      if (this.listing.selected.length === 0 || this.req.kind !== 'listing') {
+      if (this.selected.length === 0 || this.req.kind !== 'listing') {
         return filesize(this.req.data.size)
       }
 
       var sum = 0
 
-      for (let i = 0; i < this.listing.selected.length; i++) {
+      for (let i = 0; i < this.selected.length; i++) {
-        sum += this.req.data.items[this.listing.selected[i]].size
+        sum += this.req.data.items[this.selected[i]].size
       }
 
       return filesize(sum)
     },
     humanTime: function () {
-      if (this.listing.selected.length === 0) {
+      if (this.selected.length === 0) {
         return moment(this.req.data.modified).fromNow()
       }
 
-      return moment(this.req.data.items[this.listing.selected[0]]).fromNow()
+      return moment(this.req.data.items[this.selected[0]]).fromNow()
     },
     name: function () {
-      if (this.listing.selected.length === 0) {
+      if (this.selected.length === 0) {
         return this.req.data.name
       }
 
-      return this.req.data.items[this.listing.selected[0]].name
+      return this.req.data.items[this.selected[0]].name
     },
     dir: function () {
-      if (this.listing.selected.length > 1) {
+      if (this.selected.length > 1) {
         // Don't show when multiple selected.
         return true
       }
 
-      if (this.listing.selected.length === 0) {
+      if (this.selected.length === 0) {
         return this.req.data.isDir
       }
 
-      return this.req.data.items[this.listing.selected[0]].isDir
+      return this.req.data.items[this.selected[0]].isDir
     },
     checksum: function (event, hash) {
       event.preventDefault()
@@ -81,8 +81,8 @@ export default {
       let request = new window.XMLHttpRequest()
       let link
 
-      if (this.listing.selected.length) {
+      if (this.selected.length) {
-        link = this.req.data.items[this.listing.selected[0]].url
+        link = this.req.data.items[this.selected[0]].url
       } else {
         link = window.location.pathname
       }

_assets/src/components/ListingItem.vue

@@ -31,12 +31,11 @@ import webdav from '../webdav.js'
 import page from '../page.js'
 import array from '../array.js'
 
+var $ = window.info
+
 export default {
   name: 'item',
   props: ['name', 'isDir', 'url', 'type', 'size', 'modified', 'index'],
-  data: function () {
-    return window.info.listing
-  },
   methods: {
     icon: function () {
       if (this.isDir) return 'folder'
@@ -99,19 +98,19 @@ export default {
         link.setAttribute('aria-selected', false)
       })
 
-      this.selected.length = 0
+      $.selected = []
       return false
     },
     click: function (event) {
-      if (this.selected.length !== 0) event.preventDefault()
+      if ($.selected.length !== 0) event.preventDefault()
-      if (this.selected.indexOf(this.index) === -1) {
+      if ($.selected.indexOf(this.index) === -1) {
-        if (!event.ctrlKey && !this.multiple) this.unselectAll()
+        if (!event.ctrlKey && !$.multiple) this.unselectAll()
 
         this.$el.setAttribute('aria-selected', true)
-        this.selected.push(this.index)
+        $.selected.push(this.index)
       } else {
         this.$el.setAttribute('aria-selected', false)
-        this.selected = array.remove(this.selected, this.index)
+        $.selected = array.remove($.selected, this.index)
       }
 
       // this.handleSelectionChange()

_assets/src/components/MovePrompt.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="prompt">
+    <h3>Move</h3>
+    <p>Choose new house for your file(s)/folder(s):</p>
+
+    <ul class="file-list">
+      <li @click="select" @dblclick="next" v-for="item in items" :data-url="item.url">{{ item.name }}</li>
+    </ul>
+
+    <p>Currently navigating on: <code>{{ current }}</code>.</p>
+
+    <div>
+      <button class="ok" @click="move">Move</button>
+      <button class="cancel" @click="cancel">Cancel</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import page from '../page'
+
+var $ = window.info
+
+export default {
+  name: 'move-prompt',
+  data: function () {
+    return {
+      items: [],
+      current: window.location.pathname
+    }
+  },
+  mounted: function () {
+    if (window.location.pathname !== $.baseURL + '/') {
+      this.items.push({
+        name: '..',
+        url: page.removeLastDir(window.location.pathname) + '/'
+      })
+    }
+
+    if ($.req.kind === 'listing') {
+      for (let item of $.req.data.items) {
+        if (!item.isDir) continue
+
+        this.items.push({
+          name: item.name,
+          url: item.url
+        })
+      }
+
+      return
+    }
+  },
+  methods: {
+    cancel: function (event) {
+      $.showMove = false
+    },
+    move: function (event) {
+      console.log('Move')
+    },
+    next: function (event) {
+      console.log('Next')
+
+      let url = event.currentTarget.dataset.url
+      this.json(url)
+        .then((data) => {
+          this.current = url
+          this.items = []
+
+          if (url !== $.baseURL + '/') {
+            this.items.push({
+              name: '..',
+              url: page.removeLastDir(url) + '/'
+            })
+          }
+
+          let req = JSON.parse(data)
+          for (let item of req.data.items) {
+            if (!item.isDir) continue
+
+            this.items.push({
+              name: item.name,
+              url: item.url
+            })
+          }
+        })
+        .catch(e => console.log(e))
+    },
+    json: function (url) {
+      return new Promise((resolve, reject) => {
+        let request = new XMLHttpRequest()
+        request.open('GET', url)
+        request.setRequestHeader('Accept', 'application/json')
+        request.onload = () => {
+          if (request.status === 200) {
+            resolve(request.responseText)
+          } else {
+            reject(request.statusText)
+          }
+        }
+        request.onerror = () => reject(request.statusText)
+        request.send()
+      })
+    },
+    select: function (event) {
+      let el = event.currentTarget
+
+      if (el.getAttribute('aria-selected') === 'true') {
+        el.setAttribute('aria-selected', false)
+        return
+      }
+
+      let el2 = this.$el.querySelector('li[aria-selected=true]')
+      if (el2) {
+        el2.setAttribute('aria-selected', false)
+      }
+
+      el.setAttribute('aria-selected', true)
+      return
+    }
+  }
+}
+</script>

_assets/src/components/RenamePrompt.vue

@@ -4,7 +4,7 @@
     <p>Insert a new name for <code>{{ oldName() }}</code>:</p>
     <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
     <div>
-      <button @click="submit" type="submit" autofocus>Rename</button>
+      <button @click="submit" type="submit">Rename</button>
       <button @click="cancel" class="cancel">Cancel</button>
     </div>
   </div>
@@ -33,12 +33,12 @@ export default {
         return $.req.data.name
       }
 
-      if ($.listing.selected.length === 0 || $.listing.selected.length > 1) {
+      if ($.selected.length === 0 || $.selected.length > 1) {
         // This shouldn't happen.
         return
       }
 
-      return $.req.data.items[$.listing.selected[0]].name
+      return $.req.data.items[$.selected[0]].name
     },
     submit: function (event) {
       let oldLink = ''
@@ -47,7 +47,7 @@ export default {
       if ($.req.kind !== 'listing') {
         oldLink = $.req.data.url
       } else {
-        oldLink = $.req.data.items[$.listing.selected[0]].url
+        oldLink = $.req.data.items[$.selected[0]].url
       }
 
       newLink = page.removeLastDir(oldLink) + '/' + this.name
@@ -56,6 +56,10 @@ export default {
 
       webdav.move(oldLink, newLink)
         .then(() => {
+          if ($.req.kind !== 'listing') {
+            page.open(newLink)
+            return
+          }
           // TODO: keep selected after reload?
           page.reload()
           // buttons.setDone('rename')

_assets/src/css/prompts.css

@@ -72,44 +72,44 @@
  *        PROMPT - MOVE        *
  * * * * * * * * * * * * * * * */
 
-.prompt .file-list {
+.file-list {
-    flex-direction: initial;
     max-height: 50vh;
     overflow: auto;
-}
-
-.prompt .file-list ul {
     list-style: none;
     margin: 0;
     padding: 0;
     width: 100%;
 }
 
-.prompt .file-list ul li {
+.file-list li {
     width: 100%;
     user-select: none;
+    border-radius: .2em;
+    padding: .3em;
 }
 
-.prompt .file-list ul li[aria-selected=true] {
+.file-list li[aria-selected=true] {
     background: #2196f3 !important;
     color: #fff !important;
     transition: .1s ease all;
 }
 
-.prompt .file-list ul li:hover {
+.file-list li:hover {
     background-color: #e9eaeb;
     cursor: pointer;
 }
 
-.prompt .file-list ul li:before {
+.file-list li:before {
     content: "folder";
     color: #6f6f6f;
     vertical-align: middle;
-    padding: 0 .25em;
+    line-height: 1.4;
-    line-height: 2em;
+    font-family: 'Material Icons';
+    font-size: 1.75em;
+    margin-right: .25em;
 }
 
-.prompt .file-list ul li[aria-selected=true]:before {
+.file-list li[aria-selected=true]:before {
     color: white;
 }
 

_assets/src/main.js

@@ -17,8 +17,8 @@ window.addEventListener('popstate', (event) => {
   event.stopPropagation()
 
   $.req.kind = ''
-  $.listing.selected.length = 0
+  $.selected = []
-  $.listing.selected.multiple = false
+  $.multiple = false
   // TODO: find a better way to do this. Maybe on app.vue?
   window.info.showHelp = false
   window.info.showInfo = false

_assets/src/page.js

@@ -2,8 +2,8 @@ var $ = window.info
 
 function open (url, history) {
   // Reset info
-  $.listing.selected.length = 0
+  $.selected = []
-  $.listing.selected.multiple = false
+  $.multiple = false
   $.req.kind = ''
 
   let request = new window.XMLHttpRequest()

page.go

@@ -147,7 +147,7 @@ func htmlError(w http.ResponseWriter, code int, err error) (int, error) {
 	if err != nil {
 		return http.StatusInternalServerError, err
 	}
-	return http.StatusOK, nil
+	return 0, nil
 }
 
 const errTemplate = `<!DOCTYPE html>