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 MINWIDTH = 400; // Minimal width of block.
var MINHEIGHT = 700; // Minimal height of block.
var MAXBLOCK = 4; // max number of blocks
var elements = []; // grid elements

function createGrid() {
    // Creates grid-elements.
    // 1 - graphics
    // 2 - modules
    // 3 - parameters
    // 4 - log
    var elements = [];
    for (var i = 0; i < 4; i++) {
        let element = document.createElement('div');
        element.classList.add("grid-element");
        element.classList.add("grid-element-"+i);

        let panel_background = document.createElement('div');
        panel_background.classList.add("panel");
        element.appendChild(panel_background);

        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;
    }
}

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;

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

    switch (nColumns) {
    case 1:
        if (showConsole) {
            if (showParams) {
                style(0); // hide
                style(1); // hide
                style(2,"100vw","50vh");
                style(3,"100vw","50vh");
            } else {
                style(0); // hide
                style(1,"100vw","50vh");
                style(2); // hide
                style(3,"100vw","50vh");
            } 
        } else {
            if (showParams) {
                style(0); // hide
                style(1); // hide
                style(2,"100vw","100vh");
                style(3); // hide
            } else {
                style(0); // hide
                style(1,"100vw","100vh");
                style(2); // hide
                style(3); // hide
            } 
        } 
        break;
    case 2:
    case 3:
        rightWidth = Math.min(50, MINWIDTH / width * 100);
        leftWidth = 100 - rightWidth;
        if (showConsole) {
            if (nRows == 1) {
                if (showParams) {
                    style(0,leftWidth + "vw","100vh");
                    style(1); // hide
                    style(2,rightWidth + "vw","50vh");
                    style(3,rightWidth + "vw","50vh");
                } else {
                    style(0,leftWidth + "vw","100vh");
                    style(1,rightWidth + "vw","50vh");
                    style(2); // hide
                    style(3,rightWidth + "vw","50vh");
                }
            } else {
                if (showParams) {
                    style(0,leftWidth + "vw","100vh");
                    style(1); // hide
                    style(2,rightWidth + "vw","50vh");
                    style(3,rightWidth + "vw","50vh");
                } else {
                    style(0,leftWidth + "vw","100vh");
                    style(1,rightWidth + "vw","50vh");
                    style(2); // hide
                    style(3,rightWidth + "vw","50vh");
                }
            }
        } else {
            if (nRows == 1) {
                if (showParams) {
                    style(0,leftWidth + "vw","100vh");
                    style(1); // hide
                    style(2,rightWidth + "vw","100vh");
                    style(3); // hide
                } else {
                    style(0,leftWidth + "vw","100vh");
                    style(1,rightWidth + "vw","100vh");
                    style(2); // hide
                    style(3); // hide
                }
            } else {
                if (showParams) {
                    style(0,leftWidth + "vw","100vh");
                    style(1); // hide
                    style(2,rightWidth + "vw","100vh");
                    style(3); // hide
                } else {
                    style(0,leftWidth + "vw","100vh");
                    style(1,rightWidth + "vw","100vh");
                    style(2); // hide
                    style(3); // hide
                }
            }
        }
         break;
    case 4:
        rightWidth = MINWIDTH / width * 100;
        leftWidth = 100 - 2 * rightWidth;
        if (showConsole) {
            style(0,leftWidth + "vw","100vh");
            style(1,rightWidth + "vw","50vh");
            style(2,rightWidth + "vw","50vh");
            style(3,100 - leftWidth + "vw","50vh");
        } else {
            style(0,leftWidth + "vw","100vh");
            style(1,rightWidth + "vw","100vh");
            style(2,rightWidth + "vw","100vh");
            style(3); // hide
        }
        break;
    default:
        break;
    }
}

function style(s, width, height) {
    if (width) {
        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);