Improvements :)

Former-commit-id: c1c1881302a241fdc7140e6aabeb9b49977bd7c6 [formerly 84bb454c2f34baffd9dfa91645b8aff149e52620] [formerly 29e258c7a16db1ca8a3fde7c5e4e3cffc47899a6 [formerly 84ddad027fed623021092d56872ff138bc5ea416]] Former-commit-id: 0018a51df5bc801b783a3ffe17d9f33c504ce094 [formerly 0072c425cd4754e38f30007ab9f5272ea4b40370] Former-commit-id: d298f006e58ef9e4987def4bc354818062b30fcd
2017-06-28 22:20:28 +01:00
parent 7f5a361bc1
commit 346412eb2a
21 changed files with 467 additions and 445 deletions
--- a/_assets/src/components/InfoPrompt.vue
+++ b/_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>