Änderungen für den Modul- und denParameterblock
This commit is contained in:
Daniel
@ -35,7 +35,7 @@
|
||||
<!-- CSS-Files -->
|
||||
<link rel="stylesheet" href="externalFiles/alertify.css">
|
||||
<!-- <link rel="stylesheet" href="externalFiles/swiper-bundle.min.css"> -->
|
||||
<link rel="stylesheet" href="cssFiles/SEAWebClientSwiper.css">
|
||||
<!-- <link rel="stylesheet" href="cssFiles/SEAWebClientSwiper.css"> -->
|
||||
<link rel="stylesheet" href="cssFiles/SEAWebClientGroup.css">
|
||||
<link rel="stylesheet" href="cssFiles/SEAWebClientConsole.css">
|
||||
<link rel="stylesheet" href="cssFiles/SEAWebClientGraphics.css">
|
||||
@ -55,7 +55,7 @@
|
||||
<!-- <script src="externalFiles/chartjs-zoom.js"></script> -->
|
||||
<script src="jsFiles/SEAWebClientLocalStorage.js"></script>
|
||||
<script src="jsFiles/SEAWebClientResponsivity.js"></script>
|
||||
<script src="jsFiles/SEAWebClientSwiper.js"></script>
|
||||
<!-- <script src="jsFiles/SEAWebClientSwiper.js"></script> -->
|
||||
<script src="jsFiles/SEAWebClientGroup.js"></script>
|
||||
<script src="jsFiles/SEAWebClientConsole.js"></script>
|
||||
<script src="jsFiles/SEAWebClientGraphics.js"></script>
|
||||
|
||||
@ -88,7 +88,12 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.col-right {
|
||||
.col-right-modules {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
.col-right-parameters {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@ -101,13 +106,16 @@
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
/* ------------------------------ modules-icons ------------------------------ */
|
||||
|
||||
.modules-icon {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
line-height: 16px;
|
||||
margin-right: 4px;
|
||||
opacity: .8;
|
||||
text-align: top;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* ------------------------------ status-icon ------------------------------ */
|
||||
@ -115,8 +123,7 @@
|
||||
.status-icon {
|
||||
border-radius: 50%;
|
||||
background-color: lightgray;
|
||||
opacity: .8;
|
||||
/* box-shadow: -2px -2px 5px inset; */
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.status-icon-idle {
|
||||
@ -156,6 +163,33 @@
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
/* ------------------------------ value ------------------------------ */
|
||||
|
||||
.col-right-parameters-value {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
/* ------------------------------ edit-icon ------------------------------ */
|
||||
|
||||
.edit-icon {
|
||||
/* position: absolute; */
|
||||
/* right: 0; */
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.edit-icon:hover {
|
||||
transform: scale(.8);
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
/* ------------------------------ hidden-input_element ------------------------------ */
|
||||
|
||||
.hidden-input-element {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
|
||||
/* TEXT */
|
||||
.input-text {
|
||||
|
||||
@ -153,6 +153,27 @@ meta, body {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
|
||||
/* PANEL */
|
||||
.panel {
|
||||
background-color: #303030;
|
||||
/* position: absolute; */
|
||||
z-index: 20;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
}
|
||||
.panel:not(.graphics) {
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 6px 6px 6px 6px;
|
||||
}
|
||||
|
||||
.panel.graphics{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
|
||||
/* CLOSE CROSS */
|
||||
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
@CHARSET "UTF-8";
|
||||
|
||||
/* This file is obsolete because the swoiper was removed */
|
||||
|
||||
.swiper-container-main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
||||
// % COMMUNICATION
|
||||
|
||||
// local debugging: print the name of every executed funtion to the console
|
||||
var debug_communication_daniel = 0;
|
||||
|
||||
var timeoutID; // We need this ID to reset the timer every 30 seconds
|
||||
|
||||
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
||||
@ -11,10 +8,6 @@ var timeoutID; // We need this ID to reset the timer every 30 seconds
|
||||
|
||||
|
||||
function buildUpdateConnection() {
|
||||
if (debug_communication_daniel) {
|
||||
console.log("%cfunction: buildUpdateConnection", "color:white;background:darkblue");
|
||||
}
|
||||
|
||||
// Establishes server-sent-event-connection, which is used for all sorts of
|
||||
// updates and exists as long as the client is running.
|
||||
// Executed at program start (see also SEAWebClientMain.js).
|
||||
@ -62,12 +55,7 @@ function buildUpdateConnection() {
|
||||
}
|
||||
|
||||
function handleUpdateMessage(src, message) {
|
||||
if (debug_communication_daniel) {
|
||||
console.log("%cfunction: handleUpdateMessage", "color:white;background:darkblue");
|
||||
}
|
||||
|
||||
// Handles incoming SSE-messages depending on type of message.
|
||||
|
||||
if (debugCommunication > 1) {
|
||||
console.log("%cfrom server (SSE): " + message.type,
|
||||
"color:white;background:lightgray", message);
|
||||
@ -183,10 +171,6 @@ function handleUpdateMessage(src, message) {
|
||||
}
|
||||
|
||||
function htmlEscape(str) {
|
||||
if (debug_communication_daniel) {
|
||||
console.log("%cfunction: htmlEscape", "color:white;background:darkblue");
|
||||
}
|
||||
|
||||
str = "" + str;
|
||||
if (!str) return "";
|
||||
return str.replace(/&/g, '&').replace(/"/g, '"').replace(/'/g,
|
||||
@ -194,10 +178,6 @@ function htmlEscape(str) {
|
||||
}
|
||||
|
||||
function resetTimer(src) {
|
||||
if (debug_communication_daniel) {
|
||||
console.log("%cfunction: resetTimer", "color:white;background:darkblue");
|
||||
}
|
||||
|
||||
// Executed every time a heartbeat-message is obtained.
|
||||
// If no heartbeat-messages are obtained for a certain amount of time,
|
||||
// an error-message is thrown.
|
||||
@ -213,10 +193,6 @@ function resetTimer(src) {
|
||||
}
|
||||
|
||||
function updateValues(message, src) {
|
||||
if (debug_communication_daniel) {
|
||||
console.log("%cfunction: updateValues", "color:white;background:darkblue");
|
||||
}
|
||||
|
||||
// Handles changes of parameter-values
|
||||
for (var i = 0; i < message.updates.length; i++) {
|
||||
let component = message.updates[i];
|
||||
@ -226,12 +202,17 @@ function updateValues(message, src) {
|
||||
// Check for status updates
|
||||
if (component.name.split(":")[1] == 'status') {
|
||||
updateStatus(component);
|
||||
|
||||
}
|
||||
|
||||
for (var j = 0; j < matches.length; j++) {
|
||||
let elem = matches[j];
|
||||
let type = elem.__ctype__; // -> Show Dom-Properties
|
||||
|
||||
// let text = htmlEscape(component.formatted);
|
||||
// if (text) {
|
||||
// elem.innerHTML = text;
|
||||
// }
|
||||
|
||||
if (type == "rdonly" || type == "rdlink") {
|
||||
let text = htmlEscape(component.formatted);
|
||||
if (text) {
|
||||
@ -268,9 +249,6 @@ function updateValues(message, src) {
|
||||
}
|
||||
|
||||
function updateStatus(component) {
|
||||
if (debug_communication_daniel) {
|
||||
console.log("%cfunction: updateStatus", "color:white;background:darkblue");
|
||||
}
|
||||
let matches = document.getElementsByName(component.name);
|
||||
let status_icon = matches[0];
|
||||
let row = status_icon.closest(".row");
|
||||
@ -310,10 +288,6 @@ function updateStatus(component) {
|
||||
// XMLHttpRequest
|
||||
|
||||
function reqJSON(s, url, successHandler, errorHandler) {
|
||||
if (debug_communication_daniel) {
|
||||
console.log("%cfunction: reqJSON", "color:white;background:darkblue");
|
||||
}
|
||||
|
||||
var xhr = typeof XMLHttpRequest != 'undefined' ? new XMLHttpRequest()
|
||||
: new ActiveXObject('Microsoft.XMLHTTP');
|
||||
if (debugCommunication) {
|
||||
@ -340,10 +314,6 @@ function reqJSON(s, url, successHandler, errorHandler) {
|
||||
}
|
||||
|
||||
function reqJSONPOST(s, url, parameters, successHandler, errorHandler) {
|
||||
if (debug_communication_daniel) {
|
||||
console.log("%cfunction: reqJSONPOST", "color:white;background:darkblue");
|
||||
}
|
||||
|
||||
var xhr = typeof XMLHttpRequest != 'undefined' ? new XMLHttpRequest()
|
||||
: new ActiveXObject('Microsoft.XMLHTTP');
|
||||
if (debugCommunication) {
|
||||
@ -370,12 +340,7 @@ function reqJSONPOST(s, url, parameters, successHandler, errorHandler) {
|
||||
xhr.send(parameters);
|
||||
}
|
||||
|
||||
|
||||
function successHandler(s, message) {
|
||||
if (debug_communication_daniel) {
|
||||
console.log("%cfunction: successHandler", "color:white;background:darkblue");
|
||||
}
|
||||
|
||||
// Handles incoming XMLHttp-messages depending on type of message.
|
||||
if (debugCommunication) {
|
||||
console.log("%cfrom server (reqJSON): " + message.type,
|
||||
@ -386,12 +351,12 @@ function successHandler(s, message) {
|
||||
case "draw":
|
||||
if (message.path == "main") {
|
||||
// Happens only initially or at device change.
|
||||
appendToGridElement(1, message.title, "main", createContent(1, message));
|
||||
appendToGridElement(2, "", "parameters", createContent(2, {components:[]}));
|
||||
appendToGridElement(1, message.title, "main", createContent(message));
|
||||
// appendToGridElement(2, "", "parameters", createContent({components:[]}));
|
||||
} else {
|
||||
// In the module-block a parameter was selected
|
||||
// -> write parameter-block to grid-element2
|
||||
isl = appendToGridElement(2, message.title, 'parameters', createContent(2, message));
|
||||
isl = appendToGridElement(2, message.title, 'parameters', createContent(message));
|
||||
if (nColumns == 1) {
|
||||
elements[1].style.display = "none"; // hide modules
|
||||
elements[2].style.display = "inline-block"; // show parameters
|
||||
@ -487,10 +452,6 @@ function successHandler(s, message) {
|
||||
}
|
||||
|
||||
function errorHandler(status) {
|
||||
if (debug_communication_daniel) {
|
||||
console.log("%cfunction: errorHandler", "color:white;background:darkblue");
|
||||
}
|
||||
|
||||
if (debugCommunication) {
|
||||
console.log("error", status);
|
||||
}
|
||||
|
||||
@ -1021,17 +1021,6 @@ let graphs = (function (){
|
||||
let f = 0;
|
||||
appendToGridElement(f, " ", "graphics", container);
|
||||
|
||||
// let currentSwiper = swiper[f];
|
||||
|
||||
// function setSlidingMode(mode) {
|
||||
// currentSwiper.params.noSwipingClass = mode ? "allow-swipe" : "swiper-slide-main";
|
||||
// }
|
||||
|
||||
// currentSwiper.enableSwiping(false);
|
||||
// currentSwiper.on('reachBeginning', function () {
|
||||
// currentSwiper.enableSwiping(false);
|
||||
// })
|
||||
|
||||
let graphicsPanel = container.parentNode.querySelector('.panel')
|
||||
graphicsPanel.classList.add('graphics');
|
||||
graphicsPanel.childNodes[0].style.visibility = "hidden"; // hides the span added by the swippers
|
||||
|
||||
@ -1,37 +1,23 @@
|
||||
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
||||
// % GROUP
|
||||
|
||||
// local debugging: print the name of every executed funtion to the console
|
||||
var debug_group_daniel = 0;
|
||||
|
||||
var writePermissionTimeout; // Sets writePermission to 'false,
|
||||
// restarts by user-interaction.
|
||||
|
||||
var prompt = false // True while a prompt is opened.
|
||||
|
||||
function getGroup(s, name) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: getGroup", "color:white;background:salmon");
|
||||
}
|
||||
console.log('name: ',name, ', id: '.ClientID);
|
||||
reqJSON(s, "http://" + hostPort + "/getblock?path=" + name
|
||||
+ "&id=" + clientID, successHandler, errorHandler);
|
||||
}
|
||||
|
||||
function sendCommand(s, command) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: sendCommand", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
reqJSON(s, "http://" + hostPort + "/sendcommand?command=" + encodeURIComponent(command)
|
||||
+ "&id=" + clientID, successHandler, errorHandler);
|
||||
}
|
||||
|
||||
function createContent(s, message) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: createContent", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
function createContent(message) {
|
||||
// Depending on the message received from the server the content of the
|
||||
// group is created dynamically. Handles draw-message.
|
||||
|
||||
@ -42,110 +28,37 @@ function createContent(s, message) {
|
||||
var component = message.components[i];
|
||||
if (!("title" in component))
|
||||
component.title = component.name;
|
||||
if (!("command" in component))
|
||||
if (!("command" in component))
|
||||
component.command = component.name;
|
||||
createFunc = window['create_' + component.type + '_row']
|
||||
if (createFunc) {
|
||||
let row = createFunc(s, component);
|
||||
|
||||
if (message.title == 'modules') {
|
||||
let row = create_row_for_modules(component);
|
||||
content.appendChild(row);
|
||||
} else {
|
||||
let row = create_row_for_parameters(component);
|
||||
content.appendChild(row);
|
||||
}
|
||||
}
|
||||
return content;
|
||||
}
|
||||
|
||||
function gotoGroups(slideNames) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: gotoGroups", "color:white;background:salmon");
|
||||
}
|
||||
/* ---------------------------------------------------------------------------------- */
|
||||
|
||||
slideNames = slideNames.split("%20");
|
||||
var l = Math.min(MAXBLOCK,slideNames.length);
|
||||
document.title = "SEA "+ clientTitle + " " + slideNames.join(" ");
|
||||
for (var s=0; s<l; s++) {
|
||||
getGroup(s, slideNames[s]);
|
||||
}
|
||||
}
|
||||
|
||||
function create_group_row(s, component) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: create_group_row", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
// Creates row-element containing link.
|
||||
var title = component.title;
|
||||
|
||||
var row = document.createElement('row');
|
||||
row.id = component.name;
|
||||
row.name = title;
|
||||
row.classList.add("interactive", "row", "link");
|
||||
row.tabIndex = "0";
|
||||
|
||||
row.onclick = function () {
|
||||
var slideNames = getSlideNames();
|
||||
slideNames[s] = component.name;
|
||||
document.title = "SEA "+ clientTitle + " " + slideNames.join(" ");
|
||||
history.pushState({func: "gotoGroups", funarg: slideNames.join("%20")}, document.title, "#" + slideNames.join("%20"));
|
||||
getGroup(s, component.name);
|
||||
}
|
||||
|
||||
if (title === "console" || title === "device config") {
|
||||
row.classList.add("interactive", "row", "link", "link-static");
|
||||
row.innerHTML = "console";
|
||||
}
|
||||
row.innerHTML = title;
|
||||
return row;
|
||||
}
|
||||
|
||||
function create_rdonly_row(s, component) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: create_rdonly_row", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
function create_row_for_modules(component) {
|
||||
// Creates row-element containing link AND read-only-item.
|
||||
let name = component.name;
|
||||
let status = component.statusname;
|
||||
|
||||
var link = component.link;
|
||||
if (!link) // simple rdonly
|
||||
return appendToContent(component, createTitle(component),
|
||||
createParElement(component));
|
||||
|
||||
// with link
|
||||
var left = document.createElement('a');
|
||||
left.classList.add("col-left");
|
||||
left.innerHTML = component.title;
|
||||
|
||||
left.id = component.name;
|
||||
left.name = component.title;
|
||||
left.classList.add("interactive", "link");
|
||||
|
||||
row = appendToContent(component, left, createParElement(component));
|
||||
row.onclick = function () {
|
||||
this.style.backgroundColor = "orangered";
|
||||
left.click();
|
||||
}
|
||||
if (link.charAt(0) == ':') {
|
||||
left.href = "http://" + location.hostname + link + "/";
|
||||
} else {
|
||||
left.href = link;
|
||||
}
|
||||
|
||||
row.classList.add("row", "clickable");
|
||||
return row;
|
||||
}
|
||||
|
||||
function create_rdlink_row(s, component) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: create_rdlink_row", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
// Creates row-element containing link AND read-only-item.
|
||||
|
||||
var name = component.name;
|
||||
var status = component.statusname;
|
||||
|
||||
var left = createTitle(component, 1);
|
||||
let left = createTitle(component, 1);
|
||||
left.id = component.name;
|
||||
left.name = component.title; // or setAttribute('name'.. ?
|
||||
let row = appendToContent(component, left, createParElement(component));
|
||||
let right = createParElement(component);
|
||||
let edit = document.createElement('img');
|
||||
edit.setAttribute('src', 'res/icon_edit.png');
|
||||
edit.classList.add('modules-icon');
|
||||
edit.classList.add('edit-icon');
|
||||
let row = appendToContent(component, left, right, edit);
|
||||
row.onclick = function () {
|
||||
getGroup(s, component.title);
|
||||
}
|
||||
@ -153,13 +66,330 @@ function create_rdlink_row(s, component) {
|
||||
return row;
|
||||
}
|
||||
|
||||
function create_pushbutton_row(s, component) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: create_pushbutton_row", "color:white;background:salmon");
|
||||
function create_row_for_parameters(component) {
|
||||
let left = createTitle(component);
|
||||
let right = document.createElement('span');
|
||||
right.classList.add('col-right-parameters');
|
||||
let value = document.createElement('span');
|
||||
value.classList.add('rdonly');
|
||||
value.setAttribute('name', component.name);
|
||||
value.__ctype__ = 'rdonly';
|
||||
right.appendChild(value);
|
||||
|
||||
if (component.type == 'input' ||
|
||||
component.type == 'pushbutton' ||
|
||||
component.type == 'checkbox' ||
|
||||
component.type == 'enum'
|
||||
) {
|
||||
value.classList.add('col-right-parameters-value');
|
||||
let edit = document.createElement('img');
|
||||
edit.setAttribute('src', 'res/icon_edit.png');
|
||||
edit.classList.add('modules-icon');
|
||||
edit.classList.add('edit-icon');
|
||||
createFunc = window['create_' + component.type]
|
||||
let hidden_elem = createFunc(component);
|
||||
hidden_elem.classList.add('hidden-input-element');
|
||||
edit.onclick = function () {
|
||||
hidden_elem.classList.toggle('hidden-input-element');
|
||||
}
|
||||
right.appendChild(edit);
|
||||
right.appendChild(hidden_elem);
|
||||
}
|
||||
return appendToContent(component, left, right);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------------- */
|
||||
// input elements
|
||||
|
||||
function create_pushbutton(component) {
|
||||
// Creates row-element containing a push button
|
||||
var name = component.name;
|
||||
var command = component.command;
|
||||
var elem = createParElement(component);
|
||||
elem.classList.add("clickable", "push-button");
|
||||
elem.onclick = function () {
|
||||
// if (writePermission) {
|
||||
let row = elem.closest('div');
|
||||
elem.style.backgroundColor = "orangered";
|
||||
// Request for command
|
||||
sendCommand(s, command);
|
||||
// } else {
|
||||
// prompt = true;
|
||||
// alertify.confirm("", "You are connected with <b>" + clientTitle
|
||||
// + "</b>. <br>"
|
||||
// + "Are you sure you want to modify things here?",
|
||||
// function () {
|
||||
// // User decided to proceed.
|
||||
// writePermission = true;
|
||||
// writePermissionTimeout = setTimeout(function () {
|
||||
// writePermission = false;
|
||||
// }, 3600000);
|
||||
// let row = elem.closest('div');
|
||||
// row.style.backgroundColor = "orangered";
|
||||
// // Request for command
|
||||
// sendCommand(s, command);
|
||||
// prompt = false;
|
||||
// }, function () {
|
||||
// // User decided to cancel
|
||||
// prompt = false;
|
||||
// });
|
||||
// }
|
||||
}
|
||||
return elem;
|
||||
}
|
||||
|
||||
function create_input(component) {
|
||||
// Creates row-element containing input-item.
|
||||
var name = component.name;
|
||||
var command = component.command;
|
||||
var input = createParElement(component, 'input', 'input-text');
|
||||
input.type = "text";
|
||||
input.style.width = "100px";
|
||||
input.addEventListener("focus", function(evt) {
|
||||
let elm = evt.target;
|
||||
setTimeout(function(){elm.setSelectionRange(0, elm.value.length);},0);
|
||||
});
|
||||
|
||||
input.onkeydown = function (e) {
|
||||
if (e.which === 27 || e.key == "Escape") {
|
||||
// User decided to cancel
|
||||
input.value = intput.oldValue;
|
||||
resizeTextfield(input);
|
||||
var row = input.closest('div');
|
||||
row.style.backgroundColor = "white";
|
||||
}
|
||||
}
|
||||
|
||||
// Creates row-element containing a push button
|
||||
input.onfocus = function () {
|
||||
input.oldValue = input.value;
|
||||
|
||||
if (isTouchDevice)
|
||||
setTimeout(function () {
|
||||
posTextfield(s, left);
|
||||
}, 1);
|
||||
}
|
||||
|
||||
input.onblur = function () {
|
||||
if (prompt) {
|
||||
return false;
|
||||
}
|
||||
var row = input.closest('div');
|
||||
var value = input.value;
|
||||
let oldValue = 'oldValue' in input ? input.oldValue : value;
|
||||
if (!('actualValue' in input)) input.actualValue = oldValue;
|
||||
actualValue = input.actualValue;
|
||||
if (value == actualValue || value == oldValue ||
|
||||
parseFloat(value) == parseFloat(actualValue) || parseFloat(value) == parseFloat(oldValue)) {
|
||||
input.value = actualValue;
|
||||
// nothing to do.
|
||||
row.style.backgroundColor = "white";
|
||||
return false;
|
||||
}
|
||||
// User changed value and moved focus to other object.
|
||||
alertify.confirm("", "You changed a field without pressing the return key.<br>"
|
||||
+ "Hint: press ESC for leaving a field unchanged.<b>"
|
||||
+ "You are connected with <b>" + clientTitle + "</b>.<br>"
|
||||
+ "Are you sure you want to change the value of<br><b>"
|
||||
+ name + "</b> from <b>" + actualValue
|
||||
+ "</b> to <b>" + value + "</b>?", function () {
|
||||
// User decided to proceed.
|
||||
// writePermission = true;
|
||||
// writePermissionTimeout = setTimeout(function () {
|
||||
// writePermission = false;
|
||||
// }, 3600000);
|
||||
row.style.backgroundColor = "orangered";
|
||||
// Request for command
|
||||
sendCommand(s, command + " " + value);
|
||||
resizeTextfield(input);
|
||||
prompt = false;
|
||||
input.closest('form').classList.toggle('hidden-input-element');
|
||||
}, function () {
|
||||
// User decided to cancel
|
||||
input.value = input.actualValue;
|
||||
resizeTextfield(input);
|
||||
row.style.backgroundColor = "white";
|
||||
prompt = false;
|
||||
input.closest('form').classList.toggle('hidden-input-element');
|
||||
});
|
||||
}
|
||||
|
||||
var form = document.createElement('form');
|
||||
form.onsubmit = function (e) {
|
||||
e.preventDefault();
|
||||
// if (writePermission) {
|
||||
var row = form.closest('div');
|
||||
row.style.backgroundColor = "orangered";
|
||||
// Request for command
|
||||
input.actualValue = input.value;
|
||||
sendCommand(s, name + " " + input.value);
|
||||
input.blur();
|
||||
form.classList.toggle('hidden-input-element');
|
||||
// } else {
|
||||
// var value = input.value
|
||||
// prompt = true;
|
||||
// alertify.confirm("", "You are connected with <b>" + clientTitle
|
||||
// + "</b>. <br>"
|
||||
// + "Are you sure you want to modify things here?",
|
||||
// function () {
|
||||
// // User decided to proceed.
|
||||
// writePermission = true;
|
||||
// writePermissionTimeout = setTimeout(function () {
|
||||
// writePermission = false;
|
||||
// }, 3600000);
|
||||
// var row = form.closest('div');
|
||||
// row.style.backgroundColor = "orangered";
|
||||
// input.actualValue = value;
|
||||
// // Request for command
|
||||
// sendCommand(s, command + " " + value);
|
||||
// resizeTextfield(input);
|
||||
// prompt = false;
|
||||
// }, function () {
|
||||
// // User decided to cancel
|
||||
// input.value = input.oldValue;
|
||||
// resizeTextfield(input);
|
||||
// prompt = false;
|
||||
// });
|
||||
// }
|
||||
};
|
||||
form.appendChild(input);
|
||||
return form;
|
||||
|
||||
function posTextfield(s, left) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: posTextfield", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
// var content = swiper[s].slides[swiper[s].activeIndex].childNodes[1];
|
||||
// var row = left.parentNode;
|
||||
// content.scrollTop = row.offsetTop - 30;
|
||||
|
||||
// ---------------------> Not working anymore since swiper was removed!!!
|
||||
}
|
||||
}
|
||||
|
||||
function create_checkbox(component) {
|
||||
// Creates row-element containing checkbox-item
|
||||
var command = component.command;
|
||||
var input = createParElement(component, 'input', 'parameter-checkbox');
|
||||
input.type = "checkbox";
|
||||
input.onkeyup = function (e) {
|
||||
if (e.keyCode === 32) {
|
||||
handleCheckbox();
|
||||
}
|
||||
}
|
||||
|
||||
var label = document.createElement('label');
|
||||
label.for = input;
|
||||
label.classList.add("parameter-label");
|
||||
|
||||
label.onclick = function () {
|
||||
handleCheckbox();
|
||||
}
|
||||
|
||||
function handleCheckbox() {
|
||||
// if (writePermission) {
|
||||
var row = input.closest('div');
|
||||
row.style.backgroundColor = "orangered";
|
||||
if (input.checked) {
|
||||
var value = "0";
|
||||
input.checked = false;
|
||||
} else {
|
||||
var value = "1";
|
||||
input.checked = true;
|
||||
}
|
||||
// Request for command
|
||||
sendCommand(s, command + " " + value);
|
||||
input.closest('span').classList.toggle('hidden-input-element');
|
||||
// } else {
|
||||
// alertify.confirm("", "You are connected with <b>" + clientTitle
|
||||
// + "</b>. <br>"
|
||||
// + "Are you sure you want to modify things here?",
|
||||
// function () {
|
||||
// // User decided to proceed.
|
||||
// writePermission = true;
|
||||
// writePermissionTimeout = setTimeout(function () {
|
||||
// writePermission = false;
|
||||
// }, 3600000);
|
||||
// var row = input.closest('div');
|
||||
// row.style.backgroundColor = "orangered";
|
||||
// if (input.checked) {
|
||||
// var value = "0";
|
||||
// input.checked = false;
|
||||
// } else {
|
||||
// var value = "1";
|
||||
// input.checked = true;
|
||||
// }
|
||||
// // Request for command
|
||||
// sendCommand(s, command + " " + value);
|
||||
// }, function () {
|
||||
// // User decided to cancel
|
||||
// });
|
||||
// }
|
||||
};
|
||||
|
||||
var right = document.createElement('span');
|
||||
right.appendChild(input);
|
||||
right.appendChild(label);
|
||||
return right;
|
||||
}
|
||||
|
||||
function create_enum(component) {
|
||||
// Creates row-element containing dropdown-selection.
|
||||
var name = component.name;
|
||||
var command = component.command;
|
||||
var buttons = component.enum_names;
|
||||
var select = createParElement(component, 'select', 'select-params');
|
||||
select.onfocus = function () {
|
||||
select.oldIndex = select.selectedIndex;
|
||||
}
|
||||
|
||||
select.oninput = function () {
|
||||
if (writePermission && component.title != "device config") {
|
||||
var row = select.closest('div');
|
||||
row.style.backgroundColor = "orangered";
|
||||
// Request for command
|
||||
sendCommand(s, command + " " + this.value);
|
||||
} else {
|
||||
alertify.confirm("", "You are connected with <b>" + clientTitle
|
||||
+ "</b>. <br>"
|
||||
+ "Are you sure you want to modify things here?",
|
||||
function () {
|
||||
// User decided to proceed.
|
||||
writePermission = true;
|
||||
writePermissionTimeout = setTimeout(function () {
|
||||
writePermission = false;
|
||||
}, 3600000);
|
||||
var row = select.closest('div');
|
||||
row.style.backgroundColor = "orangered";
|
||||
// Request for command
|
||||
sendCommand(s, command + " " + select.value);
|
||||
}, function () {
|
||||
// User decided to cancel
|
||||
select.value = select.options[select.oldIndex].value
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
for (var i = 0; i < buttons.length; i++) {
|
||||
var option = document.createElement('option');
|
||||
option.type = "enum";
|
||||
option.classList.add("option-params");
|
||||
option.value = buttons[i].value;
|
||||
option.appendChild(document.createTextNode(buttons[i].title));
|
||||
select.add(option);
|
||||
}
|
||||
select.style.display = "none";
|
||||
|
||||
var right = document.createElement('span');
|
||||
right.appendChild(select);
|
||||
return right;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------------- */
|
||||
// obsolete...
|
||||
|
||||
function create_pushbutton_row(component) {
|
||||
// Creates row-element containing a push button
|
||||
var name = component.name;
|
||||
var command = component.command;
|
||||
var left = createTitle(component);
|
||||
@ -204,19 +434,10 @@ function create_pushbutton_row(s, component) {
|
||||
return row;
|
||||
}
|
||||
|
||||
function create_input_row(s, component) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: create_input_row", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
function create_input_row(component) {
|
||||
// Creates row-element containing input-item.
|
||||
|
||||
var name = component.name;
|
||||
var command = component.command;
|
||||
|
||||
if (component.info) {
|
||||
var infoBox = createInfo(component);
|
||||
}
|
||||
var left = createTitle(component);
|
||||
|
||||
var input = createParElement(component, 'input', 'input-text');
|
||||
@ -329,50 +550,26 @@ function create_input_row(s, component) {
|
||||
var right = createParElement(component);
|
||||
right.appendChild(form);
|
||||
return appendToContent(component, left, right);
|
||||
}
|
||||
|
||||
function posTextfield(s, left) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: posTextfield", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
// var content = swiper[s].slides[swiper[s].activeIndex].childNodes[1];
|
||||
// var row = left.parentNode;
|
||||
// content.scrollTop = row.offsetTop - 30;
|
||||
|
||||
// ---------------------> Not working anymore since swiper was removed!!!
|
||||
}
|
||||
|
||||
function resizeTextfield(input) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: resizeTextfield", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
if (input.value.length > input.size * 12 / 20) {
|
||||
var str0 = window.getComputedStyle(input).fontSize;
|
||||
var str1 = str0.substring(0, str0.length - 2);
|
||||
if (input.value.length < 43) {
|
||||
input.style.width = input.value.length * str1 * 12 / 20 + "px";
|
||||
function posTextfield(s, left) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: posTextfield", "color:white;background:salmon");
|
||||
}
|
||||
} else {
|
||||
input.style.width = "100px";
|
||||
|
||||
// var content = swiper[s].slides[swiper[s].activeIndex].childNodes[1];
|
||||
// var row = left.parentNode;
|
||||
// content.scrollTop = row.offsetTop - 30;
|
||||
|
||||
// ---------------------> Not working anymore since swiper was removed!!!
|
||||
}
|
||||
}
|
||||
|
||||
function create_checkbox_row(s, component) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: create_checkbox_row", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
function create_checkbox_row(component) {
|
||||
// Creates row-element containing checkbox-item
|
||||
|
||||
var command = component.command;
|
||||
|
||||
var left = createTitle(component);
|
||||
|
||||
var input = createParElement(component, 'input', 'parameter-checkbox');
|
||||
input.type = "checkbox";
|
||||
|
||||
input.onkeyup = function (e) {
|
||||
if (e.keyCode === 32) {
|
||||
handleCheckbox();
|
||||
@ -434,21 +631,13 @@ function create_checkbox_row(s, component) {
|
||||
return appendToContent(component, left, right);
|
||||
}
|
||||
|
||||
function create_enum_row(s, component) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: create_enum_row", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
function create_enum_row(component) {
|
||||
// Creates row-element containing dropdown-selection.
|
||||
|
||||
var name = component.name;
|
||||
var command = component.command;
|
||||
var buttons = component.enum_names;
|
||||
|
||||
var left = createTitle(component);
|
||||
|
||||
var select = createParElement(component, 'select', 'select-params');
|
||||
|
||||
select.onfocus = function () {
|
||||
select.oldIndex = select.selectedIndex;
|
||||
}
|
||||
@ -496,11 +685,75 @@ function create_enum_row(s, component) {
|
||||
return appendToContent(component, left, right);
|
||||
}
|
||||
|
||||
function createTitle(component, modules) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: createTitle", "color:white;background:salmon");
|
||||
// ...obsolete
|
||||
/* ---------------------------------------------------------------------------------- */
|
||||
// The following two functions seem unreachable
|
||||
|
||||
/* ########## Is this function used? How? Where? ########## */
|
||||
function create_group_row(component) {
|
||||
// Creates row-element containing link.
|
||||
var title = component.title;
|
||||
var row = document.createElement('row');
|
||||
row.id = component.name;
|
||||
row.name = title;
|
||||
row.classList.add("interactive", "row", "link");
|
||||
row.tabIndex = "0";
|
||||
|
||||
console.log('createGroupRow');
|
||||
|
||||
row.onclick = function () {
|
||||
var slideNames = getSlideNames();
|
||||
slideNames[0] = component.name;
|
||||
document.title = "SEA "+ clientTitle + " " + slideNames.join(" ");
|
||||
history.pushState({func: "gotoGroups", funarg: slideNames.join("%20")}, document.title, "#" + slideNames.join("%20"));
|
||||
getGroup(s, component.name);
|
||||
}
|
||||
|
||||
if (title === "console" || title === "device config") {
|
||||
row.classList.add("interactive", "row", "link", "link-static");
|
||||
row.innerHTML = "console";
|
||||
}
|
||||
row.innerHTML = title;
|
||||
return row;
|
||||
}
|
||||
|
||||
/* ########## Is this function used? How? Where? ########## */
|
||||
function create_rdonly_row(component) {
|
||||
// Creates row-element containing link AND read-only-item.
|
||||
var link = component.link;
|
||||
if (!link) // simple rdonly
|
||||
return appendToContent(component, createTitle(component),
|
||||
createParElement(component));
|
||||
|
||||
// with link
|
||||
var left = document.createElement('a');
|
||||
left.classList.add("col-left");
|
||||
left.innerHTML = component.title;
|
||||
|
||||
console.log('ccc')
|
||||
|
||||
left.id = component.name;
|
||||
left.name = component.title;
|
||||
left.classList.add("interactive", "link");
|
||||
|
||||
row = appendToContent(component, left, createParElement(component));
|
||||
row.onclick = function () {
|
||||
this.style.backgroundColor = "orangered";
|
||||
left.click();
|
||||
}
|
||||
if (link.charAt(0) == ':') {
|
||||
left.href = "http://" + location.hostname + link + "/";
|
||||
} else {
|
||||
left.href = link;
|
||||
}
|
||||
|
||||
row.classList.add("row", "clickable");
|
||||
return row;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------------- */
|
||||
|
||||
function createTitle(component, modules) {
|
||||
// Creates left side of row-tag containing title. Title may hold additional
|
||||
// information, which is shown, when title-tag is clicked.
|
||||
// At the modules-block a status-icon is added
|
||||
@ -538,10 +791,7 @@ function createTitle(component, modules) {
|
||||
return left;
|
||||
}
|
||||
|
||||
function createParElement(component, tag='span', cls='col-right') {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: createParElement", "color:white;background:salmon");
|
||||
}
|
||||
function createParElement(component, tag='span', cls='col-right-modules') {
|
||||
var right = document.createElement(tag);
|
||||
if (cls)
|
||||
right.classList.add(cls);
|
||||
@ -549,35 +799,13 @@ function createParElement(component, tag='span', cls='col-right') {
|
||||
right.setAttribute('name', component.name);
|
||||
// Add DOM-property
|
||||
right.__ctype__ = component.type;
|
||||
right.classList.add(component.type);
|
||||
return right;
|
||||
}
|
||||
|
||||
function createInfo(component) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: createInfo", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
// Creates info-box, which isn't visible by default but can be displayed.
|
||||
|
||||
var infoBox = document.createElement('div');
|
||||
infoBox.classList.add("info-box");
|
||||
|
||||
infoBox.onclick = function () {
|
||||
infoBox.style.display = "none";
|
||||
}
|
||||
|
||||
infoBox.innerHTML = component.info;
|
||||
return infoBox;
|
||||
}
|
||||
|
||||
function appendToContent(component, left, right) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: appendToContent", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
function appendToContent(component, left, right, edit) {
|
||||
// Creates row-tag containing infoBox (not visible by default), left side
|
||||
// (span) and right side (span).
|
||||
|
||||
var row = document.createElement('div');
|
||||
row.classList.add("row");
|
||||
if (component.info) {
|
||||
@ -585,15 +813,28 @@ function appendToContent(component, left, right) {
|
||||
}
|
||||
row.appendChild(left);
|
||||
row.appendChild(right);
|
||||
if (edit) {
|
||||
row.appendChild(edit);
|
||||
}
|
||||
return row;
|
||||
|
||||
function createInfo(component) {
|
||||
// Creates info-box, which isn't visible by default but can be displayed.
|
||||
var infoBox = document.createElement('div');
|
||||
infoBox.classList.add("info-box");
|
||||
|
||||
infoBox.onclick = function () {
|
||||
infoBox.style.display = "none";
|
||||
}
|
||||
|
||||
infoBox.innerHTML = component.info;
|
||||
return infoBox;
|
||||
}
|
||||
}
|
||||
|
||||
function appendToGridElement(s, title, type, content) {
|
||||
if (debug_swiper_daniel) {
|
||||
console.log("%cfunction: appendToGridElement", "color:white;background:lightblue");
|
||||
console.log("title: ",title);
|
||||
}
|
||||
/* ---------------------------------------------------------------------------------- */
|
||||
|
||||
function appendToGridElement(s, title, type, content) {
|
||||
var panel = document.createElement('div');
|
||||
panel.classList.add("panel");
|
||||
|
||||
@ -612,3 +853,17 @@ function appendToGridElement(s, title, type, content) {
|
||||
gridelements[s].innerHTML = "";
|
||||
gridelements[s].appendChild(gridContainer);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------------- */
|
||||
|
||||
function resizeTextfield(input) {
|
||||
if (input.value.length > input.size * 12 / 20) {
|
||||
var str0 = window.getComputedStyle(input).fontSize;
|
||||
var str1 = str0.substring(0, str0.length - 2);
|
||||
if (input.value.length < 43) {
|
||||
input.style.width = input.value.length * str1 * 12 / 20 + "px";
|
||||
}
|
||||
} else {
|
||||
input.style.width = "100px";
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
||||
// % INIT
|
||||
|
||||
// local debugging: print the name of every executed funtion to the console
|
||||
var debug_main_daniel = 0;
|
||||
|
||||
var MAXBLOCK = 4; // max number of blocks
|
||||
var elements = []; // grid elements
|
||||
var swiper = []; // This array contains main-swiper-Instances.
|
||||
@ -21,10 +18,6 @@ var firstState = 0;
|
||||
var showParams = false;
|
||||
|
||||
function Settings() {
|
||||
if (debug_main_daniel) {
|
||||
console.log("%cfunction: Settings", "color:white;background:limegreen");
|
||||
}
|
||||
|
||||
// get key/value pairs from search part of the URL and fill into query
|
||||
var qstr = location.search;
|
||||
// console.log(qstr);
|
||||
@ -70,10 +63,6 @@ function Settings() {
|
||||
}
|
||||
|
||||
function to_bool(string) {
|
||||
if (debug_main_daniel) {
|
||||
console.log("%cfunction: to_bool", "color:white;background:limegreen");
|
||||
}
|
||||
|
||||
// everything else than false, 0 or an empty string is considered as true
|
||||
return !/^(false|FALSE|False|0|)$/.test(string);
|
||||
}
|
||||
@ -107,10 +96,6 @@ if (window.instrument) {
|
||||
// console.log('TAGS', window.clientTags);
|
||||
|
||||
function loadFirstBlocks() {
|
||||
if (debug_main_daniel) {
|
||||
console.log("%cfunction: loadFirstBlocks", "color:white;background:limegreen");
|
||||
}
|
||||
|
||||
if (showMain) pushInitCommand("getblock?path=main&", "main")
|
||||
if (showConsole) pushInitCommand("console?", "console")
|
||||
if (nColumns == 1) { // probably mobile phone}
|
||||
@ -130,10 +115,6 @@ function loadFirstBlocks() {
|
||||
}
|
||||
|
||||
function nextInitCommand() {
|
||||
if (debug_main_daniel) {
|
||||
console.log("%cfunction: nextInitCommand", "color:white;background:limegreen");
|
||||
}
|
||||
|
||||
// do the next init request
|
||||
if (initCommands.length > 0) {
|
||||
next = initCommands.shift();
|
||||
@ -146,19 +127,26 @@ function nextInitCommand() {
|
||||
var loadingScreen = document.getElementsByClassName("loading-div")[0];
|
||||
loadingScreen.style.display = "none";
|
||||
loadingShown = false;
|
||||
if (location.hash) { // there was a #hash part
|
||||
var slideNames = location.hash.substr(1);
|
||||
gotoGroups(slideNames);
|
||||
}
|
||||
/* Not working without swiper, necessary??? */
|
||||
// if (location.hash) { // there was a #hash part
|
||||
// var slideNames = location.hash.substr(1);
|
||||
// gotoGroups(slideNames);
|
||||
// }
|
||||
console.log("loading finished");
|
||||
|
||||
// function gotoGroups(slideNames) {
|
||||
|
||||
// slideNames = slideNames.split("%20");
|
||||
// var l = Math.min(MAXBLOCK,slideNames.length);
|
||||
// document.title = "SEA "+ clientTitle + " " + slideNames.join(" ");
|
||||
// for (var s=0; s<l; s++) {
|
||||
// getGroup(s, slideNames[s]);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
function pushInitCommand(cmd, text) {
|
||||
if (debug_main_daniel) {
|
||||
console.log("%cfunction: pushInitCommand", "color:white;background:limegreen");
|
||||
}
|
||||
|
||||
initCommands.push([cmd, text]);
|
||||
}
|
||||
|
||||
@ -251,13 +239,8 @@ window.onload = function() {
|
||||
};
|
||||
|
||||
function toggleHeader() {
|
||||
if (debug_main_daniel) {
|
||||
console.log("%cfunction: toggleHeader", "color:white;background:limegreen");
|
||||
}
|
||||
|
||||
// Show and hide box showing name of the current device ('see also
|
||||
// SEAWebClient.html')
|
||||
|
||||
var main_panel = document.getElementById("main-panel");
|
||||
panelOn = !panelOn;
|
||||
if (panelOn) {
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
||||
// % 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.
|
||||
@ -11,10 +8,6 @@ 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.
|
||||
@ -30,10 +23,6 @@ function createGrid() {
|
||||
}
|
||||
|
||||
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.
|
||||
|
||||
@ -62,19 +51,11 @@ function determineViewportSize() {
|
||||
}
|
||||
|
||||
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'
|
||||
|
||||
@ -196,10 +177,6 @@ function adjustGrid() {
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
||||
// % SWIPER
|
||||
|
||||
// local debugging: print the name of every executed funtion to the console
|
||||
var debug_swiper_daniel = 0;
|
||||
// This file is obolete, swiper was removed!
|
||||
|
||||
function insertSwiper(s) {
|
||||
if (debug_swiper_daniel) {
|
||||
console.log("%cfunction: insertSwiper", "color:white;background:lightblue");
|
||||
}
|
||||
|
||||
// Create an empty swiper-instance and append the swiper-container to
|
||||
// 'grid-element' s.
|
||||
|
||||
@ -66,11 +61,6 @@ function insertSwiper(s) {
|
||||
}
|
||||
|
||||
function findSlide(s, type) {
|
||||
if (debug_swiper_daniel) {
|
||||
console.log("%cfunction: findSlide" , "color:white;background:lightblue");
|
||||
console.log (s, type);
|
||||
}
|
||||
|
||||
var i;
|
||||
for (i = 0; i < swiper[s].slides.length; i++) {
|
||||
if (swiper[s].slides[i].slideType === type) {
|
||||
@ -80,28 +70,16 @@ function findSlide(s, type) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
if (debug_swiper_daniel) {
|
||||
console.log ('found no slide ');
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function replaceSlideContent(slide, title, content) {
|
||||
if (debug_swiper_daniel) {
|
||||
console.log("%cfunction: replaceSlideContent", "color:white;background:lightblue");
|
||||
}
|
||||
|
||||
titlewrapper = slide.childNodes[0].childNodes[0];
|
||||
titlewrapper.innerHTML = title;
|
||||
slide.replaceChild(content, slide.childNodes[1])
|
||||
}
|
||||
|
||||
function insertSlideXXX(s, title, type, content) {
|
||||
if (debug_swiper_daniel) {
|
||||
console.log("%cfunction: insertSlide", "color:white;background:lightblue");
|
||||
console.log("title: ",title);
|
||||
}
|
||||
|
||||
var panel = document.createElement('div');
|
||||
panel.classList.add("panel");
|
||||
|
||||
@ -125,10 +103,6 @@ function insertSlideXXX(s, title, type, content) {
|
||||
}
|
||||
|
||||
function createCloseButton(s) {
|
||||
if (debug_swiper_daniel) {
|
||||
console.log("%cfunction: createCloseButton", "color:white;background:lightblue");
|
||||
}
|
||||
|
||||
// Creates 'span'-element containing close-button.
|
||||
var wrapper = document.createElement('span');
|
||||
wrapper.onclick = function () {
|
||||
@ -141,10 +115,6 @@ function createCloseButton(s) {
|
||||
}
|
||||
|
||||
function createUpdateButton(s){
|
||||
if (debug_swiper_daniel) {
|
||||
console.log("%cfunction: createUpdateButton", "color:white;background:lightblue");
|
||||
}
|
||||
|
||||
// Creates 'span'-element containing update-button (Should be removed later!)
|
||||
var button = document.createElement('span');
|
||||
button.classList.add("interactive", "toggle-updates-graphics")
|
||||
@ -157,18 +127,10 @@ function createUpdateButton(s){
|
||||
}
|
||||
|
||||
function defaultSlidePos(s) {
|
||||
if (debug_swiper_daniel) {
|
||||
console.log("%cfunction: defaultSlidePos", "color:white;background:lightblue");
|
||||
}
|
||||
|
||||
return s < 3 ? 0 : swiper[s].slides.length-1;
|
||||
}
|
||||
|
||||
function getSlideNames() {
|
||||
if (debug_swiper_daniel) {
|
||||
console.log("%cfunction: getSlideNames", "color:white;background:lightblue");
|
||||
}
|
||||
|
||||
var names = []
|
||||
for (var s=0; s<MAXBLOCK; s++) {
|
||||
var sw = swiper[s];
|
||||
|
||||
Reference in New Issue
Block a user