Improvements

_assets/_old/js/common_old.js

@@ -105,72 +105,6 @@ function logoutEvent (event) {
   }
 }
 
-function deleteOnSingleFile () {
-  closePrompt()
-  buttons.setLoading('delete')
-
-  webdav.delete(window.location.pathname)
-    .then(() => {
-      window.location.pathname = removeLastDirectoryPartOf(window.location.pathname)
-    })
-    .catch(e => {
-      buttons.setDone('delete', false)
-      console.log(e)
-    })
-}
-
-function deleteOnListing () {
-  closePrompt()
-  buttons.setLoading('delete')
-
-  let promises = []
-
-  for (let id of selectedItems) {
-    promises.push(webdav.delete(document.getElementById(id).dataset.url))
-  }
-
-  Promise.all(promises)
-    .then(() => {
-      listing.reload()
-      buttons.setDone('delete')
-    })
-    .catch(e => {
-      console.log(e)
-      buttons.setDone('delete', false)
-    })
-}
-
-// Handles the delete button event
-function deleteEvent (event) {
-  let single = false
-
-  if (!selectedItems.length) {
-    selectedItems = ['placeholder']
-    single = true
-  }
-
-  let clone = document.importNode(templates.question.content, true)
-  clone.querySelector('h3').innerHTML = 'Delete files'
-
-  if (single) {
-    clone.querySelector('form').addEventListener('submit', deleteOnSingleFile)
-    clone.querySelector('p').innerHTML = `Are you sure you want to delete this file/folder?`
-  } else {
-    clone.querySelector('form').addEventListener('submit', deleteOnListing)
-    clone.querySelector('p').innerHTML = `Are you sure you want to delete ${selectedItems.length} file(s)?`
-  }
-
-  clone.querySelector('input').remove()
-  clone.querySelector('.ok').innerHTML = 'Delete'
-
-  document.body.appendChild(clone)
-  document.querySelector('.overlay').classList.add('active')
-  document.querySelector('.prompt').classList.add('active')
-
-  return false
-}
-
-
 /* * * * * * * * * * * * * * * *
  *                             *
  *           BOOTSTRAP         *
@@ -208,6 +142,5 @@ document.addEventListener('DOMContentLoaded', function (event) {
     })
   })
 
-  setupSearch()
   return false
 })

_assets/_old/js/listing.js

@@ -1,84 +1,5 @@
 'use strict'
 
-var listing = {
-  selectMultiple: false,
-  reload: function (callback) {
-    let request = new window.XMLHttpRequest()
-
-    request.open('GET', window.location)
-    request.setRequestHeader('Minimal', 'true')
-    request.send()
-    request.onreadystatechange = function () {
-      if (request.readyState === 4) {
-        if (request.status === 200) {
-          document.querySelector('body main').innerHTML = request.responseText
-          listing.addDoubleTapEvent()
-
-          if (typeof callback === 'function') {
-            callback()
-          }
-        }
-      }
-    }
-  },
-  rename: function (event) {
-    if (!selectedItems.length || selectedItems.length > 1) {
-      return false
-    }
-
-    let item = document.getElementById(selectedItems[0])
-
-    if (item.classList.contains('disabled')) {
-      return false
-    }
-
-    let link = item.dataset.url
-    let field = item.querySelector('.name')
-    let name = field.innerHTML
-
-    let submit = (event) => {
-      event.preventDefault()
-
-      let newName = event.currentTarget.querySelector('input').value
-      let newLink = removeLastDirectoryPartOf(link) + '/' + newName
-
-      closePrompt(event)
-      buttons.setLoading('rename')
-
-      webdav.move(link, newLink).then(() => {
-        listing.reload(() => {
-          newName = btoa(newName)
-          selectedItems = [newName]
-          document.getElementById(newName).setAttribute('aria-selected', true)
-          listing.handleSelectionChange()
-        })
-
-        buttons.setDone('rename')
-      }).catch(error => {
-        field.innerHTML = name
-        buttons.setDone('rename', false)
-        console.log(error)
-      })
-
-      return false
-    }
-
-    let clone = document.importNode(templates.question.content, true)
-    clone.querySelector('h3').innerHTML = 'Rename'
-    clone.querySelector('input').value = name
-    clone.querySelector('.ok').innerHTML = 'Rename'
-    clone.querySelector('form').addEventListener('submit', submit)
-
-    document.querySelector('body').appendChild(clone)
-    document.querySelector('.overlay').classList.add('active')
-    document.querySelector('.prompt').classList.add('active')
-
-    return false
-  },
-  handleFiles: function (files, base) {
-  }
-}
-
 listing.redefineDownloadURLs = function () {
   let files = ''
 
@@ -321,12 +242,6 @@ document.addEventListener('DOMContentLoaded', event => {
   listing.updateColumns()
   listing.addDoubleTapEvent()
 
-  buttons.rename = document.getElementById('rename')
-  buttons.upload = document.getElementById('upload')
-  buttons.new = document.getElementById('new')
-  buttons.download = document.getElementById('download')
-  buttons.move = document.getElementById('move')
-
   document.getElementById('multiple-selection-activate').addEventListener('click', event => {
     listing.selectMultiple = true
     clickOverlay.click()

_assets/src/App.vue

@@ -6,9 +6,9 @@
         <search></search>
       </div>
       <div>
-        <rename-button></rename-button>
-        <move-button></move-button>
-        <delete-button></delete-button>
+        <rename-button v-show="showRenameButton()"></rename-button>
+        <move-button v-show="showDeleteButton()"></move-button>
+        <delete-button v-show="showDeleteButton()"></delete-button>
         <switch-button v-show="req.kind !== 'editor'"></switch-button>
         <download-button></download-button>
         <upload-button v-show="showUpload()"></upload-button>
@@ -47,6 +47,8 @@
         </div>
     </div>
     
+    <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>
     <help v-show="showHelp" :class="{ active: showHelp }"></help>
 
@@ -64,7 +66,9 @@ import Listing from './components/Listing'
 import InfoButton from './components/InfoButton'
 import InfoPrompt from './components/InfoPrompt'
 import DeleteButton from './components/DeleteButton'
+import DeletePrompt from './components/DeletePrompt'
 import RenameButton from './components/RenameButton'
+import RenamePrompt from './components/RenamePrompt'
 import UploadButton from './components/UploadButton'
 import DownloadButton from './components/DownloadButton'
 import SwitchButton from './components/SwitchViewButton'
@@ -146,7 +150,9 @@ export default {
     InfoPrompt,
     Help,
     DeleteButton,
+    DeletePrompt,
     RenameButton,
+    RenamePrompt,
     DownloadButton,
     UploadButton,
     SwitchButton,
@@ -171,6 +177,28 @@ export default {
       if (this.req.kind === 'editor') return false
       return this.user.allowNew
     },
+    showDeleteButton: function () {
+      if (this.req.kind === 'listing') {
+        if (this.listing.selected.length === 0) {
+          return false
+        }
+
+        return this.user.allowEdit
+      }
+
+      return this.user.allowEdit
+    },
+    showRenameButton: function () {
+      if (this.req.kind === 'listing') {
+        if (this.listing.selected.length === 1) {
+          return this.user.allowEdit
+        }
+
+        return false
+      }
+
+      return this.user.allowEdit
+    },
     resetPrompts: resetPrompts
   }
 }

_assets/src/components/DeletePrompt.vue

@@ -0,0 +1,82 @@
+<template>
+  <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>
+    <div>
+      <button @click="submit" autofocus>Delete</button>
+      <button @click="cancel" class="cancel">Cancel</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import webdav from '../webdav'
+import page from '../page'
+
+export default {
+  name: 'delete-prompt',
+  data: function () {
+    return window.info
+  },
+  methods: {
+    cancel: function (event) {
+      this.showDelete = false
+    },
+    submit: function (event) {
+      this.showDelete = false
+      // buttons.setLoading('delete')
+
+      if (this.req.kind !== 'listing') {
+        webdav.trash(window.location.pathname)
+          .then(() => {
+            // buttons.setDone('delete')
+            page.open(page.removeLastDir(window.location.pathname))
+          })
+          .catch(error => {
+            // buttons.setDone('delete', false)
+            console.log(error)
+          })
+
+        return
+      }
+
+      if (this.listing.selected.length === 0) {
+        // This shouldn't happen...
+        return
+      }
+
+      if (this.listing.selected.length === 1) {
+        webdav.trash(this.req.data.items[this.listing.selected[0]].url)
+          .then(() => {
+            // buttons.setDone('delete')
+            page.reload()
+          })
+          .catch(error => {
+            // buttons.setDone('delete', false)
+            console.log(error)
+          })
+
+        return
+      }
+
+      // More than one item!
+      let promises = []
+
+      for (let index of this.listing.selected) {
+        promises.push(webdav.trash(this.req.data.items[index].url))
+      }
+
+      Promise.all(promises)
+        .then(() => {
+          page.reload()
+          // buttons.setDone('delete')
+        })
+        .catch(error => {
+          console.log(error)
+          // buttons.setDone('delete', false)
+        })
+    }
+  }
+}
+</script>

_assets/src/components/RenamePrompt.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="prompt">
+    <h3>Rename</h3>
+    <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="cancel" class="cancel">Cancel</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import page from '../page'
+import webdav from '../webdav'
+
+var $ = window.info
+
+export default {
+  name: 'rename-prompt',
+  data: function () {
+    return {
+      name: ''
+    }
+  },
+  methods: {
+    cancel: function (event) {
+      $.showRename = false
+      this.name = ''
+    },
+    oldName: function () {
+      if ($.req.kind !== 'listing') {
+        return $.req.data.name
+      }
+
+      if ($.listing.selected.length === 0 || $.listing.selected.length > 1) {
+        // This shouldn't happen.
+        return
+      }
+
+      return $.req.data.items[$.listing.selected[0]].name
+    },
+    submit: function (event) {
+      let oldLink = ''
+      let newLink = ''
+
+      if ($.req.kind !== 'listing') {
+        oldLink = $.req.data.url
+      } else {
+        oldLink = $.req.data.items[$.listing.selected[0]].url
+      }
+
+      newLink = page.removeLastDir(oldLink) + '/' + this.name
+
+      // buttons.setLoading('rename')
+
+      webdav.move(oldLink, newLink)
+        .then(() => {
+          // TODO: keep selected after reload?
+          page.reload()
+          // buttons.setDone('rename')
+        }).catch(error => {
+          // buttons.setDone('rename', false)
+          console.log(error)
+        })
+
+      this.name = ''
+      $.showRename = false
+      return
+    }
+  }
+}
+</script>

_assets/src/main.js

@@ -8,10 +8,10 @@ Vue.config.productionTip = false
 
 var $ = (window.info || window.alert('Something is wrong, please refresh!'))
 
-// TODO: keep this here?
-document.title = $.req.name
+// TODO: keep this here? Maybe on app.vue?
+document.title = $.req.data.name
 
-// TODO: keep this here?
+// TODO: keep this here? Maybe on app.vue?
 window.addEventListener('popstate', (event) => {
   event.preventDefault()
   event.stopPropagation()
@@ -19,6 +19,12 @@ window.addEventListener('popstate', (event) => {
   $.req.kind = ''
   $.listing.selected.length = 0
   $.listing.selected.multiple = false
+  // TODO: find a better way to do this. Maybe on app.vue?
+  window.info.showHelp = false
+  window.info.showInfo = false
+  window.info.showDelete = false
+  window.info.showRename = false
+  window.info.showMove = false
 
   let request = new window.XMLHttpRequest()
   request.open('GET', event.state.url, true)

_assets/src/page.js

@@ -16,11 +16,11 @@ function open (url, history) {
 
       if (history) {
         window.history.pushState({
-          name: $.req.name,
+          name: $.req.data.name,
           url: url
-        }, $.req.name, url)
+        }, $.req.data.name, url)
 
-        document.title = $.req.name
+        document.title = $.req.data.name
       }
     } else {
       console.log(request.responseText)