Updates :D

Former-commit-id: 4aab1964b9462d1fdee92999dd5a7d03f17b4457 [formerly 22352202547980b191886cf29f68ce8e9cc4c39b] [formerly 1a66bae34022092936c2912ea3a323a6984fe7e4 [formerly 1e7c4e6468]]
Former-commit-id: 94170b15369b05e8f4985e88242ba453b5545116 [formerly 2a0b57bebcd48c0189974f4f9e72679b5c67f37b]
Former-commit-id: 635be5ad2826c1659670997900122d024a46de24
This commit is contained in:
Henrique Dias 2017-06-29 14:16:08 +01:00
parent 60ffb88d8e
commit dd87a70157
13 changed files with 220 additions and 201 deletions

View File

@ -80,36 +80,6 @@ listing.addDoubleTapEvent = function () {
})
}
listing.selectMoveFolder = function (event) {
if (event.target.getAttribute('aria-selected') === 'true') {
event.target.setAttribute('aria-selected', false)
return
} else {
if (document.querySelector('.file-list li[aria-selected=true]')) {
document.querySelector('.file-list li[aria-selected=true]').setAttribute('aria-selected', false)
}
event.target.setAttribute('aria-selected', true)
return
}
}
listing.getJSON = function (link) {
return new Promise((resolve, reject) => {
let request = new XMLHttpRequest()
request.open('GET', link)
request.setRequestHeader('Accept', 'application/json')
request.onload = () => {
if (request.status == 200) {
resolve(request.responseText)
} else {
reject(request.statusText)
}
}
request.onerror = () => reject(request.statusText)
request.send()
})
}
listing.moveMakeItem = function (url, name) {
let node = document.createElement('li'),
count = 0
@ -135,43 +105,6 @@ listing.moveMakeItem = function (url, name) {
return node
}
listing.moveDialogNext = function (event) {
let request = new XMLHttpRequest(),
prompt = document.querySelector('form.prompt.active'),
list = prompt.querySelector('div.file-list ul')
prompt.addEventListener('submit', listing.moveSelected)
listing.getJSON(event.target.dataset.url)
.then((data) => {
let dirs = 0
prompt.querySelector('ul').innerHTML = ''
prompt.querySelector('code').innerHTML = event.target.dataset.url
if (event.target.dataset.url != baseURL + '/') {
let node = listing.moveMakeItem(removeLastDirectoryPartOf(event.target.dataset.url) + '/', '..')
list.appendChild(node)
}
if (JSON.parse(data) == null) {
prompt.querySelector('p').innerHTML = `There aren't any folders in this directory.`
return
}
for (let f of JSON.parse(data)) {
if (f.IsDir === true) {
dirs++
list.appendChild(listing.moveMakeItem(f.URL, f.Name))
}
}
if (dirs === 0)
prompt.querySelector('p').innerHTML = `There aren't any folders in this directory.`
})
.catch(e => console.log(e))
}
listing.moveSelected = function (event) {
event.preventDefault()
@ -203,40 +136,6 @@ listing.moveSelected = function (event) {
})
}
listing.moveEvent = function (event) {
if (event.currentTarget.classList.contains('disabled'))
return
listing.getJSON(window.location.pathname)
.then((data) => {
let prompt = document.importNode(templates.move.content, true),
list = prompt.querySelector('div.file-list ul'),
dirs = 0
prompt.querySelector('form').addEventListener('submit', listing.moveSelected)
prompt.querySelector('code').innerHTML = window.location.pathname
if (window.location.pathname !== baseURL + '/') {
list.appendChild(listing.moveMakeItem(removeLastDirectoryPartOf(window.location.pathname) + '/', '..'))
}
for (let f of JSON.parse(data)) {
if (f.IsDir === true) {
dirs++
list.appendChild(listing.moveMakeItem(f.URL, f.Name))
}
}
if (dirs === 0) {
prompt.querySelector('p').innerHTML = `There aren't any folders in this directory.`
}
document.body.appendChild(prompt)
document.querySelector('.overlay').classList.add('active')
document.querySelector('.prompt').classList.add('active')
})
.catch(e => console.log(e))
}
document.addEventListener('DOMContentLoaded', event => {
listing.updateColumns()

View File

@ -20,25 +20,4 @@
</div>
</div>
</template>
<template id="move-template">
<form class="prompt">
<h3>Move</h3>
<p>Choose new house for your file(s)/folder(s):</p>
<div class="file-list">
<ul>
</ul>
</div>
<p>Currently navigating on: <code></code>.</p>
<div>
<button type="submit" autofocus class="ok">Move</button>
<button class="cancel" onclick="closePrompt(event);">Cancel</button>
</div>
</form>
</template>
{{ end }}

View File

@ -43,10 +43,8 @@
showDelete: false,
showRename: false,
showMove: false,
listing: {
selected: [],
multiple: false
}
selected: [],
multiple: false
}
</script>
<div id="app">

View File

@ -7,7 +7,7 @@
</div>
<div>
<rename-button v-show="showRenameButton()"></rename-button>
<move-button v-show="showDeleteButton()"></move-button>
<move-button v-show="showMoveButton()"></move-button>
<delete-button v-show="showDeleteButton()"></delete-button>
<switch-button v-show="req.kind !== 'editor'"></switch-button>
<download-button></download-button>
@ -50,6 +50,7 @@
<rename-prompt v-show="showRename" :class="{ active: showRename }"></rename-prompt>
<delete-prompt v-show="showDelete" :class="{ active: showDelete }"></delete-prompt>
<info-prompt v-show="showInfo" :class="{ active: showInfo }"></info-prompt>
<move-prompt v-if="showMove" :class="{ active: showMove }"></move-prompt>
<help v-show="showHelp" :class="{ active: showHelp }"></help>
<div v-show="showOverlay()" @click="resetPrompts" class="overlay" :class="{ active: showOverlay() }"></div>
@ -73,8 +74,11 @@ import UploadButton from './components/UploadButton'
import DownloadButton from './components/DownloadButton'
import SwitchButton from './components/SwitchViewButton'
import MoveButton from './components/MoveButton'
import MovePrompt from './components/MovePrompt'
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'])
@ -83,11 +87,11 @@ function updateColumnSizes () {
}
function resetPrompts () {
window.info.showHelp = false
window.info.showInfo = false
window.info.showDelete = false
window.info.showRename = false
window.info.showMove = false
$.showHelp = false
$.showInfo = false
$.showDelete = false
$.showRename = false
$.showMove = false
}
window.addEventListener('keydown', (event) => {
@ -96,13 +100,13 @@ window.addEventListener('keydown', (event) => {
resetPrompts()
// Unselect all files and folders.
if (window.info.req.kind === 'listing') {
if ($.req.kind === 'listing') {
let items = document.getElementsByClassName('item')
Array.from(items).forEach(link => {
link.setAttribute('aria-selected', false)
})
window.info.listing.selected.length = 0
$.selected = []
}
return
@ -110,18 +114,18 @@ window.addEventListener('keydown', (event) => {
// Del!
if (event.keyCode === 46) {
window.info.showDelete = true
$.showDelete = true
}
// F1!
if (event.keyCode === 112) {
event.preventDefault()
window.info.showHelp = true
$.showHelp = true
}
// F2!
if (event.keyCode === 113) {
window.info.showRename = true
$.showRename = true
}
// CTRL + S
@ -130,7 +134,7 @@ window.addEventListener('keydown', (event) => {
case 's':
event.preventDefault()
if (window.info.req.kind !== 'editor') {
if ($.req.kind !== 'editor') {
window.location = '?download=true'
return
}
@ -156,7 +160,8 @@ export default {
DownloadButton,
UploadButton,
SwitchButton,
MoveButton
MoveButton,
MovePrompt
},
mounted: function () {
updateColumnSizes()
@ -175,29 +180,40 @@ export default {
},
showUpload: function () {
if (this.req.kind === 'editor') return false
return this.user.allowNew
return $.user.allowNew
},
showDeleteButton: function () {
if (this.req.kind === 'listing') {
if (this.listing.selected.length === 0) {
if (this.selected.length === 0) {
return false
}
return this.user.allowEdit
return $.user.allowEdit
}
return this.user.allowEdit
return $.user.allowEdit
},
showRenameButton: function () {
if (this.req.kind === 'listing') {
if (this.listing.selected.length === 1) {
return this.user.allowEdit
if (this.selected.length === 1) {
return $.user.allowEdit
}
return false
}
return this.user.allowEdit
return $.user.allowEdit
},
showMoveButton: function () {
if (this.req.kind !== 'listing') {
return false
}
if (this.selected.length > 0) {
return $.user.allowEdit
}
return false
},
resetPrompts: resetPrompts
}

View File

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

View File

@ -2,13 +2,13 @@
<div class="prompt">
<h3>File Information</h3>
<p v-show="listing.selected.length > 1">{{ listing.selected.length }} files selected.</p>
<p v-show="selected.length > 1">{{ selected.length }} files selected.</p>
<p v-show="listing.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 v-show="listing.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() && listing.selected.length === 0">
<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>
@ -37,43 +37,43 @@ export default {
},
methods: {
humanSize: function () {
if (this.listing.selected.length === 0 || this.req.kind !== 'listing') {
if (this.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
for (let i = 0; i < this.selected.length; i++) {
sum += this.req.data.items[this.selected[i]].size
}
return filesize(sum)
},
humanTime: function () {
if (this.listing.selected.length === 0) {
if (this.selected.length === 0) {
return moment(this.req.data.modified).fromNow()
}
return moment(this.req.data.items[this.listing.selected[0]]).fromNow()
return moment(this.req.data.items[this.selected[0]]).fromNow()
},
name: function () {
if (this.listing.selected.length === 0) {
if (this.selected.length === 0) {
return this.req.data.name
}
return this.req.data.items[this.listing.selected[0]].name
return this.req.data.items[this.selected[0]].name
},
dir: function () {
if (this.listing.selected.length > 1) {
if (this.selected.length > 1) {
// Don't show when multiple selected.
return true
}
if (this.listing.selected.length === 0) {
if (this.selected.length === 0) {
return this.req.data.isDir
}
return this.req.data.items[this.listing.selected[0]].isDir
return this.req.data.items[this.selected[0]].isDir
},
checksum: function (event, hash) {
event.preventDefault()
@ -81,8 +81,8 @@ export default {
let request = new window.XMLHttpRequest()
let link
if (this.listing.selected.length) {
link = this.req.data.items[this.listing.selected[0]].url
if (this.selected.length) {
link = this.req.data.items[this.selected[0]].url
} else {
link = window.location.pathname
}

View File

@ -31,12 +31,11 @@ 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'],
data: function () {
return window.info.listing
},
methods: {
icon: function () {
if (this.isDir) return 'folder'
@ -99,19 +98,19 @@ export default {
link.setAttribute('aria-selected', false)
})
this.selected.length = 0
$.selected = []
return false
},
click: function (event) {
if (this.selected.length !== 0) event.preventDefault()
if (this.selected.indexOf(this.index) === -1) {
if (!event.ctrlKey && !this.multiple) this.unselectAll()
if ($.selected.length !== 0) event.preventDefault()
if ($.selected.indexOf(this.index) === -1) {
if (!event.ctrlKey && !$.multiple) this.unselectAll()
this.$el.setAttribute('aria-selected', true)
this.selected.push(this.index)
$.selected.push(this.index)
} else {
this.$el.setAttribute('aria-selected', false)
this.selected = array.remove(this.selected, this.index)
$.selected = array.remove($.selected, this.index)
}
// this.handleSelectionChange()

View File

@ -0,0 +1,122 @@
<template>
<div class="prompt">
<h3>Move</h3>
<p>Choose new house for your file(s)/folder(s):</p>
<ul class="file-list">
<li @click="select" @dblclick="next" v-for="item in items" :data-url="item.url">{{ item.name }}</li>
</ul>
<p>Currently navigating on: <code>{{ current }}</code>.</p>
<div>
<button class="ok" @click="move">Move</button>
<button class="cancel" @click="cancel">Cancel</button>
</div>
</div>
</template>
<script>
import page from '../page'
var $ = window.info
export default {
name: 'move-prompt',
data: function () {
return {
items: [],
current: window.location.pathname
}
},
mounted: function () {
if (window.location.pathname !== $.baseURL + '/') {
this.items.push({
name: '..',
url: page.removeLastDir(window.location.pathname) + '/'
})
}
if ($.req.kind === 'listing') {
for (let item of $.req.data.items) {
if (!item.isDir) continue
this.items.push({
name: item.name,
url: item.url
})
}
return
}
},
methods: {
cancel: function (event) {
$.showMove = false
},
move: function (event) {
console.log('Move')
},
next: function (event) {
console.log('Next')
let url = event.currentTarget.dataset.url
this.json(url)
.then((data) => {
this.current = url
this.items = []
if (url !== $.baseURL + '/') {
this.items.push({
name: '..',
url: page.removeLastDir(url) + '/'
})
}
let req = JSON.parse(data)
for (let item of req.data.items) {
if (!item.isDir) continue
this.items.push({
name: item.name,
url: item.url
})
}
})
.catch(e => console.log(e))
},
json: function (url) {
return new Promise((resolve, reject) => {
let request = new XMLHttpRequest()
request.open('GET', url)
request.setRequestHeader('Accept', 'application/json')
request.onload = () => {
if (request.status === 200) {
resolve(request.responseText)
} else {
reject(request.statusText)
}
}
request.onerror = () => reject(request.statusText)
request.send()
})
},
select: function (event) {
let el = event.currentTarget
if (el.getAttribute('aria-selected') === 'true') {
el.setAttribute('aria-selected', false)
return
}
let el2 = this.$el.querySelector('li[aria-selected=true]')
if (el2) {
el2.setAttribute('aria-selected', false)
}
el.setAttribute('aria-selected', true)
return
}
}
}
</script>

View File

@ -4,7 +4,7 @@
<p>Insert a new name for <code>{{ oldName() }}</code>:</p>
<input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
<div>
<button @click="submit" type="submit" autofocus>Rename</button>
<button @click="submit" type="submit">Rename</button>
<button @click="cancel" class="cancel">Cancel</button>
</div>
</div>
@ -33,12 +33,12 @@ export default {
return $.req.data.name
}
if ($.listing.selected.length === 0 || $.listing.selected.length > 1) {
if ($.selected.length === 0 || $.selected.length > 1) {
// This shouldn't happen.
return
}
return $.req.data.items[$.listing.selected[0]].name
return $.req.data.items[$.selected[0]].name
},
submit: function (event) {
let oldLink = ''
@ -47,7 +47,7 @@ export default {
if ($.req.kind !== 'listing') {
oldLink = $.req.data.url
} else {
oldLink = $.req.data.items[$.listing.selected[0]].url
oldLink = $.req.data.items[$.selected[0]].url
}
newLink = page.removeLastDir(oldLink) + '/' + this.name
@ -56,6 +56,10 @@ export default {
webdav.move(oldLink, newLink)
.then(() => {
if ($.req.kind !== 'listing') {
page.open(newLink)
return
}
// TODO: keep selected after reload?
page.reload()
// buttons.setDone('rename')

View File

@ -72,44 +72,44 @@
* PROMPT - MOVE *
* * * * * * * * * * * * * * * */
.prompt .file-list {
flex-direction: initial;
.file-list {
max-height: 50vh;
overflow: auto;
}
.prompt .file-list ul {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.prompt .file-list ul li {
.file-list li {
width: 100%;
user-select: none;
border-radius: .2em;
padding: .3em;
}
.prompt .file-list ul li[aria-selected=true] {
.file-list li[aria-selected=true] {
background: #2196f3 !important;
color: #fff !important;
transition: .1s ease all;
}
.prompt .file-list ul li:hover {
.file-list li:hover {
background-color: #e9eaeb;
cursor: pointer;
}
.prompt .file-list ul li:before {
.file-list li:before {
content: "folder";
color: #6f6f6f;
vertical-align: middle;
padding: 0 .25em;
line-height: 2em;
line-height: 1.4;
font-family: 'Material Icons';
font-size: 1.75em;
margin-right: .25em;
}
.prompt .file-list ul li[aria-selected=true]:before {
.file-list li[aria-selected=true]:before {
color: white;
}

View File

@ -17,8 +17,8 @@ window.addEventListener('popstate', (event) => {
event.stopPropagation()
$.req.kind = ''
$.listing.selected.length = 0
$.listing.selected.multiple = false
$.selected = []
$.multiple = false
// TODO: find a better way to do this. Maybe on app.vue?
window.info.showHelp = false
window.info.showInfo = false

View File

@ -2,8 +2,8 @@ var $ = window.info
function open (url, history) {
// Reset info
$.listing.selected.length = 0
$.listing.selected.multiple = false
$.selected = []
$.multiple = false
$.req.kind = ''
let request = new window.XMLHttpRequest()

View File

@ -147,7 +147,7 @@ func htmlError(w http.ResponseWriter, code int, err error) (int, error) {
if err != nil {
return http.StatusInternalServerError, err
}
return http.StatusOK, nil
return 0, nil
}
const errTemplate = `<!DOCTYPE html>