Some changes

Former-commit-id: 4bd1d42e8edf31710bd1605a90f7cb6c838f5db6

_embed/public/css/fonts.css

@@ -117,6 +117,7 @@
     src: local('Material Icons'), local('MaterialIcons-Regular'), url(material/icons.woff2) format('woff2');
 }
 
+.prompt .file-list ul li:before,
 .material-icons {
     font-family: 'Material Icons';
     font-weight: normal;
@@ -133,4 +134,4 @@
     text-rendering: optimizeLegibility;
     -moz-osx-font-smoothing: grayscale;
     font-feature-settings: 'liga';
-}
+}

_embed/public/css/styles.css

@@ -471,7 +471,7 @@ header .actions {
 
 #bottom-bar>*:first-child {
     margin-right: auto;
-    max-width: calc(100% - 21em);
+    max-width: calc(100% - 25em);
     width: 100%;
 }
 
@@ -919,6 +919,49 @@ header .actions {
     background-color: #e9eaeb;
 }
 
+/* * * * * * * * * * * * * * * *
+ *        PROMPT - MOVE        *
+ * * * * * * * * * * * * * * * */
+
+.prompt .file-list {
+    flex-direction: initial;
+}
+
+.prompt .file-list ul {
+     list-style: none;
+     margin: 0;
+     padding: 0;
+     width: 100%;
+}
+
+.prompt .file-list ul li {
+    width: 100%;
+    user-select: none;
+}
+
+.prompt .file-list ul li[aria-selected=true] {
+    background: #2196f3 !important;
+    color: #fff !important;
+    transition: .1s ease all;
+}
+
+.prompt .file-list ul li:hover {
+    background-color: #e9eaeb;
+    cursor: pointer;
+}
+
+.prompt .file-list ul li:before {
+    content: "folder";
+    color: #6f6f6f;
+    vertical-align: middle;
+    padding: 0 .25em;
+    line-height: 2em;
+}
+
+.prompt .file-list ul li[aria-selected=true]:before {
+    color: white;
+}
+
 
 /* * * * * * * * * * * * * * * *
  *             HELP            *
@@ -1041,4 +1084,4 @@ footer a:hover {
         -webkit-transform: rotate(-360deg);
         transform: rotate(-360deg);
     }
-}
+}

_embed/public/js/common.js

@@ -102,7 +102,7 @@ function getCSSRule(rules) {
                     if (cssRule.selectorText.toLowerCase() == rules[i]) found = true;
                 }
             }
-            
+
             return found;
         });
 
@@ -161,9 +161,7 @@ function logoutEvent(event) {
 }
 
 function openEvent(event) {
-    if (event.currentTarget.classList.contains('disabled')) {
+    if (event.currentTarget.classList.contains('disabled')) return false;
-        return false;
-    }
 
     let link = '?raw=true';
 
@@ -177,6 +175,64 @@ function openEvent(event) {
     return false;
 }
 
+function selectMoveFolder(event) {
+    if(event.target.getAttribute("aria-selected") === "true") {
+        event.target.setAttribute("aria-selected", false);
+        return;
+    } else {
+        if(document.querySelector(".file-list li[aria-selected=true]")) {
+            document.querySelector(".file-list li[aria-selected=true]").setAttribute("aria-selected", false);
+        }
+        event.target.setAttribute("aria-selected", true);
+        return;
+    }
+}
+
+function moveSelected(event) {
+    event.preventDefault();
+}
+
+function loadNextFolder(event) {
+}
+
+function moveEvent(event) {
+    if(event.currentTarget.classList.contains("disabled")) return;
+
+    let request = new XMLHttpRequest();
+
+    request.open("GET", window.location.pathname, true);
+    request.setRequestHeader("Accept", "application/json");
+    request.send();
+    request.onreadystatechange = function() {
+        if(request.readyState == 4) {
+            if(request.status == 200) {
+                let clone = document.importNode(templates.move.content, true);
+
+                clone.querySelector("p").innerHTML = `Choose new house for your file(s)/folder(s):`;
+
+                for(let f of JSON.parse(request.response)) {
+                    if(f.URL.split("/").length == 3) {
+                        if(selectedItems.includes(btoa(f.URL.split("/")[1]))) continue;
+                        let newNode = document.createElement("li");
+                        newNode.innerHTML = f.URL.split("/")[1];
+                        newNode.setAttribute("aria-selected", false);
+
+                        newNode.addEventListener("dblclick", loadNextFolder);
+                        newNode.addEventListener("click", selectMoveFolder);
+                        newNode.addEventListener("submit", moveSelected);
+
+                        clone.querySelector("div.file-list ul").appendChild(newNode);
+                    }
+                }
+
+                document.body.appendChild(clone);
+                document.querySelector(".overlay").classList.add("active");
+                document.querySelector(".prompt").classList.add("active");
+            }
+        }
+    }
+}
+
 function deleteSelected(single) {
     return function(event) {
         event.preventDefault();
@@ -238,7 +294,7 @@ function deleteEvent(event) {
     clone.querySelector('.ok').innerHTML = 'Delete';
     clone.querySelector('form').addEventListener('submit', deleteSelected(single));
 
-    document.querySelector('body').appendChild(clone)
+    document.body.appendChild(clone);
     document.querySelector('.overlay').classList.add('active');
     document.querySelector('.prompt').classList.add('active');
 
@@ -414,13 +470,16 @@ document.addEventListener("DOMContentLoaded", function(event) {
     buttons.open = document.getElementById("open");
     buttons.delete = document.getElementById("delete");
     buttons.previous = document.getElementById("previous");
+    buttons.move = document.getElementById("move");
 
     // Attach event listeners
     buttons.logout.addEventListener("click", logoutEvent);
     buttons.open.addEventListener("click", openEvent);
+    buttons.move.addEventListener("click", moveEvent);
 
     templates.question = document.querySelector('#question-template');
     templates.info = document.querySelector('#info-template');
+    templates.move = document.querySelector("#move-template");
 
     if (user.AllowEdit) {
         buttons.delete.addEventListener("click", deleteEvent);
@@ -465,4 +524,4 @@ document.addEventListener("DOMContentLoaded", function(event) {
 
     setupSearch();
     return false;
-});
+});

_embed/templates/base.tmpl

@@ -12,10 +12,10 @@
     {{- if ne .User.StyleSheet "" -}}
     <style>{{ CSS .User.StyleSheet }}</style>
     {{- end -}}
-    
+
     <script>
-    var user = JSON.parse('{{ Marshal .User }}'), 
+    var user = JSON.parse('{{ Marshal .User }}'),
-        webdavURL = "{{.Config.AbsoluteURL}}{{.Config.WebDavURL}}", 
+        webdavURL = "{{.Config.AbsoluteURL}}{{.Config.WebDavURL}}",
         baseURL = "{{.Config.AbsoluteURL}}";
     </script>
     <script src="{{ .Config.AbsoluteURL }}/_filemanagerinternal/js/common.js" defer></script>
@@ -44,10 +44,10 @@
                 <i class="material-icons" title="Logout">exit_to_app</i>
             </div>
         </div>
-        
+
         <div id="bottom-bar">
             <div>
-                {{- if ne .Name "/"}}                
+                {{- if ne .Name "/"}}
                 <div data-dropdown class="action" id="previous">
                     <i class="material-icons">subdirectory_arrow_left</i>
                     <ul class="dropdown" id="breadcrumbs">
@@ -57,10 +57,10 @@
                     </ul>
                 </div>
                 {{- end }}
-                
+
                 {{ if ne .Name "/"}}<p id="current-file">{{ .Name }}</p>{{ end }}
             </div>
-            
+
             <div class="actions{{ if .IsDir }} disabled{{ end }}" id="file-only">
                 {{- if and (not .IsDir) (.User.AllowEdit) }}
                 {{- if .Editor}}
@@ -70,59 +70,65 @@
                 </div>
                 {{- end }}
                 {{- end }}
-                
+
                 <div class="action" id="save">
                     <i class="material-icons" title="Save">save</i>
                 </div>
                 {{- end }}
-                
+
                 <div class="action" id="open">
                     <i class="material-icons" title="See raw">open_in_new</i>
                 </div>
-                
+
+                {{- if .User.AllowEdit }}
+                <div class="action" id="move">
+                    <i class="material-icons" title="Move">forward</i>
+                </div>
+                {{- end }}
+
                 {{- if and .IsDir .User.AllowEdit }}
                 <div class="action" id="rename">
                     <i class="material-icons" title="Edit">mode_edit</i>
                 </div>
                 {{- end }}
-            
+
                 {{- if .User.AllowEdit }}
                 <div class="action" id="delete">
                     <i class="material-icons" title="Delete">delete</i><span>Delete</span>
                 </div>
                 {{- end }}
             </div>
-            
+
             <div class="action mobile-only" id="more">
                 <i class="material-icons">more_vert</i>
             </div>
-            
+
-            <div class="actions" id="main-actions">                
+            <div class="actions" id="main-actions">
                 {{- if .IsDir }}
                 <div class="action" id="view">
                     {{- if eq .Display "mosaic" }}
                         <a href="?display=list"><i class="material-icons" title="Switch View">view_list</i><span>Switch view</span></a>
-                    {{- else }} 
+                    {{- else }}
                         <a href="?display=mosaic"><i class="material-icons" title="Switch View">view_module</i><span>Switch view</span></a>
                     {{- end }}
                 </div>
-                
+
                 <div class="action mobile-only" id="multiple-selection-activate">
                     <i class="material-icons">check_circle</i><span>Select</span>
                 </div>
                 {{- end }}
-                
+
                 {{- if and (.User.AllowNew) (.IsDir) }}
                 <div class="action" id="upload">
                     <i class="material-icons" title="Upload">file_upload</i><span>Upload</span>
                 </div>
                 {{- end }}
-                
+
                 <div {{ if .IsDir }}data-dropdown{{ end }} class="action" id="download">
                     {{- if not .IsDir}}<a href="?download=true">{{ end }}
                     <i class="material-icons" title="Download">file_download</i><span>Download</span>
                     {{- if not .IsDir}}</a>{{ end }}
-                    
+
                     {{- if .IsDir }}
                     <ul class="dropdown" id="download-drop">
                         <a data-format="zip" href="?download=zip"><li>zip</li></a>
@@ -133,29 +139,29 @@
                     </ul>
                     {{- end }}
                 </div>
-                
+
                 <div class="action" id="info" onclick="notImplemented(event);">
                     <i class="material-icons" title="Info">info</i><span>Info</span>
                 </div>
             </div>
         </div>
-        
+
         <div id="click-overlay"></div>
-    </header>    
+    </header>
-    
+
     <div id="multiple-selection" class="mobile-only">
         <p>Multiple selection enabled</p>
         <div class="action" id="multiple-selection-cancel">
             <i class="material-icons" title="Clear">clear</i>
         </div>
     </div>
-    
+
     <main>
         {{- template "content" . }}
     </main>
-    
+
     <div class="overlay"></div>
-    
+
     {{- if and (.User.AllowNew) (.IsDir) }}
     <div class="floating">
         <div class="action" id="new">
@@ -163,7 +169,7 @@
         </div>
     </div>
     {{- end }}
-    
+
     <template id="question-template">
         <form class="prompt">
             <h3></h3>
@@ -175,7 +181,7 @@
             </div>
         </form>
     </template>
-    
+
     <template id="info-template">
         <div class="prompt">
             <h3></h3>
@@ -185,10 +191,27 @@
             </div>
         </div>
     </template>
-    
+
+    <template id="move-template">
+        <form class="prompt">
+            <h3>Move</h3>
+            <p></p>
+
+            <div class="file-list">
+                <ul>
+                </ul>
+            </div>
+
+            <div>
+                <button type="submit" autofocus class="ok">OK</button>
+                <button class="cancel" onclick="closePrompt(event);">Cancel</button>
+            </div>
+        </form>
+    </template>
+
     <div class="help">
         <h3>Help</h3>
-        
+
         <ul>
             <li><strong>F1</strong> - this information</li>
             <li><strong>F2</strong> - rename file</li>
@@ -199,13 +222,13 @@
             <li><strong>Double click</strong> - open a file or directory</li>
             <li><strong>Click</strong> - select file or directory</li>
         </ul>
-        
+
         <p>Not available yet</p>
-        
+
         <ul>
             <li><strong>Alt + Click</strong> - select a group of files</li>
         </ul>
-        
+
         <div>
             <button type="submit" onclick="closeHelp(event);" class="ok">OK</button>
         </div>