linse/seweb
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
l_samenv
2020-12-04 09:05:06 +01:00
parent 172042e731
commit 9e1d3b4e07
54 changed files with 47695 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
client/jsFiles/SEAWebClientResponsivity.js Normal file
View File

@ -0,0 +1,151 @@
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
// % 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.
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.setAttribute("class", "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;
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 {
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) {
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";
}
function isTouchDevice() {
return !!('ontouchstart' in window)
|| !!('msmaxtouchpoints' in window.navigator);
};