rebuilding js

Former-commit-id: 027e2f6546614d28750e437b9a3545cb95235d9d [formerly 6dbfe621a5774304295c17f216b5c96beaaaa95a] [formerly d44822f30d9a3649b20daa7a3cdbf86c87e63c99 [formerly 325855234967d92bf42b77b17fd8affdcc7f1392]] Former-commit-id: 7f34ddc1b32076c6ad2c2a4374b170b7f5d84000 [formerly aaafd299a933d25ebcb5fdebe1b00cb9e8309d7a] Former-commit-id: 7bb183c165ba2c9711ba1c04e3af6e2048245ded
2017-06-27 19:00:58 +01:00
parent 1e99d3d7c1
commit 826d491ff1
20 changed files with 11576 additions and 1816 deletions
--- a/_assets/templates/actions.tmpl
+++ b/_assets/templates/actions.tmpl
@@ -1,5 +1,23 @@
+{{ define "info-button" }}
+<button title="Info" aria-label="Info" class="action" id="info">
+    <i class="material-icons">info</i>
+    <span>Info</span>
+</button>
+{{ end }}
+
+{{ define "delete-button" }}
+<button aria-label="Delete"  title="Delete" class="action" id="delete">
+    <i class="material-icons">delete</i>
+    <span>Delete</span>
+</button>
+{{ end }}
+
 {{ define "right-side-actions" }}
-    {{- if .IsDir }}
+    {{ template "info-button" }}
+{{ end }}
+
+{{ define "right" }}
+{{- if not .IsEditor }}
    <a aria-label="Switch View" href="?display={{- if eq .Display "mosaic" }}list{{ else }}mosaic{{ end }}" class="action">
        <i class="material-icons">{{- if eq .Display "mosaic" }}view_list{{ else }}view_module{{ end }}</i>
        <span>Switch view</span>
@@ -11,14 +29,14 @@
    </button>
    {{- end }}

-    {{- if and (.User.AllowNew) (.IsDir) }}
+    {{- if and (.User.AllowNew) (not .IsEditor) }}
    <button aria-label="Upload" title="Upload" class="action" id="upload">
        <i class="material-icons">file_upload</i>
        <span>Upload</span>
    </button>
    {{- end }}

-    {{- if and .User.AllowEdit (not .IsDir) }}
+    {{- if and .User.AllowEdit (.IsEditor) }}
    <button aria-label="Delete"  title="Delete" class="action" id="delete">
        <i class="material-icons">delete</i>
        <span>Delete</span>
@@ -26,11 +44,11 @@
    {{- end }}

    <button {{ if .IsDir }}data-dropdown{{ end }} aria-label="Download" title="Download" class="action" id="download">
-        {{- if not .IsDir}}<a href="?download=true">{{ end }}
+        {{- if .IsEditor}}<a href="?download=true">{{ end }}
        <i class="material-icons">file_download</i><span>Download</span>
-        {{- if not .IsDir}}</a>{{ end }}
+        {{- if .IsEditor}}</a>{{ end }}

-        {{- if .IsDir }}
+        {{- if not .IsEditor }}
        <ul class="dropdown" id="download-drop">
            <a tabindex="0" aria-label="Download as Zip" data-format="zip" href="?download=zip"><li>zip</li></a>
            <a tabindex="0" aria-label="Download as Tar" data-format="tar" href="?download=tar"><li>tar</li></a>
@@ -41,14 +59,16 @@
        {{- end }}
    </button>

-    <button title="Info" aria-label="Info" class="action" id="info">
-        <i class="material-icons">info</i>
-        <span>Info</span>
-    </button>
-{{ end }}
+    
+{{ end }} 
+

 {{ define "left-side-actions" }}
-    {{- if and (not .IsDir) (.User.AllowEdit) }}
+  
+{{ end }}
+
+{{ define "left" }}
+  {{- if and (not .IsDir) (.User.AllowEdit) }}
    {{- if .Editor}}

    {{- if eq .Data.Mode "markdown" }}
@@ -64,12 +84,12 @@
    {{- end }}

    {{/* end if editor */}}
-    {{- end }}

    <button aria-label="Save" class="action" id="save">
        <i class="material-icons" title="Save">save</i>
    </button>
-
+    {{- end }}
+    
    {{/* end if not dir and AllowEdit */}}
    {{- end }}

@@ -85,7 +105,7 @@
    </button>

    <button aria-label="Delete" class="action" id="delete">
-    <i class="material-icons" title="Delete">delete</i><span>Delete</span>
+        <i class="material-icons" title="Delete">delete</i><span>Delete</span>
    </button>
    {{- end }}
-{{ end }}
+    {{ end }}
--- a/_assets/templates/base.tmpl
+++ b/_assets/templates/base.tmpl
@@ -16,29 +16,22 @@
    var data = {
        user: JSON.parse('{{ Marshal .User }}'),
        webdavURL: "{{ .WebDavURL }}",
-        baseURL: "{{.BaseURL}}",
-        prefixURL:"{{ .PrefixURL }}"
+        baseURL: "{{.BaseURL}}"
    }
    </script>

-    <!-- TODO: remove this one after moving the JS to ^^ -->
-    <script>
-    var user = JSON.parse('{{ Marshal .User }}'),
-        webdavURL = "{{ .WebDavURL }}",
-        baseURL = "{{.BaseURL}}",
-        prefixURL = "{{ .PrefixURL }}";
-    </script>
-
-    <script src="{{ .BaseURL }}/_internal/js/common.js" defer></script>
-    {{- if .IsDir }}
-    <script src="{{ .BaseURL }}/_internal/js/listing.js" defer></script>
-    {{- else }}
+    <script src="{{ .BaseURL }}/_internal/js/vue.js" defer></script>
+    <script src="{{ .BaseURL }}/_internal/js/app.js" defer></script>
+    <!-- 
+    {{- if .IsEditor }}
    <script src="{{ .BaseURL }}/_internal/js/vendor/ace/src-min/ace.js" defer></script>
    <script src="{{ .BaseURL }}/_internal/js/vendor/form2js.js" defer></script>
    <script src="{{ .BaseURL }}/_internal/js/editor.js" defer></script>
-    {{- end }}
+    {{- else }}
+    <script src="{{ .BaseURL }}/_internal/js/listing.js" defer></script>
+    {{- end }} -->
 </head>
-<body>
+    <body>
    <header>
        <div id="top-bar">
            <svg id="content" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144">
@@ -46,84 +39,88 @@
                <circle cx="72" cy="72" r="48" fill="#40c4ff"/>
                <circle cx="72" cy="72" r="24" fill="#fff"/>
            </svg>
-            <div id="search">
+            <div id="search" v-on:mouseleave="hover = false" v-on:click="click" v-bind:class="{ active: focus || hover }">
                <i class="material-icons" title="Search">search</i>
-                <input type="text" aria-label="Write here to search" placeholder="Search or execute a command...">
-                <div>
+                <input type="text"
+                    v-on:focus="focus = true"
+                    v-on:blur="focus = false"
+                    v-on:keyup="keyup"
+                    v-on:keyup.enter="submit"
+                    aria-label="Write here to search" 
+                    placeholder="Search or execute a command...">
+                <div v-on:mouseover="hover = true">
                    <div>Loading...</div>
                    <p><i class="material-icons spin">autorenew</i></p>
                </div>
            </div>
-
-          
        </div>

        <div id="bottom-bar">
-            <div>
-                {{- if ne .Name "/"}}
-                <div data-dropdown tabindex="0" aria-label="Previous" role="button" class="action" id="previous">
-                    <i class="material-icons" title="Previous">subdirectory_arrow_left</i>
-                    <ul class="dropdown" id="breadcrumbs">
-                    {{- range $item := .BreadcrumbMap }}
-                        <a tabindex="0" href="{{ $absURL }}{{ $item.URL }}"><li>{{ $item.Name }}</li></a>
-                    {{- end }}
-                    </ul>
-                </div>
-                {{- end }}
+        <div>
+        {{- if ne .Name "/"}}
+        <div data-dropdown tabindex="0" aria-label="Previous" role="button" class="action" id="previous">
+        <i class="material-icons" title="Previous">subdirectory_arrow_left</i>
+        <ul class="dropdown" id="breadcrumbs">
+        {{- range $item := .BreadcrumbMap }}
+        <a tabindex="0" href="{{ $absURL }}{{ $item.URL }}"><li>{{ $item.Name }}</li></a>
+        {{- end }}
+        </ul>
+        </div>
+        {{- end }}

-                {{ if ne .Name "/"}}<p id="current-file">{{ .Name }}</p>{{ end }}
-            </div>
+        {{ if ne .Name "/"}}<p id="current-file">{{ .Name }}</p>{{ end }}
+        </div>

-            <div class="actions{{ if .IsDir }} disabled{{ end }}" id="file-only">
-              {{- template "left-side-actions" . -}}
-            </div>
+        <div class="actions{{ if not .IsEditor }} disabled{{ end }}" id="file-only">
+        {{- template "left-side-actions" . -}}
+        </div>

-            <button aria-label="More" class="action mobile-only" id="more">
-                <i class="material-icons">more_vert</i>
-            </button>
+        <button aria-label="More" class="action mobile-only" id="more">
+        <i class="material-icons">more_vert</i>
+        </button>

-            <div class="actions" id="main-actions">
-                {{- template "right-side-actions" . -}}
-            </div>
+        <div class="actions" id="main-actions">
+        {{- template "right-side-actions" . -}}
+        </div>
        </div>

        <div id="click-overlay"></div>
    </header>

-    <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>
+<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>

-    <nav id="sidebar">
-        <a class="action" href="{{ .BaseURL }}/">
-            <i class="material-icons">folder</i>
-            <span>My Files</span>
-        </a>
-        <div class="action" id="logout" tabindex="0" role="button" aria-label="Log out">
-            <i class="material-icons" title="Logout">exit_to_app</i>
-            <span>Logout</span>
-        </div>
-    </nav>
+<nav id="sidebar">
+<a class="action" href="{{ .BaseURL }}/">
+<i class="material-icons">folder</i>
+<span>My Files</span>
+</a>
+<div class="action" id="logout" tabindex="0" role="button" aria-label="Log out">
+<i class="material-icons" title="Logout">exit_to_app</i>
+<span>Logout</span>
+</div>
+</nav>

-    <main>
-        {{- template "content" . }}
-    </main>
+<main>
+{{- template "content" . }}
+</main>

-    <div class="overlay"></div>
+<div class="overlay"></div>

-    {{- if and (.User.AllowNew) (.IsDir) }}
-    <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>
-    {{- end }}
+{{- if and (.User.AllowNew) (not .IsEditor) }}
+<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>
+{{- end }}

-    {{ template "templates" . }}
+{{ template "templates" . }}

-    <footer>Served with <a rel="noopener noreferrer" href="https://github.com/hacdias/caddy-filemanager">File Manager</a>.</footer>
+<footer>Served with <a rel="noopener noreferrer" href="https://github.com/hacdias/caddy-filemanager">File Manager</a>.</footer>
 </body>
 </html>
--- a/_assets/templates/listing.tmpl
+++ b/_assets/templates/listing.tmpl
@@ -1,5 +1,39 @@
 {{ define "content" }}
-<div class="container {{ .Display }}" id="listing">
+{{ if .Data.Preview }}
+<div id="previewer">
+  <div class="bar">
+    <button class="action" aria-label="Close Preview" id="close">
+      <i class="material-icons">close</i>
+    </button>
+    {{ template "right-side-actions" . }}
+  </div>
+
+  <div class="preview">
+    {{ with .Data.PreviewItem}}
+    {{ if eq .Type "image" }}
+    <img src="{{ .URL }}?raw=true">
+    {{ else if eq .Type "audio" }}
+    <audio src="{{ .URL }}?raw=true" controls></audio>
+    {{ else if eq .Type "video" }}
+    <video src="{{ .URL }}?raw=true" controls>
+    Sorry, your browser doesn't support embedded videos,
+    but don't worry, you can <a href="?download=true">download it</a>
+    and watch it with your favorite video player!
+    </video>
+    {{ else if eq .Extension ".pdf" }}
+    <object class="pdf" data="{{ .URL }}?raw=true"></object>
+    {{ else if eq .Type "blob" }}
+    <a href="?download=true"><h2 class="message">Download <i class="material-icons">file_download</i></h2></a>
+    {{ else }}
+    <pre>{{ .StringifyContent }}</pre>
+    {{ end }}
+    {{ end }}
+  </div>
+</div>
+{{ end }}
+
+
+<div class="container {{ .Data.Display }}" id="listing">
 {{- with .Data -}}
    <div>
        <div class="item header">
--- a/_assets/templates/single.tmpl
+++ b/_assets/templates/single.tmpl
@@ -1,23 +1,35 @@
 {{ define "content" }}
-{{ with .Data}}
-<main class="container">
-  {{ if eq .Type "image" }}
-  <center><img src="{{ .URL }}?raw=true"></center>
-  {{ else if eq .Type "audio" }}
-  <audio src="{{ .URL }}?raw=true" controls></audio>
-  {{ else if eq .Type "video" }}
-  <video src="{{ .URL }}?raw=true" controls>
+
+<div id="previewer">
+  <div class="bar">
+    <button class="action" aria-label="Close Preview" id="close">
+      <i class="material-icons">close</i>
+    </button>
+    
+    {{ template "info-button" }}
+  </div>
+
+  <div class="preview">
+    {{ with .Data}}
+    {{ if eq .Type "image" }}
+    <img src="{{ .URL }}?raw=true">
+    {{ else if eq .Type "audio" }}
+    <audio src="{{ .URL }}?raw=true" controls></audio>
+    {{ else if eq .Type "video" }}
+    <video src="{{ .URL }}?raw=true" controls>
    Sorry, your browser doesn't support embedded videos,
    but don't worry, you can <a href="?download=true">download it</a>
    and watch it with your favorite video player!
-  </video>
-  {{ else if eq .Extension ".pdf" }}
-  <object class="pdf" data="{{ .URL }}?raw=true"></object>
-  {{ else if eq .Type "blob" }}
-  <a href="?download=true"><h2 class="message">Download <i class="material-icons">file_download</i></h2></a>
-  {{ else}}
-  <pre>{{ .StringifyContent }}</pre>
-  {{ end }}
-</main>
-{{ end }}
+    </video>
+    {{ else if eq .Extension ".pdf" }}
+    <object class="pdf" data="{{ .URL }}?raw=true"></object>
+    {{ else if eq .Type "blob" }}
+    <a href="?download=true"><h2 class="message">Download <i class="material-icons">file_download</i></h2></a>
+    {{ else }}
+    <pre>{{ .StringifyContent }}</pre>
+    {{ end }}
+    {{ end }}
+  </div>
+</div>
+
 {{ end }}