219 lines
7.4 KiB
JavaScript
219 lines
7.4 KiB
JavaScript
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
|
// % RESPONSIVITY
|
|
|
|
// local debugging: print the name of every executed funtion to the console
|
|
var debug_responsivity_daniel = 0;
|
|
|
|
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.
|
|
|
|
function createGrid() {
|
|
if (debug_responsivity_daniel) {
|
|
console.log("%cfunction: createGrid", "color:white;background:olive");
|
|
}
|
|
|
|
// 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() {
|
|
if (debug_responsivity_daniel) {
|
|
console.log("%cfunction: determineViewportSize", "color:white;background:olive");
|
|
}
|
|
|
|
// 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() {
|
|
if (debug_responsivity_daniel) {
|
|
console.log("%cfunction: sizeChange", "color:white;background:olive");
|
|
}
|
|
|
|
determineViewportSize();
|
|
adjustGrid();
|
|
}
|
|
|
|
function adjustGrid() {
|
|
if (debug_responsivity_daniel) {
|
|
console.log("%cfunction: adjustGrid", "color:white;background:olive");
|
|
}
|
|
|
|
// 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 (menuMode) {
|
|
leftWidth = Math.min(100, MINWIDTH / width * 100);
|
|
style(0,leftWidth + "vw","100vh");
|
|
} else {
|
|
// we may want to switch to 90vh on safari ios (workaround)
|
|
style(0,"100vw","100vh");
|
|
}
|
|
|
|
|
|
if (elements[0].style.display == "inline-block") { // only graphics is visible
|
|
elements[0].style.display = "none"; // hide graphics
|
|
elements[1].style.display = "inline-block"; // show modules
|
|
elements[2].style.display = "none"; // hide parameters
|
|
} else if (elements[1].style.display == "inline-block") { // only modules are visible
|
|
elements[0].style.display = "inline-block"; // show graphics
|
|
elements[1].style.display = "none"; // hide modules
|
|
elements[2].style.display = "none"; // hide parameters
|
|
} else if (elements[2].style.display == "inline-block") { // only parameters are visible
|
|
elements[0].style.display = "none"; // hide graphics
|
|
elements[1].style.display = "inline-block"; // show modules
|
|
elements[2].style.display = "none"; // hide parameters
|
|
}
|
|
break;
|
|
case 2:
|
|
rightWidth = Math.min(50, MINWIDTH / width * 100);
|
|
leftWidth = 100 - rightWidth;
|
|
if (nRows == 1 || !window['showConsole']) {
|
|
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","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");
|
|
}
|
|
}
|
|
break;
|
|
case 3:
|
|
rightWidth = MINWIDTH / width * 100;
|
|
leftWidth = 100 - rightWidth;
|
|
if (nRows == 1 || !window['showConsole']) {
|
|
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","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");
|
|
}
|
|
}
|
|
break;
|
|
case 4:
|
|
rightWidth = MINWIDTH / width * 100;
|
|
leftWidth = 100 - 2 * rightWidth;
|
|
if (nRows == 1 || !window['showConsole']) {
|
|
style(0,leftWidth + "vw","100vh");
|
|
style(1,rightWidth + "vw","100vh");
|
|
if (window['showConsole']) {
|
|
style(2); // hide
|
|
style(3,rightWidth + "vw","100vh");
|
|
} else {
|
|
style(2,rightWidth + "vw","100vh");
|
|
style(3); // hide
|
|
}
|
|
} 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 (debug_responsivity_daniel) {
|
|
console.log("%cfunction: style", "color:white;background:olive");
|
|
}
|
|
|
|
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);
|