start.ts

// Copyright 2017 Istituto Nazionale di Fisica Nucleare
//
// Licensed under the EUPL

import * as $ from "jquery";
import { DrawChart } from './drawChart';
import { DrawImage } from './drawImage';
import { Fs } from "./fs";
import * as Callback from "./callbacks";
import { Events } from "./events";
import "bootstrap-treeview";



//INIZIO DELLO SCRIPT
window.onload = () => {
  // skip the tooltip for the moment; it generates an apparently fatal error
  //$('[data-toggle="tooltip"]').tooltip();

  let fs = new Fs();
  let drawImage = new DrawImage();
  let drawChart = new DrawChart();

  new Events(drawImage,drawChart);

  //creazione dell'albero e gestione barre laterali
  setImportFile(drawImage, drawChart, fs);

  compressingSidenav();

  // enable drag&drop
  let droppableArea: any = document.querySelector('.droppable');
  makeDroppable(droppableArea, callback);

  drawImage.zPixel1 = { x: 0, y: 0 };
  drawImage.zPixel2 = { x: 0, y: 0 };
};

//funzione che definisce tutti gli elementi responsabili dell'apertura di un file.
//Sono definiti quindi l'albero e il bottone per l'importazione da locale
function setImportFile(drawImage: DrawImage, drawChart: DrawChart, fs: Fs) {

  // genero e leggo il contenuto della directory "filesystem"
  // comment out waiting to properly address the request
  let xmlDoc: Document;
  let xmlListingFile: any = new XMLHttpRequest();
  xmlListingFile.open("PROPFIND", "CHNET/", false);
  xmlListingFile.setRequestHeader("Depth", "infinity");
  xmlListingFile.onreadystatechange = function ()
  {
    if (xmlListingFile.readyState === 4) {
      if (xmlListingFile.status === 207) {
        let parser = new DOMParser();
        xmlDoc = parser.parseFromString(xmlListingFile.responseText, "text/xml");
      }
    }
  }
  xmlListingFile.send(null);
 
  
  //ora genero l'albero e definisco l'evento in caso di selezione di un nodo
  jQuery(document.getElementById('FileTreeview')).treeview({data: fs.generateTree(xmlDoc)});
  $('#FileTreeview').on('nodeSelected', function (e, node)
  {
    if (node['url'] != undefined) {
      $("#load-spinner").css("display", "inline");
      fs.openFileFromServer(node['url']);
    }
  });


  // import a local file
  let fileInputButton: any = document.getElementById("myImport");
  fileInputButton.onchange = function () {
    Callback.CallbackManager.getInstance().showElement("load-spinner", true);
    let file: File = fileInputButton.files[0];
    let readerObject = new FileReader();
    readerObject.onload = function () {
      let content: string = readerObject.result;
      let image: DrawImage = fs.readImage(drawImage, drawChart,content);
      Callback.CallbackManager.getInstance().showElement("load-spinner", false);
      drawImage.drawImg({ x: 0, y: 0 }, { x: image.width - 1, y: image.height - 1 }, 0, image.channelDepth,
        () => { Callback.CallbackManager.getInstance().closeBootstrapModel("btnCloseModal"); });
      drawChart.drawChart(image, { x: 0, y: 0 }, { x: image.width - 1, y: image.height - 1 }, 0, image.channelDepth);
      // install callbacks for the canvas and chart?
    };
    readerObject.readAsText(file);
  };
}

//funzione per la compressione della sidenav sx
function compressingSidenav() {
  let fsLabel = document.getElementById("collapse-symbol");
  let isClosedfs = false;
  let fsLabel_cross = () => {
    if (isClosedfs == true) {
      isClosedfs = false;
      console.log("closed");
      $(".w3-bar-block").css("width", "65px");
      $(".text-sidenav").css("display", "none");
      document.getElementById("collapse-symbol").title = "Open Sidebar";
      document.getElementById("collapse-symbol").classList.replace("fa-angle-double-left","fa-angle-double-right");
    
    } else {
      isClosedfs = true;
      $(".w3-bar-block").css("width", "200px");
      $(".text-sidenav").css("display", "inline");
      document.getElementById("collapse-symbol").title = "Close Sidebar";      
      document.getElementById("collapse-symbol").classList.replace("fa-angle-double-right","fa-angle-double-left");
    }
  };

  fsLabel.addEventListener("mousedown", fsLabel_cross, false);

}

//funzione che definisce l'area su cui si può eseguire il drag&drop
function makeDroppable(droppableArea, callback) {
  //creo l'elemento "input type file" non visibile e lo aggiungo a "droppableArea"
  let input: any = document.createElement("input");
  input.type = "file";
  input.multiple = true;
  input.style.display = "none";
  droppableArea.appendChild(input);

  //questo evento è chiamato quando i file sono trascinati ma non ancora lasciati
  droppableArea.addEventListener("dragover", function (e) {
    e.preventDefault(); //impediamo l'apertura del file
    e.stopPropagation();
    e.dataTransfer.dropEffect = "copy";
    droppableArea.classList.add("dragover");
  });

  //l'evento è chiamato quando un file lascia la zona predefinita per il drag&drop
  droppableArea.addEventListener("dragleave", function (e) {
    e.preventDefault();
    e.stopPropagation();
    droppableArea.classList.remove("dragover");
  });

  //questo evento si innesca quando il drop è effettivamente avvenuto
  droppableArea.addEventListener("drop", function (e) {
    e.preventDefault();
    e.stopPropagation();
    droppableArea.classList.remove("dragover");
    callback.call(null, e.dataTransfer.files);
  });
}

//funzione chiamata in caso di drag&drop responsabile dell'apertura del file droppato,
//della sua lettura e del passaggio del suo contenuto alla funzione readData()

function callback(files, drawImage: DrawImage, drawChart: DrawChart, fs: Fs) {
  Callback.CallbackManager.getInstance().showElement("load-spinner", true);
  let file: File = files[files.length - 1];
  console.log("Try to open " + file.name + " ...");
  let readerObject = new FileReader();
  readerObject.onload = function () {
    let content: string = readerObject.result;
    fs.readImage(drawImage, drawChart, content);
    Callback.CallbackManager.getInstance().showElement("load-spinner", false);
  };
  readerObject.readAsText(file);
}