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', '<div class="group"></div>');
+ 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 <code>:array</code> or <code>:object.</code>';
+ 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', '<div class="group"></div>');
- 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 @@
</head>
<body>
<header>
- <!-- TOP BAR -->
<div id="top-bar">
<div><p>File Manager</p></div>
<div id="search">
@@ -48,86 +47,124 @@
</div>
</div>
- <!-- BOTTOM BAR -->
<div id="bottom-bar">
<div>
- {{ if ne .Name "/"}}
+ {{- if ne .Name "/"}}
<p id="breadcrumbs-button">Previous</p>
<ul id="breadcrumbs">
- {{ range $item := .BreadcrumbMap }}
+ {{- range $item := .BreadcrumbMap }}
<a href="{{ $absURL }}{{ $item.URL }}"><li>{{ $item.Name }}</li></a>
- {{ end }}
+ {{- end }}
</ul><i class="material-icons">keyboard_arrow_right</i>
-
- {{ end }}
-
+ {{- end }}
<p id="current-file">{{ if ne .Name "/"}}{{ .Name }}{{ else }}Root{{ end }}</p>
</div>
- <!-- ACTIONS -->
<div class="actions">
<div id="file-only" {{ if .IsDir }}class="disabled"{{ end }}>
+ {{- if and (not .IsDir) (.User.AllowEdit) }}
+ {{- if .Editor}}
+ {{- if eq .Data.Mode "markdown" }}
+ <div class="action" id="preview" onclick="notImplemented(event);">
+ <i class="material-icons">remove_red_eye</i>
+ </div>
+ {{- end }}
+ {{- end }}
+
+ <div class="action" id="save">
+ <i class="material-icons" title="Save">save</i>
+ </div>
+ {{- end }}
+
<div class="action" id="open">
<i class="material-icons" title="See raw">open_in_new</i>
</div>
- {{ if and .IsDir .User.AllowEdit }}
+
+ {{- if and .IsDir .User.AllowEdit }}
<div class="action" id="rename">
<i class="material-icons" title="Edit">mode_edit</i>
</div>
- {{ end }}
+ {{- end }}
- {{ if .User.AllowEdit }}
+ {{- if .User.AllowEdit }}
<div class="action" id="delete">
<i class="material-icons" title="Delete">delete</i> <span>Delete</span>
</div>
- {{ end }}
+ {{- end }}
</div>
- {{ if and (.User.AllowNew) (.IsDir) }}
+ {{- if .IsDir }}
+ <div class="action" id="view">
+ {{- if eq .Display "mosaic" }}
+ <a href="?display=list"><i class="material-icons" title="Switch View">view_list</i></a>
+ {{- else }}
+ <a href="?display=mosaic"><i class="material-icons" title="Switch View">view_module</i></a>
+ {{- end }}
+ </div>
+ {{- end }}
+
+ {{- if and (.User.AllowNew) (.IsDir) }}
<div class="action" id="upload">
<i class="material-icons" title="Upload">file_upload</i> <span>Upload</span>
</div>
- {{ end }}
+ {{- end }}
<div class="action" id="download">
<a href="?download=true">
<i class="material-icons" title="Download">file_download</i> <span>Download</span>
</a>
- {{ if .IsDir }}
+ {{- if .IsDir }}
<ul class="prev-links">
<a data-format="tarbz2" href="?download=tarbz2"><li>tar.bz2</li></a>
<a data-format="targz" href="?download=targz"><li>tar.gz</li></a>
<a data-format="tar" href="?download=tar"><li>tar</li></a>
<a data-format="zip" href="?download=zip"><li>zip</li></a>
</ul>
- {{ end }}
+ {{- end }}
</div>
- {{ if .IsDir }}
- <div class="action" id="view">
- {{ if eq .Display "mosaic" }}
- <a href="?display=list"><i class="material-icons" title="Switch View">view_list</i></a>
- {{ else }}
- <a href="?display=mosaic"><i class="material-icons" title="Switch View">view_module</i></a>
- {{ end }}
+ <div class="action" id="info" onclick="notImplemented(event);">
+ <i class="material-icons" title="Info">info</i>
</div>
- {{ end }}
</div>
</div>
</header>
<main>
- {{ template "content" . }}
-
- {{ if and (.User.AllowNew) (.IsDir) }}
- <input id="newdir" type="text" placeholder="Name. End with a trailing slash to create a dir.">
- <div class="floating">
- <div class="action" id="new">
- <i class="material-icons" title="New file or directory. End name with a trailing slash to create a directory.">add</i>
+ {{- template "content" . }}
+ </main>
+
+ <div class="overlay"></div>
+
+ {{- if and (.User.AllowNew) (.IsDir) }}
+ <div class="floating">
+ <div class="action" id="new">
+ <i class="material-icons" title="New file or directory">add</i>
+ </div>
+ </div>
+ {{- end }}
+
+ <template id="question-template">
+ <form class="prompt">
+ <h3></h3>
+ <p></p>
+ <input autofocus type="text">
+ <div>
+ <button type="submit" default class="ok">OK</button>
+ <button class="cancel" onclick="closePrompt(event);">Cancel</button>
+ </div>
+ </form>
+ </template>
+
+ <template id="info-template">
+ <div class="prompt">
+ <h3></h3>
+ <p></p>
+ <div>
+ <button type="submit" onclick="closePrompt(event);" class="ok">OK</button>
</div>
</div>
- {{ end }}
- </main>
+ </template>
<footer>Served with <a rel="noopener noreferrer" href="https://caddyserver.com">Caddy</a> and <a rel="noopener noreferrer" href="https://github.com/hacdias/caddy-filemanager">File Manager</a>.</footer>
</body>
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 @@
<textarea name="content">{{ .Content }}</textarea>
</div>
{{ end }}
-
- <div>
- <button id="submit" type="submit" data-type="{{ .Class }}">
- <span>
- <i class="material-icons" title="Save">save</i>
- </span>
- <span>save</span>
- </button>
- </div>
</form>
</div>
{{ end }}
-<template id="temporary-template">
- <div class="group temp" id="">
- <div class="block" id="">
- <label>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".</label>
- <input name="" type="text" placeholder="Write the field name and press enter.."></input>
- </div></div>
-</template>
-
<template id="base-template">
<fieldset id="" data-type="">
<h3></h3>
@@ -62,19 +45,6 @@
</div>
</template>
-<template id="array-template">
- <fieldset id="" data-type="">
- <h3></h3>
- <div class="action add">
- <i class="material-icons">add</i>
- </div>
- <div class="action delete" data-delete="">
- <i class="material-icons">close</i>
- </div>
- <div class="group"></div>
- </fieldset>
-</template>
-
<template id="array-item-template">
<div id="" data-type="array-item">
<input name="" id="" type="text" data-parent-type="array"></input>
diff --git a/_embed/templates/listing.tmpl b/_embed/templates/listing.tmpl
index 6874ed00..719f1821 100644
--- a/_embed/templates/listing.tmpl
+++ b/_embed/templates/listing.tmpl
@@ -32,6 +32,7 @@
</div>
</div>
+ {{- if not (eq .NumDirs 0)}}
<h2>Folders</h2>
<div>
{{- range .Items }}
@@ -40,7 +41,9 @@
{{- end }}
{{- end }}
</div>
-
+ {{- end }}
+
+ {{- if not (eq .NumFiles 0)}}
<h2>Files</h2>
<div>
{{- range .Items }}
@@ -49,6 +52,7 @@
{{- end }}
{{- end }}
</div>
+ {{- end }}
</div>
<input style="display:none" type="file" id="upload-input" onchange="handleFiles(this.files, '')" value="Upload" multiple>
@@ -56,12 +60,12 @@
{{- end -}}
{{ define "item" }}
-<div ondragstart="itemDragStart(event)"
- {{ if .IsDir}}ondragover="itemDragOver(event)" ondrop="itemDrop(event)"{{ end }}
+<div ondragstart="listing.itemDragStart(event)"
+ {{ if .IsDir}}ondragover="listing.itemDragOver(event)" ondrop="listing.itemDrop(event)"{{ end }}
draggable="true"
class="item"
- onclick="selectItemEvent(event)"
- ondblclick="openItemEvent(event)"
+ onclick="listing.selectItem(event)"
+ ondblclick="listing.openItem(event)"
data-dir="{{ .IsDir }}"
data-url="{{ .URL }}"
id="{{ EncodeBase64 .Name }}">
diff --git a/handlers/single.go b/handlers/single.go
index 85d0ff5a..a15a91aa 100644
--- a/handlers/single.go
+++ b/handlers/single.go
@@ -37,6 +37,7 @@ func ServeSingle(w http.ResponseWriter, r *http.Request, c *config.Config, u *co
if i.CanBeEdited() && u.AllowEdit {
p.Data, err = GetEditor(i)
+ p.Editor = true
if err != nil {
return http.StatusInternalServerError, err
}
diff --git a/page/page.go b/page/page.go
index a3e75770..54f80fda 100644
--- a/page/page.go
+++ b/page/page.go
@@ -29,6 +29,7 @@ type Info struct {
User *config.User
Config *config.Config
Data interface{}
+ Editor bool
Display string
Token string
}