filebrowser/_embed/public/js/common.js

'use strict';

var tempID = "_fm_internal_temporary_id",
  buttons = {},
  templates = {},
  selectedItems = [],
  overlay, clickOverlay,
  webdav = {};

// 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(oldElement, newElement) {
  var i = this.indexOf(oldElement);
  if (i != -1) this[i] = newElement;
}

// 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,
  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('/');
  if (arr.pop() === "") {
    arr.pop();
  }
  return (arr.join('/'));
}

function getCSSRule(rules) {
  for (let i = 0; i < rules.length; i++) {
    rules[i] = rules[i].toLowerCase();
  }

  var result = null,
  find = Array.prototype.find;

  find.call(document.styleSheets, styleSheet => {
    result = find.call(styleSheet.cssRules, cssRule => {
      let found = false;

      if (cssRule instanceof CSSStyleRule) {
        for (let i = 0; i < rules.length; i++) {
          if (cssRule.selectorText.toLowerCase() == rules[i]) found = true;
        }
      }

      return found;
    });

    return result != null;
  });

  return result;
}


/* * * * * * * * * * * * * * * *
*                             *
*            WEBDAV           *
*                             *
* * * * * * * * * * * * * * * */
// TODO: here, we should create an abstraction layer from the webdav.
// We must create functions that do the requests to the webdav backend.

webdav.move = function(oldLink, newLink) {
  return new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.open('MOVE', toWebDavURL(oldLink), true);
    request.setRequestHeader('Destination', toWebDavURL(newLink));
    request.onload = () => {
      if (request.status == 201 || request.status == 204) {
        resolve(request.response);
      } else {
        reject(request.statusText);
      }
    }
    request.onerror = () => reject(request.statusText);
    request.send();
  });
}

webdav.put = function(link, body) {
  return new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.open('PUT', toWebDavURL(link), true);
    request.onload = () => {
      if (request.status == 201) {
        resolve(request.response);
      } else {
        reject(request.statusText);
      }
    }
    request.onerror = () => reject(request.statusText);
    request.send(body);
  });
}


/* * * * * * * * * * * * * * * *
*                             *
*            EVENTS           *
*                             *
* * * * * * * * * * * * * * * */
function closePrompt(event) {
  let prompt = document.querySelector('.prompt');

  if (!prompt) return;

  event.preventDefault();
  document.querySelector('.overlay').classList.remove('active');
  prompt.classList.remove('active');

  setTimeout(() => {
    prompt.remove();
  }, 100);
}

function notImplemented(event) {
  event.preventDefault();
  clickOverlay.click();

  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) {
  event.preventDefault();
}

function logoutEvent(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 = "/";
    }
  }
}

function openEvent(event) {
  if (event.currentTarget.classList.contains('disabled')) return false;

  let link = '?raw=true';

  if (selectedItems.length) {
    link = document.getElementById(selectedItems[0]).dataset.url + link;
  } else {
    link = window.location + link;
  }

  window.open(link);
  return false;
}

function selectMoveFolder(event) {
  if (event.target.getAttribute("aria-selected") === "true") {
    event.target.setAttribute("aria-selected", false);
    return;
  } else {
    if (document.querySelector(".file-list li[aria-selected=true]")) {
      document.querySelector(".file-list li[aria-selected=true]").setAttribute("aria-selected", false);
    }
    event.target.setAttribute("aria-selected", true);
    return;
  }
}

function loadNextFolder(event) {
  let request = new XMLHttpRequest(),
  prompt = document.querySelector("form.prompt.active");

  prompt.addEventListener("submit", moveSelected);

  request.open("GET", event.target.dataset.url);
  request.setRequestHeader("Accept", "application/json");
  request.send();
  request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200) {
      let dirs = 0;

      prompt.querySelector("ul").innerHTML = "";
      prompt.querySelector('code').innerHTML = event.target.dataset.url;

      for (let f of JSON.parse(request.response)) {
        if (f.IsDir === true) {
          dirs++;

          let newNode = document.createElement("li");
          newNode.dataset.url = f.URL;
          newNode.innerHTML = f.Name;
          newNode.setAttribute("aria-selected", false);

          newNode.addEventListener("dblclick", loadNextFolder);
          newNode.addEventListener("click", selectMoveFolder);

          prompt.querySelector("div.file-list ul").appendChild(newNode);
        }
      }

      if (dirs === 0) {
        prompt.querySelector("p").innerHTML = `There aren't any folders in this directory.`;
      }
    }
  }
}

function moveSelected(event) {
  event.preventDefault();

  // TODO: this only works for ONE file. What if there are more files selected?
  // TODO: use webdav.rename

  let request = new XMLHttpRequest(),
  oldLink = toWebDavURL(window.location.pathname),
  newLink = toWebDavURL(event.srcElement.querySelector("li[aria-selected=true]").innerHTML + "/");

  request.open("MOVE", oldLink);
  request.setRequestHeader("Destination", newLink);
  request.send();
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      if (request.status == 200 || request.status == 204) {
        window.reload();
      }
    }
  }
}

function moveEvent(event) {
  if (event.currentTarget.classList.contains("disabled")) return;

  let request = new XMLHttpRequest();
  request.open("GET", window.location.pathname, true);
  request.setRequestHeader("Accept", "application/json");
  request.send();
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      if (request.status == 200) {
        let prompt = document.importNode(templates.move.content, true),
        dirs = 0;

        prompt.querySelector("form").addEventListener("submit", moveSelected);
        prompt.querySelector('code').innerHTML = window.location.pathname;

        for (let f of JSON.parse(request.response)) {
          if (f.IsDir === true) {
            dirs++;

            let newNode = document.createElement("li");
            newNode.dataset.url = f.URL;
            newNode.innerHTML = f.Name;
            newNode.setAttribute("aria-selected", false);

            newNode.addEventListener("dblclick", loadNextFolder);
            newNode.addEventListener("click", selectMoveFolder);

            prompt.querySelector("div.file-list ul").appendChild(newNode);
          }
        }

        if (dirs === 0) {
          prompt.querySelector("p").innerHTML = `There aren't any folders in this directory.`;
        }

        document.body.appendChild(prompt);
        document.querySelector(".overlay").classList.add("active");
        document.querySelector(".prompt").classList.add("active");
      }
    }
  }
}

function deleteSelected(single) {
  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);
  }
}

// Handles the delete button event
function deleteEvent(event) {
  let single = false;

  if (!selectedItems.length) {
    selectedItems = ["placeholder"];
    single = true;
  }

  let clone = document.importNode(templates.question.content, true);
  clone.querySelector('h3').innerHTML = 'Delete files';

  if (single) {
    clone.querySelector('p').innerHTML = `Are you sure you want to delete this file/folder?`;
  } else {
    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');
  document.querySelector('.prompt').classList.add('active');

  return false;
}

function resetSearchText() {
  let box = document.querySelector('#search > div div');

  if (user.AllowCommands) {
    box.innerHTML = `Search or use one of your supported commands: ${user.Commands.join(", ")}.`;
  } else {
    box.innerHTML = "Type and press enter to search.";
  }
}

function searchEvent(event) {
  if (this.value.length == 0) {
    resetSearchText();
    return;
  }

  let value = this.value,
  search = document.getElementById('search'),
  scrollable = document.querySelector('#search > div'),
  box = document.querySelector('#search > div div'),
  pieces = value.split(' '),
  supported = false;

  user.Commands.forEach(function(cmd) {
    if (cmd == pieces[0]) {
      supported = true;
    }
  });

  if (!supported || !user.AllowCommands) {
    box.innerHTML = "Press enter to search."
  } else {
    box.innerHTML = "Press enter to execute."
  }

  if (event.keyCode == 13) {
    box.innerHTML = '';
    search.classList.add('ongoing');

    let url = window.location.host + window.location.pathname;

    if (document.getElementById("editor")) {
      url = removeLastDirectoryPartOf(url);
    }

    if (supported && user.AllowCommands) {
      let conn = new WebSocket(`ws://${url}?command=true`);

      conn.onopen = function() {
        conn.send(value);
      };

      conn.onmessage = function(event) {
        box.innerHTML = event.data;
        scrollable.scrollTop = scrollable.scrollHeight;
      }

      conn.onclose = function(event) {
        search.classList.remove('ongoing');
        reloadListing();
      }

      return;
    }

    box.innerHTML = '<ul></ul>';

    let ul = box.querySelector('ul'),
    conn = new WebSocket(`ws://${url}?search=true`);

    conn.onopen = function() {
      conn.send(value);
    };

    conn.onmessage = function(event) {
      ul.innerHTML += '<li><a href="' + event.data + '">' + event.data + '</a></li>';
      scrollable.scrollTop = scrollable.scrollHeight;
    }

    conn.onclose = function(event) {
      search.classList.remove('ongoing');
    }
  }
}


function setupSearch() {
  let search = document.getElementById("search"),
  searchInput = search.querySelector("input"),
  searchDiv = search.querySelector("div"),
  hover = false,
  focus = false;

  resetSearchText();

  searchInput.addEventListener('focus', event => {
    focus = true;
    search.classList.add('active');
  });

  searchDiv.addEventListener('mouseover', event => {
    hover = true;
    search.classList.add('active');
  });

  searchInput.addEventListener('blur', event => {
    focus = false;
    if (hover) return;
    search.classList.remove('active');
  });

  search.addEventListener('mouseleave', event => {
    hover = false;
    if (focus) return;
    search.classList.remove('active');
  });

  search.addEventListener("click", event => {
    search.classList.add("active");
    search.querySelector("input").focus();
  });

  searchInput.addEventListener('keyup', searchEvent);
}

function closeHelp(event) {
  event.preventDefault();

  document.querySelector('.help').classList.remove('active');
  document.querySelector('.overlay').classList.remove('active');
}

function openHelp(event) {
  closePrompt(event);

  document.querySelector('.help').classList.add('active');
  document.querySelector('.overlay').classList.add('active');
}

window.addEventListener('keydown', (event) => {
  if (event.keyCode == 27) {
    if (document.querySelector('.help.active')) {
      closeHelp(event);
    }
  }

  if (event.keyCode == 46) {
    deleteEvent(event);
  }

  if (event.keyCode == 112) {
    event.preventDefault();
    openHelp(event);
  }
});

/* * * * * * * * * * * * * * * *
*                             *
*           BOOTSTRAP         *
*                             *
* * * * * * * * * * * * * * * */

document.addEventListener("DOMContentLoaded", function(event) {
  overlay = document.querySelector('.overlay');
  clickOverlay = document.querySelector('#click-overlay');

  buttons.logout = document.getElementById("logout");
  buttons.open = document.getElementById("open");
  buttons.delete = document.getElementById("delete");
  buttons.previous = document.getElementById("previous");
  buttons.move = document.getElementById("move");

  // Attach event listeners
  buttons.logout.addEventListener("click", logoutEvent);
  buttons.open.addEventListener("click", openEvent);
  buttons.move.addEventListener("click", moveEvent);

  templates.question = document.querySelector('#question-template');
  templates.info = document.querySelector('#info-template');
  templates.move = document.querySelector("#move-template");

  if (user.AllowEdit) {
    buttons.delete.addEventListener("click", deleteEvent);
  }

  let dropdownButtons = document.querySelectorAll('.action[data-dropdown]')
  Array.from(dropdownButtons).forEach(button => {
    button.addEventListener("click", event => {
      button.querySelector('ul').classList.toggle("active");
      clickOverlay.classList.add('active');

      clickOverlay.addEventListener('click', event => {
        button.querySelector('ul').classList.remove("active");
        clickOverlay.classList.remove('active');
      })
    });
  });

  overlay.addEventListener('click', event => {
    if (document.querySelector('.help.active')) {
      closeHelp(event);
      return;
    }

    closePrompt(event);
  })

  let mainActions = document.getElementById('main-actions');

  document.getElementById('more').addEventListener('click', event => {
    event.preventDefault();
    event.stopPropagation();

    clickOverlay.classList.add('active');
    mainActions.classList.add('active');

    clickOverlay.addEventListener('click', event => {
      mainActions.classList.remove('active');
      clickOverlay.classList.remove('active');
    })
  })

  setupSearch();
  return false;
});