move assets

_embed/public/css/.jsbeautifyrc

@@ -0,0 +1,11 @@
+{
+    "css": {
+      "allowed_file_extensions": ["css", "scss", "sass", "less"],
+      "end_with_newline": false, // End output with newline
+      "indent_char": " ", // Indentation character
+      "indent_size": 4, // Indentation size
+      "newline_between_rules": true, // Add a new line after every css rule
+      "selector_separator": " ",
+      "selector_separator_newline": true // Separate selectors with newline or not (e.g. "a,\nbr" or "a, br")
+    }
+}

_embed/public/js/.jsbeautifyrc

@@ -0,0 +1,32 @@
+{
+  "js": {
+    "allowed_file_extensions": ["js", "json", "jshintrc", "jsbeautifyrc"],
+
+    // Set brace_style
+    //  collapse: (old default) Put braces on the same line as control statements
+    //  collapse-preserve-inline: (new default) Same as collapse but better support for ES6 destructuring and other features. https://github.com/victorporof/Sublime-HTMLPrettify/issues/231
+    //  expand: Put braces on own line (Allman / ANSI style)
+    //  end-expand: Put end braces on own line
+    //  none: Keep them where they are
+    "brace_style": "collapse-preserve-inline",
+
+    "break_chained_methods": false, // Break chained method calls across subsequent lines
+    "e4x": false, // Pass E4X xml literals through untouched
+    "end_with_newline": false, // End output with newline
+    "indent_char": " ", // Indentation character
+    "indent_level": 0, // Initial indentation level
+    "indent_size": 4, // Indentation size
+    "indent_with_tabs": false, // Indent with tabs, overrides `indent_size` and `indent_char`
+    "jslint_happy": false, // If true, then jslint-stricter mode is enforced
+    "keep_array_indentation": false, // Preserve array indentation
+    "keep_function_indentation": false, // Preserve function indentation
+    "max_preserve_newlines": 0, // Maximum number of line breaks to be preserved in one chunk (0 disables)
+    "preserve_newlines": true, // Whether existing line breaks should be preserved
+    "space_after_anon_function": false, // Should the space before an anonymous function's parens be added, "function()" vs "function ()"
+    "space_before_conditional": true, // Should the space before conditional statement be added, "if(true)" vs "if (true)"
+    "space_in_empty_paren": false, // Add padding spaces within empty paren, "f()" vs "f( )"
+    "space_in_paren": false, // Add padding spaces within paren, ie. f( a, b )
+    "unescape_strings": false, // Should printable characters in strings encoded in \xNN notation be unescaped, "example" vs "\x65\x78\x61\x6d\x70\x6c\x65"
+    "wrap_line_length": 0 // Lines should wrap at next opportunity after this number of characters (0 disables)
+  }
+}

_embed/public/js/application.js

@@ -0,0 +1,911 @@
+'use strict';
+
+// TODO: way to get the webdav url
+
+var tempID = "_fm_internal_temporary_id"
+var selectedItems = [];
+var token = "";
+
+/* * * * * * * * * * * * * * * *
+ *                             *
+ *      GENERAL FUNCTIONS      *
+ *                             *
+ * * * * * * * * * * * * * * * */
+
+// 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(begin, end) {
+    var i = this.indexOf(begin);
+    if (i != -1) {
+        this[i] = end;
+    }
+}
+
+// Sends a costum event to itself
+Document.prototype.sendCostumEvent = function(text) {
+    this.dispatchEvent(new CustomEvent(text));
+}
+
+// Gets the content of a cookie
+Document.prototype.getCookie = function(name) {
+    var re = new RegExp("(?:(?:^|.*;\\s*)" + name + "\\s*\\=\\s*([^;]*).*$)|^.*$");
+    return document.cookie.replace(re, "$1");
+}
+
+// Changes a button to the loading animation
+Element.prototype.changeToLoading = function() {
+    let element = this;
+    let originalText = element.innerHTML;
+
+    element.style.opacity = 0;
+
+    setTimeout(function() {
+        element.innerHTML = '<i class="material-icons spin">autorenew</i>';
+        element.style.opacity = 1;
+    }, 200);
+
+    return originalText;
+}
+
+// Changes an element to done animation
+Element.prototype.changeToDone = function(error, html) {
+    this.style.opacity = 0;
+
+    let thirdStep = () => {
+        this.innerHTML = html;
+        this.style.opacity = null;
+
+        if (selectedItems.length == 0 && document.getElementById('listing')) {
+            document.sendCostumEvent('changed-selected');
+        }
+    }
+
+    let secondStep = () => {
+        this.style.opacity = 0;
+        setTimeout(thirdStep, 200);
+    }
+
+    let firstStep = () => {
+        if (error) {
+            this.innerHTML = '<i class="material-icons">close</i>';
+        } else {
+            this.innerHTML = '<i class="material-icons">done</i>';
+        }
+
+        this.style.opacity = 1;
+
+        setTimeout(secondStep, 1000);
+    }
+
+    setTimeout(firstStep, 200);
+    return false;
+}
+
+var toWebDavURL = function(url) {
+    url = url.replace(baseURL + "/", webdavURL + "/");
+    return window.location.origin + url
+}
+
+// Handles the open file button event
+var openEvent = function(event) {
+    if (this.classList.contains('disabled')) {
+        return false;
+    }
+
+    if (selectedItems.length) {
+        window.open(selectedItems[0] + '?raw=true');
+        return false;
+    }
+
+    window.open(window.location + '?raw=true');
+    return false;
+}
+
+// Handles the delete button event
+var deleteEvent = function(event) {
+    let single = false;
+
+    if (!selectedItems.length) {
+        selectedItems = [window.location];
+        single = true;
+    }
+
+    if (selectedItems.length) {
+        Array.from(selectedItems).forEach(link => {
+            let html = document.getElementById("delete").changeToLoading();
+            let request = new XMLHttpRequest();
+
+            request.open('DELETE', toWebDavURL(link));
+            request.setRequestHeader('Token', token);
+            request.send();
+            request.onreadystatechange = function() {
+                if (request.readyState == 4) {
+                    if (request.status == 204) {
+                        if (single) {
+                            window.location.pathname = RemoveLastDirectoryPartOf(window.location.pathname);
+                        } else {
+                            document.getElementById(link).remove();
+                            selectedItems.removeElement(link);
+                        }
+                    }
+                    document.getElementById('delete').changeToDone((request.status != 204), html);
+                }
+            }
+        });
+
+        return false;
+    }
+
+    return false;
+}
+
+// Prevent Default event
+var preventDefault = function(event) {
+    event.preventDefault();
+}
+
+// Download file event
+var downloadEvent = function(event) {
+    if (this.classList.contains('disabled')) {
+        return false;
+    }
+    if (selectedItems.length) {
+        Array.from(selectedItems).forEach(item => {
+            window.open(item + "?download=true");
+        });
+        return false;
+    }
+
+    window.open(window.location + "?download=true");
+    return false;
+}
+
+// Remove the last directory of an url
+var RemoveLastDirectoryPartOf = function(url) {
+    var arr = url.split('/');
+    arr.pop();
+    return (arr.join('/'));
+}
+
+// Get the current token
+var updateToken = function() {
+    token = document.getElementById("token").innerHTML;
+}
+
+/* * * * * * * * * * * * * * * *
+ *                             *
+ *  LISTING SPECIFIC FUNCTIONS  *
+ *                             *
+ * * * * * * * * * * * * * * * */
+
+var reloadListing = function(callback) {
+    let request = new XMLHttpRequest();
+    request.open('GET', window.location);
+    request.setRequestHeader('Minimal', 'true');
+    request.setRequestHeader('Token', token);
+    request.send();
+    request.onreadystatechange = function() {
+        if (request.readyState == 4) {
+            if (request.status == 200) {
+                document.querySelector('body main').innerHTML = request.responseText;
+                // Handle date times
+                let timeList = document.getElementsByTagName("time");
+                Array.from(timeList).forEach(localizeDatetime);
+
+                // Add action to checkboxes
+                let checkboxes = document.getElementsByClassName('checkbox');
+                Array.from(checkboxes).forEach(link => {
+                    link.addEventListener('click', itemClickEvent);
+                });
+
+                updateToken();
+
+                if (typeof callback == 'function') {
+                    callback();
+                }
+            }
+        }
+    }
+}
+
+// Rename file event
+var renameEvent = function(event) {
+    if (this.classList.contains('disabled') || !selectedItems.length) {
+        return false;
+    }
+
+    // This mustn't happen
+    if (selectedItems.length > 1) {
+        alert("Something went wrong. Please refresh the page.");
+        location.refresh();
+    }
+
+    Array.from(selectedItems).forEach(link => {
+        let item = document.getElementById(link);
+        let span = item.getElementsByTagName('span')[0];
+        let name = span.innerHTML;
+
+        item.addEventListener('click', preventDefault);
+        item.removeEventListener('click', itemClickEvent);
+        span.setAttribute('contenteditable', 'true');
+        span.focus();
+
+        let keyDownEvent = (event) => {
+            if (event.keyCode == 13) {
+                let newName = span.innerHTML;
+                let newLink = toWebDavURL(link).replace(name, newName)
+                let html = document.getElementById('rename').changeToLoading();
+                let request = new XMLHttpRequest();
+                request.open('MOVE', toWebDavURL(link));
+                request.setRequestHeader('Destination', newLink);
+                request.setRequestHeader('Token', token);
+                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(() => {
+                                let newLink = encodeURI(link.replace(name, newName));
+                                selectedItems = [newLink];
+                                document.getElementById(newLink).classList.add("selected")
+                                var event = new CustomEvent('changed-selected');
+                                document.dispatchEvent(event);
+                            });
+                        }
+
+                        document.getElementById('rename').changeToDone((request.status != 201 && request.status != 204), html);
+                    }
+                }
+            }
+
+            if (event.KeyCode == 27) {
+                span.innerHTML = name;
+            }
+
+            if (event.keyCode == 13 || event.keyCode == 27) {
+                span.setAttribute('contenteditable', 'false');
+                span.removeEventListener('keydown', keyDownEvent);
+                item.removeEventListener('click', preventDefault);
+                item.addEventListener('click', itemClickEvent);
+                event.preventDefault();
+            }
+
+            return false;
+        }
+
+        span.addEventListener('keydown', keyDownEvent);
+        span.addEventListener('blur', (event) => {
+            span.innerHTML = name;
+            span.setAttribute('contenteditable', 'false');
+            span.removeEventListener('keydown', keyDownEvent);
+            item.removeEventListener('click', preventDefault);
+        });
+    });
+
+    return false;
+}
+
+// Upload files
+var handleFiles = function(files) {
+    let button = document.getElementById("upload");
+    let html = button.changeToLoading();
+
+    for (let i = 0; i < files.length; i++) {
+        let request = new XMLHttpRequest();
+        request.open('PUT', toWebDavURL(window.location.pathname + files[i].name));
+        request.setRequestHeader('Token', token);
+        request.send(files[i]);
+        request.onreadystatechange = function() {
+            if (request.readyState == 4) {
+                if (request.status == 201) {
+                    reloadListing();
+                }
+
+                button.changeToDone((request.status != 201), html);
+            }
+        }
+    }
+
+    return false;
+}
+
+// Handles the back button event
+var backEvent = function(event) {
+    var items = document.getElementsByClassName('item');
+    Array.from(items).forEach(link => {
+        link.classList.remove('selected');
+    });
+    selectedItems = [];
+
+    var event = new CustomEvent('changed-selected');
+    document.dispatchEvent(event);
+    return false;
+}
+
+// Handles the click event
+var itemClickEvent = function(event) {
+    var url = this.dataset.href;
+    var el = document.getElementById(url);
+
+    if (selectedItems.length != 0) event.preventDefault();
+    if (selectedItems.indexOf(url) == -1) {
+        el.classList.add('selected');
+        selectedItems.push(url);
+    } else {
+        el.classList.remove('selected');
+        selectedItems.removeElement(url);
+    }
+
+    var event = new CustomEvent('changed-selected');
+    document.dispatchEvent(event);
+    return false;
+}
+
+// Handles the datetimes present on the document
+var localizeDatetime = function(e, index, ar) {
+    if (e.textContent === undefined) {
+        return;
+    }
+    var d = new Date(e.getAttribute('datetime'));
+    if (isNaN(d)) {
+        d = new Date(e.textContent);
+        if (isNaN(d)) {
+            return;
+        }
+    }
+    e.textContent = d.toLocaleString();
+}
+
+// Toggles the view mode
+var viewEvent = function(event) {
+    let cookie = document.getCookie('view-list');
+    let listing = document.getElementById('listing');
+
+    if (cookie != 'true') {
+        document.cookie = 'view-list=true';
+    } else {
+        document.cookie = 'view-list=false';
+    }
+
+    handleViewType(document.getCookie('view-list'));
+    return false;
+}
+
+// Handles the view mode change
+var handleViewType = function(viewList) {
+    let listing = document.getElementById('listing');
+    let button = document.getElementById('view');
+
+    if (viewList == "true") {
+        listing.classList.add('list');
+        button.innerHTML = '<i class="material-icons" title="Switch View">view_module</i> <span>Switch view</span>';
+        return false;
+    }
+
+    button.innerHTML = '<i class="material-icons" title="Switch View">view_list</i> <span>Switch view</span>';
+    listing.classList.remove('list');
+    return false;
+}
+
+var addNewDirEvents = function() {
+    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);
+}
+
+// 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');
+        let html = button.changeToLoading();
+        let request = new XMLHttpRequest();
+        let name = document.getElementById('newdir').value;
+
+        request.open((name.endsWith("/") ? "MKCOL" : "PUT"), toWebDavURL(window.location.pathname + name));
+        request.setRequestHeader('Token', token);
+        request.send();
+        request.onreadystatechange = function() {
+            if (request.readyState == 4) {
+                button.changeToDone((request.status != 201), html);
+                reloadListing(() => {
+                    addNewDirEvents();
+                });
+            }
+        }
+    }
+
+    return false;
+}
+
+// Handles the event when there is change on selected elements
+document.addEventListener("changed-selected", function(event) {
+    var toolbar = document.getElementById("toolbar");
+    var selectedNumber = selectedItems.length;
+    document.getElementById("selected-number").innerHTML = selectedNumber;
+
+    if (selectedNumber) {
+        toolbar.classList.add("enabled");
+
+        if (selectedNumber > 1) {
+            document.getElementById("open").classList.add("disabled");
+            document.getElementById("rename").classList.add("disabled");
+        }
+
+        if (selectedNumber == 1) {
+            document.getElementById("open").classList.remove("disabled");
+            document.getElementById("rename").classList.remove("disabled");
+        }
+
+        return false;
+    }
+
+    toolbar.classList.remove("enabled");
+    return false;
+});
+
+var searchEvent = function(event) {
+    let value = this.value;
+    let box = document.querySelector('#search div');
+
+    if (value.length == 0) {
+        box.innerHTML = "Write one of yours suported commands: " + user.Commands.join(", ") + ".";
+        return;
+    }
+
+    let pieces = value.split(' ');
+    let supported = false;
+
+    user.Commands.forEach(function(cmd) {
+        if (cmd == pieces[0]) {
+            supported = true;
+        }
+    });
+
+    if (!supported) {
+        box.innerHTML = "Command not supported."
+        return;
+    }
+
+    box.innerHTML = "Press enter to continue."
+
+    if (event.keyCode == 13) {
+        box.innerHTML = '<i class="material-icons spin">autorenew</i>';
+
+        let request = new XMLHttpRequest();
+        request.open('POST', window.location);
+        request.setRequestHeader('Command', value);
+        request.setRequestHeader('Token', token);
+        request.send();
+        request.onreadystatechange = function() {
+            if (request.readyState == 4) {
+                if (request.status == 501) {
+                    box.innerHTML = "Command not implemented."
+                }
+
+                if (request.status == 500) {
+                    box.innerHTML = "Something went wrong."
+                }
+
+                if (request.status == 200) {
+                    let text = request.responseText;
+                    text = text.substring(1, text.length - 1);
+                    text = text.replace('\\n', "\n");
+                    box.innerHTML = text;
+                    reloadListing();
+                }
+            }
+        }
+    }
+}
+
+document.addEventListener('listing', event => {
+    // Handle date times
+    let timeList = document.getElementsByTagName("time");
+    Array.from(timeList).forEach(localizeDatetime);
+
+    // Handles the current view mode and adds the event to the button
+    handleViewType(document.getCookie("view-list"));
+    document.getElementById("view").addEventListener("click", viewEvent);
+
+    // Add event to items
+    let checkboxes = document.getElementsByClassName('checkbox');
+    Array.from(checkboxes).forEach(link => {
+        link.addEventListener('click', itemClickEvent);
+    });
+
+    // Add event to back button and executes back event on ESC
+    document.getElementById("back").addEventListener("click", backEvent)
+    document.addEventListener('keydown', (event) => {
+        if (event.keyCode == 27) {
+            backEvent(event);
+        }
+    });
+
+    if (user.AllowCommands) {
+        document.querySelector('#search input').addEventListener('focus', event => {
+            document.getElementById('search').classList.add('active');
+        });
+
+        document.querySelector('#search input').addEventListener('blur', event => {
+            document.getElementById('search').classList.remove('active');
+            document.querySelector('#search input').value = '';
+        });
+
+        document.querySelector('#search div').innerHTML = "Write one of yours suported commands: " + user.Commands.join(", ") + ".";
+        document.querySelector('#search input').addEventListener('keyup', searchEvent);
+    }
+
+    if (user.AllowEdit) {
+        // Enables rename button
+        document.getElementById("rename").addEventListener("click", renameEvent);
+    }
+
+    if (user.AllowNew) {
+        // Enables upload button
+        document.getElementById("upload").addEventListener("click", (event) => {
+            document.getElementById("upload-input").click();
+        });
+
+        addNewDirEvents();
+
+        // Drag and Drop
+        let items = document.getElementsByClassName('item');
+        document.addEventListener("dragover", function(event) {
+            event.preventDefault();
+        }, false);
+
+        document.addEventListener("dragover", (event) => {
+            Array.from(items).forEach(file => {
+                file.style.opacity = 0.5;
+            });
+        }, false);
+
+        document.addEventListener("dragleave", (event) => {
+            Array.from(items).forEach(file => {
+                file.style.opacity = 1;
+            });
+        }, false);
+
+        document.addEventListener("drop", function(event) {
+            event.preventDefault();
+            var dt = event.dataTransfer;
+            var files = dt.files;
+
+            handleFiles(files);
+        }, false);
+    }
+});
+
+/* * * * * * * * * * * * * * * *
+ *                             *
+ *  EDITOR SPECIFIC FUNCTIONS  *
+ *                             *
+ * * * * * * * * * * * * * * * */
+
+// auto grow textareas
+var textareaAutoGrow = function() {
+    let autogrow = function() {
+        this.style.height = '5px';
+        this.style.height = this.scrollHeight + 'px';
+    }
+
+    let textareas = document.getElementsByTagName('textarea');
+
+    let addAutoGrow = () => {
+        Array.from(textareas).forEach(textarea => {
+            autogrow.bind(textarea)();
+            textarea.addEventListener('keyup', autogrow);
+        });
+    }
+
+    addAutoGrow();
+    window.addEventListener('resize', addAutoGrow)
+}
+
+var deleteFrontMatterItem = function(event) {
+    event.preventDefault();
+    document.getElementById(this.dataset.delete).remove();
+}
+
+var addFrontMatterItem = function(event) {
+    event.preventDefault();
+
+    let temp = document.getElementById(tempID)
+    if (temp) {
+        temp.remove();
+    }
+
+    let block = this.parentNode;
+    let type = block.dataset.type;
+    let id = block.id;
+
+    // If the block is an array
+    if (type === "array") {
+        let fieldID = id + "[]"
+        let input = fieldID
+        let count = block.querySelectorAll('.group > div').length
+        input = input.replace(/\[/, '\\[');
+        input = input.replace(/\]/, '\\]');
+
+        let fieldsets = block.getElementsByTagName("fieldset");
+
+        if (fieldsets.length > 0) {
+            let newtype = fieldsets[0].dataset.type;
+            let bid = id + "[" + fieldsets.length + "]";
+            let name = fieldsets.length;
+
+            let template = `<fieldset id="${bid}" data-type="${newtype}">
+              <h3>${name}</h3>
+              <div class="action add">
+                  <i class="material-icons">add</i>
+              </div>
+              <div class="action delete" data-delete="${bid}">
+                  <i class="material-icons">close</i>
+              </div>
+             <div class="group">
+             </div>
+            </fieldset>`;
+
+            block.insertAdjacentHTML('beforeend', template);
+
+            document.querySelector(`div[data-delete="${bid}"]`).addEventListener('click', deleteFrontMatterItem);
+            document.getElementById(bid).querySelector('.action.add').addEventListener('click', addFrontMatterItem);
+        } else {
+            block.querySelector('.group').insertAdjacentHTML('beforeend', `<div id="${fieldID}-${count}" data-type="array-item">
+                <input name="${fieldID}" id="${fieldID}" type="text" data-parent-type="array"></input>
+                <div class="action delete"  data-delete="${fieldID}-${count}">
+                    <i class="material-icons">close</i>
+                </div>
+            </div>`);
+
+            document.getElementById(`${fieldID}-${count}`).querySelector('input').focus();
+            document.querySelector(`div[data-delete="${fieldID}-${count}"]`).addEventListener('click', deleteFrontMatterItem);
+        }
+
+
+    }
+
+    if (type == "object" || type == "parent") {
+        let template = `<div class="group temp" id="${tempID}">
+        <div class="block" id="${tempID}">
+            <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="${tempID}" type="text" placeholder="Write the field name and press enter.."></input>
+        </div></div>`;
+
+        if (type == "parent") {
+            document.querySelector('div.button.add').insertAdjacentHTML('beforebegin', template);
+        } else {
+            block.querySelector('.delete').insertAdjacentHTML('afterend', template);
+        }
+
+        let temp = document.getElementById(tempID);
+        let 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(':'));
+                let 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":
+                        let template = `<fieldset id="${bid}" data-type="${newtype}">
+                          <h3>${name}</h3>
+                          <div class="action add">
+                              <i class="material-icons">add</i>
+                          </div>
+                          <div class="action delete" data-delete="${bid}">
+                              <i class="material-icons">close</i>
+                          </div>
+                         <div class="group">
+                         </div>
+                        </fieldset>`;
+
+                        if (type == "parent") {
+                            document.querySelector('div.button.add').insertAdjacentHTML('beforebegin', template);
+                        } else {
+                            block.insertAdjacentHTML('beforeend', template);
+                        }
+
+                        document.querySelector(`div[data-delete="${bid}"]`).addEventListener('click', deleteFrontMatterItem);
+                        document.getElementById(bid).querySelector('.action.add').addEventListener('click', addFrontMatterItem);
+                        break;
+                    default:
+                        let group = block.querySelector('.group');
+
+                        if (group == null) {
+                            block.insertAdjacentHTML('afterbegin', '<div class="group"></div>');
+                            group = block.querySelector('.group');
+                        }
+
+                        group.insertAdjacentHTML('beforeend', `<div class="block" id="block-${bid}" data-content="${bid}">
+                          <label for="${bid}">${name}</label>
+                          <input name="${bid}" id="${bid}" type="text" data-parent-type="object"></input>
+                          <div class="action delete" data-delete="block-${bid}">
+                              <i class="material-icons">close</i>
+                          </div>
+                        </div>`);
+
+                        document.getElementById(bid).focus();
+                        document.querySelector(`div[data-delete="block-${bid}"]`).addEventListener('click', deleteFrontMatterItem);
+                }
+            }
+        });
+    }
+
+    return false;
+}
+
+document.addEventListener("editor", (event) => {
+    textareaAutoGrow();
+
+    let container = document.getElementById('editor');
+    let button = document.querySelector('#submit span:first-child');
+    let kind = container.dataset.kind;
+
+    if (kind != 'frontmatter-only') {
+        let editor = document.getElementById('editor-source');
+        let mode = editor.dataset.mode;
+        let textarea = document.querySelector('textarea[name="content"]');
+        let aceEditor = ace.edit('editor-source');
+        aceEditor.getSession().setMode("ace/mode/" + mode);
+        aceEditor.getSession().setValue(textarea.value);
+        aceEditor.getSession().on('change', function() {
+            textarea.value = aceEditor.getSession().getValue();
+        });
+        aceEditor.setOptions({
+            wrap: true,
+            maxLines: Infinity,
+            theme: "ace/theme/github",
+            showPrintMargin: false,
+            fontSize: "1em",
+            minLines: 20
+        });
+    }
+
+    let deleteFrontMatterItemButtons = document.getElementsByClassName('delete');
+    Array.from(deleteFrontMatterItemButtons).forEach(button => {
+        button.addEventListener('click', deleteFrontMatterItem);
+    });
+
+    let addFrontMatterItemButtons = document.getElementsByClassName('add');
+    Array.from(addFrontMatterItemButtons).forEach(button => {
+        button.addEventListener('click', addFrontMatterItem);
+    });
+
+    let saveContent = function() {
+        let data = form2js(document.querySelector('form'));
+        let html = button.changeToLoading();
+        let request = new XMLHttpRequest();
+        request.open("PUT", toWebDavURL(window.location.pathname));
+        request.setRequestHeader('Kind', kind);
+        request.setRequestHeader('Token', token);
+        request.send(JSON.stringify(data));
+        request.onreadystatechange = function() {
+            if (request.readyState == 4) {
+                button.changeToDone((request.status != 201), html);
+            }
+        }
+    }
+
+    document.querySelector('form').addEventListener('submit', (event) => {
+        event.preventDefault();
+        saveContent();
+    });
+
+    window.addEventListener('keydown', (event) => {
+        if (event.ctrlKey || event.metaKey) {
+            switch (String.fromCharCode(event.which).toLowerCase()) {
+                case 's':
+                    event.preventDefault();
+                    saveContent();
+                    break;
+            }
+        }
+    });
+
+    return false;
+});
+
+/* * * * * * * * * * * * * * * *
+ *                             *
+ *           BOOTSTRAP         *
+ *                             *
+ * * * * * * * * * * * * * * * */
+
+document.addEventListener("DOMContentLoaded", function(event) {
+    // Add event to logout button
+    document.getElementById("logout").addEventListener("click", event => {
+        let request = new XMLHttpRequest();
+        request.open('GET', window.location.pathname, true, "username", "password");
+        request.send();
+        request.onreadystatechange = function() {
+            if (request.readyState == 4) {
+                window.location = "/";
+            }
+        }
+    });
+
+    // Updates the token
+    updateToken();
+
+    // Enables open, delete and download buttons
+    document.getElementById("open").addEventListener("click", openEvent);
+
+    if (user.AllowEdit) {
+        document.getElementById("delete").addEventListener("click", deleteEvent);
+    }
+
+    document.getElementById("download").addEventListener("click", downloadEvent);
+    document.getElementById("open-nav").addEventListener("click", event => {
+        document.querySelector("header > div:nth-child(2)").classList.toggle("active");
+    });
+    document.getElementById("overlay").addEventListener("click", event => {
+        document.querySelector("header > div:nth-child(2)").classList.toggle("active");
+    });
+
+    if (document.getElementById('listing')) {
+        document.sendCostumEvent('listing');
+    }
+
+    if (document.getElementById('editor')) {
+        document.sendCostumEvent('editor');
+    }
+
+    return false;
+});

_embed/public/js/form2js.js

@@ -0,0 +1,356 @@
+/**
+ * Copyright (c) 2010 Maxim Vasiliev
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ * @author Maxim Vasiliev
+ * Date: 09.09.2010
+ * Time: 19:02:33
+ */
+
+
+(function (root, factory)
+{
+	if (typeof exports !== 'undefined' && typeof module !== 'undefined' && module.exports) {
+		// NodeJS
+		module.exports = factory();
+	}
+	else if (typeof define === 'function' && define.amd)
+	{
+		// AMD. Register as an anonymous module.
+		define(factory);
+	}
+	else
+	{
+		// Browser globals
+		root.form2js = factory();
+	}
+}(this, function ()
+{
+	"use strict";
+
+	/**
+	 * Returns form values represented as Javascript object
+	 * "name" attribute defines structure of resulting object
+	 *
+	 * @param rootNode {Element|String} root form element (or it's id) or array of root elements
+	 * @param delimiter {String} structure parts delimiter defaults to '.'
+	 * @param skipEmpty {Boolean} should skip empty text values, defaults to true
+	 * @param nodeCallback {Function} custom function to get node value
+	 * @param useIdIfEmptyName {Boolean} if true value of id attribute of field will be used if name of field is empty
+	 */
+	function form2js(rootNode, delimiter, skipEmpty, nodeCallback, useIdIfEmptyName, getDisabled)
+	{
+		getDisabled = getDisabled ? true : false;
+		if (typeof skipEmpty == 'undefined' || skipEmpty == null) skipEmpty = true;
+		if (typeof delimiter == 'undefined' || delimiter == null) delimiter = '.';
+		if (arguments.length < 5) useIdIfEmptyName = false;
+
+		rootNode = typeof rootNode == 'string' ? document.getElementById(rootNode) : rootNode;
+
+		var formValues = [],
+			currNode,
+			i = 0;
+
+		/* If rootNode is array - combine values */
+		if (rootNode.constructor == Array || (typeof NodeList != "undefined" && rootNode.constructor == NodeList))
+		{
+			while(currNode = rootNode[i++])
+			{
+				formValues = formValues.concat(getFormValues(currNode, nodeCallback, useIdIfEmptyName, getDisabled));
+			}
+		}
+		else
+		{
+			formValues = getFormValues(rootNode, nodeCallback, useIdIfEmptyName, getDisabled);
+		}
+
+		return processNameValues(formValues, skipEmpty, delimiter);
+	}
+
+	/**
+	 * Processes collection of { name: 'name', value: 'value' } objects.
+	 * @param nameValues
+	 * @param skipEmpty if true skips elements with value == '' or value == null
+	 * @param delimiter
+	 */
+	function processNameValues(nameValues, skipEmpty, delimiter)
+	{
+		var result = {},
+			arrays = {},
+			i, j, k, l,
+			value,
+			nameParts,
+			currResult,
+			arrNameFull,
+			arrName,
+			arrIdx,
+			namePart,
+			name,
+			_nameParts;
+
+		for (i = 0; i < nameValues.length; i++)
+		{
+			value = nameValues[i].value;
+
+			if (skipEmpty && (value === '' || value === null)) continue;
+
+			name = nameValues[i].name;
+			_nameParts = name.split(delimiter);
+			nameParts = [];
+			currResult = result;
+			arrNameFull = '';
+
+			for(j = 0; j < _nameParts.length; j++)
+			{
+				namePart = _nameParts[j].split('][');
+				if (namePart.length > 1)
+				{
+					for(k = 0; k < namePart.length; k++)
+					{
+						if (k == 0)
+						{
+							namePart[k] = namePart[k] + ']';
+						}
+						else if (k == namePart.length - 1)
+						{
+							namePart[k] = '[' + namePart[k];
+						}
+						else
+						{
+							namePart[k] = '[' + namePart[k] + ']';
+						}
+
+						arrIdx = namePart[k].match(/([a-z_]+)?\[([a-z_][a-z0-9_]+?)\]/i);
+						if (arrIdx)
+						{
+							for(l = 1; l < arrIdx.length; l++)
+							{
+								if (arrIdx[l]) nameParts.push(arrIdx[l]);
+							}
+						}
+						else{
+							nameParts.push(namePart[k]);
+						}
+					}
+				}
+				else
+					nameParts = nameParts.concat(namePart);
+			}
+
+			for (j = 0; j < nameParts.length; j++)
+			{
+				namePart = nameParts[j];
+
+				if (namePart.indexOf('[]') > -1 && j == nameParts.length - 1)
+				{
+					arrName = namePart.substr(0, namePart.indexOf('['));
+					arrNameFull += arrName;
+
+					if (!currResult[arrName]) currResult[arrName] = [];
+					currResult[arrName].push(value);
+				}
+				else if (namePart.indexOf('[') > -1)
+				{
+					arrName = namePart.substr(0, namePart.indexOf('['));
+					arrIdx = namePart.replace(/(^([a-z_]+)?\[)|(\]$)/gi, '');
+
+					/* Unique array name */
+					arrNameFull += '_' + arrName + '_' + arrIdx;
+
+					/*
+					 * Because arrIdx in field name can be not zero-based and step can be
+					 * other than 1, we can't use them in target array directly.
+					 * Instead we're making a hash where key is arrIdx and value is a reference to
+					 * added array element
+					 */
+
+					if (!arrays[arrNameFull]) arrays[arrNameFull] = {};
+					if (arrName != '' && !currResult[arrName]) currResult[arrName] = [];
+
+					if (j == nameParts.length - 1)
+					{
+						if (arrName == '')
+						{
+							currResult.push(value);
+							arrays[arrNameFull][arrIdx] = convertValue(currResult[currResult.length - 1]);
+						}
+						else
+						{
+							currResult[arrName].push(value);
+							arrays[arrNameFull][arrIdx] = convertValue(currResult[arrName][currResult[arrName].length - 1]);
+						}
+					}
+					else
+					{
+						if (!arrays[arrNameFull][arrIdx])
+						{
+							if ((/^[0-9a-z_]+\[?/i).test(nameParts[j+1])) currResult[arrName].push({});
+							else currResult[arrName].push([]);
+
+							arrays[arrNameFull][arrIdx] = convertValue(currResult[arrName][currResult[arrName].length - 1]);
+						}
+					}
+
+					currResult = convertValue(arrays[arrNameFull][arrIdx]);
+				}
+				else
+				{
+					arrNameFull += namePart;
+
+					if (j < nameParts.length - 1) /* Not the last part of name - means object */
+					{
+						if (!currResult[namePart]) currResult[namePart] = {};
+						currResult = convertValue(currResult[namePart]);
+					}
+					else
+					{
+						currResult[namePart] = convertValue(value);
+					}
+				}
+			}
+		}
+
+		return result;
+	}
+
+    function convertValue(value) {
+        if (value == "true") return true;
+        if (value == "false") return false;
+        if (!isNaN(value)) return parseInt(value);
+        return value;
+    }
+
+    function getFormValues(rootNode, nodeCallback, useIdIfEmptyName, getDisabled)
+    {
+        var result = extractNodeValues(rootNode, nodeCallback, useIdIfEmptyName, getDisabled);
+        return result.length > 0 ? result : getSubFormValues(rootNode, nodeCallback, useIdIfEmptyName, getDisabled);
+    }
+
+    function getSubFormValues(rootNode, nodeCallback, useIdIfEmptyName, getDisabled)
+	{
+		var result = [],
+			currentNode = rootNode.firstChild;
+
+		while (currentNode)
+		{
+			result = result.concat(extractNodeValues(currentNode, nodeCallback, useIdIfEmptyName, getDisabled));
+			currentNode = currentNode.nextSibling;
+		}
+
+		return result;
+	}
+
+    function extractNodeValues(node, nodeCallback, useIdIfEmptyName, getDisabled) {
+        if (node.disabled && !getDisabled) return [];
+
+        var callbackResult, fieldValue, result, fieldName = getFieldName(node, useIdIfEmptyName);
+
+        callbackResult = nodeCallback && nodeCallback(node);
+
+        if (callbackResult && callbackResult.name) {
+            result = [callbackResult];
+        }
+        else if (fieldName != '' && node.nodeName.match(/INPUT|TEXTAREA/i)) {
+            fieldValue = getFieldValue(node, getDisabled);
+            if (null === fieldValue) {
+                result = [];
+            } else {
+                result = [ { name: fieldName, value: fieldValue} ];
+            }
+        }
+        else if (fieldName != '' && node.nodeName.match(/SELECT/i)) {
+	        fieldValue = getFieldValue(node, getDisabled);
+	        result = [ { name: fieldName.replace(/\[\]$/, ''), value: fieldValue } ];
+        }
+        else {
+            result = getSubFormValues(node, nodeCallback, useIdIfEmptyName, getDisabled);
+        }
+
+        return result;
+    }
+
+	function getFieldName(node, useIdIfEmptyName)
+	{
+		if (node.name && node.name != '') return node.name;
+		else if (useIdIfEmptyName && node.id && node.id != '') return node.id;
+		else return '';
+	}
+
+
+	function getFieldValue(fieldNode, getDisabled)
+	{
+		if (fieldNode.disabled && !getDisabled) return null;
+
+		switch (fieldNode.nodeName) {
+			case 'INPUT':
+			case 'TEXTAREA':
+				switch (fieldNode.type.toLowerCase()) {
+					case 'radio':
+			if (fieldNode.checked && fieldNode.value === "false") return false;
+					case 'checkbox':
+                        if (fieldNode.checked && fieldNode.value === "true") return true;
+                        if (!fieldNode.checked && fieldNode.value === "true") return false;
+			if (fieldNode.checked) return fieldNode.value;
+						break;
+
+					case 'button':
+					case 'reset':
+					case 'submit':
+					case 'image':
+						return '';
+						break;
+
+					default:
+						return fieldNode.value;
+						break;
+				}
+				break;
+
+			case 'SELECT':
+				return getSelectedOptionValue(fieldNode);
+				break;
+
+			default:
+				break;
+		}
+
+		return null;
+	}
+
+	function getSelectedOptionValue(selectNode)
+	{
+		var multiple = selectNode.multiple,
+			result = [],
+			options,
+			i, l;
+
+		if (!multiple) return selectNode.value;
+
+		for (options = selectNode.getElementsByTagName("option"), i = 0, l = options.length; i < l; i++)
+		{
+			if (options[i].selected) result.push(options[i].value);
+		}
+
+		return result;
+	}
+
+	return form2js;
+
+}));

_embed/templates/.jsbeautifyrc

@@ -0,0 +1,16 @@
+{
+  "html": {
+    "allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg"],
+    "brace_style": "collapse", // [collapse|expand|end-expand|none] Put braces on the same line as control statements (default), or put braces on own line (Allman / ANSI style), or just put end braces on own line, or attempt to keep them where they are
+    "end_with_newline": false, // End output with newline
+    "indent_char": " ", // Indentation character
+    "indent_handlebars": false, // e.g. {{#foo}}, {{/foo}}
+    "indent_inner_html": false, // Indent <head> and <body> sections
+    "indent_scripts": "keep", // [keep|separate|normal]
+    "indent_size": 4, // Indentation size
+    "max_preserve_newlines": 0, // Maximum number of line breaks to be preserved in one chunk (0 disables)
+    "preserve_newlines": true, // Whether existing line breaks before elements should be preserved (only works before elements, not inside tags or for text)
+    "unformatted": ["a", "span", "img", "code", "pre", "sub", "sup", "em", "strong", "b", "i", "u", "strike", "big", "small", "pre", "h1", "h2", "h3", "h4", "h5", "h6"], // List of tags that should not be reformatted
+    "wrap_line_length": 0 // Lines should wrap at next opportunity after this number of characters (0 disables)
+  }
+}

_embed/templates/actions.tmpl

@@ -0,0 +1,18 @@
+{{ define "actions" }}
+ <div class="action" id="open">
+  <i class="material-icons" title="See raw">open_in_new</i> <span>See raw</span>
+ </div>
+ {{ if and .IsDir .User.AllowEdit }}
+  <div class="action" id="rename">
+   <i class="material-icons" title="Edit">mode_edit</i>
+  </div>
+ {{ end }}
+ <div class="action" id="download">
+  <i class="material-icons" title="Download">file_download</i> <span>Download</span>
+ </div>
+ {{ if .User.AllowEdit }}
+ <div class="action" id="delete">
+  <i class="material-icons" title="Delete">delete</i> <span>Delete</span>
+ </div>
+ {{ end }}
+{{ end }}

_embed/templates/base.tmpl

@@ -0,0 +1,139 @@
+{{ $absURL := .Config.AbsoluteURL }}
+
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>{{.Name}}</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href='https://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
+  <link rel="stylesheet" href="{{ .Config.AbsoluteURL }}/_filemanagerinternal/css/styles.css">
+
+  {{ if ne .User.StyleSheet "" }}
+   <style>
+    {{ CSS .User.StyleSheet }}
+   </style>
+  {{ end }}
+ </head>
+ <body>
+  <header>
+   <div>
+    {{ $lnk := .PreviousLink }}
+
+     <div class="action{{ if eq $lnk ""}} disabled{{ end }}" id="prev">
+         {{ if ne $lnk ""}}
+          <a href="{{ $lnk }}">
+          {{ end }}
+      <i class="material-icons" title="Previous">subdirectory_arrow_left</i>
+      {{ if ne $lnk ""}}
+      </a>
+      {{ end }}
+
+    </div>
+
+     {{ if ne $lnk ""}}
+     <ul class="prev-links">
+     {{ range $link, $name := .BreadcrumbMap }}
+        <a href="{{ $absURL }}{{ $link }}"><li>{{ $name }}</li></a>
+     {{ end }}
+     </ul>
+     {{ end }}
+
+    <div class="action" id="open-nav">
+        <i class="material-icons" title="Menu">menu</i>
+    </div>
+
+    <p>
+     {{ if ne .Name "/"}}
+      {{ .Name }}
+     </p>
+    {{ end }}
+   </div>
+
+   <div>
+       <div class="only-side">
+           {{ $lnk := .PreviousLink }}
+           {{ if ne $lnk ""}}
+            <a href="{{ $lnk }}">
+            {{ end }}
+            <div class="action{{ if eq $lnk ""}} disabled{{ end }}" id="prev">
+             <i class="material-icons" title="Previous">subdirectory_arrow_left</i>
+            </div>
+
+            {{ if ne $lnk ""}}
+            </a>
+           {{ end }}
+
+           <p>
+            <a href="{{ if eq .Config.AbsoluteURL "" }}/{{ else }}{{ .Config.AbsoluteURL }}{{ end }}">
+             File Manager
+            </a>
+            </p>
+       </div>
+
+       {{ if .IsDir}}
+
+       {{ if .User.AllowCommands }}
+       <div id="search">
+           <i class="material-icons" title="Storage">storage</i>
+           <input type="text" placeholder="Execute a command...">
+           <div>Write your git, mercurial or svn command and press enter.</div>
+       </div>
+       {{ end }}
+
+        <div class="action" id="view">
+         <i class="material-icons" title="Switch view">view_headline</i> <span>Switch view</span>
+        </div>
+        {{ if .User.AllowNew }}
+        <div class="action" id="upload">
+         <i class="material-icons" title="Upload">file_upload</i> <span>Upload</span>
+        </div>
+        {{ end }}
+        {{ else }}
+        {{ template "actions" . }}
+       {{ end }}
+
+       <div class="action" id="logout">
+        <i class="material-icons" title="Logout">exit_to_app</i> <span>Logout</span>
+       </div>
+   </div>
+   <div id="overlay"></div>
+  </header>
+
+  {{ if .IsDir }}
+   <div id="toolbar">
+    <div>
+     <div class="action" id="back">
+      <i class="material-icons" title="Back">arrow_back</i>
+     </div>
+     <p>
+      <span id="selected-number">0</span>
+      selected.</p>
+    </div>
+    <div>
+     {{ template "actions" . }}
+    </div>
+   </div>
+  {{ end }}
+
+  <main>
+   {{ template "content" . }}
+   <span id="token">{{ .Config.Token }}</span>
+  </main>
+
+  <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>
+
+  <!-- SCRIPTS -->
+  <!-- User Data and Permissions; WebDavURL -->
+  <script>var user = JSON.parse('{{ Marshal .User }}'), webdavURL = "{{.Config.WebDavURL}}", baseURL = "{{.Config.BaseURL}}";</script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js"></script>
+  <script src="{{ .Config.AbsoluteURL }}/_filemanagerinternal/js/form2js.js"></script>
+  <script src="{{ .Config.AbsoluteURL }}/_filemanagerinternal/js/application.js"></script>
+  {{ if .Config.HugoEnabled }}<script src="{{ .Config.AbsoluteURL }}/_hugointernal/js/application.js"></script>{{ end }}
+ </body>
+</html>

_embed/templates/editor.tmpl

@@ -0,0 +1,34 @@
+{{ define "content" }}
+{{ with .Data }}
+ <div id="editor" class="container" data-kind="{{ .Class }}">
+  <form method="POST" action="./">
+   {{ if or (eq .Class "frontmatter-only") (eq .Class "complete") }}
+    <div class="frontmatter" data-type="parent">
+     {{ template "blocks" .FrontMatter }}
+     <div class="button add">Add field</div>
+    </div>
+   {{ end }}
+
+   {{ if or (eq .Class "content-only") (eq .Class "complete") }}
+
+    {{ if (eq .Class "complete")}}
+     <h3>Body</h3>
+    {{ end }}
+    <div class="content">
+     <div id="editor-source" data-mode="{{ .Mode }}"></div>
+     <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 }}
+{{ end }}

_embed/templates/frontmatter.tmpl

@@ -0,0 +1,60 @@
+{{ define "blocks" }}
+ {{ if .Fields }}
+  <div class="group">
+  {{ end }}
+  {{ range $key, $value := .Fields }}
+   {{ if eq $value.Parent.Type "array" }}
+    <div id="{{ $value.Name }}-{{ $key }}" data-type="array-item">
+     {{ template "value" $value }}
+     <div class="action delete" data-delete="{{ $value.Name }}-{{ $key }}">
+      <i class="material-icons" title="Close">close</i>
+     </div>
+    </div>
+    {{ else }}
+    <div class="block" id="block-{{ $value.Name }}" data-content="{{ $value.Name }}">
+     <label for="{{ $value.Name }}">{{ $value.Title }}</label>
+     {{ template "value" $value }}
+     <div class="action delete" data-delete="block-{{ $value.Name }}">
+      <i class="material-icons" title="Close">close</i>
+     </div>
+    </div>
+   {{ end }}
+  {{ end }}
+  {{ if .Fields }}
+  </div>
+ {{ end }}
+
+ {{ range $key, $value := .Arrays }}
+  {{ template "fielset" $value }}
+ {{ end }}
+
+ {{ range $key, $value := .Objects }}
+  {{ template "fielset" $value }}
+ {{ end }}
+
+{{ end }}
+
+{{ define "value" }}
+ {{ if eq .HTMLType "textarea" }}
+  <textarea class="scroll" name="{{ .Name }}" id="{{.Name }}" data-parent-type="{{ .Parent.Type }}">{{ .Content.Other }}</textarea>
+  {{ else if eq .HTMLType "datetime" }}
+  <input name="{{ .Name }}" id="{{ .Name }}" value="{{ .Content.Other.Format "2006-01-02T15:04" }}" type="datetime-local" data-parent-type="{{ .Parent.Type }}"></input>
+  {{ else }}
+  <input name="{{ .Name }}" id="{{ .Name }}" value="{{ .Content.Other }}" type="{{ .HTMLType }}" data-parent-type="{{ .Parent.Type }}"></input>
+ {{ end }}
+{{ end }}
+
+{{ define "fielset" }}
+ <fieldset id="{{ .Name }}" data-type="{{ .Type }}">
+  {{ if not (eq .Title "") }}
+   <h3>{{ .Title }}</h3>
+  {{ end }}
+  <div class="action add">
+   <i class="material-icons" title="Add">add</i>
+  </div>
+  <div class="action delete" data-delete="{{ .Name }}">
+   <i class="material-icons" title="Close">close</i>
+  </div>
+  {{ template "blocks" .Content }}
+ </fieldset>
+{{ end }}

_embed/templates/listing.tmpl

@@ -0,0 +1,48 @@
+{{ define "content" }}
+{{ with .Data }}
+<div class="listing">
+    <div class="container" id="listing">
+    {{- range .Items}}
+        {{ if .UserAllowed }}
+        <div class="item" data-dir="{{- if .IsDir}}true{{ else }}false{{ end }}" id="{{.URL}}">
+            <div>
+                <a href="{{.URL}}">
+                    {{- if .IsDir}}
+                    <i class="material-icons">folder</i>
+                    {{- else}}
+                    <i class="material-icons">insert_drive_file</i>
+                    {{- end}}
+                </a>
+            </div>
+            <div>
+                <a href="{{.URL}}">
+                    <span class="name">{{.Name}}</span>
+                    {{- if .IsDir}}
+                    <p data-order="-1">&mdash;</p>
+                    {{- else}}
+                    <p data-order="{{.Size}}">{{.HumanSize}}</p>
+                    {{- end}}
+                    <p>
+                    <time datetime="{{.HumanModTime " 2006-01-02T15:04:05Z"}}">{{.HumanModTime "01/02/2006 03:04:05 PM -07:00"}}</time>
+                    </p>
+                </a>
+            </div>
+            <span class="checkbox" data-href="{{.URL}}"><i class="material-icons">check</i>
+        </div>
+        {{ end }}
+    {{- end}}
+    </div>
+</div>
+
+<input style="display:none" type="file" id="upload-input" onchange="handleFiles(this.files)" value="Upload" multiple>
+{{ end }}
+
+{{ if .User.AllowNew }}
+<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. If you don't write an extension, a directory will be created.">add</i>
+    </div>
+</div>
+{{ end }}
+{{ end }}

_embed/templates/minimal.tmpl

@@ -0,0 +1,2 @@
+{{ template "content" . }}
+<span id="token">{{ .Config.Token }}</span>

_embed/templates/single.tmpl

@@ -0,0 +1,17 @@
+{{ define "content" }}
+{{ with .Data}}
+ <main class="container">
+  {{ if eq .Type "image" }}
+   <img src="{{ .URL }}?raw=true">
+   {{ else if eq .Type "audio" }}
+   <audio src="{{ .URL }}?raw=true"></audio>
+   {{ else if eq .Type "video" }}
+   <!-- TODO: SHOW VIDEO ? -->
+   {{ else if eq .Type "blob" }}
+   <a href="?download=true">Download</a>
+   {{ else}}
+   <pre>{{ .StringifyContent }}</pre>
+  {{ end }}
+ </main>
+{{ end }}
+{{ end }}