mirror of
https://github.com/filebrowser/filebrowser.git
synced 2024-06-07 23:00:43 +00:00
Improvements and more reliability :)
Former-commit-id: 4d5ca1dd46c57e35222860a66c9f98f945fbaad7 [formerly 5a0bea68d0ddec09c95919c1ef45bdff3f602bc6] [formerly b324db325f094e5563f945c41f4f9eeb0b2df086 [formerly 698a08e1a9]]
Former-commit-id: 6c39601f33482edafad63f4b39e10e2720db2813 [formerly 02a9c37289ce3d27eee55f3eb3052391349adc0e]
Former-commit-id: fd29981acff35fa5428af5e1d95fe1d53bba0459
This commit is contained in:
Henrique Dias
parent
713e89eb68
commit
c7e37c09e1
@ -46,21 +46,6 @@ export default {
|
||||
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 = []
|
||||
|
||||
for (let index of this.selected) {
|
||||
@ -74,6 +59,7 @@ export default {
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
page.reload()
|
||||
// buttons.setDone('delete', false)
|
||||
})
|
||||
}
|
||||
|
||||
@ -20,19 +20,12 @@
|
||||
</ul>
|
||||
|
||||
<div>
|
||||
<button type="submit" @click="close" class="ok">OK</button>
|
||||
<button type="submit" @click="$store.commit('showHelp', false)" class="ok">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'help',
|
||||
methods: {
|
||||
close: function (event) {
|
||||
this.$store.commit('showHelp', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {name: 'help'}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,17 +1,10 @@
|
||||
<template>
|
||||
<button @click="show" title="Info" aria-label="Info" class="action">
|
||||
<i class="material-icons">info</i>
|
||||
<span>Info</span>
|
||||
</button>
|
||||
<button title="Info" aria-label="Info" class="action" @click="$store.commit('showInfo', true)">
|
||||
<i class="material-icons">info</i>
|
||||
<span>Info</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'info-button',
|
||||
methods: {
|
||||
show: function (event) {
|
||||
this.$store.commit('showInfo', true)
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {name: 'info-button'}
|
||||
</script>
|
||||
|
||||
@ -1,77 +1,77 @@
|
||||
<template>
|
||||
<div class="prompt">
|
||||
<h3>File Information</h3>
|
||||
<div class="prompt">
|
||||
<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><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>Display Name:</strong> {{ name() }}</p>
|
||||
<p><strong>Size:</strong> <span id="content_length"></span>{{ humanSize() }}</p>
|
||||
<p v-show="selected.length < 2"><strong>Last Modified:</strong> {{ humanTime() }}</p>
|
||||
|
||||
<section v-show="dir() && 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() && 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>
|
||||
<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>
|
||||
<button type="submit" @click="$store.commit('showInfo', false)" class="ok">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
import {mapState, mapGetters} from 'vuex'
|
||||
import filesize from 'filesize'
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
name: 'info-prompt',
|
||||
data: function () {
|
||||
return window.info
|
||||
computed: {
|
||||
...mapState(['req', 'selected']),
|
||||
...mapGetters(['selectedCount'])
|
||||
},
|
||||
computed: mapState(['req', 'selected']),
|
||||
methods: {
|
||||
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)
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
return filesize(sum)
|
||||
},
|
||||
humanTime: function () {
|
||||
if (this.selected.length === 0) {
|
||||
if (this.selectedCount === 0) {
|
||||
return moment(this.req.data.modified).fromNow()
|
||||
}
|
||||
|
||||
return moment(this.req.data.items[this.selected[0]]).fromNow()
|
||||
},
|
||||
name: function () {
|
||||
if (this.selected.length === 0) {
|
||||
if (this.selectedCount === 0) {
|
||||
return this.req.data.name
|
||||
}
|
||||
|
||||
return this.req.data.items[this.selected[0]].name
|
||||
},
|
||||
dir: function () {
|
||||
if (this.selected.length > 1) {
|
||||
if (this.selectedCount > 1) {
|
||||
// Don't show when multiple selected.
|
||||
return true
|
||||
}
|
||||
|
||||
if (this.selected.length === 0) {
|
||||
if (this.selectedCount === 0) {
|
||||
return this.req.data.isDir
|
||||
}
|
||||
|
||||
@ -83,7 +83,7 @@ export default {
|
||||
let request = new window.XMLHttpRequest()
|
||||
let link
|
||||
|
||||
if (this.selected.length) {
|
||||
if (this.selectedCount) {
|
||||
link = this.req.data.items[this.selected[0]].url
|
||||
} else {
|
||||
link = window.location.pathname
|
||||
@ -102,9 +102,6 @@ export default {
|
||||
|
||||
request.onerror = (e) => console.log(e)
|
||||
request.send()
|
||||
},
|
||||
close: function () {
|
||||
this.$store.commit('showInfo', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,84 +1,81 @@
|
||||
<template>
|
||||
<div id="listing"
|
||||
:class="req.data.display"
|
||||
@drop="drop"
|
||||
@dragenter="dragEnter"
|
||||
@dragend="dragEnd">
|
||||
<div id="listing"
|
||||
:class="req.data.display"
|
||||
@drop="drop"
|
||||
@dragenter="dragEnter"
|
||||
@dragend="dragEnd">
|
||||
<div>
|
||||
<div class="item header">
|
||||
<div></div>
|
||||
<div>
|
||||
<div class="item header">
|
||||
<div></div>
|
||||
<div>
|
||||
<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: 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: 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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
import Item from './ListingItem'
|
||||
import webdav from '../utils/webdav'
|
||||
import page from '../utils/page'
|
||||
|
||||
export default {
|
||||
name: 'listing',
|
||||
data: function () {
|
||||
return window.info
|
||||
},
|
||||
components: { Item },
|
||||
computed: mapState(['req']),
|
||||
mounted: function () {
|
||||
document.addEventListener('dragover', function (event) {
|
||||
event.preventDefault()
|
||||
@ -98,11 +95,7 @@ export default {
|
||||
})
|
||||
},
|
||||
dragEnd: function (event) {
|
||||
let items = document.getElementsByClassName('item')
|
||||
|
||||
Array.from(items).forEach(file => {
|
||||
file.style.opacity = 1
|
||||
})
|
||||
this.resetOpacity()
|
||||
},
|
||||
drop: function (event) {
|
||||
event.preventDefault()
|
||||
@ -125,17 +118,22 @@ export default {
|
||||
|
||||
this.handleFiles(files, '')
|
||||
} else {
|
||||
let items = document.getElementsByClassName('item')
|
||||
|
||||
Array.from(items).forEach(file => {
|
||||
file.style.opacity = 1
|
||||
})
|
||||
this.resetOpacity()
|
||||
}
|
||||
},
|
||||
uploadInput: function (event) {
|
||||
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) {
|
||||
this.resetOpacity()
|
||||
|
||||
// buttons.setLoading('upload')
|
||||
let promises = []
|
||||
|
||||
@ -144,14 +142,14 @@ export default {
|
||||
}
|
||||
|
||||
Promise.all(promises)
|
||||
.then(() => {
|
||||
page.reload()
|
||||
// buttons.setDone('upload')
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e)
|
||||
// buttons.setDone('upload', false)
|
||||
})
|
||||
.then(() => {
|
||||
page.reload()
|
||||
// buttons.setDone('upload')
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e)
|
||||
// buttons.setDone('upload', false)
|
||||
})
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
@ -1,31 +1,32 @@
|
||||
<template>
|
||||
<div class="item"
|
||||
draggable="true"
|
||||
@dragstart="dragStart"
|
||||
@dragover="dragOver"
|
||||
@drop="drop"
|
||||
@click="click"
|
||||
@dblclick="open"
|
||||
:id="base64()">
|
||||
<div>
|
||||
<i class="material-icons">{{ icon() }}</i>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="name">{{ name }}</p>
|
||||
|
||||
<p v-if="isDir" class="size" data-order="-1">—</p>
|
||||
<p v-else class="size" :data-order="humanSize()">{{ humanSize() }}</p>
|
||||
|
||||
<p class="modified">
|
||||
<time :datetime="modified">{{ humanTime() }}</time>
|
||||
</p>
|
||||
</div>
|
||||
<div class="item"
|
||||
draggable="true"
|
||||
@dragstart="dragStart"
|
||||
@dragover="dragOver"
|
||||
@drop="drop"
|
||||
@click="click"
|
||||
@dblclick="open"
|
||||
:aria-selected="isSelected()"
|
||||
:id="base64()">
|
||||
<div>
|
||||
<i class="material-icons">{{ icon() }}</i>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="name">{{ name }}</p>
|
||||
|
||||
<p v-if="isDir" class="size" data-order="-1">—</p>
|
||||
<p v-else class="size" :data-order="humanSize()">{{ humanSize() }}</p>
|
||||
|
||||
<p class="modified">
|
||||
<time :datetime="modified">{{ humanTime() }}</time>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapGetters } from 'vuex'
|
||||
import { mapMutations, mapGetters, mapState } from 'vuex'
|
||||
import filesize from 'filesize'
|
||||
import moment from 'moment'
|
||||
import webdav from '../utils/webdav.js'
|
||||
@ -34,9 +35,15 @@ import page from '../utils/page.js'
|
||||
export default {
|
||||
name: 'item',
|
||||
props: ['name', 'isDir', 'url', 'type', 'size', 'modified', 'index'],
|
||||
computed: {
|
||||
...mapState(['selected', 'req']),
|
||||
...mapGetters(['selectedCount'])
|
||||
},
|
||||
methods: {
|
||||
...mapGetters(['selectedCount']),
|
||||
...mapMutations(['addSelected', 'removeSelected']),
|
||||
...mapMutations(['addSelected', 'removeSelected', 'resetSelected']),
|
||||
isSelected: function () {
|
||||
return (this.selected.indexOf(this.index) !== -1)
|
||||
},
|
||||
icon: function () {
|
||||
if (this.isDir) return 'folder'
|
||||
if (this.type === 'image') return 'insert_photo'
|
||||
@ -54,16 +61,9 @@ export default {
|
||||
return window.btoa(this.name)
|
||||
},
|
||||
dragStart: function (event) {
|
||||
let el = event.target
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
if (!el.classList.contains('item')) {
|
||||
el = el.parentElement
|
||||
}
|
||||
if (this.selectedCount === 0) {
|
||||
this.addSelected(this.index)
|
||||
}
|
||||
|
||||
event.dataTransfer.setData('name', el.querySelector('.name').innerHTML)
|
||||
event.dataTransfer.setData('obj-url', this.url)
|
||||
},
|
||||
dragOver: function (event) {
|
||||
if (!this.isDir) return
|
||||
@ -83,39 +83,31 @@ export default {
|
||||
if (!this.isDir) return
|
||||
event.preventDefault()
|
||||
|
||||
let url = event.dataTransfer.getData('obj-url')
|
||||
let name = event.dataTransfer.getData('name')
|
||||
if (this.selectedCount === 0) return
|
||||
|
||||
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())
|
||||
.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) {
|
||||
if (this.selectedCount !== 0) event.preventDefault()
|
||||
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)
|
||||
} else {
|
||||
this.$el.setAttribute('aria-selected', false)
|
||||
this.removeSelected(this.index)
|
||||
// WORKS: this.$store.commit('removeSelected', this.index)
|
||||
}
|
||||
|
||||
// this.handleSelectionChange()
|
||||
return false
|
||||
},
|
||||
open: function (event) {
|
||||
|
||||
@ -1,17 +1,10 @@
|
||||
<template>
|
||||
<button @click="show" aria-label="Move" title="Move" class="action">
|
||||
<i class="material-icons">forward</i>
|
||||
<span>Move file</span>
|
||||
</button>
|
||||
<button @click="$store.commit('showMove', true)" aria-label="Move" title="Move" class="action">
|
||||
<i class="material-icons">forward</i>
|
||||
<span>Move file</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'move-button',
|
||||
methods: {
|
||||
show: function (event) {
|
||||
this.$store.commit('showMove', true)
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {name: 'move-button'}
|
||||
</script>
|
||||
|
||||
@ -11,17 +11,16 @@
|
||||
|
||||
<div>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import page from '../utils/page'
|
||||
import webdav from '../utils/webdav'
|
||||
|
||||
var $ = window.info
|
||||
|
||||
export default {
|
||||
name: 'move-prompt',
|
||||
data: function () {
|
||||
@ -30,16 +29,17 @@ export default {
|
||||
current: window.location.pathname
|
||||
}
|
||||
},
|
||||
computed: mapState(['req', 'selected', 'baseURL']),
|
||||
mounted: function () {
|
||||
if (window.location.pathname !== $.baseURL + '/') {
|
||||
if (window.location.pathname !== this.baseURL + '/') {
|
||||
this.items.push({
|
||||
name: '..',
|
||||
url: page.removeLastDir(window.location.pathname) + '/'
|
||||
})
|
||||
}
|
||||
|
||||
if ($.req.kind === 'listing') {
|
||||
for (let item of $.req.data.items) {
|
||||
if (this.req.kind === 'listing') {
|
||||
for (let item of this.req.data.items) {
|
||||
if (!item.isDir) continue
|
||||
|
||||
this.items.push({
|
||||
@ -52,9 +52,6 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel: function (event) {
|
||||
this.$store.commit('showMove', false)
|
||||
},
|
||||
move: function (event) {
|
||||
event.preventDefault()
|
||||
|
||||
@ -68,9 +65,9 @@ export default {
|
||||
dest = selected.dataset.url
|
||||
}
|
||||
|
||||
for (let item of $.selected) {
|
||||
let from = $.req.data.items[item].url
|
||||
let to = dest + '/' + $.req.data.items[item].name
|
||||
for (let item of this.selected) {
|
||||
let from = this.req.data.items[item].url
|
||||
let to = dest + '/' + this.req.data.items[item].name
|
||||
to = to.replace('//', '/')
|
||||
|
||||
promises.push(webdav.move(from, to))
|
||||
@ -95,7 +92,7 @@ export default {
|
||||
this.current = url
|
||||
this.items = []
|
||||
|
||||
if (url !== $.baseURL + '/') {
|
||||
if (url !== this.baseURL + '/') {
|
||||
this.items.push({
|
||||
name: '..',
|
||||
url: page.removeLastDir(url) + '/'
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
|
||||
<div>
|
||||
<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>
|
||||
</template>
|
||||
@ -22,9 +22,6 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel: function () {
|
||||
this.$store.commit('showNewDir', false)
|
||||
},
|
||||
submit: function (event) {
|
||||
event.preventDefault()
|
||||
if (this.new === '') return
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
|
||||
<div>
|
||||
<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>
|
||||
</template>
|
||||
@ -22,9 +22,6 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel: function () {
|
||||
this.$store.commit('showNewFile', false)
|
||||
},
|
||||
submit: function (event) {
|
||||
event.preventDefault()
|
||||
if (this.new === '') return
|
||||
|
||||
@ -1,32 +1,35 @@
|
||||
<template>
|
||||
<div id="previewer">
|
||||
<div class="bar">
|
||||
<button @click="back" class="action" aria-label="Close Preview" id="close">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<div id="previewer">
|
||||
<div class="bar">
|
||||
<button @click="back" class="action" aria-label="Close Preview" 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>
|
||||
|
||||
<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>
|
||||
<rename-button v-if="allowEdit()"></rename-button>
|
||||
<delete-button v-if="allowEdit()"></delete-button>
|
||||
<download-button></download-button>
|
||||
<info-button></info-button>
|
||||
</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>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import page from '../utils/page'
|
||||
import InfoButton from './InfoButton'
|
||||
import DeleteButton from './DeleteButton'
|
||||
@ -41,19 +44,17 @@ export default {
|
||||
RenameButton,
|
||||
DownloadButton
|
||||
},
|
||||
data: function () {
|
||||
return window.info.req.data
|
||||
},
|
||||
computed: mapState(['req']),
|
||||
methods: {
|
||||
raw: function () {
|
||||
return this.url + '?raw=true'
|
||||
return this.req.data.url + '?raw=true'
|
||||
},
|
||||
back: function (event) {
|
||||
let url = page.removeLastDir(window.location.pathname)
|
||||
page.open(url)
|
||||
},
|
||||
allowEdit: function (event) {
|
||||
return window.info.user.allowEdit
|
||||
return this.$store.state.user.allowEdit
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,17 +1,10 @@
|
||||
<template>
|
||||
<button @click="show" aria-label="Rename" title="Rename" class="action">
|
||||
<i class="material-icons">mode_edit</i>
|
||||
<span>Rename</span>
|
||||
</button>
|
||||
<button @click="$store.commit('showRename', true)" aria-label="Rename" title="Rename" class="action">
|
||||
<i class="material-icons">mode_edit</i>
|
||||
<span>Rename</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'rename-button',
|
||||
methods: {
|
||||
show: function (event) {
|
||||
this.$store.commit('showRename', true)
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {name: 'rename-button'}
|
||||
</script>
|
||||
|
||||
@ -11,11 +11,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import page from '../utils/page'
|
||||
import webdav from '../utils/webdav'
|
||||
|
||||
var $ = window.info
|
||||
|
||||
export default {
|
||||
name: 'rename-prompt',
|
||||
data: function () {
|
||||
@ -23,30 +22,31 @@ export default {
|
||||
name: ''
|
||||
}
|
||||
},
|
||||
computed: mapState(['req', 'selected', 'selectedCount']),
|
||||
methods: {
|
||||
cancel: function (event) {
|
||||
this.$store.commit('showRename', false)
|
||||
},
|
||||
oldName: function () {
|
||||
if ($.req.kind !== 'listing') {
|
||||
return $.req.data.name
|
||||
if (this.req.kind !== 'listing') {
|
||||
return this.req.data.name
|
||||
}
|
||||
|
||||
if ($.selected.length === 0 || $.selected.length > 1) {
|
||||
if (this.selectedCount === 0 || this.selectedCount > 1) {
|
||||
// This shouldn't happen.
|
||||
return
|
||||
}
|
||||
|
||||
return $.req.data.items[$.selected[0]].name
|
||||
return this.req.data.items[this.selected[0]].name
|
||||
},
|
||||
submit: function (event) {
|
||||
let oldLink = ''
|
||||
let newLink = ''
|
||||
|
||||
if ($.req.kind !== 'listing') {
|
||||
oldLink = $.req.data.url
|
||||
if (this.req.kind !== 'listing') {
|
||||
oldLink = this.req.data.url
|
||||
} else {
|
||||
oldLink = $.req.data.items[$.selected[0]].url
|
||||
oldLink = this.req.data.items[this.selected[0]].url
|
||||
}
|
||||
|
||||
newLink = page.removeLastDir(oldLink) + '/' + this.name
|
||||
@ -55,7 +55,7 @@ export default {
|
||||
|
||||
webdav.move(oldLink, newLink)
|
||||
.then(() => {
|
||||
if ($.req.kind !== 'listing') {
|
||||
if (this.req.kind !== 'listing') {
|
||||
page.open(newLink)
|
||||
return
|
||||
}
|
||||
@ -67,7 +67,6 @@ export default {
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
this.name = ''
|
||||
this.$store.commit('showRename', false)
|
||||
return
|
||||
}
|
||||
|
||||
@ -6,21 +6,18 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import page from '../utils/page'
|
||||
|
||||
export default {
|
||||
name: 'switch-button',
|
||||
methods: {
|
||||
change: function (event) {
|
||||
let url = window.location.pathname + '?display='
|
||||
let display = 'mosaic'
|
||||
|
||||
if (this.$store.state.req.data.display === 'mosaic') {
|
||||
url += 'list'
|
||||
} else {
|
||||
url += 'mosaic'
|
||||
display = 'list'
|
||||
}
|
||||
|
||||
page.open(url)
|
||||
this.$store.commit('listingDisplay', display)
|
||||
document.cookie = `display=${display}; max-age=31536000; path=${this.$store.state.baseURL}`
|
||||
},
|
||||
icon: function () {
|
||||
if (this.$store.state.req.data.display === 'mosaic') return 'view_list'
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<button @click="upload" aria-label="Upload" title="Upload" class="action">
|
||||
<i class="material-icons">file_upload</i>
|
||||
<span>Upload</span>
|
||||
</button>
|
||||
<button @click="upload" aria-label="Upload" title="Upload" class="action">
|
||||
<i class="material-icons">file_upload</i>
|
||||
<span>Upload</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -27,6 +27,9 @@ const mutations = {
|
||||
resetSelected: (state) => {
|
||||
state.selected = []
|
||||
},
|
||||
listingDisplay: (state, value) => {
|
||||
state.req.data.display = value
|
||||
},
|
||||
updateRequest: (state, value) => {
|
||||
state.req.kind = value.kind
|
||||
state.req.data = value.data
|
||||
|
||||
3
serve.go
3
serve.go
@ -90,6 +90,7 @@ func displayMode(w http.ResponseWriter, r *http.Request, scope string) string {
|
||||
http.SetCookie(w, &http.Cookie{
|
||||
Name: "display",
|
||||
Value: displayMode,
|
||||
MaxAge: 31536000,
|
||||
Path: scope,
|
||||
Secure: r.TLS != nil,
|
||||
})
|
||||
@ -115,6 +116,7 @@ func handleSortOrder(w http.ResponseWriter, r *http.Request, scope string) (sort
|
||||
http.SetCookie(w, &http.Cookie{
|
||||
Name: "sort",
|
||||
Value: sort,
|
||||
MaxAge: 31536000,
|
||||
Path: scope,
|
||||
Secure: r.TLS != nil,
|
||||
})
|
||||
@ -130,6 +132,7 @@ func handleSortOrder(w http.ResponseWriter, r *http.Request, scope string) (sort
|
||||
http.SetCookie(w, &http.Cookie{
|
||||
Name: "order",
|
||||
Value: order,
|
||||
MaxAge: 31536000,
|
||||
Path: scope,
|
||||
Secure: r.TLS != nil,
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user