Internationalization (#183)

* update dependencies to latest version

* add mising dependencies

* Syntax updates and such

* Reorganize files and translate login to portuguese

* Add i18n to buttons

* Error translations and some bug fixes

* Add i18n to files

* i18n on prompts

* update search

* Prompts and Sidebar in

* i18n to the header

* Change to YAML

* alphabetical order

* # Add simplified Chinese language (#180)

* Add Simplified Chinese and sort by alphabet

* Add more text to translations

* API Updates

* Update zh_cn.yaml (#182)

* Api Upgrades

* Simplify api and clean zh_cn lang file

* Improve error logging

* Fix some route bugs and separate login styles

* better organization

* Fix bug on api

* Build assets Tue, Aug  1, 2017 11:32:23 AM

* Rename users path and fix bug scroll event

* Start Portuguese translation and file org

* Add more to the PT translation

* Add show

* Build assets Tue Aug  1 12:01:39 GMTST 2017

* Add locale to cofnig

* Update portuguese translation

* You can change the language :)

* :D

* Build assets Tue Aug  1 17:50:31 GMTST 2017

* Update requestContext variable names

* Remove assets

* Build assets Tue Aug  1 20:48:21 GMTST 2017


Former-commit-id: 08f373725c14990f61dbb00bea43118c496c5d32 [formerly 281e23007c79dac1e9b86424201891a99d20f73a] [formerly b1b73f42debbce06b4f36e4cf97e319789c85b9f [formerly d8bc73390c37409efa60804d94779a7629944caa]]
Former-commit-id: 92e99405cbf9935d1cf77b0fe70b122fca552be6 [formerly 3cd365e862f2a54ada60e226a19ac607b8d0c43b]
Former-commit-id: cf9815114ac686cdf75a6b1cba15adafe493d083

assets/src/components/files/Preview.vue

@@ -0,0 +1,139 @@
+<template>
+  <div id="previewer">
+    <div class="bar">
+      <button @click="back" class="action" :title="$t('files.closePreview')" :aria-label="$t('files.closePreview')" id="close">
+        <i class="material-icons">close</i>
+      </button>
+
+      <rename-button v-if="allowEdit()"></rename-button>
+      <delete-button v-if="allowEdit()"></delete-button>
+      <download-button></download-button>
+      <info-button></info-button>
+    </div>
+
+    <button class="action" @click="prev" v-show="hasPrevious" :aria-label="$t('buttons.previous')" :title="$t('buttons.previous')">
+      <i class="material-icons">chevron_left</i>
+    </button>
+    <button class="action" @click="next" v-show="hasNext" :aria-label="$t('buttons.next')" :title="$t('buttons.next')">
+      <i class="material-icons">chevron_right</i>
+    </button>
+
+    <div class="preview">
+      <img v-if="req.type == 'image'" :src="raw()">
+      <audio v-else-if="req.type == 'audio'" :src="raw()" controls></audio>
+      <video v-else-if="req.type == 'video'" :src="raw()" controls>
+        Sorry, your browser doesn't support embedded videos,
+        but don't worry, you can <a :href="download()">download it</a>
+        and watch it with your favorite video player!
+      </video>
+      <object v-else-if="req.extension == '.pdf'" class="pdf" :data="raw()"></object>
+      <a v-else-if="req.type == 'blob'" :href="download()">
+        <h2 class="message">{{ $t('buttons.download') }} <i class="material-icons">file_download</i></h2>
+      </a>
+      <pre v-else >{{ req.content }}</pre>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import url from '@/utils/url'
+import api from '@/utils/api'
+import InfoButton from '@/components/buttons/Info'
+import DeleteButton from '@/components/buttons/Delete'
+import RenameButton from '@/components/buttons/Rename'
+import DownloadButton from '@/components/buttons/Download'
+
+export default {
+  name: 'preview',
+  components: {
+    InfoButton,
+    DeleteButton,
+    RenameButton,
+    DownloadButton
+  },
+  data: function () {
+    return {
+      previousLink: '',
+      nextLink: '',
+      listing: null
+    }
+  },
+  computed: {
+    ...mapState(['req', 'oldReq']),
+    hasPrevious () {
+      return (this.previousLink !== '')
+    },
+    hasNext () {
+      return (this.nextLink !== '')
+    }
+  },
+  mounted () {
+    window.addEventListener('keyup', this.key)
+    api.fetch(url.removeLastDir(this.$route.path))
+      .then(req => {
+        this.listing = req
+        this.updateLinks()
+      })
+      .catch(error => { console.log(error) })
+  },
+  beforeDestroy () {
+    window.removeEventListener('keyup', this.key)
+  },
+  methods: {
+    download () {
+      let url = `${this.$store.state.baseURL}/api/download`
+      url += this.req.url.slice(6)
+
+      return url
+    },
+    raw () {
+      return `${this.download()}?&inline=true`
+    },
+    back (event) {
+      let uri = url.removeLastDir(this.$route.path) + '/'
+      this.$router.push({ path: uri })
+    },
+    prev () {
+      this.$router.push({ path: this.previousLink })
+    },
+    next () {
+      this.$router.push({ path: this.nextLink })
+    },
+    key (event) {
+      event.preventDefault()
+
+      if (event.which === 13 || event.which === 39) { // right arrow
+        if (this.hasNext) this.next()
+      } else if (event.which === 37) { // left arrow
+        if (this.hasPrevious) this.prev()
+      }
+    },
+    updateLinks () {
+      let pos = null
+
+      for (let i = 0; i < this.listing.items.length; i++) {
+        if (this.listing.items[i].name === this.req.name) {
+          pos = i
+          break
+        }
+      }
+
+      if (pos === null) {
+        return
+      }
+
+      if (pos !== 0) {
+        this.previousLink = this.listing.items[pos - 1].url
+      }
+
+      if (pos !== this.listing.items.length - 1) {
+        this.nextLink = this.listing.items[pos + 1].url
+      }
+    },
+    allowEdit (event) {
+      return this.$store.state.user.allowEdit
+    }
+  }
+}
+</script>