updates

_assets/_old/js/listing.js

@@ -82,33 +82,9 @@ listing.addDoubleTapEvent = function () {
 
 
 document.addEventListener('DOMContentLoaded', event => {
-  listing.updateColumns()
   listing.addDoubleTapEvent()
-
-  document.getElementById('multiple-selection-activate').addEventListener('click', event => {
-    listing.selectMultiple = true
-    clickOverlay.click()
-
-    document.getElementById('multiple-selection').classList.add('active')
-    document.querySelector('body').style.paddingBottom = '4em'
-  })
-
-  document.getElementById('multiple-selection-cancel').addEventListener('click', event => {
-    listing.selectMultiple = false
-
-    document.querySelector('body').style.paddingBottom = '0'
-    document.getElementById('multiple-selection').classList.remove('active')
-  })
-
-  if (user.AllowEdit) {
-    buttons.move.addEventListener('click', listing.moveEvent)
-    buttons.rename.addEventListener('click', listing.rename)
-  }
-
-  let items = document.getElementsByClassName('item')
-
+  
   if (user.AllowNew) {
-
     buttons.new.addEventListener('click', listing.newFileButton)    
   }
 })

_assets/build/config.js

@@ -6,10 +6,10 @@ module.exports = {
     env: {
       NODE_ENV: '"production"'
     },
-    index: path.resolve(__dirname, '../dist/index.html'),
+    index: path.resolve(__dirname, '../dist/templates/index.html'),
     assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsSubDirectory: '_',
+    assetsPublicPath: '{{ .BaseURL }}',
     productionSourceMap: true,
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.

_assets/build/service-worker-prod.js

@@ -16,7 +16,7 @@
   window.addEventListener('load', function() {
       if ('serviceWorker' in navigator &&
           (window.location.protocol === 'https:' || isLocalhost)) {
-        navigator.serviceWorker.register('service-worker.js')
+        navigator.serviceWorker.register('{{ .BaseURL }}/_/service-worker.js')
         .then(function(registration) {
           // updatefound is fired if service-worker.js changes.
           registration.onupdatefound = function() {

_assets/build/webpack.prod.conf.js

@@ -58,7 +58,8 @@ var webpackConfig = merge(baseWebpackConfig, {
       minify: {
         removeComments: true,
         collapseWhitespace: true,
-        removeAttributeQuotes: true
+        removeAttributeQuotes: true,
+        minifyCSS: true
         // more options:
         // https://github.com/kangax/html-minifier#options-quick-reference
       },

_assets/index.html

@@ -20,38 +20,135 @@
     <!-- 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 file of chunk.files) {
-          if (file.match(/\.(js|css)$/)) { %>
+    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' %>"><% }}} %>
-  
-    
+
+    <style>
+    #loading {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: #fff;
+      z-index: 9999;
+    }
+
+    #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>
-  <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">
-      <!-- TODO: loading -->
-      This is your fallback content in case JavaScript fails to load.
-    </div>
-    
-    <%= htmlWebpackPlugin.options.serviceWorkerLoader %>
-  </body>
+<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">
+
+<div class="spinner">
+<div class="bounce1"></div>
+<div class="bounce2"></div>
+<div class="bounce3"></div>
+</div>
+</div>
+
+<%= htmlWebpackPlugin.options.serviceWorkerLoader %>
+</body>
 </html>

_assets/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div id="app" :class="{ multiple }">
     <header>
       <div>
         <img src="./assets/logo.svg" alt="File Manager">
@@ -31,21 +31,6 @@
     </main>
 
     <preview v-if="req.kind === 'preview'"></preview> 
-
-    <!-- TODO: show on listing and allowedit -->
-    <div class="floating">
-        <div tabindex="0" role="button" class="action" id="new">
-            <i class="material-icons" title="New file or directory">add</i>
-        </div>
-    </div>
-
-    <!-- TODO ??? -->
-     <div id="multiple-selection" class="mobile-only">
-        <p>Multiple selection enabled</p>
-        <div tabindex="0" role="button" class="action" id="multiple-selection-cancel">
-            <i class="material-icons" title="Clear">clear</i>
-        </div>
-    </div>
     
     <rename-prompt v-if="showRename" :class="{ active: showRename }"></rename-prompt>
     <delete-prompt v-if="showDelete" :class="{ active: showDelete }"></delete-prompt>
@@ -170,6 +155,8 @@ export default {
       url: window.location.pathname,
       name: document.title
     }, document.title, window.location.pathname)
+
+    document.getElementById('loading').classList.add('done')
   },
   data: function () {
     return window.info

_assets/src/components/Listing.vue

@@ -58,6 +58,20 @@
         </div>
 
         <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" value="Upload" multiple>
+
+        <!-- TODO: show on listing and allowedit -->
+        <div class="floating">
+        <div tabindex="0" role="button" class="action" id="new">
+        <i class="material-icons" title="New file or directory">add</i>
+        </div>
+        </div>
+
+        <div v-show="multiple" :class="{ active: multiple }" id="multiple-selection">
+          <p>Multiple selection enabled</p>
+          <div @click="cancelMultiple" tabindex="0" role="button" title="Clear" aria-label="Clear" class="action">
+            <i class="material-icons" title="Clear">clear</i>
+          </div>
+        </div>
     </div>
 </template>
 
@@ -66,6 +80,8 @@ import Item from './ListingItem'
 import webdav from '../webdav.js'
 import page from '../page.js'
 
+var $ = window.info
+
 export default {
   name: 'listing',
   data: function () {
@@ -111,6 +127,9 @@ export default {
     base64: function (name) {
       return window.btoa(name)
     },
+    cancelMultiple: function () {
+      $.multiple = false
+    },
     dragEnter: function (event) {
       let items = document.getElementsByClassName('item')
 

_assets/src/css/listing.css

@@ -1,9 +1,3 @@
-
-
-/* * * * * * * * * * * * * * * *
- *            LISTING          *
- * * * * * * * * * * * * * * * */
-
 #listing {
     max-width: calc(100% - 1.2em);
     width: 100%;
@@ -81,11 +75,6 @@
     vertical-align: middle;
 }
 
-
-/* * * * * * * * * * * * * * * *
- *        LISTING - MOSAIC     *
- * * * * * * * * * * * * * * * */
-
 #listing.mosaic {
     padding-top: 1em;
 }
@@ -114,11 +103,6 @@
     width: calc(100% - 5vw);
 }
 
-
-/* * * * * * * * * * * * * * * *
-  *        LISTING - DETAIL     *
-  * * * * * * * * * * * * * * * */
-
 #listing.list {
     flex-direction: column;
     padding-top: 3.25em;
@@ -240,4 +224,28 @@
 
 #listing.list .item.header .active {
     font-weight: bold;
-}
+}
+
+#listing #multiple-selection {
+    position: fixed;
+    bottom: -4em;
+    left: 0;
+    z-index: 99999;
+    width: 100%;
+    background-color: #2196f3;
+    height: 4em;
+    display: flex !important;
+    padding: 0.5em 0.5em 0.5em 1em;
+    justify-content: space-between;
+    align-items: center;
+    transition: .2s ease bottom;
+}
+
+#listing #multiple-selection.active {
+    bottom: 0;
+}
+
+#listing #multiple-selection p,
+#listing #multiple-selection i {
+    color: #fff;
+}

_assets/src/css/styles.css

@@ -78,6 +78,14 @@ i.spin {
 }
 
 
+#app {
+    transition: .2s ease padding;
+}
+
+#app.multiple {
+    padding-bottom: 4em;
+}
+
 /* * * * * * * * * * * * * * * *
  *            EDITOR           *
  * * * * * * * * * * * * * * * */
@@ -500,37 +508,6 @@ main {
 }
 
 
-/* * * * * * * * * * * * * * * *
- *  MULTIPLE SELECTION DIALOG  *
- * * * * * * * * * * * * * * * */
-
-#multiple-selection {
-    position: fixed;
-    bottom: -4em;
-    left: 0;
-    z-index: 99999999;
-    width: 100%;
-    background-color: #2196f3;
-    height: 4em;
-    display: flex !important;
-    padding: 0.5em 0.5em 0.5em 1em;
-    justify-content: space-between;
-    align-items: center;
-    transition: .2s ease all;
-}
-
-#multiple-selection.active {
-    bottom: 0;
-}
-
-#multiple-selection * {
-    margin: 0;
-}
-
-#multiple-selection p,
-#multiple-selection i {
-    color: #fff;
-}
 
 
 /* * * * * * * * * * * * * * * *

cmd/filemanager/main.go

@@ -27,5 +27,5 @@ func main() {
 	m.SetBaseURL("/vaca")
 	m.Commands = []string{"git"}
 	http.HandleFunc("/", handler)
-	http.ListenAndServe(":8080", nil)
+	http.ListenAndServe(":80", nil)
 }

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_dev/_").HTTPBox()),
-		templates:  rice.MustFindBox("./_assets/dist_dev/templates"),
+		static:     http.FileServer(rice.MustFindBox("./_assets/dist_build/_").HTTPBox()),
+		templates:  rice.MustFindBox("./_assets/dist_build/templates"),
 	}
 
 	m.SetScope(scope, "")