updates

_embed/public/css/styles.css

@@ -859,14 +859,16 @@ header .actions {
  * * * * * * * * * * * * * * * */
 
 .overlay,
-.prompt {
+.prompt,
+.help {
     opacity: 0;
     z-index: -1;
     transition: .1s ease opacity, z-index;
 }
 
 .overlay.active,
-.prompt.active {
+.prompt.active,
+.help.active {
     z-index: 9999999;
     opacity: 1;
 }
@@ -885,7 +887,8 @@ header .actions {
     width: 100%;
 }
 
-.prompt {
+.prompt,
+.help {
     position: fixed;
     top: 50%;
     left: 50%;
@@ -899,13 +902,15 @@ header .actions {
     width: 95%;
 }
 
-.prompt h3 {
+.prompt h3,
+.help h3 {
     margin: 0;
     font-weight: 500;
     font-size: 1.5em;
 }
 
-.prompt p {
+.prompt p,
+.help p {
     font-size: .9em;
     color: rgba(0, 0, 0, 0.8);
     margin: .5em 0 1em;
@@ -918,7 +923,8 @@ header .actions {
     padding: .3em;
 }
 
-.prompt div {
+.prompt div,
+.help div {
     margin-top: 1em;
     display: flex;
     justify-content: flex-start;
@@ -935,6 +941,26 @@ header .actions {
 }
 
 
+/* * * * * * * * * * * * * * * *
+ *             HELP            *
+ * * * * * * * * * * * * * * * */
+
+.help {
+    max-width: 24em;
+    visibility: hidden;
+}
+
+.help.active {
+    visibility: visible;
+}
+
+.help ul{
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+
 /* * * * * * * * * * * * * * * *
  *            FOOTER           *
  * * * * * * * * * * * * * * * */

_embed/public/js/common.js

@@ -108,7 +108,9 @@ var removeLastDirectoryPartOf = function(url) {
  *                             *
  * * * * * * * * * * * * * * * */
 function closePrompt(event) {
-    let prompt = document.querySelector('.prompt:not(.help)');
+    let prompt = document.querySelector('.prompt');
+    
+    if (!prompt) return;
 
     event.preventDefault();
     document.querySelector('.overlay').classList.remove('active');
@@ -214,7 +216,13 @@ function deleteEvent(event) {
 
     let clone = document.importNode(templates.question.content, true);
     clone.querySelector('h3').innerHTML = 'Delete files';
-    clone.querySelector('p').innerHTML = `Are you sure you want to delete ${selectedItems.length} file(s)?`;
+    
+    if (single) {
+        clone.querySelector('p').innerHTML = `Are you sure you want to delete this file/folder?`;   
+    } else {
+        clone.querySelector('p').innerHTML = `Are you sure you want to delete ${selectedItems.length} file(s)?`;        
+    }
+    
     clone.querySelector('input').remove();
     clone.querySelector('.ok').innerHTML = 'Delete';
     clone.querySelector('form').addEventListener('submit', deleteSelected(single));
@@ -350,17 +358,34 @@ function setupSearch() {
     searchInput.addEventListener('keyup', searchEvent);
 }
 
-function closeHelp() {
+function closeHelp(event) {
+    event.preventDefault();
+    
     document.querySelector('.help').classList.remove('active');
     document.querySelector('.overlay').classList.remove('active');
 }
 
-document.addEventListener('keydown', (event) => {
+function openHelp(event) {
+    closePrompt(event);
+    
+    document.querySelector('.help').classList.add('active');
+    document.querySelector('.overlay').classList.add('active');
+}
+
+window.addEventListener('keydown', (event) => {
+    if (event.keyCode == 27) { 
+        if (document.querySelector('.help.active')) {
+            closeHelp(event);
+        }
+    }
+    
+    if (event.keyCode == 46) {
+        deleteEvent(event);
+    }
+    
     if (event.keyCode == 112) {
         event.preventDefault();
-        
+        openHelp(event);
-        document.querySelector('.help').classList.add('active');
-        document.querySelector('.overlay').classList.add('active');
     }
 });
 
@@ -395,6 +420,11 @@ document.addEventListener("DOMContentLoaded", function(event) {
     }
 
     document.querySelector('.overlay').addEventListener('click', event => {
+        if (document.querySelector('.help.active')) {
+            closeHelp(event);
+            return;
+        }
+        
         closePrompt(event);
     })
 

_embed/public/js/listing.js

@@ -217,7 +217,12 @@ listing.handleSelectionChange = function(event) {
         }
 
         if (selectedNumber == 1) {
-            buttons.open.classList.remove("disabled");
+            if (document.getElementById(selectedItems[0]).dataset.dir == "true") {
+                buttons.open.classList.add("disabled");
+            } else {
+                buttons.open.classList.remove("disabled");
+            }
+            
             buttons.rename.classList.remove("disabled");
         }
 
@@ -310,18 +315,28 @@ listing.updateColumns = function(event) {
 }
 
 // Keydown events
-document.addEventListener('keydown', (event) => {
+window.addEventListener('keydown', (event) => {
     if (event.keyCode == 27) {
         listing.unselectAll();
 
         if (document.querySelectorAll('.prompt').length) {
             closePrompt(event);
         }
+        
     }
 
     if (event.keyCode == 113) {
         listing.rename();
     }
+    
+    if (event.ctrlKey || event.metaKey) {
+        console.log("hey")
+        switch (String.fromCharCode(event.which).toLowerCase()) {
+            case 's':
+                event.preventDefault();
+                window.location = "?download=true"
+        }
+    }
 });
 
 window.addEventListener("resize", () => {
@@ -334,6 +349,7 @@ document.addEventListener('DOMContentLoaded', event => {
     buttons.rename = document.getElementById("rename");
     buttons.upload = document.getElementById("upload");
     buttons.new = document.getElementById('new');
+    buttons.download = document.getElementById('download');
 
     if (user.AllowEdit) {
         buttons.rename.addEventListener("click", listing.rename);

_embed/templates/base.tmpl

@@ -148,7 +148,7 @@
             <p></p>
             <input autofocus type="text">
             <div>
-                <button type="submit" default class="ok">OK</button>
+                <button type="submit" autofocus class="ok">OK</button>
                 <button class="cancel" onclick="closePrompt(event);">Cancel</button>
             </div>
         </form>
@@ -164,21 +164,30 @@
         </div>
     </template>
     
-    <!-- TODO: open this with F1; enabke everythings -->
     <div class="help">
         <h3>Help</h3>
+        
         <p>
             <ul>
-                <li>F1 - This information!</li>
+                <li><strong>F1</strong> - this information</li>
-                <li>F2 - Rename file</li>
+                <li><strong>F2</strong> - rename file</li>
-                <li>Double click to open a file or directory</li>
+                <li><strong>DEL</strong> - delete selected items</li>
-                <li>Click to select file or directory</li>
+                <li><strong>ESC</strong> - clear selection and/or close the prompt</li>
-                <li>CTRL + Click to select multiple files or directories</li>
+                <li><strong>CTRL + S</strong> - save a file or download the directory where you are</li>
-                <li>DEL to delete a file or directory</li>
+                <li><strong>CTRL + Click</strong> - select multiple files or directories</li>
-                <li>ESC to clear selection and/or close the prompt</li>
+                <li><strong>Double click</strong> - open a file or directory</li>
-                <li>CTRL + S to save a file or download the directory where you are</li>
+                <li><strong>Click</strong> - select file or directory</li>
             </ul>
         </p>
+        
+        <p>Not available yet</p>
+        
+        <p>
+            <ul>
+                <li><strong>Alt + Click</strong> - select a group of files</li>
+            </ul>
+        </p>
+        
         <div>
             <button type="submit" onclick="closeHelp(event);" class="ok">OK</button>
         </div>