updates

Former-commit-id: 758fe342877af58e60b52d5cec1bb27e1f81ac96

_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");

_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();

_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;
-}
+});