seweb/client/jsFiles/SEAWebClientResponsivity.js

// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
// % RESPONSIVITY

var nColumns = 1; // Viewport is subdivided in nColumns columns.
var nRows = 1; // Viewport is subdivided in nRows rows.
var gridCountGraphics = 2; // Number of displayed graphics-swipers.
var MINWIDTH = 400; // Minimal width of block.
var MINHEIGHT = 700; // Minimal height of block.
let paramSlider = [0,1,2,3];  // the number of the parameter slider to open
let prevActiveSlider = 0;

function createGrid() {
    // Creates grid-elements. By default only the first one is shown
    // and
    // takes the whole viewport.
    var elements = [];
    for (var i = 0; i < 4; i++) {
        var element = document.createElement('div');
        element.classList.add("grid-element");
        document.getElementById("center").appendChild(element);
        elements.push(element);
    }
    return elements;
}

function determineViewportSize() {
    // Number of columns 'nColumns' and rows 'nRows' is determined depending on available
    // viewport-size.

    var width = window.innerWidth || document.documentElement.clientWidth
            || document.body.clientWidth;
    var height = window.innerHeight || document.documentElement.clientHeight
            || document.body.clientHeight;
    nColumns = 1;
    if (width > MINWIDTH * 1.8) {
        nColumns = 2;
    }
    if (width > MINWIDTH * 2.5) {
        nColumns = 3;
    }
    if (width > MINWIDTH * 3.5) {
        nColumns = 4;
    }
    nRows = 1;
    if (height > MINHEIGHT) {
        nRows = 2;
    }
    if (menuMode) {
      nRows = 1;
      nColumns = 1;
    }
}

function sizeChange() {
    determineViewportSize();
    adjustGrid();
}

function adjustGrid() {
    // Determines size of grid-elements depending on number of columns 'nColumns' and
    // rows 'nRows'

    var width = window.innerWidth || document.documentElement.clientWidth
            || document.body.clientWidth;
    var height = window.innerHeight || document.documentElement.clientHeight
            || document.body.clientHeight;
    paramSlider = [0,1,2,3];
    prevActiveSlider = 0;

    if (window["hideRightPart"] || window["wideGraphs"]){
        style(0,"100vw","100vh");
        style(1); // hide
        style(2); // hide
        style(3); // hide
        return
    }

    switch (nColumns) {
    case 1:
        if (menuMode) {
          leftWidth = Math.min(100, MINWIDTH / width * 100);
          style(0,leftWidth + "vw","100vh");
          style(1); // hide
          style(2); // hide
          style(3); // hide
        } else {
        // we may want to switch to 90vh on safari ios (workaround)
          style(0,"100vw","100vh");
          style(1); // hide
          style(2); // hide
          style(3); // hide
        }
        break;
    case 2:
        rightWidth = Math.min(50, MINWIDTH / width * 100);
        leftWidth = 100 - rightWidth;
        if (nRows == 1) {
            style(0,leftWidth + "vw","100vh");
            style(1,rightWidth + "vw","100vh");
            style(2); // hide
            style(3); // hide
        } else {
            style(0,leftWidth + "vw","100vh");
            style(1,rightWidth + "vw","50vh");
            style(2); // hide
            style(3,rightWidth + "vw","50vh");
        }
         break;
    case 3:
        rightWidth = MINWIDTH / width * 100;
        leftWidth = 100 - rightWidth;
        if (nRows == 1) {
            style(0,leftWidth + "vw","100vh");
            style(1,rightWidth + "vw","100vh");
            style(2); // hide
            style(3); // hide
        } else {
            style(0,leftWidth + "vw","100vh");
            style(1,rightWidth + "vw","50vh");
            style(2); // hide
            style(3,rightWidth + "vw","50vh");
        }
        break;
    case 4:
        rightWidth = MINWIDTH / width * 100;
        leftWidth = 100 - 2 * rightWidth;
        if (nRows == 1) {
            style(0,leftWidth + "vw","100vh");
            style(1,rightWidth + "vw","100vh");
            style(2); // hide
            style(3,rightWidth + "vw","100vh");
        } else {
            style(0,leftWidth + "vw","100vh");
            style(1,rightWidth + "vw","50vh");
            style(2,rightWidth + "vw","50vh");
            style(3,(2 * rightWidth) + "vw","50vh");
        }
        break;
    default:
        break;
    }
}

function style(s, width, height) {
    if (width) {
        paramSlider[prevActiveSlider] = s;
        prevActiveSlider = s;
        elements[s].style.display = "inline-block";
        elements[s].style.width = width;
    } else {
        elements[s].style.display = "none";
    }
    if (height) {
        elements[s].style.height = height;
    }
    elements[s].style.float = "left";
}

let isTouchDevice = !!('ontouchstart' in window) || !!('msmaxtouchpoints' in window.navigator);