buttons

_embed/public/js/common.js

@@ -1,12 +1,10 @@
 'use strict';
 
 var tempID = "_fm_internal_temporary_id",
-  buttons = {},
   templates = {},
   selectedItems = [],
   overlay,
-  clickOverlay,
+  clickOverlay;
-  webdav = {};
 
 // Removes an element, if exists, from an array
 Array.prototype.removeElement = function (element) {
@@ -33,56 +31,6 @@ Document.prototype.getCookie = function (name) {
   return document.cookie.replace(re, "$1");
 }
 
-// Changes a button to the loading animation
-Element.prototype.changeToLoading = function () {
-  let element = this,
-    originalText = element.innerHTML;
-
-  element.style.opacity = 0;
-
-  setTimeout(function () {
-    element.classList.add('spin');
-    element.innerHTML = 'autorenew';
-    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 = () => {
-    this.classList.remove('spin');
-    this.innerHTML = error ?
-      'close' :
-      'done';
-    this.style.opacity = 1;
-    setTimeout(secondStep, 1000);
-  }
-
-  setTimeout(firstStep, 200);
-  return false;
-}
-
-function toWebDavURL(url) {
-  return window.location.origin + url.replace(baseURL + "/", webdavURL + "/");
-}
-
 // Remove the last directory of an url
 var removeLastDirectoryPartOf = function (url) {
   var arr = url.split('/');
@@ -120,22 +68,80 @@ function getCSSRule(rules) {
   return result;
 }
 
+/* * * * * * * * * * * * * * * *
+ *                             *
+ *            BUTTONS          *
+ *                             *
+ * * * * * * * * * * * * * * * */
+var buttons = {
+  previousState: {},
+};
+
+buttons.setLoading = function (name) {
+  if(typeof this[name] === 'undefined') return;
+  let i = this[name].querySelector('i');
+
+  this.previousState[name] = i.innerHTML;
+  i.style.opacity = 0;
+
+  setTimeout(function () {
+    i.classList.add('spin');
+    i.innerHTML = 'autorenew';
+    i.style.opacity = 1;
+  }, 200);
+}
+
+// Changes an element to done animation
+buttons.setDone = function (name, success = true) {
+  let i = this[name].querySelector('i');
+
+  i.style.opacity = 0;
+
+  let thirdStep = () => {
+    i.innerHTML = this.previousState[name];
+    i.style.opacity = null;
+
+    if(selectedItems.length == 0 && document.getElementById('listing'))
+      document.sendCostumEvent('changed-selected');
+  }
+
+  let secondStep = () => {
+    i.style.opacity = 0;
+    setTimeout(thirdStep, 200);
+  }
+
+  let firstStep = () => {
+    i.classList.remove('spin');
+    i.innerHTML = success ?
+      'done' :
+      'close';
+    i.style.opacity = 1;
+    setTimeout(secondStep, 1000);
+  }
+
+  setTimeout(firstStep, 200);
+  return false;
+}
+
 /* * * * * * * * * * * * * * * *
  *                             *
  *            WEBDAV           *
  *                             *
  * * * * * * * * * * * * * * * */
-// TODO: here, we should create an abstraction layer from the webdav.
+var webdav = {};
-// We must create functions that do the requests to the webdav backend.
+
+webdav.convertURL = function (url) {
+  return window.location.origin + url.replace(baseURL + "/", webdavURL + "/");
+}
 
 webdav.move = function (oldLink, newLink) {
   return new Promise((resolve, reject) => {
     let request = new XMLHttpRequest();
-    request.open('MOVE', toWebDavURL(oldLink), true);
+    request.open('MOVE', webdav.convertURL(oldLink), true);
-    request.setRequestHeader('Destination', toWebDavURL(newLink));
+    request.setRequestHeader('Destination', webdav.convertURL(newLink));
     request.onload = () => {
       if(request.status == 201 || request.status == 204) {
-        resolve(request.response);
+        resolve();
       } else {
         reject(request.statusText);
       }
@@ -145,13 +151,18 @@ webdav.move = function (oldLink, newLink) {
   });
 }
 
-webdav.put = function (link, body) {
+webdav.put = function (link, body, headers = {}) {
   return new Promise((resolve, reject) => {
     let request = new XMLHttpRequest();
-    request.open('PUT', toWebDavURL(link), true);
+    request.open('PUT', webdav.convertURL(link), true);
+
+    for(let key in headers) {
+      request.setRequestHeader(key, headers[key]);
+    }
+
     request.onload = () => {
       if(request.status == 201) {
-        resolve(request.response);
+        resolve();
       } else {
         reject(request.statusText);
       }
@@ -161,6 +172,40 @@ webdav.put = function (link, body) {
   });
 }
 
+webdav.delete = function (link) {
+  return new Promise((resolve, reject) => {
+    let request = new XMLHttpRequest();
+    request.open('DELETE', webdav.convertURL(link), true);
+    request.onload = () => {
+      if(request.status == 204) {
+        resolve();
+      } else {
+        reject(request.statusText);
+      }
+    }
+    request.onerror = () => reject(request.statusText);
+    request.send();
+  });
+  request.send();
+}
+
+webdav.new = function (link) {
+  return new Promise((resolve, reject) => {
+    let request = new XMLHttpRequest();
+    request.open((link.endsWith("/") ? "MKCOL" : "PUT"), webdav.convertURL(link), true);
+    request.onload = () => {
+      if(request.status == 201) {
+        resolve();
+      } else {
+        reject(request.statusText);
+      }
+    }
+    request.onerror = () => reject(request.statusText);
+    request.send();
+  });
+  request.send();
+}
+
 /* * * * * * * * * * * * * * * *
  *                             *
  *            EVENTS           *
@@ -284,7 +329,7 @@ function moveSelected(event) {
   // TODO: this only works for ONE file. What if there are more files selected?
   // TODO: use webdav.rename
 
-  let request = new XMLHttpRequest(),
+  /*   let request = new XMLHttpRequest(),
       oldLink = toWebDavURL(window.location.pathname),
       newLink = toWebDavURL(event.srcElement.querySelector("li[aria-selected=true]").innerHTML + "/");
 
@@ -297,7 +342,7 @@ function moveSelected(event) {
           window.reload();
         }
       }
-  }
+    } */
 }
 
 function moveEvent(event) {
@@ -345,44 +390,41 @@ function moveEvent(event) {
   }
 }
 
-function deleteSelected(single) {
+function deleteOnSingleFile() {
-  return function (event) {
-    event.preventDefault();
-
-    Array.from(selectedItems).forEach(id => {
-      let request = new XMLHttpRequest(),
-        html = buttons.delete.querySelector('i').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.querySelector('i').changeToDone(request.status != 204, html);
-        }
-      }
-
-      request.send();
-    });
-
   closePrompt(event);
+  buttons.setLoading('delete');
+
+  let promises = [];
+
+  webdav.delete(window.location.pathname)
+    .then(() => {
+      window.location.pathname = removeLastDirectoryPartOf(window.location.pathname);
+    })
+    .catch(e => {
+      buttons.setDone('delete', false);
+      console.log(e)
+    })
 }
+
+function deleteOnListing() {
+  closePrompt(event);
+  buttons.setLoading('delete');
+
+  let promises = [];
+
+  for(let id of selectedItems) {
+    promises.push(webdav.delete(document.getElementById(id).dataset.url));
+  }
+
+  Promise.all(promises)
+    .then(() => {
+      listing.reload();
+      buttons.setDone('delete');
+    })
+    .catch(e => {
+      console.log(e);
+      buttons.setDone('delete', false);
+    })
 }
 
 // Handles the delete button event
@@ -398,14 +440,15 @@ function deleteEvent(event) {
   clone.querySelector('h3').innerHTML = 'Delete files';
 
   if(single) {
+    clone.querySelector('form').addEventListener('submit', deleteOnSingleFile);
     clone.querySelector('p').innerHTML = `Are you sure you want to delete this file/folder?`;
   } else {
+    clone.querySelector('form').addEventListener('submit', deleteOnListing);
     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));
 
   document.body.appendChild(clone);
   document.querySelector('.overlay').classList.add('active');

_embed/public/js/editor.js

@@ -217,17 +217,20 @@ document.addEventListener("DOMContentLoaded", (event) => {
       data.content = data.content.toString();
     }
 
-    let html = buttons.save.querySelector('i').changeToLoading(),
+    let request = new XMLHttpRequest();
-      request = new XMLHttpRequest();
 
-    request.open("PUT", toWebDavURL(window.location.pathname));
+    buttons.setLoading('save')
-    request.setRequestHeader('Kind', kind);
+
-    request.send(JSON.stringify(data));
+    webdav.put(window.location.pathname, JSON.stringify(data), {
-    request.onreadystatechange = function () {
+        'Kind': kind
-      if(request.readyState == 4) {
+      })
-        buttons.save.querySelector('i').changeToDone((request.status != 201), html);
+      .then(() => {
-      }
+        buttons.setDone('save')
-    }
+      })
+      .catch(e => {
+        console.log(e);
+        buttons.setDone('save', false)
+      })
   }
 
   document.querySelector('#save').addEventListener('click', event => {

_embed/public/js/listing.js

@@ -121,9 +121,10 @@ listing.rename = function (event) {
     event.preventDefault();
 
     let newName = event.currentTarget.querySelector('input').value,
-      newLink = removeLastDirectoryPartOf(link) + "/" + newName,
+      newLink = removeLastDirectoryPartOf(link) + "/" + newName;
-      html = buttons.rename.querySelector('i').changeToLoading();
+
     closePrompt(event);
+    buttons.setLoading('rename');
 
     webdav.move(link, newLink).then(() => {
       listing.reload(() => {
@@ -133,11 +134,10 @@ listing.rename = function (event) {
         listing.handleSelectionChange();
       });
 
-      buttons.rename.querySelector('i').changeToDone(false, html);
+      buttons.setDone('rename');
     }).catch(error => {
       field.innerHTML = name;
-      buttons.rename.querySelector('i').changeToDone(true, html);
+      buttons.setDone('rename', false);
-
       console.log(error);
     });
 
@@ -158,8 +158,9 @@ listing.rename = function (event) {
 }
 
 listing.handleFiles = function (files, base) {
-  let html = buttons.upload.querySelector('i').changeToLoading(),
+  buttons.setLoading('upload');
-    promises = [];
+
+  let promises = [];
 
   for(let file of files) {
     promises.push(webdav.put(window.location.pathname + base + file.name, file));
@@ -168,11 +169,11 @@ listing.handleFiles = function (files, base) {
   Promise.all(promises)
     .then(() => {
       listing.reload();
-      buttons.upload.querySelector('i').changeToDone(false, html);
+      buttons.setDone('upload');
     })
     .catch(e => {
       console.log(e);
-      buttons.upload.querySelector('i').changeToDone(true, html);
+      buttons.setDone('upload', false);
     })
 
   return false;
@@ -276,20 +277,19 @@ listing.newFileButton = function (event) {
 
 listing.newFilePrompt = function (event) {
   event.preventDefault();
+  buttons.setLoading('new');
 
-  let button = document.getElementById('new'),
+  let name = event.currentTarget.querySelector('input').value;
-    html = button.querySelector('i').changeToLoading(),
-    request = new XMLHttpRequest(),
-    name = event.currentTarget.querySelector('input').value;
 
-  request.open((name.endsWith("/") ? "MKCOL" : "PUT"), toWebDavURL(window.location.pathname + name));
+  webdav.new(window.location.pathname + name)
-  request.send();
+    .then(() => {
-  request.onreadystatechange = function () {
+      buttons.setDone('new');
-    if(request.readyState == 4) {
-      button.querySelector('i').changeToDone((request.status != 201), html);
       listing.reload();
-    }
+    })
-  }
+    .catch(e => {
+      console.log(e);
+      buttons.setDone('new', false);
+    });
 
   closePrompt(event);
   return false;
@@ -346,7 +346,6 @@ window.addEventListener('keydown', (event) => {
   }
 
   if(event.ctrlKey || event.metaKey) {
-    console.log("hey")
     switch(String.fromCharCode(event.which).toLowerCase()) {
     case 's':
       event.preventDefault();