new file and dir (no buttons tho)

2017-06-29 18:55:16 +01:00 · 2017-06-29 18:55:16 +01:00 · 6626398cdf
parent 98a92a3da0
commit 6626398cdf
9 changed files with 292 additions and 198 deletions
--- a/_assets/_old/js/listing.js
+++ b/_assets/_old/js/listing.js
@ -17,20 +17,6 @@ listing.redefineDownloadURLs = function () {
  })
 }

-listing.newFileButton = function (event) {
-  event.preventDefault()
-
-  let clone = document.importNode(templates.question.content, true)
-  clone.querySelector('h3').innerHTML = 'New file'
-  clone.querySelector('p').innerHTML = 'End with a trailing slash to create a dir.'
-  clone.querySelector('.ok').innerHTML = 'Create'
-  clone.querySelector('form').addEventListener('submit', listing.newFilePrompt)
-
-  document.querySelector('body').appendChild(clone)
-  document.querySelector('.overlay').classList.add('active')
-  document.querySelector('.prompt').classList.add('active')
-}
-
 listing.newFilePrompt = function (event) {
  event.preventDefault()
  buttons.setLoading('new')
--- a/_assets/index.html
+++ b/_assets/index.html
@ -1,154 +1,127 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
-    <title>File Manager</title>
-    <link rel="icon" type="image/png" sizes="32x32" href="{{ .BaseURL }}/_/img/icons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="{{ .BaseURL }}/_/img/icons/favicon-16x16.png">
-    <!--[if IE]><link rel="shortcut icon" href="/static/img/icons/favicon.ico"><![endif]-->
-    <!-- Add to home screen for Android and modern mobile browsers -->
-    <link rel="manifest" href="{{ .BaseURL }}/_/manifest.json">
-    <meta name="theme-color" content="#4DBA87">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+  <title>File Manager</title>
+  <link rel="icon" type="image/png" sizes="32x32" href="{{ .BaseURL }}/_/img/icons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="{{ .BaseURL }}/_/img/icons/favicon-16x16.png">
+  <!--[if IE]><link rel="shortcut icon" href="/static/img/icons/favicon.ico"><![endif]-->
+  <!-- Add to home screen for Android and modern mobile browsers -->
+  <link rel="manifest" href="{{ .BaseURL }}/_/manifest.json">
+  <meta name="theme-color" content="#4DBA87">

-    <!-- Add to home screen for Safari on iOS -->
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta name="apple-mobile-web-app-title" content="assets">
-    <link rel="apple-touch-icon" href="{{ .BaseURL }}/_/img/icons/apple-touch-icon-152x152.png">
-    <!-- Add to home screen for Windows -->
-    <meta name="msapplication-TileImage" content="{{ .BaseURL }}/_/img/icons/msapplication-icon-144x144.png">
-    <meta name="msapplication-TileColor" content="#000000">
+  <!-- Add to home screen for Safari on iOS -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="assets">
+  <link rel="apple-touch-icon" href="{{ .BaseURL }}/_/img/icons/apple-touch-icon-152x152.png">
+  <!-- Add to home screen for Windows -->
+  <meta name="msapplication-TileImage" content="{{ .BaseURL }}/_/img/icons/msapplication-icon-144x144.png">
+  <meta name="msapplication-TileColor" content="#000000">

-    <% for (var chunk of webpack.chunks) {
+  <% for (var chunk of webpack.chunks) {
    for (var file of chunk.files) {
-    if (file.match(/\.(js|css)$/)) { %>
-    <link rel="<%= chunk.initial?'preload':'prefetch' %>" href="{{ .BaseURL }}/<%= file.replace('static', '') %>" as="<%= file.match(/\.css$/)?'style':'script' %>"><% }}} %>
+      if (file.match(/\.(js|css)$/)) { %>
+      <link rel="<%= chunk.initial?'preload':'prefetch' %>" href="{{ .BaseURL }}/<%= file.replace('static', '') %>" as="<%= file.match(/\.css$/)?'style':'script' %>"><% }}} %>

-    <style>
-    #loading {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: #fff;
-      z-index: 9999;
+  <style>
+  #loading {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    z-index: 9999;
+    transition: .1s ease opacity;
+    -webkit-transition: .5s ease opacity;
+  }
+
+  #loading.done {
+    opacity: 0;
+  }
+
+  .spinner {
+    width: 70px;
+    text-align: center;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+            transform: translate(-50%, -50%);
+  }
+
+  .spinner > div {
+    width: 18px;
+    height: 18px;
+    background-color: #333;
+    border-radius: 100%;
+    display: inline-block;
+    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  }
+
+  .spinner .bounce1 {
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+  }
+
+  .spinner .bounce2 {
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+  }
+
+  @-webkit-keyframes sk-bouncedelay {
+    0%, 80%, 100% { -webkit-transform: scale(0) }
+    40% { -webkit-transform: scale(1.0) }
+  }
+
+  @keyframes sk-bouncedelay {
+    0%, 80%, 100% { 
+      -webkit-transform: scale(0);
+      transform: scale(0);
+    } 40% { 
+      -webkit-transform: scale(1.0);
+      transform: scale(1.0);
    }
+  }
+  </style>

-    #loading.done {
-      -webkit-animation: 1s out forwards;
-              animation: 1s out forwards;
-    }
-
-    @-webkit-keyframes out {
-      0% {
-        display: block;
-        opacity: 1;
-      }
-      99% {
-        opacity: 0;
-        display: block;
-      }
-      100% {
-        opacity: 0;
-        display: none;
-      }
-    }
-
-    @keyframes out {
-      0% {
-        display: block;
-        opacity: 1;
-      }
-      99% {
-        opacity: 0;
-        display: block;
-      }
-      100% {
-        opacity: 0;
-        display: none;
-      }
-    }
-
-    .spinner {
-      width: 70px;
-      text-align: center;
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      -webkit-transform: translate(-50%, -50%);
-              transform: translate(-50%, -50%);
-    }
-
-    .spinner > div {
-      width: 18px;
-      height: 18px;
-      background-color: #333;
-      border-radius: 100%;
-      display: inline-block;
-      -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-      animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-    }
-
-    .spinner .bounce1 {
-      -webkit-animation-delay: -0.32s;
-      animation-delay: -0.32s;
-    }
-
-    .spinner .bounce2 {
-      -webkit-animation-delay: -0.16s;
-      animation-delay: -0.16s;
-    }
-
-    @-webkit-keyframes sk-bouncedelay {
-      0%, 80%, 100% { -webkit-transform: scale(0) }
-      40% { -webkit-transform: scale(1.0) }
-    }
-
-    @keyframes sk-bouncedelay {
-      0%, 80%, 100% { 
-        -webkit-transform: scale(0);
-        transform: scale(0);
-      } 40% { 
-        -webkit-transform: scale(1.0);
-        transform: scale(1.0);
-      }
-    }
-    </style>
-
-    {{- if ne .User.StyleSheet "" -}}
-    <style>{{ CSS .User.StyleSheet }}</style>
-    {{- end -}}
-  </head>
+  {{- if ne .User.StyleSheet "" -}}
+  <style>{{ CSS .User.StyleSheet }}</style>
+  {{- end -}}
+</head>
 <body>
-<script>
-var info = {
-user: JSON.parse('{{ Marshal .User }}'),
-req: JSON.parse('{{ Marshal . }}'),
-webdavURL: "{{ .WebDavURL }}",
-baseURL: "{{.BaseURL}}",
-ssl: (window.location.protocol === 'https:'),
-showInfo: false,
-showHelp: false,
-showDelete: false,
-showRename: false,
-showMove: false,
-selected: [],
-multiple: false
-}
-</script>
-<div id="app"></div>
-<div id="loading">
+  <script>
+  var info = {
+    user: JSON.parse('{{ Marshal .User }}'),
+    req: JSON.parse('{{ Marshal . }}'),
+    webdavURL: "{{ .WebDavURL }}",
+    baseURL: "{{.BaseURL}}",
+    ssl: (window.location.protocol === 'https:'),
+    showInfo: false,
+    showHelp: false,
+    showDelete: false,
+    showRename: false,
+    showMove: false,
+    showNewFile: false,
+    showNewDir: false,
+    selected: [],
+    multiple: false
+  }
+  </script>
+  <div id="app"></div>

-<div class="spinner">
-<div class="bounce1"></div>
-<div class="bounce2"></div>
-<div class="bounce3"></div>
-</div>
-</div>
+  <div id="loading">
+    <div class="spinner">
+      <div class="bounce1"></div>
+      <div class="bounce2"></div>
+      <div class="bounce3"></div>
+    </div>
+  </div>

-<%= htmlWebpackPlugin.options.serviceWorkerLoader %>
+  <%= htmlWebpackPlugin.options.serviceWorkerLoader %>
 </body>
 </html>
--- a/_assets/src/App.vue
+++ b/_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
--- a/_assets/src/components/NewDirPrompt.vue
+++ b/_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>
+
--- a/_assets/src/components/NewFilePrompt.vue
+++ b/_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>
+
--- a/_assets/src/components/Search.vue
+++ b/_assets/src/components/Search.vue
@ -123,7 +123,6 @@ export default {

      conn.onclose = () => {
        this.$el.classList.remove('ongoing')
-        page.reload()
      }
    }
  }
--- a/_assets/src/css/styles.css
+++ b/_assets/src/css/styles.css
@ -379,11 +379,10 @@ fieldset h3,
 main {
    width: 78%;
    margin-left: 20%;
+    min-height: 1em;
 }


-
-
 /* * * * * * * * * * * * * * * *
 *            DROPDOWN         *
 * * * * * * * * * * * * * * * */
--- a/_assets/src/fonts/material/icons.woff2
+++ b/_assets/src/fonts/material/icons.woff2
--- a/filemanager.go
+++ b/filemanager.go
@ -106,8 +106,8 @@ func New(scope string) *FileManager {
 		Users:      map[string]*User{},
 		BeforeSave: func(r *http.Request, m *FileManager, u *User) error { return nil },
 		AfterSave:  func(r *http.Request, m *FileManager, u *User) error { return nil },
-		static:     http.FileServer(rice.MustFindBox("./_assets/dist_build/_").HTTPBox()),
-		templates:  rice.MustFindBox("./_assets/dist_build/templates"),
+		static:     http.FileServer(rice.MustFindBox("./_assets/dist_dev/_").HTTPBox()),
+		templates:  rice.MustFindBox("./_assets/dist_dev/templates"),
 	}

 	m.SetScope(scope, "")