diff --git a/_assets/_old/js/listing.js b/_assets/_old/js/listing.js index 733fab6c..b56046d2 100644 --- a/_assets/_old/js/listing.js +++ b/_assets/_old/js/listing.js @@ -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() diff --git a/_assets/_old/templates/templates.tmpl b/_assets/_old/templates/templates.tmpl index ebc2e42a..be716656 100644 --- a/_assets/_old/templates/templates.tmpl +++ b/_assets/_old/templates/templates.tmpl @@ -20,25 +20,4 @@ - - - - {{ end }} \ No newline at end of file diff --git a/_assets/index.html b/_assets/index.html index 420eddf7..0f6f04b9 100644 --- a/_assets/index.html +++ b/_assets/index.html @@ -43,10 +43,8 @@ showDelete: false, showRename: false, showMove: false, - listing: { - selected: [], - multiple: false - } + selected: [], + multiple: false }
diff --git a/_assets/src/App.vue b/_assets/src/App.vue index 996a10ba..b465f9fc 100644 --- a/_assets/src/App.vue +++ b/_assets/src/App.vue @@ -7,7 +7,7 @@
- + @@ -50,6 +50,7 @@ +
@@ -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 } diff --git a/_assets/src/components/DeletePrompt.vue b/_assets/src/components/DeletePrompt.vue index 251c65b8..8c97dd14 100644 --- a/_assets/src/components/DeletePrompt.vue +++ b/_assets/src/components/DeletePrompt.vue @@ -2,7 +2,7 @@

Delete files

Are you sure you want to delete this file/folder?

-

Are you sure you want to delete {{ listing.selected.length }} file(s)?

+

Are you sure you want to delete {{ selected.length }} file(s)?

@@ -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) diff --git a/_assets/src/components/InfoPrompt.vue b/_assets/src/components/InfoPrompt.vue index 4ce2712e..bdbed425 100644 --- a/_assets/src/components/InfoPrompt.vue +++ b/_assets/src/components/InfoPrompt.vue @@ -2,13 +2,13 @@

File Information

-

{{ listing.selected.length }} files selected.

+

{{ selected.length }} files selected.

-

Display Name: {{ name() }}

+

Display Name: {{ name() }}

Size: {{ humanSize() }}

-

Last Modified: {{ humanTime() }}

+

Last Modified: {{ humanTime() }}

-
+

Number of files: {{ req.data.numFiles }}

Number of directories: {{ req.data.numDirs }}

@@ -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 } diff --git a/_assets/src/components/ListingItem.vue b/_assets/src/components/ListingItem.vue index 2715a19f..a5285af0 100644 --- a/_assets/src/components/ListingItem.vue +++ b/_assets/src/components/ListingItem.vue @@ -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() diff --git a/_assets/src/components/MovePrompt.vue b/_assets/src/components/MovePrompt.vue new file mode 100644 index 00000000..c613262b --- /dev/null +++ b/_assets/src/components/MovePrompt.vue @@ -0,0 +1,122 @@ + + + diff --git a/_assets/src/components/RenamePrompt.vue b/_assets/src/components/RenamePrompt.vue index ba56dacb..535d7b3a 100644 --- a/_assets/src/components/RenamePrompt.vue +++ b/_assets/src/components/RenamePrompt.vue @@ -4,7 +4,7 @@

Insert a new name for {{ oldName() }}:

- +
@@ -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') diff --git a/_assets/src/css/prompts.css b/_assets/src/css/prompts.css index a28adf3a..338e9497 100644 --- a/_assets/src/css/prompts.css +++ b/_assets/src/css/prompts.css @@ -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; } diff --git a/_assets/src/main.js b/_assets/src/main.js index af80d328..eb848086 100644 --- a/_assets/src/main.js +++ b/_assets/src/main.js @@ -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 diff --git a/_assets/src/page.js b/_assets/src/page.js index afbabe41..344995a9 100644 --- a/_assets/src/page.js +++ b/_assets/src/page.js @@ -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() diff --git a/page.go b/page.go index 9070f335..8d657a2d 100644 --- a/page.go +++ b/page.go @@ -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 = `