From 834ce7ac4aba05261d605ed846cc971b2ee8e102 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Wed, 28 Jun 2017 16:05:30 +0100 Subject: [PATCH] vue updates ^_^ Former-commit-id: 336b37cf681ec2337a1e4d577213aa45f12b81d6 [formerly d8cbb6ff242f9ab3e5c857da6f6758abb0f4fc1a] [formerly 8b9089c816fae3608bf5ef8592cb776fa420a6f6 [formerly e2077efbc6a49a82c9f0fc8741304fd2fc9c7e93]] Former-commit-id: 30b063fdab7de6f2c1c5f46dd8a1dd354897f5b6 [formerly 8f83b525334b9430ddbe779c6eae3251a5590b75] Former-commit-id: bbe19a047d103531a542bebb1fe0263bec4cbd88 --- .gitignore | 2 +- _assets/_old/js/common_old.js | 141 ------------------- _assets/_old/js/listing.js | 186 +------------------------ _assets/_old/templates/listing.tmpl | 17 --- _assets/dist_dev/templates/index.html | 13 +- _assets/index.html | 5 +- _assets/src/App.vue | 25 ++-- _assets/src/array.js | 24 ++++ _assets/src/components/Listing.vue | 173 ++++++++++++++++++----- _assets/src/components/ListingItem.vue | 84 ++++++++++- _assets/src/components/Preview.vue | 21 +-- _assets/src/components/Search.vue | 15 +- _assets/src/css.js | 28 ++++ _assets/src/main.js | 34 ++++- _assets/src/page.js | 36 +++++ _assets/src/webdav.js | 109 +++++++++++++++ cmd/filemanager/main.go | 9 +- file.go | 40 +++--- filemanager.go | 8 +- page.go | 8 +- serve.go | 6 +- 21 files changed, 532 insertions(+), 452 deletions(-) delete mode 100644 _assets/_old/templates/listing.tmpl create mode 100644 _assets/src/array.js create mode 100644 _assets/src/css.js create mode 100644 _assets/src/page.js create mode 100644 _assets/src/webdav.js diff --git a/.gitignore b/.gitignore index 09552ad9..df5f555f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,6 @@ .DS_Store node_modules/ -dist/ +dist_dev/ npm-debug.log* yarn-debug.log* yarn-error.log* diff --git a/_assets/_old/js/common_old.js b/_assets/_old/js/common_old.js index 9970fb8d..3c64bfad 100644 --- a/_assets/_old/js/common_old.js +++ b/_assets/_old/js/common_old.js @@ -9,21 +9,7 @@ var selectedItems = [] var overlay var clickOverlay -// Removes an element, if exists, from an array -Array.prototype.removeElement = function (element) { - var i = this.indexOf(element) - if (i !== -1) { - this.splice(i, 1) - } -} -// Replaces an element inside an array by another -Array.prototype.replaceElement = function (oldElement, newElement) { - var i = this.indexOf(oldElement) - if (i !== -1) { - this[i] = newElement - } -} // Sends a costum event to itself Document.prototype.sendCostumEvent = function (text) { @@ -37,34 +23,6 @@ Document.prototype.getCookie = function (name) { } -function getCSSRule (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 CSSStyleRule) { - for (let i = 0; i < rules.length; i++) { - if (cssRule.selectorText.toLowerCase() === rules[i]) { - found = true - } - } - } - - return found - }) - - return result != null - }) - - return result -} /* * * * * * * * * * * * * * * * * * @@ -127,106 +85,7 @@ buttons.setDone = function (name, success = true) { * WEBDAV * * * * * * * * * * * * * * * * * * */ -var webdav = {} -webdav.convertURL = function (url) { - return window.location.origin + url.replace(data.baseURL + '/', data.webdavURL + '/') -} - -webdav.move = function (oldLink, newLink) { - return new Promise((resolve, reject) => { - let request = new window.XMLHttpRequest() - let destination = newLink.replace(data.baseURL + '/', data.webdavURL + '/') - - destination = window.location.origin + destination.substring(data.baseURL.length) - - request.open('MOVE', webdav.convertURL(oldLink), true) - request.setRequestHeader('Destination', destination) - request.onload = () => { - if (request.status === 201 || request.status === 204) { - resolve() - } else { - reject(request.statusText) - } - } - request.onerror = () => reject(request.statusText) - request.send() - }) -} - -webdav.put = function (link, body, headers = {}) { - return new Promise((resolve, reject) => { - let request = new window.XMLHttpRequest() - request.open('PUT', webdav.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) - }) -} - -webdav.propfind = function (link, body, headers = {}) { - return new Promise((resolve, reject) => { - let request = new window.XMLHttpRequest() - request.open('PROPFIND', webdav.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) - }) -} - -webdav.delete = function (link) { - return new Promise((resolve, reject) => { - let request = new window.XMLHttpRequest() - request.open('DELETE', webdav.convertURL(link), true) - request.onload = () => { - if (request.status === 204) { - resolve() - } else { - reject(request.statusText) - } - } - request.onerror = () => reject(request.statusText) - request.send() - }) -} - -webdav.new = function (link) { - return new Promise((resolve, reject) => { - let request = new window.XMLHttpRequest() - request.open((link.endsWith('/') ? 'MKCOL' : 'PUT'), webdav.convertURL(link), true) - request.onload = () => { - if (request.status === 201) { - resolve() - } else { - reject(request.statusText) - } - } - request.onerror = () => reject(request.statusText) - request.send() - }) -} /* * * * * * * * * * * * * * * * * * diff --git a/_assets/_old/js/listing.js b/_assets/_old/js/listing.js index 19906ba0..6b233d90 100644 --- a/_assets/_old/js/listing.js +++ b/_assets/_old/js/listing.js @@ -21,80 +21,6 @@ var listing = { } } }, - itemDragStart: function (event) { - let el = event.target - - for (let i = 0; i < 5; i++) { - if (!el.classList.contains('item')) { - el = el.parentElement - } - } - - event.dataTransfer.setData('id', el.id) - event.dataTransfer.setData('name', el.querySelector('.name').innerHTML) - }, - itemDragOver: function (event) { - event.preventDefault() - let el = event.target - - for (let i = 0; i < 5; i++) { - if (!el.classList.contains('item')) { - el = el.parentElement - } - } - - el.style.opacity = 1 - }, - itemDrop: function (e) { - e.preventDefault() - - let el = e.target, - id = e.dataTransfer.getData('id'), - name = e.dataTransfer.getData('name') - - if (id == '' || name == '') return - - for (let i = 0; i < 5; i++) { - if (!el.classList.contains('item')) { - el = el.parentElement - } - } - - if (el.id === id) return - - let oldLink = document.getElementById(id).dataset.url, - newLink = el.dataset.url + name - - webdav.move(oldLink, newLink) - .then(() => listing.reload()) - .catch(e => console.log(e)) - }, - documentDrop: function (event) { - event.preventDefault() - let dt = event.dataTransfer, - files = dt.files, - el = event.target, - items = document.getElementsByClassName('item') - - for (let i = 0; i < 5; i++) { - if (el != null && !el.classList.contains('item')) { - el = el.parentElement - } - } - - if (files.length > 0) { - if (el != null && el.classList.contains('item') && el.dataset.dir == 'true') { - listing.handleFiles(files, el.querySelector('.name').innerHTML + '/') - return - } - - listing.handleFiles(files, '') - } else { - Array.from(items).forEach(file => { - file.style.opacity = 1 - }) - } - }, rename: function (event) { if (!selectedItems.length || selectedItems.length > 1) { return false @@ -150,67 +76,9 @@ var listing = { return false }, handleFiles: function (files, base) { - buttons.setLoading('upload') - - let promises = [] - - for (let file of files) { - promises.push(webdav.put(window.location.pathname + base + file.name, file)) - } - - Promise.all(promises) - .then(() => { - listing.reload() - buttons.setDone('upload') - }) - .catch(e => { - console.log(e) - buttons.setDone('upload', false) - }) - - return false } } -listing.unselectAll = function () { - let items = document.getElementsByClassName('item') - Array.from(items).forEach(link => { - link.setAttribute('aria-selected', false) - }) - - selectedItems = [] - - listing.handleSelectionChange() - return false -} - -listing.handleSelectionChange = function (event) { - listing.redefineDownloadURLs() - - let selectedNumber = selectedItems.length, - fileAction = document.getElementById('file-only') - - if (selectedNumber) { - fileAction.classList.remove('disabled') - - if (selectedNumber > 1) { - buttons.rename.classList.add('disabled') - buttons.info.classList.add('disabled') - } - - if (selectedNumber == 1) { - buttons.info.classList.remove('disabled') - buttons.rename.classList.remove('disabled') - } - - return false - } - - buttons.info.classList.remove('disabled') - fileAction.classList.add('disabled') - return false -} - listing.redefineDownloadURLs = function () { let files = '' @@ -228,28 +96,6 @@ listing.redefineDownloadURLs = function () { }) } -listing.openItem = function (event) { - window.location = event.currentTarget.dataset.url -} - -listing.selectItem = function (event) { - let el = event.currentTarget - - if (selectedItems.length != 0) event.preventDefault() - if (selectedItems.indexOf(el.id) == -1) { - if (!event.ctrlKey && !listing.selectMultiple) listing.unselectAll() - - el.setAttribute('aria-selected', true) - selectedItems.push(el.id) - } else { - el.setAttribute('aria-selected', false) - selectedItems.removeElement(el.id) - } - - listing.handleSelectionChange() - return false -} - listing.newFileButton = function (event) { event.preventDefault() @@ -284,13 +130,6 @@ listing.newFilePrompt = function (event) { return false } -listing.updateColumns = function (event) { - let columns = Math.floor(document.getElementById('listing').offsetWidth / 300), - items = getCSSRule(['#listing.mosaic .item', '.mosaic#listing .item']) - - items.style.width = `calc(${100/columns}% - 1em)` -} - listing.addDoubleTapEvent = function () { let items = document.getElementsByClassName('item'), touches = { @@ -343,10 +182,6 @@ window.addEventListener('keydown', (event) => { } }) -window.addEventListener('resize', () => { - listing.updateColumns() -}) - listing.selectMoveFolder = function (event) { if (event.target.getAttribute('aria-selected') === 'true') { event.target.setAttribute('aria-selected', false) @@ -542,25 +377,6 @@ document.addEventListener('DOMContentLoaded', event => { document.getElementById('upload-input').click() }) - buttons.new.addEventListener('click', listing.newFileButton) - - // Drag and Drop - document.addEventListener('dragover', function (event) { - event.preventDefault() - }, false) - - document.addEventListener('dragenter', (event) => { - Array.from(items).forEach(file => { - file.style.opacity = 0.5 - }) - }, false) - - document.addEventListener('dragend', (event) => { - Array.from(items).forEach(file => { - file.style.opacity = 1 - }) - }, false) - - document.addEventListener('drop', listing.documentDrop, false) + buttons.new.addEventListener('click', listing.newFileButton) } }) diff --git a/_assets/_old/templates/listing.tmpl b/_assets/_old/templates/listing.tmpl deleted file mode 100644 index 26cc5313..00000000 --- a/_assets/_old/templates/listing.tmpl +++ /dev/null @@ -1,17 +0,0 @@ -{{ define "item" }} -
- -
- -

- -

-
-
-{{ end }} diff --git a/_assets/dist_dev/templates/index.html b/_assets/dist_dev/templates/index.html index 62e97061..66d27fa3 100644 --- a/_assets/dist_dev/templates/index.html +++ b/_assets/dist_dev/templates/index.html @@ -21,9 +21,9 @@ - - - + + + {{- if ne .User.StyleSheet "" -}} @@ -32,13 +32,12 @@
@@ -61,5 +60,5 @@ self.addEventListener('activate', () => { } }); }); - + diff --git a/_assets/index.html b/_assets/index.html index eb878d99..4160b27e 100644 --- a/_assets/index.html +++ b/_assets/index.html @@ -32,13 +32,12 @@
diff --git a/_assets/src/App.vue b/_assets/src/App.vue index 5166efaf..d227f1fd 100644 --- a/_assets/src/App.vue +++ b/_assets/src/App.vue @@ -11,7 +11,7 @@
- +
- +
@@ -50,17 +50,24 @@ import Search from './components/Search' import Preview from './components/Preview' import Listing from './components/Listing' +import css from './css.js' + +function updateColumnSizes () { + let columns = Math.floor(document.querySelector('main').offsetWidth / 300) + let items = css(['#listing.mosaic .item', '.mosaic#listing .item']) + + items.style.width = `calc(${100 / columns}% - 1em)` +} export default { name: 'app', components: { Search, Preview, Listing }, - data: function () { - return window.page + mounted: function () { + updateColumnSizes() + window.addEventListener('resize', updateColumnSizes) }, - methods: { - baseURL: function () { - return window.data.baseURL + '/' - } + data: function () { + return window.info } } diff --git a/_assets/src/array.js b/_assets/src/array.js new file mode 100644 index 00000000..b06b5f7a --- /dev/null +++ b/_assets/src/array.js @@ -0,0 +1,24 @@ +// 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 +} diff --git a/_assets/src/components/Listing.vue b/_assets/src/components/Listing.vue index c86a93ee..af9995bb 100644 --- a/_assets/src/components/Listing.vue +++ b/_assets/src/components/Listing.vue @@ -1,16 +1,20 @@