Improvements :)

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

_assets/src/components/Help.vue

@@ -0,0 +1,38 @@
+<template>
+    <div class="prompt help">
+        <h3>Help</h3>
+
+        <ul>
+            <li><strong>F1</strong> - this information</li>
+            <li><strong>F2</strong> - rename file</li>
+            <li><strong>DEL</strong> - delete selected items</li>
+            <li><strong>ESC</strong> - clear selection and/or close the prompt</li>
+            <li><strong>CTRL + S</strong> - save a file or download the directory where you are</li>
+            <li><strong>CTRL + Click</strong> - select multiple files or directories</li>
+            <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" @click="close" class="ok">OK</button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'help',
+  methods: {
+    close: function (event) {
+      window.info.showHelp = false
+    }
+  }
+}
+</script>
+

_assets/src/components/InfoButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <button title="Info" aria-label="Info" class="action" id="info">
+    <button @click="show" title="Info" aria-label="Info" class="action" id="info">
         <i class="material-icons">info</i>
         <span>Info</span>
     </button>
@@ -8,8 +8,10 @@
 <script>
 export default {
   name: 'info-button',
-  data: function () {
-    return window.info.page.data
+  methods: {
+    show: function (event) {
+      window.info.showInfo = true
+    }
   }
 }
 </script>

_assets/src/components/InfoPrompt.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="prompt">
+        <h3>File Information</h3>
+
+        <p v-show="listing.selected.length > 1">{{ listing.selected.length }} files selected.</p>
+
+        <p v-show="listing.selected.length < 2"><strong>Display Name:</strong> {{ name() }}</p>
+        <p><strong>Size:</strong> <span id="content_length"></span>{{ humanSize() }}</p>
+        <p v-show="listing.selected.length < 2"><strong>Last Modified:</strong> {{ humanTime() }}</p>
+
+        <section v-show="dir() && listing.selected.length === 0">
+          <p><strong>Number of files:</strong> {{ req.data.numFiles }}</p>
+          <p><strong>Number of directories:</strong> {{ req.data.numDirs }}</p>
+        </section>
+
+        <section v-show="!dir()">
+            <p><strong>MD5:</strong> <code><a @click="checksum($event, 'md5')">show</a></code></p>
+            <p><strong>SHA1:</strong> <code><a @click="checksum($event, 'sha1')">show</a></code></p>
+            <p><strong>SHA256:</strong> <code><a @click="checksum($event, 'sha256')">show</a></code></p>
+            <p><strong>SHA512:</strong> <code><a @click="checksum($event, 'sha512')">show</a></code></p>
+        </section>
+
+        <div>
+            <button type="submit" @click="close" class="ok">OK</button>
+        </div>
+    </div>
+</template>
+
+<script>
+import filesize from 'filesize'
+import moment from 'moment'
+
+export default {
+  name: 'info-prompt',
+  data: function () {
+    return window.info
+  },
+  methods: {
+    humanSize: function () {
+      if (this.listing.selected.length === 0 || this.req.kind !== 'listing') {
+        return filesize(this.req.data.size)
+      }
+
+      var sum = 0
+
+      for (let i = 0; i < this.listing.selected.length; i++) {
+        sum += this.req.data.items[this.listing.selected[i]].size
+      }
+
+      return filesize(sum)
+    },
+    humanTime: function () {
+      if (this.listing.selected.length === 0) {
+        return moment(this.req.data.modified).fromNow()
+      }
+
+      return moment(this.req.data.items[this.listing.selected[0]]).fromNow()
+    },
+    name: function () {
+      if (this.listing.selected.length === 0) {
+        return this.req.data.name
+      }
+
+      return this.req.data.items[this.listing.selected[0]].name
+    },
+    dir: function () {
+      if (this.listing.selected.length > 1) {
+        // Don't show when multiple selected.
+        return true
+      }
+
+      if (this.listing.selected.length === 0) {
+        return this.req.data.isDir
+      }
+
+      return this.req.data.items[this.listing.selected[0]].isDir
+    },
+    checksum: function (event, hash) {
+      event.preventDefault()
+
+      let request = new window.XMLHttpRequest()
+      let link
+
+      if (this.listing.selected.length) {
+        link = this.req.data.items[this.listing.selected[0]].url
+      } else {
+        link = window.location.pathname
+      }
+
+      request.open('GET', `${link}?checksum=${hash}`, true)
+
+      request.onload = () => {
+        if (request.status >= 300) {
+          console.log(request.statusText)
+          return
+        }
+
+        event.target.innerHTML = request.responseText
+      }
+
+      request.onerror = (e) => console.log(e)
+      request.send()
+    },
+    close: function () {
+      this.showInfo = false
+
+      let checksums = this.$el.querySelectorAll('a')
+      for (let i = 0; i < checksums.length; i++) {
+        checksums[i].innerHTML = 'show'
+      }
+    }
+  }
+}
+</script>

_assets/src/components/Listing.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="listing" 
-      :class="data.display" 
+      :class="req.data.display" 
       @drop="drop"
       @dragenter="dragEnter" 
       @dragend="dragEnd">
@@ -8,13 +8,13 @@
             <div class="item header">
                 <div></div>
                 <div>
-                    <p v-bind:class="{ active: data.sort === 'name' }" class="name"><span>Name</span>
-                        <a v-if="data.sort === 'name' && data.order != 'asc'" href="?sort=name&order=asc"><i class="material-icons">arrow_upward</i></a>
+                    <p v-bind:class="{ active: req.data.sort === 'name' }" class="name"><span>Name</span>
+                        <a v-if="req.data.sort === 'name' && req.data.order != 'asc'" href="?sort=name&order=asc"><i class="material-icons">arrow_upward</i></a>
                         <a v-else href="?sort=name&order=desc"><i class="material-icons">arrow_downward</i></a>
                     </p>
 
-                    <p v-bind:class="{ active: data.sort === 'size' }" class="size"><span>Size</span>
-                        <a v-if="data.sort === 'size' && data.order != 'asc'" href="?sort=size&order=asc"><i class="material-icons">arrow_upward</i></a>
+                    <p v-bind:class="{ active: req.data.sort === 'size' }" class="size"><span>Size</span>
+                        <a v-if="req.data.sort === 'size' && req.data.order != 'asc'" href="?sort=size&order=asc"><i class="material-icons">arrow_upward</i></a>
                         <a v-else href="?sort=size&order=desc"><i class="material-icons">arrow_downward</i></a>
                     </p>
 
@@ -23,16 +23,15 @@
             </div>
         </div>
 
-        <h2 v-if="(data.numDirs + data.numFiles) == 0" class="message">It feels lonely here :'(</h2>
+        <h2 v-if="(req.data.numDirs + req.data.numFiles) == 0" class="message">It feels lonely here :'(</h2>
 
-        <h2 v-if="data.numDirs > 0">Folders</h2>
-        <div v-if="data.numDirs > 0">
+        <h2 v-if="req.data.numDirs > 0">Folders</h2>
+        <div v-if="req.data.numDirs > 0">
           <item
-            v-for="(item, index) in data.items"
+            v-for="(item, index) in req.data.items"
             v-if="item.isDir"
             :key="base64(item.name)"
-            :id="base64(item.name)"
-            v-bind:selected="selected"
+            v-bind:index="index"
             v-bind:name="item.name"
             v-bind:isDir="item.isDir"
             v-bind:url="item.url"
@@ -42,14 +41,13 @@
           </item>
         </div>
 
-        <h2 v-if="data.numFiles > 0">Files</h2>
-        <div v-if="data.numFiles > 0">
+        <h2 v-if="req.data.numFiles > 0">Files</h2>
+        <div v-if="req.data.numFiles > 0">
           <item
-            v-for="(item, index) in data.items"
+            v-for="(item, index) in req.data.items"
             v-if="!item.isDir"
             :key="base64(item.name)"
-            :id="base64(item.name)"
-            v-bind:selected="selected"
+            v-bind:index="index"
             v-bind:name="item.name"
             v-bind:isDir="item.isDir"
             v-bind:url="item.url"
@@ -73,11 +71,7 @@ import page from '../page.js'
 export default {
   name: 'preview',
   data: function () {
-    return {
-      data: window.info.page.data,
-      selected: [],
-      multiple: false
-    }
+    return window.info
   },
   components: { Item },
   mounted: function () {

_assets/src/components/ListingItem.vue

@@ -33,7 +33,10 @@ import array from '../array.js'
 
 export default {
   name: 'item',
-  props: ['name', 'isDir', 'url', 'type', 'size', 'modified', 'selected'],
+  props: ['name', 'isDir', 'url', 'type', 'size', 'modified', 'index'],
+  data: function () {
+    return window.info.listing
+  },
   methods: {
     icon: function () {
       if (this.isDir) return 'folder'
@@ -97,22 +100,18 @@ export default {
       })
 
       this.selected.length = 0
-
-      // listing.handleSelectionChange()
       return false
     },
     click: function (event) {
-      let el = event.currentTarget
-
       if (this.selected.length !== 0) event.preventDefault()
-      if (this.selected.indexOf(el.id) === -1) {
+      if (this.selected.indexOf(this.index) === -1) {
         if (!event.ctrlKey && !this.multiple) this.unselectAll()
 
-        el.setAttribute('aria-selected', true)
-        this.selected.push(el.id)
+        this.$el.setAttribute('aria-selected', true)
+        this.selected.push(this.index)
       } else {
-        el.setAttribute('aria-selected', false)
-        this.selected = array.remove(this.selected, el.id)
+        this.$el.setAttribute('aria-selected', false)
+        this.selected = array.remove(this.selected, this.index)
       }
 
       // this.handleSelectionChange()

_assets/src/components/Preview.vue

@@ -23,17 +23,20 @@
 </template>
 
 <script>
+import page from '../page'
+
 export default {
   name: 'preview',
   data: function () {
-    return window.info.page.data
+    return window.info.req.data
   },
   methods: {
     raw: function () {
       return this.url + '?raw=true'
     },
     back: function (event) {
-      window.history.back()
+      let url = page.removeLastDir(window.location.pathname)
+      page.open(url)
     }
   }
 }

_assets/src/components/Search.vue

@@ -18,17 +18,7 @@
 <script>
 import page from '../page'
 
-// Remove the last directory of an url
-var removeLastDirectoryPartOf = function (url) {
-  var arr = url.split('/')
-  if (arr.pop() === '') {
-    arr.pop()
-  }
-  return (arr.join('/'))
-}
-
-var user = window.info.user
-var ssl = window.ssl
+var $ = window.info
 
 export default {
   name: 'search',
@@ -49,8 +39,8 @@ export default {
   },
   methods: {
     reset: function () {
-      if (user.allowCommands && user.commands.length > 0) {
-        this.box.innerHTML = `Search or use one of your supported commands: ${user.commands.join(', ')}.`
+      if ($.user.allowCommands && $.user.commands.length > 0) {
+        this.box.innerHTML = `Search or use one of your supported commands: ${$.user.commands.join(', ')}.`
       } else {
         this.box.innerHTML = 'Type and press enter to search.'
       }
@@ -59,8 +49,8 @@ export default {
       let value = this.input.value
       let pieces = value.split(' ')
 
-      for (let i = 0; i < user.commands.length; i++) {
-        if (pieces[0] === user.commands[0]) {
+      for (let i = 0; i < $.user.commands.length; i++) {
+        if (pieces[0] === $.user.commands[0]) {
           return true
         }
       }
@@ -79,7 +69,7 @@ export default {
         return
       }
 
-      if (!this.supported() || !user.allowCommands) {
+      if (!this.supported() || !$.user.allowCommands) {
         this.box.innerHTML = 'Press enter to search.'
       } else {
         this.box.innerHTML = 'Press enter to execute.'
@@ -92,12 +82,12 @@ export default {
       let url = window.location.host + window.location.pathname
 
       if (document.getElementById('editor')) {
-        url = removeLastDirectoryPartOf(url)
+        url = page.removeLastDir(url)
       }
 
-      let protocol = ssl ? 'wss:' : 'ws:'
+      let protocol = $.ssl ? 'wss:' : 'ws:'
 
-      if (this.supported() && user.allowCommands) {
+      if (this.supported() && $.user.allowCommands) {
         let conn = new window.WebSocket(`${protocol}//${url}?command=true`)
 
         conn.onopen = () => {