diff --git a/_embed/public/css/styles.css b/_embed/public/css/styles.css index 7d6c4173..f01bde1b 100644 --- a/_embed/public/css/styles.css +++ b/_embed/public/css/styles.css @@ -35,6 +35,24 @@ pre { word-wrap: break-word; } +button { + border: 0; + padding: .5em 1em; + margin-left: .5em; + border-radius: .1em; + background-color; + cursor: pointer; + background: #2196f3; + color: #fff; + border: 1px solid rgba(0, 0, 0, 0.05); + box-shadow: 0 0 5px rgba(0, 0, 0, 0.05); + transition: .1s ease all; +} + +button:hover { + background-color: #1E88E5; +} + .container { width: 95%; max-width: 960px; @@ -541,7 +559,7 @@ header .actions { vertical-align: middle; } -#bottom-bar div:first-child>i { +#bottom-bar>div:first-child>i { margin-right: .3em; } @@ -836,6 +854,81 @@ header .actions { } +/* * * * * * * * * * * * * * * * + * PROMPT * + * * * * * * * * * * * * * * * */ + +.overlay, .prompt { + opacity: 0; + z-index: -1; + transition: .1s ease opacity; +} + +.overlay.active, .prompt.active { + z-index: 9999999; + opacity: 1; +} + +.overlay { + background-color: rgba(0, 0, 0, 0.5); + position: fixed; + top: 0; + left: 0; + height: 100%; + z-index: -1; + width: 100%; +} + +.prompt { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 99999999; + background: #fff; + border: 1px solid rgba(0, 0, 0, 0.075); + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + padding: 2em; + max-width: 25em; + width: 95%; +} + +.prompt h3 { + margin: 0; + font-weight: 500; + font-size: 1.5em; +} + +.prompt p { + font-size: .9em; + color: rgba(0, 0, 0, 0.8); + margin: .5em 0 1em; +} + +.prompt input { + width: 100%; + border: 1px solid #dadada; + line-height: 1; + padding: .3em; +} + +.prompt div { + margin-top: 1em; + display: flex; + justify-content: flex-start; + flex-direction: row-reverse; +} + +.prompt .cancel { + background-color: #ECEFF1; + color: #37474F; +} + +.prompt .cancel:hover { + background-color: #e9eaeb; +} + + /* * * * * * * * * * * * * * * * * FOOTER * * * * * * * * * * * * * * * * */ diff --git a/_embed/public/js/common.js b/_embed/public/js/common.js index 7a2d8c16..0864bdd5 100644 --- a/_embed/public/js/common.js +++ b/_embed/public/js/common.js @@ -2,6 +2,7 @@ var tempID = "_fm_internal_temporary_id", buttons = {}, + templates = {}, selectedItems = []; // Removes an element, if exists, from an array @@ -95,7 +96,9 @@ function toWebDavURL(url) { // Remove the last directory of an url var removeLastDirectoryPartOf = function(url) { var arr = url.split('/'); - arr.pop(); + if (arr.pop() === "") { + arr.pop(); + } return (arr.join('/')); } @@ -104,6 +107,29 @@ var removeLastDirectoryPartOf = function(url) { * EVENTS * * * * * * * * * * * * * * * * * * */ +function closePrompt(event) { + let prompt = document.querySelector('.prompt'); + + event.preventDefault(); + document.querySelector('.overlay').classList.remove('active'); + prompt.classList.remove('active'); + + setTimeout(() => { + prompt.remove(); + }, 100); +} + +function notImplemented(event) { + event.preventDefault(); + + let clone = document.importNode(templates.info.content, true); + clone.querySelector('h3').innerHTML = 'Not implemented'; + clone.querySelector('p').innerHTML = "Sorry, but this feature wasn't implemented yet."; + + document.querySelector('body').appendChild(clone) + document.querySelector('.overlay').classList.add('active'); + document.querySelector('.prompt').classList.add('active'); +} // Prevent Default event var preventDefault = function(event) { @@ -138,6 +164,45 @@ function openEvent(event) { return false; } +function deleteSelected(single) { + return function(event) { + event.preventDefault(); + + Array.from(selectedItems).forEach(id => { + let request = new XMLHttpRequest(), + html = buttons.delete.changeToLoading(), + el, url; + + if (single) { + url = window.location.pathname; + } else { + el = document.getElementById(id); + url = el.dataset.url; + } + + request.open('DELETE', toWebDavURL(url)); + request.onreadystatechange = function() { + if (request.readyState == 4) { + if (request.status == 204) { + if (single) { + window.location.pathname = removeLastDirectoryPartOf(window.location.pathname); + } else { + el.remove(); + selectedItems.removeElement(id); + } + } + + buttons.delete.changeToDone(request.status != 204, html); + } + } + + request.send(); + }); + + closePrompt(event); + } +} + // Handles the delete button event function deleteEvent(event) { let single = false; @@ -147,36 +212,16 @@ function deleteEvent(event) { single = true; } - Array.from(selectedItems).forEach(id => { - let request = new XMLHttpRequest(), - html = buttons.delete.changeToLoading(), - el, url; + let clone = document.importNode(templates.question.content, true); + clone.querySelector('h3').innerHTML = 'Delete files'; + clone.querySelector('p').innerHTML = `Are you sure you want to delete ${selectedItems.length} file(s)?`; + clone.querySelector('input').remove(); + clone.querySelector('.ok').innerHTML = 'Delete'; + clone.querySelector('form').addEventListener('submit', deleteSelected(single)); - if (single) { - url = window.location.pathname; - } else { - el = document.getElementById(id); - url = el.dataset.url; - } - - request.open('DELETE', toWebDavURL(url)); - request.onreadystatechange = function() { - if (request.readyState == 4) { - if (request.status == 204) { - if (single) { - window.location.pathname = removeLastDirectoryPartOf(window.location.pathname); - } else { - el.remove(); - selectedItems.removeElement(id); - } - } - - buttons.delete.changeToDone(request.status != 204, html); - } - } - - request.send(); - }); + document.querySelector('body').appendChild(clone) + document.querySelector('.overlay').classList.add('active'); + document.querySelector('.prompt').classList.add('active'); return false; } @@ -320,10 +365,13 @@ document.addEventListener("DOMContentLoaded", function(event) { buttons.logout.addEventListener("click", logoutEvent); buttons.open.addEventListener("click", openEvent); + templates.question = document.querySelector('#question-template'); + templates.info = document.querySelector('#info-template'); + if (user.AllowEdit) { buttons.delete.addEventListener("click", deleteEvent); } - + document.getElementById("breadcrumbs-button").addEventListener("click", event => { event.currentTarget.classList.toggle("active"); document.getElementById("breadcrumbs").classList.toggle("active"); diff --git a/_embed/public/js/editor.js b/_embed/public/js/editor.js index db58f632..2c72fadb 100644 --- a/_embed/public/js/editor.js +++ b/_embed/public/js/editor.js @@ -1,7 +1,5 @@ 'use strict'; -var templates = []; - function textareaAutoGrow() { let autogrow = function() { this.style.height = '5px'; @@ -26,140 +24,133 @@ function deleteFrontMatterItem(event) { document.getElementById(this.dataset.delete).remove(); } -function addFrontMatterItem(event) { - event.preventDefault(); - let clone; - let temp = document.getElementById(tempID) - if (temp) { - temp.remove(); +function makeFromBaseTemplate(id, type, name, parent) { + let clone = document.importNode(templates.base.content, true); + clone.querySelector('fieldset').id = id; + clone.querySelector('fieldset').dataset.type = type; + clone.querySelector('h3').innerHTML = name; + clone.querySelector('.delete').dataset.delete = id; + clone.querySelector('.delete').addEventListener('click', deleteFrontMatterItem); + clone.querySelector('.add').addEventListener('click', addFrontMatterItem); + + if (parent.classList.contains("frontmatter")) { + parent.insertBefore(clone, document.querySelector('div.button.add')); + return } - let block = this.parentNode, - type = block.dataset.type, - id = block.id; + parent.appendChild(clone); +} + +function makeFromArrayItemTemplate(id, number, parent) { + let clone = document.importNode(templates.arrayItem.content, true); + clone.querySelector('[data-type="array-item"]').id = `${id}-${number}`; + clone.querySelector('input').name = id; + clone.querySelector('input').id = id; + clone.querySelector('div.action').dataset.delete = `${id}-${number}`; + clone.querySelector('div.action').addEventListener('click', deleteFrontMatterItem); + parent.querySelector('.group').appendChild(clone) + document.getElementById(`${id}-${number}`).querySelector('input').focus(); +} + +function makeFromObjectItemTemplate(id, name, parent) { + let clone = document.importNode(templates.objectItem.content, true); + clone.querySelector('.block').id = `block-${id}`; + clone.querySelector('.block').dataset.content = id; + clone.querySelector('label').for = id; + clone.querySelector('label').innerHTML = name; + clone.querySelector('input').name = id; + clone.querySelector('input').id = id; + clone.querySelector('.action').dataset.delete = `block-${id}`; + clone.querySelector('.action').addEventListener('click', deleteFrontMatterItem); + + parent.appendChild(clone) + document.getElementById(id).focus(); +} + +function addFrontMatterItemPrompt(parent) { + return function(event) { + event.preventDefault(); + + let value = event.currentTarget.querySelector('input').value; + if (value === '') { + return true; + } + + closePrompt(event); + + let name = value.substring(0, value.lastIndexOf(':')), + type = value.substring(value.lastIndexOf(':') + 1, value.length); + + if (type !== "" && type !== "array" && type !== "object") { + name = value; + } + + name = name.replace(' ', '_'); + + let id = name; + + if (parent.id != '') { + id = parent.id + "." + id; + } + + if (type == "array" || type == "object") { + if (parent.dataset.type == "parent") { + makeFromBaseTemplate(bid, newtype, name, document.querySelector('.frontmatter')); + return; + } + + makeFromBaseTemplate(bid, newtype, name, block); + return; + } + + let group = parent.querySelector('.group'); + + if (group == null) { + parent.insertAdjacentHTML('afterbegin', '
'); + group = parent.querySelector('.group'); + } + + makeFromObjectItemTemplate(id, name, group); + } +} + +function addFrontMatterItem(event) { + event.preventDefault(); + + let parent = event.currentTarget.parentNode, + type = parent.dataset.type; // If the block is an array if (type === "array") { - let fieldID = id + "[]", - input = fieldID, - count = block.querySelectorAll('.group > div').length; - - input = input.replace(/\[/, '\\['); - input = input.replace(/\]/, '\\]'); - - let fieldsets = block.getElementsByTagName("fieldset"); + let id = parent.id + "[]", + count = parent.querySelectorAll('.group > div').length, + fieldsets = parent.getElementsByTagName("fieldset"); if (fieldsets.length > 0) { - let newtype = fieldsets[0].dataset.type, - bid = id + "[" + fieldsets.length + "]", - name = fieldsets.length; - - clone = document.importNode(templates.base.content, true); - clone.querySelector('fieldset').id = bid; - clone.querySelector('fieldset').dataset.type = newtype; - clone.querySelector('h3').innerHTML = name; - clone.querySelector('.delete').dataset.delete = bid; - clone.querySelector('.delete').addEventListener('click', deleteFrontMatterItem); - clone.querySelector('.add').addEventListener('click', addFrontMatterItem); - block.appendChild(clone); + let itemType = fieldsets[0].dataset.type, + itemID = parent.id + "[" + fieldsets.length + "]", + itemName = fieldsets.length; + + makeFromBaseTemplate(itemID, itemType, itemName, parent); } else { - clone = document.importNode(templates.arrayItem.content, true); - clone.querySelector('[data-type="array-item"]').id = `${fieldID}-${count}`; - clone.querySelector('input').name = fieldID; - clone.querySelector('input').id = fieldID; - clone.querySelector('div.action').dataset.delete = `${fieldID}-${count}`; - clone.querySelector('div.action').addEventListener('click', deleteFrontMatterItem); - block.querySelector('.group').appendChild(clone) - document.getElementById(`${fieldID}-${count}`).querySelector('input').focus(); + makeFromArrayItemTemplate(id, count, parent); } + + return; } - if (type == "object" || type == "parent") { - clone = document.importNode(templates.temporary.content, true); - clone.querySelector('.group').id = tempID; - clone.querySelector('.block').id = tempID; - clone.querySelector('input').name = tempID; + if (type == "object" || type == "parent") { + let clone = document.importNode(templates.question.content, true); + clone.querySelector('form').id = tempID; + clone.querySelector('h3').innerHTML = 'New field'; + clone.querySelector('p').innerHTML = 'Write the field name and then press enter. If you want to create an array or an object, end the name with :array or :object.'; + clone.querySelector('.ok').innerHTML = 'Create'; + clone.querySelector('form').addEventListener('submit', addFrontMatterItemPrompt(parent)); + clone.querySelector('form').classList.add('active') + document.querySelector('body').appendChild(clone); - if (type == "parent") { - document.querySelector('.frontmatter').insertBefore(clone, document.querySelector('div.button.add')); - } else { - block.insertBefore(clone, block.querySelector('.group')); - } - - let temp = document.getElementById(tempID), - input = temp.querySelector('input'); - input.focus(); - input.addEventListener('keydown', (event) => { - if (event.keyCode == 27) { - event.preventDefault(); - temp.remove(); - } - - if (event.keyCode == 13) { - event.preventDefault(); - - let value = input.value; - if (value === '') { - temp.remove(); - return true; - } - - let name = value.substring(0, value.lastIndexOf(':')), - newtype = value.substring(value.lastIndexOf(':') + 1, value.length); - if (newtype !== "" && newtype !== "array" && newtype !== "object") { - name = value; - } - - name = name.replace(' ', '_'); - - let bid = name; - if (id != '') { - bid = id + "." + bid; - } - - temp.remove(); - - switch (newtype) { - case "array": - case "object": - clone = document.importNode(templates.base.content, true); - clone.querySelector('fieldset').id = bid; - clone.querySelector('fieldset').dataset.type = newtype; - clone.querySelector('h3').innerHTML = name; - clone.querySelector('.delete').dataset.delete = bid; - clone.querySelector('.delete').addEventListener('click', deleteFrontMatterItem); - clone.querySelector('.add').addEventListener('click', addFrontMatterItem); - - if (type == "parent") { - document.querySelector('.frontmatter').insertBefore(clone, document.querySelector('div.button.add')); - } else { - block.appendChild(clone); - } - - break; - default: - let group = block.querySelector('.group'); - - if (group == null) { - block.insertAdjacentHTML('afterbegin', '
'); - group = block.querySelector('.group'); - } - - clone = document.importNode(templates.objectItem.content, true); - clone.querySelector('.block').id = `block-${bid}`; - clone.querySelector('.block').dataset.content = bid; - clone.querySelector('label').for = bid; - clone.querySelector('label').innerHTML = name; - clone.querySelector('input').name = bid; - clone.querySelector('input').id = bid; - clone.querySelector('.action').dataset.delete = `block-${bid}`; - clone.querySelector('.action').addEventListener('click', deleteFrontMatterItem); - - group.appendChild(clone) - document.getElementById(bid).focus(); - } - } - }); + document.querySelector('.overlay').classList.add('active'); + document.getElementById(tempID).classList.add('active'); } return false; @@ -167,15 +158,14 @@ function addFrontMatterItem(event) { document.addEventListener("DOMContentLoaded", (event) => { textareaAutoGrow(); - - templates.array = document.getElementById("array-template"); + templates.arrayItem = document.getElementById("array-item-template"); templates.base = document.getElementById('base-template'); templates.objectItem = document.getElementById("object-item-template"); templates.temporary = document.getElementById('temporary-template'); let container = document.getElementById('editor'), - button = document.querySelector('#submit span:first-child'), + button = document.querySelector('#save'), kind = container.dataset.kind; if (kind != 'frontmatter-only') { @@ -232,6 +222,11 @@ document.addEventListener("DOMContentLoaded", (event) => { } } + document.querySelector('#save').addEventListener('click', event => { + event.preventDefault(); + saveContent(); + }); + document.querySelector('form').addEventListener('submit', (event) => { event.preventDefault(); saveContent(); diff --git a/_embed/public/js/listing.js b/_embed/public/js/listing.js index 97aba293..08b14e55 100644 --- a/_embed/public/js/listing.js +++ b/_embed/public/js/listing.js @@ -1,6 +1,8 @@ 'use strict'; -var reloadListing = function(callback) { +var listing = {}; + +listing.reload = function(callback) { let request = new XMLHttpRequest(); request.open('GET', window.location); request.setRequestHeader('Minimal', 'true'); @@ -18,9 +20,94 @@ var reloadListing = function(callback) { } } -// Rename file event -var renameEvent = function(event) { - if (this.classList.contains('disabled') || !selectedItems.length) { +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); +} + +listing.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; +} + +listing.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 = toWebDavURL(document.getElementById(id).dataset.url), + newLink = toWebDavURL(el.dataset.url + name), + request = new XMLHttpRequest(); + + request.open('MOVE', oldLink); + request.setRequestHeader('Destination', newLink); + request.send(); + request.onreadystatechange = function() { + if (request.readyState == 4) { + if (request.status == 201 || request.status == 204) { + listing.reload(); + } + } + } +} + +listing.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; + }); + } +} + +listing.rename = function(event) { + if (event.currentTarget.classList.contains('disabled') || !selectedItems.length) { return false; } @@ -49,23 +136,20 @@ var renameEvent = function(event) { request.setRequestHeader('Destination', newLink); request.send(); request.onreadystatechange = function() { - // TODO: redirect if it's moved to another folder - if (request.readyState == 4) { if (request.status != 201 && request.status != 204) { span.innerHTML = name; } else { let newLink = encodeURI(link.replace(name, newName)); - console.log(request.body) - reloadListing(() => { + listing.reload(() => { newName = btoa(newName); selectedItems = [newName]; document.getElementById(newName).setAttribute("aria-selected", true); - document.sendCostumEvent('changed-selected'); + listing.handleSelectionChange(); }); } - document.getElementById('rename').changeToDone((request.status != 201 && request.status != 204), html); + buttons.rename.changeToDone((request.status != 201 && request.status != 204), html); } } } @@ -94,8 +178,7 @@ var renameEvent = function(event) { return false; } -// Upload files -var handleFiles = function(files, base) { +listing.handleFiles = function(files, base) { let button = document.getElementById("upload"), html = button.changeToLoading(); @@ -107,7 +190,7 @@ var handleFiles = function(files, base) { request.onreadystatechange = function() { if (request.readyState == 4) { if (request.status == 201) { - reloadListing(); + listing.reload(); } button.changeToDone((request.status != 201), html); @@ -118,53 +201,20 @@ var handleFiles = function(files, base) { return false; } -function unselectAll() { - var items = document.getElementsByClassName('item'); +listing.unselectAll = function() { + let items = document.getElementsByClassName('item'); Array.from(items).forEach(link => { link.setAttribute("aria-selected", false); }); - + selectedItems = []; - - document.sendCostumEvent('changed-selected'); + + listing.handleSelectionChange(); return false; } -// Handles the new directory event -var newDirEvent = function(event) { - // TODO: create new dir button and new file button - if (event.keyCode == 27) { - document.getElementById('newdir').classList.toggle('enabled'); - setTimeout(() => { - document.getElementById('newdir').value = ''; - }, 200); - } - - if (event.keyCode == 13) { - event.preventDefault(); - - let button = document.getElementById('new'), - html = button.changeToLoading(), - request = new XMLHttpRequest(), - name = document.getElementById('newdir').value; - - request.open((name.endsWith("/") ? "MKCOL" : "PUT"), toWebDavURL(window.location.pathname + name)); - - request.send(); - request.onreadystatechange = function() { - if (request.readyState == 4) { - button.changeToDone((request.status != 201), html); - reloadListing(); - } - } - } - - return false; -} - -// Handles the event when there is change on selected elements -document.addEventListener("changed-selected", function(event) { - redefineDownloadURLs(); +listing.handleSelectionChange = function(event) { + listing.redefineDownloadURLs(); let selectedNumber = selectedItems.length, fileAction = document.getElementById("file-only"); @@ -173,13 +223,13 @@ document.addEventListener("changed-selected", function(event) { fileAction.classList.remove("disabled"); if (selectedNumber > 1) { - document.getElementById("open").classList.add("disabled"); - document.getElementById("rename").classList.add("disabled"); + buttons.open.classList.add("disabled"); + buttons.rename.classList.add("disabled"); } if (selectedNumber == 1) { - document.getElementById("open").classList.remove("disabled"); - document.getElementById("rename").classList.remove("disabled"); + buttons.open.classList.remove("disabled"); + buttons.rename.classList.remove("disabled"); } return false; @@ -187,9 +237,9 @@ document.addEventListener("changed-selected", function(event) { fileAction.classList.add("disabled"); return false; -}); +} -var redefineDownloadURLs = function() { +listing.redefineDownloadURLs = function() { let files = ""; for (let i = 0; i < selectedItems.length; i++) { @@ -206,49 +256,98 @@ var redefineDownloadURLs = function() { }); } +listing.openItem = function(event) { + window.location = event.currentTarget.dataset.url; +} -document.addEventListener('DOMContentLoaded', event => { - let updateColumns = () => { - let columns = Math.floor(document.getElementById('listing').offsetWidth / 300), - itens = getCSSRule('#listing.mosaic .item'); +listing.selectItem = function(event) { + let el = event.currentTarget; - itens.style.width = `calc(${100/columns}% - 1em)`; + if (selectedItems.length != 0) event.preventDefault(); + if (selectedItems.indexOf(el.id) == -1) { + if (!event.ctrlKey) listing.unselectAll(); + + el.setAttribute("aria-selected", true); + selectedItems.push(el.id); + } else { + el.setAttribute("aria-selected", false); + selectedItems.removeElement(el.id); } - updateColumns(); - window.addEventListener("resize", () => { - updateColumns(); - }); + listing.handleSelectionChange(); + return false; +} - // Add event to back button and executes back event on ESC - document.addEventListener('keydown', (event) => { - if (event.keyCode == 27) { - unselectAll(); +listing.newFileButton = function(event) { + event.preventDefault(); + + let clone = document.importNode(templates.question.content, true); + clone.querySelector('h3').innerHTML = 'New file'; + clone.querySelector('p').innerHTML = 'End with a trailing slash to create a dir.'; + clone.querySelector('.ok').innerHTML = 'Create'; + clone.querySelector('form').addEventListener('submit', listing.newFilePrompt); + + document.querySelector('body').appendChild(clone) + document.querySelector('.overlay').classList.add('active'); + document.querySelector('.prompt').classList.add('active'); +} + +listing.newFilePrompt = function(event) { + event.preventDefault(); + + let button = document.getElementById('new'), + html = button.changeToLoading(), + request = new XMLHttpRequest(), + name = event.currentTarget.querySelector('input').value; + + request.open((name.endsWith("/") ? "MKCOL" : "PUT"), toWebDavURL(window.location.pathname + name)); + request.send(); + request.onreadystatechange = function() { + if (request.readyState == 4) { + button.changeToDone((request.status != 201), html); + listing.reload(); } - }); + } + + closePrompt(event); + return false; +} + +listing.updateColumns = function(event) { + let columns = Math.floor(document.getElementById('listing').offsetWidth / 300), + items = getCSSRule('#listing.mosaic .item'); + + items.style.width = `calc(${100/columns}% - 1em)`; +} + +// Keydown events +document.addEventListener('keydown', (event) => { + if (event.keyCode == 27) { + listing.unselectAll(); + } +}); + +window.addEventListener("resize", () => { + listing.updateColumns(); +}); + +document.addEventListener('DOMContentLoaded', event => { + listing.updateColumns(); + + buttons.rename = document.getElementById("rename"); + buttons.upload = document.getElementById("upload"); + buttons.new = document.getElementById('new'); if (user.AllowEdit) { - // Enables rename button - document.getElementById("rename").addEventListener("click", renameEvent); + buttons.rename.addEventListener("click", listing.rename); } if (user.AllowNew) { - // Enables upload button - document.getElementById("upload").addEventListener("click", (event) => { + buttons.upload.addEventListener("click", (event) => { document.getElementById("upload-input").click(); }); - document.getElementById('new').addEventListener('click', event => { - let newdir = document.getElementById('newdir'); - newdir.classList.add('enabled'); - newdir.focus(); - }); - - document.getElementById('newdir').addEventListener('blur', event => { - document.getElementById('newdir').classList.remove('enabled'); - }); - - document.getElementById('newdir').addEventListener('keydown', newDirEvent); + buttons.new.addEventListener('click', listing.newFileButton); // Drag and Drop let items = document.getElementsByClassName('item'); @@ -268,113 +367,6 @@ document.addEventListener('DOMContentLoaded', event => { }); }, false); - document.addEventListener("drop", function(event) { - event.preventDefault(); - var dt = event.dataTransfer; - var files = dt.files; - - let el = event.target; - - 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") { - handleFiles(files, el.querySelector('.name').innerHTML + "/"); - return; - } - - handleFiles(files, ""); - } else { - Array.from(items).forEach(file => { - file.style.opacity = 1; - }); - } - - }, false); + document.addEventListener("drop", listing.documentDrop, false); } -}); - -function itemDragStart(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); -} - -function itemDragOver(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; -} - -function itemDrop(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 = toWebDavURL(document.getElementById(id).dataset.url), - newLink = toWebDavURL(el.dataset.url + name), - request = new XMLHttpRequest(); - - request.open('MOVE', oldLink); - request.setRequestHeader('Destination', newLink); - request.send(); - request.onreadystatechange = function() { - if (request.readyState == 4) { - if (request.status == 201 || request.status == 204) { - reloadListing(); - } - } - } -} - -function openItemEvent(event) { - window.location = event.currentTarget.dataset.url; -} - -function selectItemEvent(event) { - let el = event.currentTarget; - - if (selectedItems.length != 0) event.preventDefault(); - if (selectedItems.indexOf(el.id) == -1) { - if (!event.ctrlKey) unselectAll(); - - el.setAttribute("aria-selected", true); - selectedItems.push(el.id); - } else { - el.setAttribute("aria-selected", false); - selectedItems.removeElement(el.id); - } - - document.sendCostumEvent("changed-selected"); - return false; -} +}); \ No newline at end of file diff --git a/_embed/templates/base.tmpl b/_embed/templates/base.tmpl index 831fd7f0..db200104 100644 --- a/_embed/templates/base.tmpl +++ b/_embed/templates/base.tmpl @@ -31,7 +31,6 @@
-

File Manager

-
- {{ if ne .Name "/"}} + {{- if ne .Name "/"}} keyboard_arrow_right - - {{ end }} - + {{- end }}

{{ if ne .Name "/"}}{{ .Name }}{{ else }}Root{{ end }}

-
+ {{- if and (not .IsDir) (.User.AllowEdit) }} + {{- if .Editor}} + {{- if eq .Data.Mode "markdown" }} +
+ remove_red_eye +
+ {{- end }} + {{- end }} + +
+ save +
+ {{- end }} +
open_in_new
- {{ if and .IsDir .User.AllowEdit }} + + {{- if and .IsDir .User.AllowEdit }}
mode_edit
- {{ end }} + {{- end }} - {{ if .User.AllowEdit }} + {{- if .User.AllowEdit }}
delete Delete
- {{ end }} + {{- end }}
- {{ if and (.User.AllowNew) (.IsDir) }} + {{- if .IsDir }} +
+ {{- if eq .Display "mosaic" }} + view_list + {{- else }} + view_module + {{- end }} +
+ {{- end }} + + {{- if and (.User.AllowNew) (.IsDir) }}
file_upload Upload
- {{ end }} + {{- end }}
file_download Download - {{ if .IsDir }} + {{- if .IsDir }} - {{ end }} + {{- end }}
- {{ if .IsDir }} -
- {{ if eq .Display "mosaic" }} - view_list - {{ else }} - view_module - {{ end }} +
+ info
- {{ end }}
- {{ template "content" . }} - - {{ if and (.User.AllowNew) (.IsDir) }} - -
-
- add + {{- template "content" . }} +
+ +
+ + {{- if and (.User.AllowNew) (.IsDir) }} +
+
+ add +
+
+ {{- end }} + + + + diff --git a/_embed/templates/editor.tmpl b/_embed/templates/editor.tmpl index 4ab6bcd8..04d3ab20 100644 --- a/_embed/templates/editor.tmpl +++ b/_embed/templates/editor.tmpl @@ -18,27 +18,10 @@ {{ end }} - -
- -
{{ end }} - - - -