Former-commit-id: 419fb04f20d9be50358b0d87285fa92855906f97 [formerly fd974c12d0c06b0bde92e201f636c977a1638608] [formerly faa13a4e0c06720f217e7e4387ca0bf9e367365d [formerly 39f39cca29]]
Former-commit-id: b2df427ca1f97e407a549848649bad020eb5453f [formerly 484d32224ca56fa68d6b5b0f01626d69eaa0528b]
Former-commit-id: 81103561b811e456c4e50dd0d8a6e555e8584839
pull/726/head
Henrique Dias 2017-06-30 12:43:43 +01:00
parent 4f964faf6e
commit 5d84c22a91
17 changed files with 169 additions and 413 deletions

View File

@ -1,5 +1,5 @@
<template>
<div id="app" :class="{ multiple }">
<div id="app" :class="{ multiple: $store.state.multiple }">
<header>
<div>
<img src="./assets/logo.svg" alt="File Manager">
@ -9,7 +9,7 @@
<rename-button v-show="showRenameButton()"></rename-button>
<move-button v-show="showMoveButton()"></move-button>
<delete-button v-show="showDeleteButton()"></delete-button>
<switch-button v-show="req.kind !== 'editor'"></switch-button>
<switch-button v-show="$store.state.req.kind !== 'editor'"></switch-button>
<download-button></download-button>
<upload-button v-show="showUpload()"></upload-button>
<info-button></info-button>
@ -17,11 +17,11 @@
</header>
<nav>
<a class="action" :href="baseURL + '/'">
<a class="action" :href="$store.state.baseURL + '/'">
<i class="material-icons">folder</i>
<span>My Files</span>
</a>
<div v-if="user.allowNew">
<div v-if="$store.state.user.allowNew">
<button @click="$store.commit('showNewDir', true)" aria-label="New directory" title="New directory" class="action">
<i class="material-icons">create_new_folder</i>
<span>New folder</span>
@ -38,9 +38,9 @@
</nav>
<main>
<editor v-if="req.kind === 'editor'"></editor>
<listing v-if="req.kind === 'listing'"></listing>
<preview v-if="req.kind === 'preview'"></preview>
<editor v-if="$store.state.req.kind === 'editor'"></editor>
<listing v-if="$store.state.req.kind === 'listing'"></listing>
<preview v-if="$store.state.req.kind === 'preview'"></preview>
</main>
<new-file-prompt v-if="$store.state.showNewFile" :class="{ active: $store.state.showNewFile }"></new-file-prompt>
@ -77,8 +77,6 @@ import NewFilePrompt from './components/NewFilePrompt'
import NewDirPrompt from './components/NewDirPrompt'
import css from './css.js'
var $ = window.info
function updateColumnSizes () {
let columns = Math.floor(document.querySelector('main').offsetWidth / 300)
let items = css(['#listing.mosaic .item', '.mosaic#listing .item'])
@ -88,30 +86,6 @@ function updateColumnSizes () {
items.style.width = `calc(${100 / columns}% - 1em)`
}
function showRenameButton () {
if ($.req.kind === 'listing') {
if ($.selected.length === 1) {
return $.user.allowEdit
}
return false
}
return $.user.allowEdit
}
function showDeleteButton () {
if ($.req.kind === 'listing') {
if ($.selected.length === 0) {
return false
}
return $.user.allowEdit
}
return $.user.allowEdit
}
export default {
name: 'app',
components: {
@ -142,19 +116,45 @@ export default {
name: document.title
}, document.title, window.location.pathname)
window.addEventListener('popstate', (event) => {
event.preventDefault()
event.stopPropagation()
this.$store.commit('multiple', false)
this.$store.commit('resetSelected')
this.$store.commit('resetPrompts')
let request = new window.XMLHttpRequest()
request.open('GET', event.state.url, true)
request.setRequestHeader('Accept', 'application/json')
request.onload = () => {
if (request.status === 200) {
let req = JSON.parse(request.responseText)
this.$store.commit('updateRequest', req)
document.title = event.state.name
} else {
console.log(request.responseText)
}
}
request.onerror = (error) => { console.log(error) }
request.send()
})
window.addEventListener('keydown', (event) => {
// Esc!
if (event.keyCode === 27) {
this.$store.commit('resetPrompts')
// Unselect all files and folders.
if ($.req.kind === 'listing') {
if (this.$store.state.req.kind === 'listing') {
let items = document.getElementsByClassName('item')
Array.from(items).forEach(link => {
link.setAttribute('aria-selected', false)
})
$.selected = []
this.$store.selected = []
}
return
@ -162,21 +162,21 @@ export default {
// Del!
if (event.keyCode === 46) {
if (showDeleteButton()) {
$.showDelete = true
if (this.showDeleteButton()) {
this.$store.commit('showDelete', true)
}
}
// F1!
if (event.keyCode === 112) {
event.preventDefault()
$.showHelp = true
this.$store.commit('showHelp', true)
}
// F2!
if (event.keyCode === 113) {
if (showRenameButton()) {
$.showRename = true
if (this.showRenameButton()) {
this.$store.commit('showRename', true)
}
}
@ -186,7 +186,7 @@ export default {
case 's':
event.preventDefault()
if ($.req.kind !== 'editor') {
if (this.$store.state.req.kind !== 'editor') {
window.location = '?download=true'
return
}
@ -203,23 +203,40 @@ export default {
loading.parentNode.removeChild(loading)
}, 1000)
},
data: function () {
return window.info
},
methods: {
showUpload: function () {
if (this.req.kind === 'editor') return false
return $.user.allowNew
if (this.$store.state.req.kind === 'editor') return false
return this.$store.state.user.allowNew
},
showDeleteButton: showDeleteButton,
showRenameButton: showRenameButton,
showMoveButton: function () {
if (this.req.kind !== 'listing') {
showDeleteButton: function () {
if (this.$store.state.req.kind === 'listing') {
if (this.$store.getters.selectedCount === 0) {
return false
}
return this.$store.state.user.allowEdit
}
return this.$store.state.user.allowEdit
},
showRenameButton: function () {
if (this.$store.state.req.kind === 'listing') {
if (this.$store.getters.selectedCount === 1) {
return this.$store.state.user.allowEdit
}
return false
}
if (this.selected.length > 0) {
return $.user.allowEdit
return this.$store.state.user.allowEdit
},
showMoveButton: function () {
if (this.$store.state.req.kind !== 'listing') {
return false
}
if (this.$store.getters.selectedCount > 0) {
return this.$store.state.user.allowEdit
}
return false

View File

@ -1,24 +0,0 @@
// Removes an element, if exists, from an array
function removeElement (array, element) {
var i = array.indexOf(element)
if (i !== -1) {
array.splice(i, 1)
}
return array
}
// Replaces an element inside an array by another
function replaceElement (array, oldElement, newElement) {
var i = array.indexOf(oldElement)
if (i !== -1) {
array[i] = newElement
}
return array
}
export default {
remove: removeElement,
replace: replaceElement
}

View File

@ -1,8 +1,8 @@
<template>
<div class="prompt">
<h3>Delete files</h3>
<p v-show="req.kind !== 'listing'">Are you sure you want to delete this file/folder?</p>
<p v-show="req.kind === 'listing'">Are you sure you want to delete {{ selected.length }} file(s)?</p>
<p v-show="$store.state.req.kind !== 'listing'">Are you sure you want to delete this file/folder?</p>
<p v-show="$store.state.req.kind === 'listing'">Are you sure you want to delete {{ $store.getters.selectedCount }} file(s)?</p>
<div>
<button @click="submit" autofocus>Delete</button>
<button @click="cancel" class="cancel">Cancel</button>
@ -14,13 +14,8 @@
import webdav from '../webdav'
import page from '../page'
var $ = window.info
export default {
name: 'delete-prompt',
data: function () {
return window.info
},
methods: {
cancel: function (event) {
this.$store.commit('showDelete', false)
@ -29,7 +24,7 @@ export default {
this.$store.commit('showDelete', false)
// buttons.setLoading('delete')
if ($.req.kind !== 'listing') {
if (this.$store.state.req.kind !== 'listing') {
webdav.trash(window.location.pathname)
.then(() => {
// buttons.setDone('delete')
@ -43,13 +38,13 @@ export default {
return
}
if ($.selected.length === 0) {
if (this.$store.getters.selectedCount === 0) {
// This shouldn't happen...
return
}
if ($.selected.length === 1) {
webdav.trash($.req.data.items[$.selected[0]].url)
if (this.$store.getters.selectedCount === 1) {
webdav.trash(this.$store.state.req.data.items[this.$store.state.selected[0]].url)
.then(() => {
// buttons.setDone('delete')
page.reload()
@ -65,8 +60,8 @@ export default {
// More than one item!
let promises = []
for (let index of $.selected) {
promises.push(webdav.trash($.req.data.items[index].url))
for (let index of this.$store.state.selected) {
promises.push(webdav.trash(this.$store.state.req.data.items[index].url))
}
Promise.all(promises)

View File

@ -13,7 +13,7 @@ export default {
name: 'download-button',
methods: {
count: function () {
return $.selected.length
return this.$store.getters.selectedCount
},
download: function (event) {
if ($.req.kind !== 'listing') {

View File

@ -1,28 +1,28 @@
<template>
<div class="prompt help">
<h3>Help</h3>
<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>
<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>
<p>Not available yet</p>
<ul>
<li><strong>Alt + Click</strong> - select a group of files</li>
</ul>
<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>
<button type="submit" @click="close" class="ok">OK</button>
</div>
</div>
</template>
<script>
@ -30,7 +30,7 @@ export default {
name: 'help',
methods: {
close: function (event) {
window.info.showHelp = false
this.$store.commit('showHelp', false)
}
}
}

View File

@ -59,9 +59,9 @@
<input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" value="Upload" multiple>
<div v-show="multiple" :class="{ active: multiple }" id="multiple-selection">
<div v-show="$store.state.multiple" :class="{ active: $store.state.multiple }" id="multiple-selection">
<p>Multiple selection enabled</p>
<div @click="cancelMultiple" tabindex="0" role="button" title="Clear" aria-label="Clear" class="action">
<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>
@ -73,8 +73,6 @@ import Item from './ListingItem'
import webdav from '../webdav.js'
import page from '../page.js'
var $ = window.info
export default {
name: 'listing',
data: function () {
@ -92,9 +90,6 @@ export default {
base64: function (name) {
return window.btoa(name)
},
cancelMultiple: function () {
$.multiple = false
},
dragEnter: function (event) {
let items = document.getElementsByClassName('item')

View File

@ -25,18 +25,18 @@
</template>
<script>
import { mapMutations } from 'vuex'
import filesize from 'filesize'
import moment from 'moment'
import webdav from '../webdav.js'
import page from '../page.js'
import array from '../array.js'
var $ = window.info
export default {
name: 'item',
props: ['name', 'isDir', 'url', 'type', 'size', 'modified', 'index'],
methods: {
// ...mapGetters('selectedCount'),
...mapMutations('addSelected', 'removeSelected'),
icon: function () {
if (this.isDir) return 'folder'
if (this.type === 'image') return 'insert_photo'
@ -98,19 +98,21 @@ export default {
link.setAttribute('aria-selected', false)
})
$.selected = []
this.$store.commit('resetSelected')
return false
},
click: function (event) {
if ($.selected.length !== 0) event.preventDefault()
if ($.selected.indexOf(this.index) === -1) {
if (!event.ctrlKey && !$.multiple) this.unselectAll()
if (this.selectedCount !== 0) event.preventDefault()
if (this.$store.state.selected.indexOf(this.index) === -1) {
if (!event.ctrlKey && !this.$store.state.multiple) this.unselectAll()
this.$el.setAttribute('aria-selected', true)
$.selected.push(this.index)
// WORKS: this.$store.commit('addSelected', this.index)
this.addSelected(this.index)
} else {
this.$el.setAttribute('aria-selected', false)
$.selected = array.remove($.selected, this.index)
this.removeSelected(this.index)
// WORKS: this.$store.commit('removeSelected', this.index)
}
// this.handleSelectionChange()

View File

@ -17,8 +17,7 @@
<script>
import page from '../page'
var $ = window.info
import { mapState } from 'vuex'
export default {
name: 'search',
@ -31,6 +30,7 @@ export default {
input: null
}
},
computed: mapState('user'),
mounted: function () {
this.scrollable = document.querySelector('#search > div')
this.box = document.querySelector('#search > div div')
@ -39,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 (this.user.allowCommands && this.user.commands.length > 0) {
this.box.innerHTML = `Search or use one of your supported commands: ${this.user.commands.join(', ')}.`
} else {
this.box.innerHTML = 'Type and press enter to search.'
}
@ -49,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 < this.user.commands.length; i++) {
if (pieces[0] === this.user.commands[0]) {
return true
}
}
@ -69,7 +69,7 @@ export default {
return
}
if (!this.supported() || !$.user.allowCommands) {
if (!this.supported() || !this.user.allowCommands) {
this.box.innerHTML = 'Press enter to search.'
} else {
this.box.innerHTML = 'Press enter to execute.'
@ -87,7 +87,7 @@ export default {
let protocol = this.$store.state.ssl ? 'wss:' : 'ws:'
if (this.supported() && $.user.allowCommands) {
if (this.supported() && this.user.allowCommands) {
let conn = new window.WebSocket(`${protocol}//${url}?command=true`)
conn.onopen = () => {

View File

@ -8,15 +8,13 @@
<script>
import page from '../page'
var $ = window.info
export default {
name: 'switch-button',
methods: {
change: function (event) {
let url = window.location.pathname + '?display='
if ($.req.data.display === 'mosaic') {
if (this.$store.state.req.data.display === 'mosaic') {
url += 'list'
} else {
url += 'mosaic'
@ -25,7 +23,7 @@ export default {
page.open(url)
},
icon: function () {
if ($.req.data.display === 'mosaic') return 'view_list'
if (this.$store.state.req.data.display === 'mosaic') return 'view_list'
return 'view_module'
}
}

View File

@ -3,7 +3,6 @@
import Vue from 'vue'
import App from './App'
import store from './store/store'
// simport page from './page.js'
Vue.config.productionTip = false
@ -12,38 +11,6 @@ var $ = (window.info || window.alert('Something is wrong, please refresh!'))
// TODO: keep this here? Maybe on app.vue?
document.title = $.req.data.name
// TODO: keep this here? Maybe on app.vue?
window.addEventListener('popstate', (event) => {
event.preventDefault()
event.stopPropagation()
$.req.kind = ''
$.selected = []
$.multiple = false
// TODO: find a better way to do this. Maybe on app.vue?
window.info.showHelp = false
window.info.showInfo = false
window.info.showDelete = false
window.info.showRename = false
window.info.showMove = false
let request = new window.XMLHttpRequest()
request.open('GET', event.state.url, true)
request.setRequestHeader('Accept', 'application/json')
request.onload = () => {
if (request.status === 200) {
$.req = JSON.parse(request.responseText)
document.title = event.state.name
} else {
console.log(request.responseText)
}
}
request.onerror = (error) => { console.log(error) }
request.send()
})
/* eslint-disable no-new */
new Vue({
el: '#app',

View File

@ -1,10 +1,9 @@
var $ = window.info
import store from './store/store'
function open (url, history) {
// Reset info
$.selected = []
$.multiple = false
$.req.kind = ''
store.commit('resetSelected')
store.commit('multiple', false)
let request = new window.XMLHttpRequest()
request.open('GET', url, true)
@ -12,15 +11,16 @@ function open (url, history) {
request.onload = () => {
if (request.status === 200) {
$.req = JSON.parse(request.responseText)
let req = JSON.parse(request.responseText)
store.commit('updateRequest', req)
if (history) {
window.history.pushState({
name: $.req.data.name,
name: req.data.name,
url: url
}, $.req.data.name, url)
}, req.data.name, url)
document.title = $.req.data.name
document.title = req.data.name
}
} else {
console.log(request.responseText)

View File

@ -0,0 +1,34 @@
const mutations = {
showInfo: (state, value) => (state.showInfo = value),
showHelp: (state, value) => (state.showHelp = value),
showDelete: (state, value) => (state.showDelete = value),
showRename: (state, value) => (state.showRename = value),
showMove: (state, value) => (state.showMove = value),
showNewFile: (state, value) => (state.showNewFile = value),
showNewDir: (state, value) => (state.showNewDir = value),
resetPrompts: (state) => {
state.showHelp = false
state.showInfo = false
state.showDelete = false
state.showRename = false
state.showMove = false
state.showNewFile = false
state.showNewDir = false
},
multiple: (state, value) => (state.multiple = value),
addSelected: (state, value) => (state.selected.push(value)),
removeSelected: (state, value) => {
let i = state.selected.indexOf(value)
if (i === -1) return
state.selected.splice(i, 1)
},
resetSelected: (state) => {
state.selected.length = 0
},
updateRequest: (state, value) => {
state.req.kind = value.kind
state.req.data = value.data
}
}
export default mutations

View File

@ -1,9 +1,14 @@
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
Vue.use(Vuex)
const state = {
user: window.info.user,
req: window.info.req,
webDavURL: window.info.webdavURL,
baseURL: window.info.baseURL,
ssl: (window.location.protocol === 'https:'),
selected: [],
multiple: false,
@ -25,30 +30,8 @@ const getters = {
state.showMove ||
state.showNewFile ||
state.showNewDir
}
}
const mutations = {
showInfo: (state, value) => (state.showInfo = value),
showHelp: (state, value) => (state.showHelp = value),
showDelete: (state, value) => (state.showDelete = value),
showRename: (state, value) => (state.showRename = value),
showMove: (state, value) => (state.showMove = value),
showNewFile: (state, value) => (state.showNewFile = value),
showNewDir: (state, value) => (state.showNewDir = value),
resetPrompts: (state) => {
state.showHelp = false
state.showInfo = false
state.showDelete = false
state.showRename = false
state.showMove = false
state.showNewFile = false
state.showNewDir = false
},
multiple: (state, value) => (state.multiple = value),
resetSelected: (state) => {
state.selected.length = 0
}
selectedCount: state => state.selected.length
}
export default new Vuex.Store({

View File

@ -1,24 +0,0 @@
// Removes an element, if exists, from an array
function removeElement (array, element) {
var i = array.indexOf(element)
if (i !== -1) {
array.splice(i, 1)
}
return array
}
// Replaces an element inside an array by another
function replaceElement (array, oldElement, newElement) {
var i = array.indexOf(oldElement)
if (i !== -1) {
array[i] = newElement
}
return array
}
export default {
remove: removeElement,
replace: replaceElement
}

View File

@ -1,28 +0,0 @@
export default function getRule (rules) {
for (let i = 0; i < rules.length; i++) {
rules[i] = rules[i].toLowerCase()
}
let result = null
let find = Array.prototype.find
find.call(document.styleSheets, styleSheet => {
result = find.call(styleSheet.cssRules, cssRule => {
let found = false
if (cssRule instanceof window.CSSStyleRule) {
for (let i = 0; i < rules.length; i++) {
if (cssRule.selectorText.toLowerCase() === rules[i]) {
found = true
}
}
}
return found
})
return result != null
})
return result
}

View File

@ -1,50 +0,0 @@
var $ = window.info
function open (url, history) {
// Reset info
$.selected = []
$.multiple = false
$.req.kind = ''
let request = new window.XMLHttpRequest()
request.open('GET', url, true)
request.setRequestHeader('Accept', 'application/json')
request.onload = () => {
if (request.status === 200) {
$.req = JSON.parse(request.responseText)
if (history) {
window.history.pushState({
name: $.req.data.name,
url: url
}, $.req.data.name, url)
document.title = $.req.data.name
}
} else {
console.log(request.responseText)
}
}
request.onerror = (error) => { console.log(error) }
request.send()
}
function removeLastDir (url) {
var arr = url.split('/')
if (arr.pop() === '') {
arr.pop()
}
return (arr.join('/'))
}
export default {
reload: () => {
open(window.location.pathname, false)
},
open: (url) => {
open(url, true)
},
removeLastDir: removeLastDir
}

View File

@ -1,109 +0,0 @@
var $ = window.info
function convertURL (url) {
return window.location.origin + url.replace($.baseURL + '/', $.webdavURL + '/')
}
function move (oldLink, newLink) {
return new Promise((resolve, reject) => {
let request = new window.XMLHttpRequest()
oldLink = convertURL(oldLink)
newLink = newLink.replace($.baseURL + '/', $.webdavURL + '/')
newLink = window.location.origin + newLink.substring($.baseURL.length)
request.open('MOVE', oldLink, true)
request.setRequestHeader('Destination', newLink)
request.onload = () => {
if (request.status === 201 || request.status === 204) {
resolve()
} else {
reject(request.statusText)
}
}
request.onerror = () => reject(request.statusText)
request.send()
})
}
function put (link, body, headers = {}) {
return new Promise((resolve, reject) => {
let request = new window.XMLHttpRequest()
request.open('PUT', convertURL(link), true)
for (let key in headers) {
request.setRequestHeader(key, headers[key])
}
request.onload = () => {
if (request.status === 201) {
resolve()
} else {
reject(request.statusText)
}
}
request.onerror = () => reject(request.statusText)
request.send(body)
})
}
function propfind (link, body, headers = {}) {
return new Promise((resolve, reject) => {
let request = new window.XMLHttpRequest()
request.open('PROPFIND', convertURL(link), true)
for (let key in headers) {
request.setRequestHeader(key, headers[key])
}
request.onload = () => {
if (request.status < 300) {
resolve(request.responseText)
} else {
reject(request.statusText)
}
}
request.onerror = () => reject(request.statusText)
request.send(body)
})
}
function trash (link) {
return new Promise((resolve, reject) => {
let request = new window.XMLHttpRequest()
request.open('DELETE', convertURL(link), true)
request.onload = () => {
if (request.status === 204) {
resolve()
} else {
reject(request.statusText)
}
}
request.onerror = () => reject(request.statusText)
request.send()
})
}
function create (link) {
return new Promise((resolve, reject) => {
let request = new window.XMLHttpRequest()
request.open((link.endsWith('/') ? 'MKCOL' : 'PUT'), convertURL(link), true)
request.onload = () => {
if (request.status === 201) {
resolve()
} else {
reject(request.statusText)
}
}
request.onerror = () => reject(request.statusText)
request.send()
})
}
export default {
create: create,
trash: trash,
propfind: propfind,
put: put,
move: move
}