nopaque/app/static/js/nopaque.js

var nopaque = {};


// nopaque ressources
nopaque.socket = io();

nopaque.corpora = undefined;
nopaque.corporaSubscribers = [];
nopaque.jobs = undefined;
nopaque.jobsSubscribers = [];

nopaque.foreignCorpora = undefined;
nopaque.foreignCorporaSubscribers = [];
nopaque.foreignJobs = undefined;
nopaque.foreignJobsSubscribers = [];


// nopaque functions
nopaque.forms = {};
nopaque.forms.init = function() {
  var abortRequestElement, progressElement, progressModal,
      progressModalElement, request;

  for (let form of document.querySelectorAll(".nopaque-job-form")) {
    request = new XMLHttpRequest();
    if (form.dataset.hasOwnProperty("progressModal")) {
      progressModalElement = document.getElementById(form.dataset.progressModal);
      progressModal = M.Modal.getInstance(progressModalElement);
      progressModal.options.dismissible = false;
      abortRequestElement = progressModalElement.querySelector(".abort-request");
      // just use request.abort?
      abortRequestElement.addEventListener("click", function() {request.abort();});
      progressElement = progressModalElement.querySelector(".determinate");
    }
    form.addEventListener("submit", function(event) {
      event.preventDefault();
      var formData, progressModalTitleElement;

      formData = new FormData(form);
      // Initialize progress modal
      if (progressModalElement) {
        progressModalTitleElement = progressModalElement.querySelector(".title");
        progressModalTitleElement.innerText = formData.get("title");
        progressElement.style.width = "0%";
        progressModal.open();
      }
      request.open("POST", window.location.href);
      request.send(formData);
    });
    request.addEventListener("load", function(event) {
      var fieldElement;

      if (request.status === 201) {
        window.location.href = JSON.parse(this.responseText).redirect_url;
      }
      if (request.status === 400) {
        for (let [field, errors] of Object.entries(JSON.parse(this.responseText))) {
          fieldElement = form.querySelector(`input[name="${field}"]`).closest(".input-field");
          for (let error of errors) {
            fieldElement.insertAdjacentHTML("beforeend", `<span class="helper-text red-text">${error}</span>`);
          }
        }
        if (progressModalElement) {
          progressModal.close();
        }
      }
      if (request.status === 500) {
        location.reload();
      }
    });
    if (progressModalElement) {
      request.upload.addEventListener("progress", function(event) {
        progressElement.style.width = Math.floor(100 * event.loaded / event.total).toString() + "%";
      });
    }
  }
}

nopaque.navigation = {};
nopaque.navigation.init = function() {
  for (let entry of document.querySelectorAll("#slide-out a:not(.subheader)")) {
    if (entry.href === window.location.href) {
      entry.parentNode.classList.add("active");
    }
  }
}


nopaque.toast = function(message, color="") {
  var toast;
  var toastActionElement;

  toast = M.toast({classes: color,
                   html: `<span>${message}</span>
                          <button data-action="close" class="btn-flat toast-action white-text">
                            <i class="material-icons">close</i>
                          </button>`});
  toastActionElement = toast.el.querySelector('.toast-action[data-action="close"]');
  if (toastActionElement) {
    toastActionElement.addEventListener("click", function() {
      toast.dismiss();
    });
  }
}


// socket event handlers
nopaque.socket.on("corpora_init", function(msg) {
  nopaque.corpora = JSON.parse(msg);
  for (let subscriber of nopaque.corporaSubscribers) {subscriber._init(nopaque.corpora);}
});


nopaque.socket.on("jobs_init", function(msg) {
  nopaque.jobs = JSON.parse(msg);
  for (let subscriber of nopaque.jobsSubscribers) {subscriber._init(nopaque.jobs);}
});


nopaque.socket.on("corpora_update", function(msg) {
  var patch;

  patch = JSON.parse(msg);
  nopaque.corpora = jsonpatch.apply_patch(nopaque.corpora, patch);
  for (let subscriber of nopaque.corporaSubscribers) {subscriber._update(patch);}
});


nopaque.socket.on("jobs_update", function(msg) {
  var patch;

  patch = JSON.parse(msg);
  nopaque.jobs = jsonpatch.apply_patch(nopaque.jobs, patch);
  for (let subscriber of nopaque.jobsSubscribers) {subscriber._update(patch);}
});


nopaque.socket.on("foreign_corpora_init", function(msg) {
  nopaque.foreignCorpora = JSON.parse(msg);
  for (let subscriber of nopaque.foreignCorporaSubscribers) {subscriber._init(nopaque.foreignCorpora);}
});


nopaque.socket.on("foreign_jobs_init", function(msg) {
  nopaque.foreignJobs = JSON.parse(msg);
  for (let subscriber of nopaque.foreignJobsSubscribers) {subscriber._init(nopaque.foreignJobs);}
});


nopaque.socket.on("foreign_corpora_update", function(msg) {
  var patch;

  patch = JSON.parse(msg);
  nopaque.foreignCorpora = jsonpatch.apply_patch(nopaque.foreignCorpora, patch);
  for (let subscriber of nopaque.foreignCorporaSubscribers) {subscriber._update(patch);}
});


nopaque.socket.on("foreign_jobs_update", function(msg) {
  var patch;

  patch = JSON.parse(msg);
  nopaque.foreignJobs = jsonpatch.apply_patch(nopaque.foreignJobs, patch);
  for (let subscriber of nopaque.foreignJobsSubscribers) {subscriber._update(patch);}
});


document.addEventListener("DOMContentLoaded", function() {
  M.AutoInit();
  M.CharacterCounter.init(document.querySelectorAll('input[data-length][type="text"]'));
  M.Dropdown.init(document.querySelectorAll("#nav-notifications, #nav-account"),
                  {alignment: "right", constrainWidth: false, coverTrigger: false});
  nopaque.forms.init();
  nopaque.navigation.init();
  nopaque.socket.emit("user_ressources_init");
});