Improvements :)

Former-commit-id: c1c1881302a241fdc7140e6aabeb9b49977bd7c6 [formerly 84bb454c2f34baffd9dfa91645b8aff149e52620] [formerly 29e258c7a16db1ca8a3fde7c5e4e3cffc47899a6 [formerly 84ddad027fed623021092d56872ff138bc5ea416]]
Former-commit-id: 0018a51df5bc801b783a3ffe17d9f33c504ce094 [formerly 0072c425cd4754e38f30007ab9f5272ea4b40370]
Former-commit-id: d298f006e58ef9e4987def4bc354818062b30fcd

_assets/src/App.vue

@@ -1,11 +1,11 @@
 <template>
   <div id="app">
     <header>
-      <div id="first-bar">
+      <div>
         <img src="./assets/logo.svg" alt="File Manager">
         <search></search>
       </div>
-      <div id="second-bar">
+      <div>
         <info-button></info-button>
       </div>
       <!-- <div id="click-overlay"></div> -->
@@ -21,12 +21,12 @@
       </div>
     </nav>
     <main>
-      <listing v-if="page.kind == 'listing'"></listing> 
+      <listing v-if="req.kind == 'listing'"></listing> 
     </main>
 
-    <preview v-if="page.kind == 'preview'"></preview> 
+    <preview v-if="req.kind == 'preview'"></preview> 
 
-    <div class="overlay"></div>
+    
     <!-- TODO: show on listing and allowedit -->
     <div class="floating">
         <div tabindex="0" role="button" class="action" id="new">
@@ -42,15 +42,22 @@
         </div>
     </div>
 
-     <footer>Served with <a rel="noopener noreferrer" href="https://github.com/hacdias/caddy-filemanager">File Manager</a>.</footer>
+    <info-prompt v-show="showInfo" :class="{ active: showInfo }"></info-prompt>
+    <help v-show="showHelp" :class="{ active: showHelp }"></help>
+
+    <div v-show="showOverlay()" class="overlay" :class="{ active: showOverlay() }"></div>
+
+    <footer>Served with <a rel="noopener noreferrer" href="https://github.com/hacdias/caddy-filemanager">File Manager</a>.</footer>
   </div>
 </template>
 
 <script>
 import Search from './components/Search'
 import Preview from './components/Preview'
+import Help from './components/Help'
 import Listing from './components/Listing'
 import InfoButton from './components/InfoButton'
+import InfoPrompt from './components/InfoPrompt'
 import css from './css.js'
 
 function updateColumnSizes () {
@@ -60,9 +67,62 @@ function updateColumnSizes () {
   items.style.width = `calc(${100 / columns}% - 1em)`
 }
 
+window.addEventListener('keydown', (event) => {
+  // Esc!
+  if (event.keyCode === 27) {
+    window.info.showHelp = false
+    window.info.showInfo = false
+    window.info.showDelete = false
+    window.info.showRename = false
+
+    // Unselect all files and folders.
+    if (window.info.req.kind === 'listing') {
+      let items = document.getElementsByClassName('item')
+      Array.from(items).forEach(link => {
+        link.setAttribute('aria-selected', false)
+      })
+
+      window.info.listing.selected.length = 0
+    }
+
+    return
+  }
+
+  // Del!
+  if (event.keyCode === 46) {
+    window.info.showDelete = true
+  }
+
+  // F1!
+  if (event.keyCode === 112) {
+    event.preventDefault()
+    window.info.showHelp = true
+  }
+
+  // F2!
+  if (event.keyCode === 113) {
+    window.info.showRename = true
+  }
+
+  // CTRL + S
+  if (event.ctrlKey || event.metaKey) {
+    switch (String.fromCharCode(event.which).toLowerCase()) {
+      case 's':
+        event.preventDefault()
+
+        if (window.info.req.kind !== 'editor') {
+          window.location = '?download=true'
+          return
+        }
+
+        // TODO: save file on editor!
+    }
+  }
+})
+
 export default {
   name: 'app',
-  components: { Search, Preview, Listing, InfoButton },
+  components: { Search, Preview, Listing, InfoButton, InfoPrompt, Help },
   mounted: function () {
     updateColumnSizes()
     window.addEventListener('resize', updateColumnSizes)
@@ -70,6 +130,11 @@ export default {
   },
   data: function () {
     return window.info
+  },
+  methods: {
+    showOverlay: function () {
+      return this.showInfo || this.showHelp
+    }
   }
 }
 </script>