rebuilding js

Former-commit-id: 027e2f6546614d28750e437b9a3545cb95235d9d [formerly 6dbfe621a5774304295c17f216b5c96beaaaa95a] [formerly d44822f30d9a3649b20daa7a3cdbf86c87e63c99 [formerly 325855234967d92bf42b77b17fd8affdcc7f1392]]
Former-commit-id: 7f34ddc1b32076c6ad2c2a4374b170b7f5d84000 [formerly aaafd299a933d25ebcb5fdebe1b00cb9e8309d7a]
Former-commit-id: 7bb183c165ba2c9711ba1c04e3af6e2048245ded

_assets/js/app.js

@@ -0,0 +1,122 @@
+'use strict'
+
+var data = (window.data || window.alert('Something is wrong, please refresh!'))
+var ssl = (window.location.protocol === 'https:')
+
+// Remove the last directory of an url
+var removeLastDirectoryPartOf = function (url) {
+  var arr = url.split('/')
+  if (arr.pop() === '') {
+    arr.pop()
+  }
+  return (arr.join('/'))
+}
+
+var search = new window.Vue({
+  el: '#search',
+  data: {
+    hover: false,
+    focus: false,
+    scrollable: null,
+    box: null,
+    input: null
+  },
+  mounted: function () {
+    this.scrollable = document.querySelector('#search > div')
+    this.box = document.querySelector('#search > div div')
+    this.input = document.querySelector('#search input')
+    this.reset()
+  },
+  methods: {
+    reset: function () {
+      if (data.user.AllowCommands && data.user.Commands.length > 0) {
+        this.box.innerHTML = `Search or use one of your supported commands: ${data.user.Commands.join(", ")}.`
+      } else {
+        this.box.innerHTML = 'Type and press enter to search.'
+      }
+    },
+    supported: function () {
+      let value = this.input.value
+      let pieces = value.split(' ')
+
+      for (let i = 0; i < data.user.Commands.length; i++) {
+        if (pieces[0] === data.user.Commands[0]) {
+          return true
+        }
+      }
+
+      return false
+    },
+    click: function (event) {
+      event.currentTarget.classList.add('active')
+      this.$el.querySelector('input').focus()
+    },
+    keyup: function (event) {
+      let el = event.currentTarget
+
+      if (el.value.length === 0) {
+        this.reset()
+        return
+      }
+
+      if (!this.supported() || !data.user.AllowCommands) {
+        this.box.innerHTML = 'Press enter to search.'
+      } else {
+        this.box.innerHTML = 'Press enter to execute.'
+      }
+    },
+    submit: function (event) {
+      this.box.innerHTML = ''
+      this.$el.classList.add('ongoing')
+
+      let url = window.location.host + window.location.pathname
+
+      if (document.getElementById('editor')) {
+        url = removeLastDirectoryPartOf(url)
+      }
+
+      let protocol = ssl ? 'wss:' : 'ws:'
+
+      if (this.supported() && data.user.AllowCommands) {
+        let conn = new window.WebSocket(`${protocol}//${url}?command=true`)
+
+        conn.onopen = () => {
+          conn.send(this.input.value)
+        }
+
+        conn.onmessage = (event) => {
+          this.box.innerHTML = event.data
+          this.scrollable.scrollTop = this.scrollable.scrollHeight
+        }
+
+        conn.onclose = (event) => {
+          this.$el.classList.remove('ongoing')
+          // TODO: if is listing!
+          // listing.reload()
+        }
+
+        return
+      }
+
+      this.box.innerHTML = '<ul></ul>'
+
+      let ul = this.box.querySelector('ul')
+      let conn = new window.WebSocket(`${protocol}//${url}?search=true`)
+
+      conn.onopen = () => {
+        conn.send(this.input.value)
+      }
+
+      conn.onmessage = (event) => {
+        ul.innerHTML += `<li><a href=".${event.data}">${event.data}</a></li>`
+        this.scrollable.scrollTop = this.scrollable.scrollHeight
+      }
+
+      conn.onclose = () => {
+        this.$el.classList.remove('ongoing')
+      }
+    }
+  }
+})
+
+console.log(search)

_assets/js/common_old.js

@@ -1,7 +1,10 @@
 'use strict'
 
+var data = (window.data || window.alert('Something is wrong, please refresh!'))
+
+/*
 var tempID = '_fm_internal_temporary_id'
-var ssl = (window.location.protocol === 'https:')
+
 var templates = {}
 var selectedItems = []
 var overlay
@@ -34,14 +37,6 @@ Document.prototype.getCookie = function (name) {
   return document.cookie.replace(re, '$1')
 }
 
-// Remove the last directory of an url
-var removeLastDirectoryPartOf = function (url) {
-  var arr = url.split('/')
-  if (arr.pop() === '') {
-    arr.pop()
-  }
-  return (arr.join('/'))
-}
 
 function getCSSRule (rules) {
   for (let i = 0; i < rules.length; i++) {
@@ -136,15 +131,15 @@ buttons.setDone = function (name, success = true) {
 var webdav = {}
 
 webdav.convertURL = function (url) {
-  return window.location.origin + url.replace(baseURL + '/', webdavURL + '/')
+  return window.location.origin + url.replace(data.baseURL + '/', data.webdavURL + '/')
 }
 
 webdav.move = function (oldLink, newLink) {
   return new Promise((resolve, reject) => {
     let request = new window.XMLHttpRequest()
-    let destination = newLink.replace(baseURL + '/', webdavURL + '/')
+    let destination = newLink.replace(data.baseURL + '/', data.webdavURL + '/')
 
-    destination = window.location.origin + destination.substring(prefixURL.length)
+    destination = window.location.origin + destination.substring(data.baseURL.length)
 
     request.open('MOVE', webdav.convertURL(oldLink), true)
     request.setRequestHeader('Destination', destination)
@@ -276,7 +271,7 @@ var preventDefault = function (event) {
 
 function logoutEvent (event) {
   let request = new window.XMLHttpRequest()
-  request.open('GET', window.location.pathname, true, 'username', 'password')
+  request.open('GET', window.location.pathname, true, 'data.username', 'password')
   request.send()
   request.onreadystatechange = function () {
     if (request.readyState === 4) {
@@ -439,132 +434,6 @@ function deleteEvent (event) {
   return false
 }
 
-function resetSearchText () {
-  let box = document.querySelector('#search > div div')
-
-  if (user.AllowCommands) {
-    box.innerHTML = `Search or use one of your supported commands: ${user.Commands.join(", ")}.`
-  } else {
-    box.innerHTML = 'Type and press enter to search.'
-  }
-}
-
-function searchEvent (event) {
-  if (this.value.length === 0) {
-    resetSearchText()
-    return
-  }
-
-  let value = this.value,
-    search = document.getElementById('search'),
-    scrollable = document.querySelector('#search > div'),
-    box = document.querySelector('#search > div div'),
-    pieces = value.split(' '),
-    supported = false
-
-  user.Commands.forEach(function (cmd) {
-    if (cmd == pieces[0]) {
-      supported = true
-    }
-  })
-
-  if (!supported || !user.AllowCommands) {
-    box.innerHTML = 'Press enter to search.'
-  } else {
-    box.innerHTML = 'Press enter to execute.'
-  }
-
-  if (event.keyCode === 13) {
-    box.innerHTML = ''
-    search.classList.add('ongoing')
-
-    let url = window.location.host + window.location.pathname
-
-    if (document.getElementById('editor')) {
-      url = removeLastDirectoryPartOf(url)
-    }
-
-    let protocol = ssl ? 'wss:' : 'ws:'
-
-    if (supported && user.AllowCommands) {
-      let conn = new window.WebSocket(`${protocol}//${url}?command=true`)
-
-      conn.onopen = function () {
-        conn.send(value)
-      }
-
-      conn.onmessage = function (event) {
-        box.innerHTML = event.data
-        scrollable.scrollTop = scrollable.scrollHeight
-      }
-
-      conn.onclose = function (event) {
-        search.classList.remove('ongoing')
-        listing.reload()
-      }
-
-      return
-    }
-
-    box.innerHTML = '<ul></ul>'
-
-    let ul = box.querySelector('ul')
-    let conn = new window.WebSocket(`${protocol}//${url}?search=true`)
-
-    conn.onopen = function () {
-      conn.send(value)
-    }
-
-    conn.onmessage = function (event) {
-      ul.innerHTML += '<li><a href="' + event.data + '">' + event.data + '</a></li>'
-      scrollable.scrollTop = scrollable.scrollHeight
-    }
-
-    conn.onclose = function (event) {
-      search.classList.remove('ongoing')
-    }
-  }
-}
-
-function setupSearch () {
-  let search = document.getElementById('search')
-  let searchInput = search.querySelector('input')
-  let searchDiv = search.querySelector('div')
-  let hover = false
-  let focus = false
-
-  resetSearchText()
-
-  searchInput.addEventListener('focus', event => {
-    focus = true
-    search.classList.add('active')
-  })
-
-  searchDiv.addEventListener('mouseover', event => {
-    hover = true
-    search.classList.add('active')
-  })
-
-  searchInput.addEventListener('blur', event => {
-    focus = false
-    if (hover) return
-    search.classList.remove('active')
-  })
-
-  search.addEventListener('mouseleave', event => {
-    hover = false
-    if (focus) return
-    search.classList.remove('active')
-  })
-
-  search.addEventListener('click', event => {
-    search.classList.add('active')
-    search.querySelector('input').focus()
-  })
-
-  searchInput.addEventListener('keyup', searchEvent)
-}
-
 function closeHelp (event) {
   event.preventDefault()
 
@@ -620,7 +489,7 @@ document.addEventListener('DOMContentLoaded', function (event) {
   templates.message = document.querySelector('#message-template')
   templates.move = document.querySelector('#move-template')
 
-  if (user.AllowEdit) {
+  if (data.user.AllowEdit) {
     buttons.delete.addEventListener('click', deleteEvent)
   }
 

_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 }}

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

_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">

_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 }}