github
/
filebrowser
mirror of https://github.com/filebrowser/filebrowser
1
0
Fork 0
Code Issues Releases Wiki Activity

Improvements and more reliability :) 

Former-commit-id: 4d5ca1dd46c57e35222860a66c9f98f945fbaad7 [formerly 5a0bea68d0ddec09c95919c1ef45bdff3f602bc6] [formerly b324db325f094e5563f945c41f4f9eeb0b2df086 [formerly 698a08e1a9]]
Former-commit-id: 6c39601f33482edafad63f4b39e10e2720db2813 [formerly 02a9c37289ce3d27eee55f3eb3052391349adc0e]
Former-commit-id: fd29981acff35fa5428af5e1d95fe1d53bba0459
pull/726/head
Henrique Dias 2017-06-30 17:49:05 +01:00
parent 713e89eb68
commit c7e37c09e1
17 changed files with 239 additions and 300 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
_assets/src/components/DeletePrompt.vue
View File

@ -46,21 +46,6 @@ export default {
return return
} }
if (this.selectedCount === 1) {
webdav.trash(this.req.data.items[this.selected[0]].url)
.then(() => {
// buttons.setDone('delete')
page.reload()
})
.catch(error => {
// buttons.setDone('delete', false)
console.log(error)
})
return
}
// More than one item!
let promises = [] let promises = []
for (let index of this.selected) { for (let index of this.selected) {
@ -74,6 +59,7 @@ export default {
}) })
.catch(error => { .catch(error => {
console.log(error) console.log(error)
page.reload()
// buttons.setDone('delete', false) // buttons.setDone('delete', false)
}) })
} }

11
_assets/src/components/Help.vue
View File

@ -20,19 +20,12 @@
</ul> </ul>
<div> <div>
<button type="submit" @click="close" class="ok">OK</button> <button type="submit" @click="$store.commit('showHelp', false)" class="ok">OK</button>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {name: 'help'}
name: 'help',
methods: {
close: function (event) {
this.$store.commit('showHelp', false)
}
}
}
</script> </script>

17
_assets/src/components/InfoButton.vue
View File

@ -1,17 +1,10 @@
<template> <template>
<button @click="show" title="Info" aria-label="Info" class="action"> <button title="Info" aria-label="Info" class="action" @click="$store.commit('showInfo', true)">
<i class="material-icons">info</i> <i class="material-icons">info</i>
<span>Info</span> <span>Info</span>
</button> </button>
</template> </template>
<script> <script>
export default { export default {name: 'info-button'}
name: 'info-button',
methods: {
show: function (event) {
this.$store.commit('showInfo', true)
}
}
}
</script> </script>

63
_assets/src/components/InfoPrompt.vue
View File

@ -1,77 +1,77 @@
<template> <template>
<div class="prompt"> <div class="prompt">
<h3>File Information</h3> <h3>File Information</h3>
<p v-show="selected.length > 1">{{ selected.length }} files selected.</p> <p v-show="selected.length > 1">{{ selected.length }} files selected.</p>
<p v-show="selected.length < 2"><strong>Display Name:</strong> {{ name() }}</p> <p v-show="selected.length < 2"><strong>Display Name:</strong> {{ name() }}</p>
<p><strong>Size:</strong> <span id="content_length"></span>{{ humanSize() }}</p> <p><strong>Size:</strong> <span id="content_length"></span>{{ humanSize() }}</p>
<p v-show="selected.length < 2"><strong>Last Modified:</strong> {{ humanTime() }}</p> <p v-show="selected.length < 2"><strong>Last Modified:</strong> {{ humanTime() }}</p>
<section v-show="dir() && selected.length === 0"> <section v-show="dir() && selected.length === 0">
<p><strong>Number of files:</strong> {{ req.data.numFiles }}</p> <p><strong>Number of files:</strong> {{ req.data.numFiles }}</p>
<p><strong>Number of directories:</strong> {{ req.data.numDirs }}</p> <p><strong>Number of directories:</strong> {{ req.data.numDirs }}</p>
</section> </section>
<section v-show="!dir()"> <section v-show="!dir()">
<p><strong>MD5:</strong> <code><a @click="checksum($event, 'md5')">show</a></code></p> <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>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>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> <p><strong>SHA512:</strong> <code><a @click="checksum($event, 'sha512')">show</a></code></p>
</section> </section>
<div> <div>
<button type="submit" @click="close" class="ok">OK</button> <button type="submit" @click="$store.commit('showInfo', false)" class="ok">OK</button>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import {mapState} from 'vuex' import {mapState, mapGetters} from 'vuex'
import filesize from 'filesize' import filesize from 'filesize'
import moment from 'moment' import moment from 'moment'
export default { export default {
name: 'info-prompt', name: 'info-prompt',
data: function () { computed: {
return window.info ...mapState(['req', 'selected']),
...mapGetters(['selectedCount'])
}, },
computed: mapState(['req', 'selected']),
methods: { methods: {
humanSize: function () { humanSize: function () {
if (this.selected.length === 0 || this.req.kind !== 'listing') { if (this.selectedCount === 0 || this.req.kind !== 'listing') {
return filesize(this.req.data.size) return filesize(this.req.data.size)
} }
var sum = 0 var sum = 0
for (let i = 0; i < this.selected.length; i++) { for (let i = 0; i < this.selectedCount; i++) {
sum += this.req.data.items[this.selected[i]].size sum += this.req.data.items[this.selected[i]].size
} }
return filesize(sum) return filesize(sum)
}, },
humanTime: function () { humanTime: function () {
if (this.selected.length === 0) { if (this.selectedCount === 0) {
return moment(this.req.data.modified).fromNow() return moment(this.req.data.modified).fromNow()
} }
return moment(this.req.data.items[this.selected[0]]).fromNow() return moment(this.req.data.items[this.selected[0]]).fromNow()
}, },
name: function () { name: function () {
if (this.selected.length === 0) { if (this.selectedCount === 0) {
return this.req.data.name return this.req.data.name
} }
return this.req.data.items[this.selected[0]].name return this.req.data.items[this.selected[0]].name
}, },
dir: function () { dir: function () {
if (this.selected.length > 1) { if (this.selectedCount > 1) {
// Don't show when multiple selected. // Don't show when multiple selected.
return true return true
} }
if (this.selected.length === 0) { if (this.selectedCount === 0) {
return this.req.data.isDir return this.req.data.isDir
} }
@ -83,7 +83,7 @@ export default {
let request = new window.XMLHttpRequest() let request = new window.XMLHttpRequest()
let link let link
if (this.selected.length) { if (this.selectedCount) {
link = this.req.data.items[this.selected[0]].url link = this.req.data.items[this.selected[0]].url
} else { } else {
link = window.location.pathname link = window.location.pathname
@ -102,9 +102,6 @@ export default {
request.onerror = (e) => console.log(e) request.onerror = (e) => console.log(e)
request.send() request.send()
},
close: function () {
this.$store.commit('showInfo', false)
} }
} }
} }

164
_assets/src/components/Listing.vue
View File

@ -1,84 +1,81 @@
<template> <template>
<div id="listing" <div id="listing"
:class="req.data.display" :class="req.data.display"
@drop="drop" @drop="drop"
@dragenter="dragEnter" @dragenter="dragEnter"
@dragend="dragEnd"> @dragend="dragEnd">
<div>
<div class="item header">
<div></div>
<div> <div>
<div class="item header"> <p v-bind:class="{ active: req.data.sort === 'name' }" class="name"><span>Name</span>
<div></div> <a v-if="req.data.sort === 'name' && req.data.order != 'asc'" href="?sort=name&order=asc"><i class="material-icons">arrow_upward</i></a>
<div> <a v-else href="?sort=name&order=desc"><i class="material-icons">arrow_downward</i></a>
<p v-bind:class="{ active: req.data.sort === 'name' }" class="name"><span>Name</span> </p>
<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: req.data.sort === 'size' }" class="size"><span>Size</span> <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-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> <a v-else href="?sort=size&order=desc"><i class="material-icons">arrow_downward</i></a>
</p> </p>
<p class="modified">Last modified</p> <p class="modified">Last modified</p>
</div>
</div>
</div>
<h2 v-if="(req.data.numDirs + req.data.numFiles) == 0" class="message">It feels lonely here :'(</h2>
<h2 v-if="req.data.numDirs > 0">Folders</h2>
<div v-if="req.data.numDirs > 0">
<item
v-for="(item, index) in req.data.items"
v-if="item.isDir"
:key="base64(item.name)"
v-bind:index="index"
v-bind:name="item.name"
v-bind:isDir="item.isDir"
v-bind:url="item.url"
v-bind:modified="item.modified"
v-bind:type="item.type"
v-bind:size="item.size">
</item>
</div>
<h2 v-if="req.data.numFiles > 0">Files</h2>
<div v-if="req.data.numFiles > 0">
<item
v-for="(item, index) in req.data.items"
v-if="!item.isDir"
:key="base64(item.name)"
v-bind:index="index"
v-bind:name="item.name"
v-bind:isDir="item.isDir"
v-bind:url="item.url"
v-bind:modified="item.modified"
v-bind:type="item.type"
v-bind:size="item.size">
</item>
</div>
<input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" value="Upload" multiple>
<div v-show="$store.state.multiple" :class="{ active: $store.state.multiple }" id="multiple-selection">
<p>Multiple selection enabled</p>
<div @click="$store.commit('multiple', false)" tabindex="0" role="button" title="Clear" aria-label="Clear" class="action">
<i class="material-icons" title="Clear">clear</i>
</div>
</div> </div>
</div>
</div> </div>
<h2 v-if="(req.data.numDirs + req.data.numFiles) == 0" class="message">It feels lonely here :'(</h2>
<h2 v-if="req.data.numDirs > 0">Folders</h2>
<div v-if="req.data.numDirs > 0">
<item v-for="(item, index) in req.data.items"
v-if="item.isDir"
:key="base64(item.name)"
v-bind:index="index"
v-bind:name="item.name"
v-bind:isDir="item.isDir"
v-bind:url="item.url"
v-bind:modified="item.modified"
v-bind:type="item.type"
v-bind:size="item.size">
</item>
</div>
<h2 v-if="req.data.numFiles > 0">Files</h2>
<div v-if="req.data.numFiles > 0">
<item v-for="(item, index) in req.data.items"
v-if="!item.isDir"
:key="base64(item.name)"
v-bind:index="index"
v-bind:name="item.name"
v-bind:isDir="item.isDir"
v-bind:url="item.url"
v-bind:modified="item.modified"
v-bind:type="item.type"
v-bind:size="item.size">
</item>
</div>
<input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" value="Upload" multiple>
<div v-show="$store.state.multiple" :class="{ active: $store.state.multiple }" id="multiple-selection">
<p>Multiple selection enabled</p>
<div @click="$store.commit('multiple', false)" tabindex="0" role="button" title="Clear" aria-label="Clear" class="action">
<i class="material-icons" title="Clear">clear</i>
</div>
</div>
</div>
</template> </template>
<script> <script>
import {mapState} from 'vuex'
import Item from './ListingItem' import Item from './ListingItem'
import webdav from '../utils/webdav' import webdav from '../utils/webdav'
import page from '../utils/page' import page from '../utils/page'
export default { export default {
name: 'listing', name: 'listing',
data: function () {
return window.info
},
components: { Item }, components: { Item },
computed: mapState(['req']),
mounted: function () { mounted: function () {
document.addEventListener('dragover', function (event) { document.addEventListener('dragover', function (event) {
event.preventDefault() event.preventDefault()
@ -98,11 +95,7 @@ export default {
}) })
}, },
dragEnd: function (event) { dragEnd: function (event) {
let items = document.getElementsByClassName('item') this.resetOpacity()
Array.from(items).forEach(file => {
file.style.opacity = 1
})
}, },
drop: function (event) { drop: function (event) {
event.preventDefault() event.preventDefault()
@ -125,17 +118,22 @@ export default {
this.handleFiles(files, '') this.handleFiles(files, '')
} else { } else {
let items = document.getElementsByClassName('item') this.resetOpacity()
Array.from(items).forEach(file => {
file.style.opacity = 1
})
} }
}, },
uploadInput: function (event) { uploadInput: function (event) {
this.handleFiles(event.currentTarget.files, '') this.handleFiles(event.currentTarget.files, '')
}, },
resetOpacity: function () {
let items = document.getElementsByClassName('item')
Array.from(items).forEach(file => {
file.style.opacity = 1
})
},
handleFiles: function (files, base) { handleFiles: function (files, base) {
this.resetOpacity()
// buttons.setLoading('upload') // buttons.setLoading('upload')
let promises = [] let promises = []
@ -144,14 +142,14 @@ export default {
} }
Promise.all(promises) Promise.all(promises)
.then(() => { .then(() => {
page.reload() page.reload()
// buttons.setDone('upload') // buttons.setDone('upload')
}) })
.catch(e => { .catch(e => {
console.log(e) console.log(e)
// buttons.setDone('upload', false) // buttons.setDone('upload', false)
}) })
return false return false
} }

98
_assets/src/components/ListingItem.vue
View File

@ -1,31 +1,32 @@
<template> <template>
<div class="item" <div class="item"
draggable="true" draggable="true"
@dragstart="dragStart" @dragstart="dragStart"
@dragover="dragOver" @dragover="dragOver"
@drop="drop" @drop="drop"
@click="click" @click="click"
@dblclick="open" @dblclick="open"
:id="base64()"> :aria-selected="isSelected()"
<div> :id="base64()">
<i class="material-icons">{{ icon() }}</i> <div>
</div> <i class="material-icons">{{ icon() }}</i>
<div>
<p class="name">{{ name }}</p>
<p v-if="isDir" class="size" data-order="-1">&mdash;</p>
<p v-else class="size" :data-order="humanSize()">{{ humanSize() }}</p>
<p class="modified">
<time :datetime="modified">{{ humanTime() }}</time>
</p>
</div>
</div> </div>
<div>
<p class="name">{{ name }}</p>
<p v-if="isDir" class="size" data-order="-1">&mdash;</p>
<p v-else class="size" :data-order="humanSize()">{{ humanSize() }}</p>
<p class="modified">
<time :datetime="modified">{{ humanTime() }}</time>
</p>
</div>
</div>
</template> </template>
<script> <script>
import { mapMutations, mapGetters } from 'vuex' import { mapMutations, mapGetters, mapState } from 'vuex'
import filesize from 'filesize' import filesize from 'filesize'
import moment from 'moment' import moment from 'moment'
import webdav from '../utils/webdav.js' import webdav from '../utils/webdav.js'
@ -34,9 +35,15 @@ import page from '../utils/page.js'
export default { export default {
name: 'item', name: 'item',
props: ['name', 'isDir', 'url', 'type', 'size', 'modified', 'index'], props: ['name', 'isDir', 'url', 'type', 'size', 'modified', 'index'],
computed: {
...mapState(['selected', 'req']),
...mapGetters(['selectedCount'])
},
methods: { methods: {
...mapGetters(['selectedCount']), ...mapMutations(['addSelected', 'removeSelected', 'resetSelected']),
...mapMutations(['addSelected', 'removeSelected']), isSelected: function () {
return (this.selected.indexOf(this.index) !== -1)
},
icon: function () { icon: function () {
if (this.isDir) return 'folder' if (this.isDir) return 'folder'
if (this.type === 'image') return 'insert_photo' if (this.type === 'image') return 'insert_photo'
@ -54,16 +61,9 @@ export default {
return window.btoa(this.name) return window.btoa(this.name)
}, },
dragStart: function (event) { dragStart: function (event) {
let el = event.target if (this.selectedCount === 0) {
this.addSelected(this.index)
for (let i = 0; i < 5; i++) {
if (!el.classList.contains('item')) {
el = el.parentElement
}
} }
event.dataTransfer.setData('name', el.querySelector('.name').innerHTML)
event.dataTransfer.setData('obj-url', this.url)
}, },
dragOver: function (event) { dragOver: function (event) {
if (!this.isDir) return if (!this.isDir) return
@ -83,39 +83,31 @@ export default {
if (!this.isDir) return if (!this.isDir) return
event.preventDefault() event.preventDefault()
let url = event.dataTransfer.getData('obj-url') if (this.selectedCount === 0) return
let name = event.dataTransfer.getData('name')
if (name === '' || url === '' || url === this.url) return let promises = []
webdav.move(url, this.url + name) for (let i of this.selected) {
let url = this.req.data.items[i].url
let name = this.req.data.items[i].name
promises.push(webdav.move(url, this.url + name))
}
Promise.all(promises)
.then(() => page.reload()) .then(() => page.reload())
.catch(error => console.log(error)) .catch(error => console.log(error))
}, },
unselectAll: function () {
let items = document.getElementsByClassName('item')
Array.from(items).forEach(link => {
link.setAttribute('aria-selected', false)
})
this.$store.commit('resetSelected')
return false
},
click: function (event) { click: function (event) {
if (this.selectedCount !== 0) event.preventDefault() if (this.selectedCount !== 0) event.preventDefault()
if (this.$store.state.selected.indexOf(this.index) === -1) { if (this.$store.state.selected.indexOf(this.index) === -1) {
if (!event.ctrlKey && !this.$store.state.multiple) this.unselectAll() if (!event.ctrlKey && !this.$store.state.multiple) this.resetSelected()
this.$el.setAttribute('aria-selected', true)
// WORKS: this.$store.commit('addSelected', this.index)
this.addSelected(this.index) this.addSelected(this.index)
} else { } else {
this.$el.setAttribute('aria-selected', false)
this.removeSelected(this.index) this.removeSelected(this.index)
// WORKS: this.$store.commit('removeSelected', this.index)
} }
// this.handleSelectionChange()
return false return false
}, },
open: function (event) { open: function (event) {

17
_assets/src/components/MoveButton.vue
View File

@ -1,17 +1,10 @@
<template> <template>
<button @click="show" aria-label="Move" title="Move" class="action"> <button @click="$store.commit('showMove', true)" aria-label="Move" title="Move" class="action">
<i class="material-icons">forward</i> <i class="material-icons">forward</i>
<span>Move file</span> <span>Move file</span>
</button> </button>
</template> </template>
<script> <script>
export default { export default {name: 'move-button'}
name: 'move-button',
methods: {
show: function (event) {
this.$store.commit('showMove', true)
}
}
}
</script> </script>

23
_assets/src/components/MovePrompt.vue
View File

@ -11,17 +11,16 @@
<div> <div>
<button class="ok" @click="move">Move</button> <button class="ok" @click="move">Move</button>
<button class="cancel" @click="cancel">Cancel</button> <button class="cancel" @click="$store.commit('showMove', false)">Cancel</button>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { mapState } from 'vuex'
import page from '../utils/page' import page from '../utils/page'
import webdav from '../utils/webdav' import webdav from '../utils/webdav'
var $ = window.info
export default { export default {
name: 'move-prompt', name: 'move-prompt',
data: function () { data: function () {
@ -30,16 +29,17 @@ export default {
current: window.location.pathname current: window.location.pathname
} }
}, },
computed: mapState(['req', 'selected', 'baseURL']),
mounted: function () { mounted: function () {
if (window.location.pathname !== $.baseURL + '/') { if (window.location.pathname !== this.baseURL + '/') {
this.items.push({ this.items.push({
name: '..', name: '..',
url: page.removeLastDir(window.location.pathname) + '/' url: page.removeLastDir(window.location.pathname) + '/'
}) })
} }
if ($.req.kind === 'listing') { if (this.req.kind === 'listing') {
for (let item of $.req.data.items) { for (let item of this.req.data.items) {
if (!item.isDir) continue if (!item.isDir) continue
this.items.push({ this.items.push({
@ -52,9 +52,6 @@ export default {
} }
}, },
methods: { methods: {
cancel: function (event) {
this.$store.commit('showMove', false)
},
move: function (event) { move: function (event) {
event.preventDefault() event.preventDefault()
@ -68,9 +65,9 @@ export default {
dest = selected.dataset.url dest = selected.dataset.url
} }
for (let item of $.selected) { for (let item of this.selected) {
let from = $.req.data.items[item].url let from = this.req.data.items[item].url
let to = dest + '/' + $.req.data.items[item].name let to = dest + '/' + this.req.data.items[item].name
to = to.replace('//', '/') to = to.replace('//', '/')
promises.push(webdav.move(from, to)) promises.push(webdav.move(from, to))
@ -95,7 +92,7 @@ export default {
this.current = url this.current = url
this.items = [] this.items = []
if (url !== $.baseURL + '/') { if (url !== this.baseURL + '/') {
this.items.push({ this.items.push({
name: '..', name: '..',
url: page.removeLastDir(url) + '/' url: page.removeLastDir(url) + '/'

5
_assets/src/components/NewDirPrompt.vue
View File

@ -5,7 +5,7 @@
<input autofocus type="text" @keyup.enter="submit" v-model.trim="name"> <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
<div> <div>
<button class="ok" @click="submit">Create</button> <button class="ok" @click="submit">Create</button>
<button class="cancel" @click="cancel">Cancel</button> <button class="cancel" @click="$store.commit('showNewDir', false)">Cancel</button>
</div> </div>
</div> </div>
</template> </template>
@ -22,9 +22,6 @@ export default {
} }
}, },
methods: { methods: {
cancel: function () {
this.$store.commit('showNewDir', false)
},
submit: function (event) { submit: function (event) {
event.preventDefault() event.preventDefault()
if (this.new === '') return if (this.new === '') return

5
_assets/src/components/NewFilePrompt.vue
View File

@ -5,7 +5,7 @@
<input autofocus type="text" @keyup.enter="submit" v-model.trim="name"> <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
<div> <div>
<button class="ok" @click="submit">Create</button> <button class="ok" @click="submit">Create</button>
<button class="cancel" @click="cancel">Cancel</button> <button class="cancel" @click="$store.commit('showNewFile', false)">Cancel</button>
</div> </div>
</div> </div>
</template> </template>
@ -22,9 +22,6 @@ export default {
} }
}, },
methods: { methods: {
cancel: function () {
this.$store.commit('showNewFile', false)
},
submit: function (event) { submit: function (event) {
event.preventDefault() event.preventDefault()
if (this.new === '') return if (this.new === '') return

57
_assets/src/components/Preview.vue
View File

@ -1,32 +1,35 @@
<template> <template>
<div id="previewer"> <div id="previewer">
<div class="bar"> <div class="bar">
<button @click="back" class="action" aria-label="Close Preview" id="close"> <button @click="back" class="action" aria-label="Close Preview" id="close">
<i class="material-icons">close</i> <i class="material-icons">close</i>
</button> </button>
<rename-button v-if="allowEdit()"></rename-button> <rename-button v-if="allowEdit()"></rename-button>
<delete-button v-if="allowEdit()"></delete-button> <delete-button v-if="allowEdit()"></delete-button>
<download-button></download-button> <download-button></download-button>
<info-button></info-button> <info-button></info-button>
</div>
<div class="preview">
<img v-if="type == 'image'" :src="raw()">
<audio v-else-if="type == 'audio'" :src="raw()" controls></audio>
<video v-else-if="type == 'video'" :src="raw()" 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>
<object v-else-if="extension == '.pdf'" class="pdf" :data="raw()"></object>
<a v-else-if="type == 'blob'" href="?download=true"><h2 class="message">Download <i class="material-icons">file_download</i></h2></a>
<pre v-else >{{ content }}</pre>
</div>
</div> </div>
<div class="preview">
<img v-if="req.data.type == 'image'" :src="raw()">
<audio v-else-if="req.data.type == 'audio'" :src="raw()" controls></audio>
<video v-else-if="req.data.type == 'video'" :src="raw()" 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>
<object v-else-if="req.data.extension == '.pdf'" class="pdf" :data="raw()"></object>
<a v-else-if="req.data.type == 'blob'" href="?download=true">
<h2 class="message">Download <i class="material-icons">file_download</i></h2>
</a>
<pre v-else >{{ req.data.content }}</pre>
</div>
</div>
</template> </template>
<script> <script>
import { mapState } from 'vuex'
import page from '../utils/page' import page from '../utils/page'
import InfoButton from './InfoButton' import InfoButton from './InfoButton'
import DeleteButton from './DeleteButton' import DeleteButton from './DeleteButton'
@ -41,19 +44,17 @@ export default {
RenameButton, RenameButton,
DownloadButton DownloadButton
}, },
data: function () { computed: mapState(['req']),
return window.info.req.data
},
methods: { methods: {
raw: function () { raw: function () {
return this.url + '?raw=true' return this.req.data.url + '?raw=true'
}, },
back: function (event) { back: function (event) {
let url = page.removeLastDir(window.location.pathname) let url = page.removeLastDir(window.location.pathname)
page.open(url) page.open(url)
}, },
allowEdit: function (event) { allowEdit: function (event) {
return window.info.user.allowEdit return this.$store.state.user.allowEdit
} }
} }
} }

17
_assets/src/components/RenameButton.vue
View File

@ -1,17 +1,10 @@
<template> <template>
<button @click="show" aria-label="Rename" title="Rename" class="action"> <button @click="$store.commit('showRename', true)" aria-label="Rename" title="Rename" class="action">
<i class="material-icons">mode_edit</i> <i class="material-icons">mode_edit</i>
<span>Rename</span> <span>Rename</span>
</button> </button>
</template> </template>
<script> <script>
export default { export default {name: 'rename-button'}
name: 'rename-button',
methods: {
show: function (event) {
this.$store.commit('showRename', true)
}
}
}
</script> </script>

21
_assets/src/components/RenamePrompt.vue
View File

@ -11,11 +11,10 @@
</template> </template>
<script> <script>
import { mapState } from 'vuex'
import page from '../utils/page' import page from '../utils/page'
import webdav from '../utils/webdav' import webdav from '../utils/webdav'
var $ = window.info
export default { export default {
name: 'rename-prompt', name: 'rename-prompt',
data: function () { data: function () {
@ -23,30 +22,31 @@ export default {
name: '' name: ''
} }
}, },
computed: mapState(['req', 'selected', 'selectedCount']),
methods: { methods: {
cancel: function (event) { cancel: function (event) {
this.$store.commit('showRename', false) this.$store.commit('showRename', false)
}, },
oldName: function () { oldName: function () {
if ($.req.kind !== 'listing') { if (this.req.kind !== 'listing') {
return $.req.data.name return this.req.data.name
} }
if ($.selected.length === 0 || $.selected.length > 1) { if (this.selectedCount === 0 || this.selectedCount > 1) {
// This shouldn't happen. // This shouldn't happen.
return return
} }
return $.req.data.items[$.selected[0]].name return this.req.data.items[this.selected[0]].name
}, },
submit: function (event) { submit: function (event) {
let oldLink = '' let oldLink = ''
let newLink = '' let newLink = ''
if ($.req.kind !== 'listing') { if (this.req.kind !== 'listing') {
oldLink = $.req.data.url oldLink = this.req.data.url
} else { } else {
oldLink = $.req.data.items[$.selected[0]].url oldLink = this.req.data.items[this.selected[0]].url
} }
newLink = page.removeLastDir(oldLink) + '/' + this.name newLink = page.removeLastDir(oldLink) + '/' + this.name
@ -55,7 +55,7 @@ export default {
webdav.move(oldLink, newLink) webdav.move(oldLink, newLink)
.then(() => { .then(() => {
if ($.req.kind !== 'listing') { if (this.req.kind !== 'listing') {
page.open(newLink) page.open(newLink)
return return
} }
@ -67,7 +67,6 @@ export default {
console.log(error) console.log(error)
}) })
this.name = ''
this.$store.commit('showRename', false) this.$store.commit('showRename', false)
return return
} }

11
_assets/src/components/SwitchViewButton.vue
View File

@ -6,21 +6,18 @@
</template> </template>
<script> <script>
import page from '../utils/page'
export default { export default {
name: 'switch-button', name: 'switch-button',
methods: { methods: {
change: function (event) { change: function (event) {
let url = window.location.pathname + '?display=' let display = 'mosaic'
if (this.$store.state.req.data.display === 'mosaic') { if (this.$store.state.req.data.display === 'mosaic') {
url += 'list' display = 'list'
} else {
url += 'mosaic'
} }
page.open(url) this.$store.commit('listingDisplay', display)
document.cookie = `display=${display}; max-age=31536000; path=${this.$store.state.baseURL}`
}, },
icon: function () { icon: function () {
if (this.$store.state.req.data.display === 'mosaic') return 'view_list' if (this.$store.state.req.data.display === 'mosaic') return 'view_list'

8
_assets/src/components/UploadButton.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<button @click="upload" aria-label="Upload" title="Upload" class="action"> <button @click="upload" aria-label="Upload" title="Upload" class="action">
<i class="material-icons">file_upload</i> <i class="material-icons">file_upload</i>
<span>Upload</span> <span>Upload</span>
</button> </button>
</template> </template>
<script> <script>

3
_assets/src/store/mutations.js
View File

@ -27,6 +27,9 @@ const mutations = {
resetSelected: (state) => { resetSelected: (state) => {
state.selected = [] state.selected = []
}, },
listingDisplay: (state, value) => {
state.req.data.display = value
},
updateRequest: (state, value) => { updateRequest: (state, value) => {
state.req.kind = value.kind state.req.kind = value.kind
state.req.data = value.data state.req.data = value.data

3
serve.go
View File

@ -90,6 +90,7 @@ func displayMode(w http.ResponseWriter, r *http.Request, scope string) string {
http.SetCookie(w, &http.Cookie{ http.SetCookie(w, &http.Cookie{
Name: "display", Name: "display",
Value: displayMode, Value: displayMode,
MaxAge: 31536000,
Path: scope, Path: scope,
Secure: r.TLS != nil, Secure: r.TLS != nil,
}) })
@ -115,6 +116,7 @@ func handleSortOrder(w http.ResponseWriter, r *http.Request, scope string) (sort
http.SetCookie(w, &http.Cookie{ http.SetCookie(w, &http.Cookie{
Name: "sort", Name: "sort",
Value: sort, Value: sort,
MaxAge: 31536000,
Path: scope, Path: scope,
Secure: r.TLS != nil, Secure: r.TLS != nil,
}) })
@ -130,6 +132,7 @@ func handleSortOrder(w http.ResponseWriter, r *http.Request, scope string) (sort
http.SetCookie(w, &http.Cookie{ http.SetCookie(w, &http.Cookie{
Name: "order", Name: "order",
Value: order, Value: order,
MaxAge: 31536000,
Path: scope, Path: scope,
Secure: r.TLS != nil, Secure: r.TLS != nil,
}) })