start.ts

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

import * as $ from "jquery";
import G = require("./globals");
import * as fs from "./loaddir";
import * as img from "./draw";

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

  //creazione dell'albero e gestione barre laterali

  compressingSidenav();

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

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

//funzione per la compressione della sidenav sx
function compressingSidenav()
{
  let fsLabel = $('.sidebar-label');
  let isClosedfs = false;
  fsLabel.click(function () { fsLabel_cross(); });

  function fsLabel_cross()
  {
    if (isClosedfs == true) {
      isClosedfs = false;
      $('.w3-bar-block').css('width', "65px");
      $('.text-sidenav').css('display', 'none');
      $('#collapse-symbol').attr('title', 'Open Sidebar');
      $("#collapse-symbol").removeClass("fa-angle-double-left");
      $("#collapse-symbol").addClass("fa-angle-double-right");
    } else {
      isClosedfs = true;
      $('.w3-bar-block').css('width', "200px");
      $('.text-sidenav').css('display', 'inline');
      $('#collapse-symbol').attr('title', 'Close Sidebar');
      $("#collapse-symbol").removeClass("fa-angle-double-right");
      $("#collapse-symbol").addClass("fa-angle-double-left");
    }
  }

}

//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.setAttribute('type', 'file');
  input.setAttribute('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)
{

  $("#load-spinner").css("display", "inline");
  console.log("Try to open " + files[files.length - 1].name + " ...");
  let readerObject: any = new FileReader();
  readerObject.readAsBinaryString(files[files.length - 1]);
  readerObject.onload = function ()
  {
    let fileString: string = readerObject.result;
    fs.readData(fileString);
  }
}

//la funzione findPosition definisce la posizione del cursore del mouse
//relativa al canvas nel momento in cui avviene l'evento passato in input 
function findPosition(event: any, pixel: G.coordinates)
{

  let scrollTOP: number = (document.documentElement.scrollTop) ?
    document.documentElement.scrollTop : document.body.scrollTop;
  let scrollLEFT: number = (document.documentElement.scrollLeft) ?
    document.documentElement.scrollLeft : document.body.scrollLeft;
  let allX: number = event.clientX + scrollLEFT;
  let allY: number = event.clientY + scrollTOP;
  let elParent: any = document.getElementById('myCanvas');
  let objX: number = 0, objY: number = 0;
  while (elParent) {
    objX += elParent.offsetLeft;
    objY += elParent.offsetTop;
    elParent = elParent.offsetParent;
  }

  pixel.x = Math.floor((allX - objX - 1) / G.pixelDim) + G.newOrigin.x;
  pixel.y = Math.floor((allY - objY - 1) / G.pixelDim) + G.newOrigin.y;
}


//la funzione findPosDown memorizza la posizione del pixel cliccato
function findPosDown(event: any)
{

  findPosition(event, G.zPixel1);

}

//la funzione findPosUp memorizza la posizione del pixel quando il mouse viene
//rilasciato, ordina le coordinate, aggiorna l'origine e la pagina.
function findPosUp(event: any)
{

  findPosition(event, G.zPixel2);
  let tmp: number;
  if (G.zPixel1.x > G.zPixel2.x) {
    tmp = G.zPixel1.x;
    G.zPixel1.x = G.zPixel2.x;
    G.zPixel2.x = tmp;
  }
  if (G.zPixel1.y > G.zPixel2.y) {
    tmp = G.zPixel1.y;
    G.zPixel1.y = G.zPixel2.y;
    G.zPixel2.y = tmp;
  }
  //se è stato cliccato un punto disegno il grafico, altrimenti disegno anche il
  //canvas e aggiorno l'origine
  //alert(G.zPixel1.xp + ", " + G.zPixel1.yp + " - " + G.zPixel2.xp + ", " + G.zPixel2.yp);
  if (G.zPixel1.x != G.zPixel2.x || G.zPixel1.y != G.zPixel2.y) {
    G.newOrigin = { x: G.zPixel1.x, y: G.zPixel1.y };
    img.drawImg(G.zPixel1, G.zPixel2, G.globalxMinRange, G.globalxMaxRange);
  }
  img.drawChart(G.zPixel1, G.zPixel2, G.globalxMinRange, G.globalxMaxRange);

}