new file and dir (no buttons tho)

Former-commit-id: c47d326b86c3f829c7d9be560e2be259b46fd6e6 [formerly 4345eef3cd03012c898b8b96e0cb3a2a7215a206] [formerly 5afc1727a5a35c3b544f65fa518cd78e9155acb5 [formerly 6626398cdfaaa9eba8c127a9fd490bf39e790c7d]]
Former-commit-id: 7355b4d84fbebdb8d7af7f391d104e570183a84b [formerly c23033af68c62c775bfcbcc7daf43d0bc308cf79]
Former-commit-id: 704005d6b1b1f8702ac39cdef636eed6b2f973de

_assets/src/App.vue

@@ -28,10 +28,11 @@
     </nav>
     <main>
       <listing v-if="req.kind === 'listing'"></listing> 
+      <preview v-if="req.kind === 'preview'"></preview> 
     </main>
-
-    <preview v-if="req.kind === 'preview'"></preview> 
     
+    <new-file-prompt v-if="showNewFile" :class="{ active: showNewFile }"></new-file-prompt>
+    <new-dir-prompt v-if="showNewDir" :class="{ active: showNewDir }"></new-dir-prompt>
     <rename-prompt v-if="showRename" :class="{ active: showRename }"></rename-prompt>
     <delete-prompt v-if="showDelete" :class="{ active: showDelete }"></delete-prompt>
     <info-prompt v-if="showInfo" :class="{ active: showInfo }"></info-prompt>
@@ -60,6 +61,8 @@ import DownloadButton from './components/DownloadButton'
 import SwitchButton from './components/SwitchViewButton'
 import MoveButton from './components/MoveButton'
 import MovePrompt from './components/MovePrompt'
+import NewFilePrompt from './components/NewFilePrompt'
+import NewDirPrompt from './components/NewDirPrompt'
 import css from './css.js'
 
 var $ = window.info
@@ -68,6 +71,8 @@ function updateColumnSizes () {
   let columns = Math.floor(document.querySelector('main').offsetWidth / 300)
   let items = css(['#listing.mosaic .item', '.mosaic#listing .item'])
 
+  if (columns === 0) columns = 1
+
   items.style.width = `calc(${100 / columns}% - 1em)`
 }
 
@@ -77,9 +82,35 @@ function resetPrompts () {
   $.showDelete = false
   $.showRename = false
   $.showMove = false
+  $.showNewFile = false
+  $.showNewDir = false
 }
 
-window.addEventListener('keydown', (event) => {
+function showRenameButton () {
+  if ($.req.kind === 'listing') {
+    if ($.selected.length === 1) {
+      return $.user.allowEdit
+    }
+
+    return false
+  }
+
+  return $.user.allowEdit
+}
+
+function showDeleteButton () {
+  if ($.req.kind === 'listing') {
+    if ($.selected.length === 0) {
+      return false
+    }
+
+    return $.user.allowEdit
+  }
+
+  return $.user.allowEdit
+}
+
+function keydown (event) {
   // Esc!
   if (event.keyCode === 27) {
     resetPrompts()
@@ -99,7 +130,9 @@ window.addEventListener('keydown', (event) => {
 
   // Del!
   if (event.keyCode === 46) {
-    $.showDelete = true
+    if (showDeleteButton()) {
+      $.showDelete = true
+    }
   }
 
   // F1!
@@ -110,7 +143,9 @@ window.addEventListener('keydown', (event) => {
 
   // F2!
   if (event.keyCode === 113) {
-    $.showRename = true
+    if (showRenameButton()) {
+      $.showRename = true
+    }
   }
 
   // CTRL + S
@@ -127,7 +162,25 @@ window.addEventListener('keydown', (event) => {
         // TODO: save file on editor!
     }
   }
-})
+}
+
+function startup () {
+  updateColumnSizes()
+  window.addEventListener('resize', updateColumnSizes)
+  window.history.replaceState({
+    url: window.location.pathname,
+    name: document.title
+  }, document.title, window.location.pathname)
+
+  window.addEventListener('keydown', keydown)
+
+  let loading = document.getElementById('loading')
+  loading.classList.add('done')
+
+  setTimeout(function () {
+    loading.parentNode.removeChild(loading)
+  }, 1000)
+}
 
 export default {
   name: 'app',
@@ -146,51 +199,32 @@ export default {
     UploadButton,
     SwitchButton,
     MoveButton,
-    MovePrompt
+    MovePrompt,
+    NewFilePrompt,
+    NewDirPrompt
   },
   mounted: function () {
-    updateColumnSizes()
-    window.addEventListener('resize', updateColumnSizes)
-    window.history.replaceState({
-      url: window.location.pathname,
-      name: document.title
-    }, document.title, window.location.pathname)
-
-    document.getElementById('loading').classList.add('done')
+    startup()
   },
   data: function () {
     return window.info
   },
   methods: {
     showOverlay: function () {
-      return this.showInfo || this.showHelp || this.showDelete || this.showRename || this.showMove
+      return $.showInfo ||
+        $.showHelp ||
+        $.showDelete ||
+        $.showRename ||
+        $.showMove ||
+        $.showNewFile ||
+        $.showNewDir
     },
     showUpload: function () {
       if (this.req.kind === 'editor') return false
       return $.user.allowNew
     },
-    showDeleteButton: function () {
-      if (this.req.kind === 'listing') {
-        if (this.selected.length === 0) {
-          return false
-        }
-
-        return $.user.allowEdit
-      }
-
-      return $.user.allowEdit
-    },
-    showRenameButton: function () {
-      if (this.req.kind === 'listing') {
-        if (this.selected.length === 1) {
-          return $.user.allowEdit
-        }
-
-        return false
-      }
-
-      return $.user.allowEdit
-    },
+    showDeleteButton: showDeleteButton,
+    showRenameButton: showRenameButton,
     showMoveButton: function () {
       if (this.req.kind !== 'listing') {
         return false

_assets/src/components/NewDirPrompt.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="prompt">
+    <h3>New directory</h3>
+    <p>Write the name of the new directory.</p>
+    <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
+    <div>
+      <button class="ok" @click="submit">Create</button>
+      <button class="cancel" @click="cancel">Cancel</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import page from '../page'
+import webdav from '../webdav'
+
+var $ = window.info
+
+export default {
+  name: 'new-dir-prompt',
+  data: function () {
+    return {
+      name: ''
+    }
+  },
+  methods: {
+    cancel: function () {
+      $.showNewDir = false
+    },
+    submit: function (event) {
+      event.preventDefault()
+      if (this.new === '') return
+
+      let url = window.location.pathname + this.name + '/'
+      url = url.replace('//', '/')
+
+      // buttons.setLoading('newDir')
+      webdav.create(url)
+        .then(() => {
+          // buttons.setDone('newDir')
+          page.open(url)
+        })
+        .catch(e => {
+          // buttons.setDone('newDir', false)
+          console.log(e)
+        })
+
+      $.showNewDir = false
+    }
+  }
+}
+</script>
+

_assets/src/components/NewFilePrompt.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="prompt">
+    <h3>New file</h3>
+    <p>Write the name of the new file.</p>
+    <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
+    <div>
+      <button class="ok" @click="submit">Create</button>
+      <button class="cancel" @click="cancel">Cancel</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import page from '../page'
+import webdav from '../webdav'
+
+var $ = window.info
+
+export default {
+  name: 'new-file-prompt',
+  data: function () {
+    return {
+      name: ''
+    }
+  },
+  methods: {
+    cancel: function () {
+      $.showNewFile = false
+    },
+    submit: function (event) {
+      event.preventDefault()
+      if (this.new === '') return
+
+      // buttons.setLoading('newFile')
+      webdav.create(window.location.pathname + this.name)
+        .then(() => {
+          // buttons.setDone('newFile')
+          page.open(window.location.pathname + this.name)
+        })
+        .catch(e => {
+          // buttons.setDone('newFile', false)
+          console.log(e)
+        })
+
+      $.showNewFile = false
+    }
+  }
+}
+</script>
+

_assets/src/components/Search.vue

@@ -123,7 +123,6 @@ export default {
 
       conn.onclose = () => {
         this.$el.classList.remove('ongoing')
-        page.reload()
       }
     }
   }

_assets/src/css/styles.css

@@ -379,11 +379,10 @@ fieldset h3,
 main {
     width: 78%;
     margin-left: 20%;
+    min-height: 1em;
 }
 
 
-
-
 /* * * * * * * * * * * * * * * *
  *            DROPDOWN         *
  * * * * * * * * * * * * * * * */