From c3002aac3bede8dbefb7d7de13f52952e540e1a8 Mon Sep 17 00:00:00 2001
From: Blackcat <>
Date: Sun, 17 Mar 2019 10:40:26 +0000
Subject: [PATCH] new ios6 Style features: - better column display (if possible
display 1.-3. column in one vertical line) - ios6touchpad.js added for
automatic js support - toggle Colorpicker and Slider on smaller Screens
git-svn-id: https://svn.fhem.de/fhem/trunk@18940 2b470e98-0d58-463d-a4d8-8e2adae1ed80
---
fhem/www/pgm2/ios6.js | 147 +-------------
fhem/www/pgm2/ios6touchpad.js | 299 ++++++++++++++++++++++++++++
fhem/www/pgm2/ios6touchpadstyle.css | 30 +--
3 files changed, 318 insertions(+), 158 deletions(-)
create mode 100644 fhem/www/pgm2/ios6touchpad.js
diff --git a/fhem/www/pgm2/ios6.js b/fhem/www/pgm2/ios6.js
index eab2425de..aca2c5114 100644
--- a/fhem/www/pgm2/ios6.js
+++ b/fhem/www/pgm2/ios6.js
@@ -1,139 +1,8 @@
-/* iOS 6 Theme for FHEM */
-/* by Sandra Ohmayer */
-/* http://www.animeschatten.net */
-/* jQuery is required*/
-$(document).ready(function() {
- /*
- /* Style Config
- */
- var menuwidth = 200;
- var paddingwidth = 60;
- var mobilepaddingwidth = 20;
- var logowidth = 28;
- var switchtomobilemode = 415;
- var hdrheight = 44;
- var inputpadding = 251;
- /*
- /* Functions
- */
- // Set style height and width
- var recalculateStyleHeight = function() {
- var height = window.innerHeight;
- $("#menu").height(height - hdrheight);
- $("#content").height(height - hdrheight);
- $("#right").height(height - hdrheight);
- };
- var recalculateStyleWithMenu = function() {
- var width = $("body").width();
- $("body").removeClass("hideMenu");
- if (switchtomobilemode > width) {
- $("#menu").width(width);
- $("#content").width(0);
- $("#right").width(0);
- $("#content").hide()
- $("#right").hide();
- $("#hdr input").width(width - inputpadding + menuwidth - logowidth);
- } else {
- $("#menu").width(menuwidth);
- $("#content").width(width - menuwidth - paddingwidth - 1);
- $("#right").width(width - menuwidth - paddingwidth - 1);
- $("#hdr input").width(width - inputpadding);
- $("#content").show()
- $("#right").show();
- }
- };
- var recalculateStyleWithoutMenu = function() {
- var width = $("body").width();
- $("body").addClass("hideMenu");
- if (switchtomobilemode > width) {
- $("#hdr input").width(width - inputpadding + menuwidth - logowidth);
- $("#content").width(width - mobilepaddingwidth);
- $("#right").width(width - mobilepaddingwidth);
- } else {
- $("#hdr input").width(width - inputpadding);
- $("#content").width(width - paddingwidth);
- $("#right").width(width - paddingwidth);
- }
- $("#menu").width(0);
- $("#content").show()
- $("#right").show();
- };
- // Show / Hide menu
- var toggleMenuOnFHEMIcon = function() {
- if ($("body").hasClass("hideMenu")) {
- recalculateStyleWithMenu();
- } else {
- recalculateStyleWithoutMenu();
- }
- };
- /*
- /* DOM manipulation
- */
- // init viewport
- $('meta[name="viewport"]').remove();
- $('head').append('');
-
- var ismobile = (/iphone|ipod|android|blackberry|opera|mini|windows\sce|palm|smartphone|iemobile/i.test(navigator.userAgent.toLowerCase()));
- var istablet = (/ipad|android|android 3.0|xoom|sch-i800|playbook|tablet|kindle/i.test(navigator.userAgent.toLowerCase()));
-
- var isAndroid = function() {
- return navigator.userAgent.match(/Android/i);
- };
-
-
- if (ismobile) {
- $("body").addClass("isMobile");
- if (isAndroid()) {
- $("body").addClass("isAndroidPhone");
- }
- } else if(istablet) {
- if (isAndroid()) {
- $("body").addClass("isAndroidTablet");
- }
- }
- // init height and width
- recalculateStyleHeight();
- // hide menu
- if ($("body").width() < window.innerHeight) {
- recalculateStyleWithoutMenu();
- } else {
- recalculateStyleWithMenu();
- }
- // Logo - add toggle link
- var parentLink = $("#logo").parent("a");
- $(parentLink).unbind("click");
- if (typeof(parentLink.attr("href")) == "undefined") {
- parentLink.attr("onclick", "#");
- } else {
- parentLink.attr("href", "#");
- }
- $("#logo").click(toggleMenuOnFHEMIcon);
- /*
- /* Event Handlers
- */
- // Resize
- $(window).resize(function() {
- recalculateStyleHeight();
- if ($("body").width() < window.innerHeight) {
- recalculateStyleWithoutMenu();
- } else {
- recalculateStyleWithMenu();
- }
- });
- $(window).bind('orientationchange', function(event) {
- $(window).trigger('resize');
- //alert("orientationchange width: "+window.innerWidth+" height: "+window.innerHeight);
- });
- // Touch - Color picker
- $(document).on('touchstart', function(e) {
- var container = $("#colorpicker");
- if (!container.is(e.target) // if the target of the click isn't the container...
- && container.has(e.target).length === 0 // ... nor a descendant of the container
- && !$("input").is(e.target) && container.length > 0) // ... is not an input
- {
- container.remove();
- }
- });
-
-
-});
+/* iOS 6 Theme for FHEM */
+/* by Sandra Ohmayer */
+/* http://www.foodcat.de */
+/* jQuery is required*/
+
+var imported = document.createElement('script');
+imported.src = '/fhem/pgm2/ios6touchpad.js';
+document.head.appendChild(imported);
diff --git a/fhem/www/pgm2/ios6touchpad.js b/fhem/www/pgm2/ios6touchpad.js
new file mode 100644
index 000000000..f935353f7
--- /dev/null
+++ b/fhem/www/pgm2/ios6touchpad.js
@@ -0,0 +1,299 @@
+/* iOS 6 Theme for FHEM */
+/* by Sandra Ohmayer */
+/* http://www.foodcat.de */
+/* jQuery is required*/
+
+
+$(document).ready(function() {
+ /*
+ /* Style Config
+ */
+ var spaltensumme = 200;
+ var menuwidth = 200;
+ var paddingwidth = 60;
+ var mobilepaddingwidth = 20;
+ var logowidth = 28;
+ var switchtomobilemode = 415;
+ var hdrheight = 44;
+ var inputpadding = 251;
+ /*
+ /* Functions
+ */
+ // Set style height and width
+ var recalculateStyleHeight = function() {
+ var height = window.innerHeight;
+ $("#menu").height(height - hdrheight);
+ $("#content").height(height - hdrheight);
+ $("#right").height(height - hdrheight);
+ };
+ var recalculateStyleWithMenu = function() {
+ var width = $("body").width();
+ $("body").removeClass("hideMenu");
+ if (switchtomobilemode > width) {
+ $("#menu").width(width);
+ $("#content").width(0);
+ $("#right").width(0);
+ $("#content").hide()
+ $("#right").hide();
+ $("#hdr input").width(width - inputpadding + menuwidth - logowidth);
+ } else {
+ $("#menu").width(menuwidth);
+ $("#content").width(width - menuwidth - paddingwidth - 1);
+ $("#right").width(width - menuwidth - paddingwidth - 1);
+ $("#hdr input").width(width - inputpadding);
+ $("#content").show()
+ $("#right").show();
+ }
+ };
+ var recalculateStyleWithoutMenu = function() {
+ var width = $("body").width();
+ $("body").addClass("hideMenu");
+ if (switchtomobilemode > width) {
+ $("#hdr input").width(width - inputpadding + menuwidth - logowidth);
+ $("#content").width(width - mobilepaddingwidth);
+ $("#right").width(width - mobilepaddingwidth);
+ } else {
+ $("#hdr input").width(width - inputpadding);
+ $("#content").width(width - paddingwidth);
+ $("#right").width(width - paddingwidth);
+ }
+ $("#menu").width(0);
+ $("#content").show()
+ $("#right").show();
+ };
+ // Show / Hide menu
+ var toggleMenuOnFHEMIcon = function() {
+ if ($("body").hasClass("hideMenu")) {
+ recalculateStyleWithMenu();
+ } else {
+ recalculateStyleWithoutMenu();
+ }
+ };
+
+ //Berechnung Spaltenbreite
+ var calccolumns = function() {
+ $("table.block.wide").find("table.block.wide").addClass("notrelevantcount");
+ var tables = $("table.block.wide").not('.notrelevantcount');
+ // Ermitteln der maximalen Spaltenanzahl im Layout
+ var maxlength = 0;
+ var maxtr;
+ tables.each(function() {
+ var td = $(this).children("tbody").children("tr").first().children("td");
+ var trlength = 0;
+ td.each(function() {
+ trlength = trlength+$(this).prop("colSpan");
+ });
+ if (trlength > maxlength) {
+ maxlength = trlength;
+ maxtr=$(this).children("tbody").children("tr").children('td:eq('+(maxlength-1)+')').parent().first();
+ }
+ });
+
+ // Setzen aller hinteren Spalten auf ein Minimum an Platzbedarf
+ tables.children("tbody").children("tr").each(function() {
+ var trlength = $(this).children("td").length;
+ var diff = 0;
+ if (trlength < maxlength) {
+ diff = maxlength - trlength;
+ }
+ diff++;
+
+ $(this).children("td").css("width", "1%");
+ $(this).children("td").css("white-space", "nowrap");
+ $(this).children("td").first().css("width", "");
+ $(this).children("td").first().css("white-space", "");
+
+ });
+
+ // Ermitteln der maxwidth abhängig vom größten Spaltenelement beginnend bei Spalte 2
+ var i;
+ var maxwidthtd = new Array();
+ for (i = 1; i < maxlength; i++) {
+ maxwidthtd.push(0);
+ var counttr = tables.children("tbody").children('tr').length;
+ for (j=0; j < counttr; j++) {
+ tables.children("tbody").children('tr:eq('+j+')').children('td:eq('+i+')').each(function() {
+ var tdwidth = $(this).innerWidth()/$(this).prop("colSpan")+($(this).prop("colSpan")-1)*14;
+ if (tdwidth > maxwidthtd[i-1]) {
+ maxwidthtd[i-1] = tdwidth;
+ }
+ });
+ }
+ }
+
+ // Anpassen der width der Spalten auf das maxwidth beginnend bei Spalte 2
+ for (i = 1; i < maxlength; i++) {
+ tables.children("tbody").children("tr").children('td:eq('+i+')').css("width",maxwidthtd[i-1]+"px");
+ }
+
+ // Berechnung der gesamten Tabellen width
+ var innertablewidth = -20;
+ if(maxtr) {
+ maxtr.children('td').each(function() {
+ innertablewidth=innertablewidth+$(this).innerWidth();
+ });
+ // Berechnung der hinteren Spalten
+ maxwidthtd.forEach(function(column, index){
+ if(column > 260) {
+ column = 260;
+ }
+ innertablewidth=innertablewidth-column-10;
+ });
+ if (innertablewidth > 750) {
+ innertablewidth = 750;
+ } else if (innertablewidth < 110){
+ innertablewidth = 110;
+ }
+ spaltensumme = innertablewidth;
+ tables.children("tbody").children("tr").each(function() {
+ var trlength = $(this).children("td").length;
+ var diff = 0;
+ if (trlength < maxlength) {
+ diff = maxlength - trlength;
+ }
+ diff++;
+ $(this).children("td").last().attr('colspan',diff);
+ $(this).children("td").css("white-space", "");
+ $(this).children("td").css("width", "");
+ $(this).children("td").first().css("width", innertablewidth);
+ $(this).children("td").first().next().css("width", maxwidthtd[0]);
+ });
+ }
+ $(".fbcalllist-container").find("tr").each(function() {
+ $(this).find("td").last().attr('colspan',1);
+ $(this).find("td").css("width", "");
+ $(this).find("td").css("white-space", "");
+ });
+
+ };
+
+ //Neuberechnung Spaltenbreite
+ var resetcolumns = function() {
+ $("table.block.wide").not('.notrelevantcount').children("tbody").children("tr").each(function() {
+ $(this).children("td").last().attr('colspan',1);
+ $(this).children("td").css("width", "");
+ $(this).children("td").css("white-space", "");
+ });
+ };
+
+
+ var mobiletoggle = function () {
+ if($('body').hasClass("colortoggle")){}else{
+ var counter=0;
+ $( ".colorpicker_widget, .slider_widget" ).each(function(){
+ $( '' ).insertBefore( $(this) );
+ $(this).parent().css("white-space", "nowrap");
+ $(this).parent().css("display", "table");
+ $(this).attr('id', 'colorpicker'+counter);
+ $(this).hide();
+ $('#colorminus'+counter).hide();
+ counter++;
+ });
+ $('body').addClass("colortoggle");
+ }
+ };
+
+
+
+
+
+ /*
+ /* DOM manipulation
+ */
+ // init viewport
+ $('meta[name="viewport"]').remove();
+ $('head').append('');
+
+ var ismobile = (/iphone|ipod|android|blackberry|opera|mini|windows\sce|palm|smartphone|iemobile/i.test(navigator.userAgent.toLowerCase()));
+ var istablet = (/ipad|android|android 3.0|xoom|sch-i800|playbook|tablet|kindle/i.test(navigator.userAgent.toLowerCase()));
+
+ var isAndroid = function() {
+ return navigator.userAgent.match(/Android/i);
+ };
+
+
+ if (ismobile) {
+ $("body").addClass("isMobile");
+ if (isAndroid()) {
+ $("body").addClass("isAndroidPhone");
+ }
+ } else if(istablet) {
+ if (isAndroid()) {
+ $("body").addClass("isAndroidTablet");
+ }
+ }
+ // init height and width
+ recalculateStyleHeight();
+
+ // hide menu
+ if ($("body").width() < window.innerHeight) {
+ recalculateStyleWithoutMenu();
+ } else {
+ recalculateStyleWithMenu();
+ }
+
+ // Logo - add toggle link
+ var parentLink = $("#logo").parent("a");
+ $(parentLink).unbind("click");
+ if (typeof(parentLink.attr("href")) == "undefined") {
+ parentLink.attr("onclick", "#");
+ } else {
+ parentLink.attr("href", "#");
+ }
+ $("#logo").closest("a").removeAttr("onclick");
+
+ $("#logo").click(toggleMenuOnFHEMIcon);
+
+ /*
+ /* Event Handlers
+ */
+ // Resize
+ $(window).resize(function() {
+ recalculateStyleHeight();
+ if ($("body").width() < window.innerHeight) {
+ recalculateStyleWithoutMenu();
+ resetcolumns();
+ calccolumns();
+ } else {
+ recalculateStyleWithMenu();
+ resetcolumns();
+ calccolumns();
+ }
+ if (spaltensumme < 200) {
+ mobiletoggle();
+ resetcolumns();
+ calccolumns();
+ }
+ });
+ $(window).bind('orientationchange', function(event) {
+ $(window).trigger('resize');
+ //alert("orientationchange width: "+window.innerWidth+" height: "+window.innerHeight);
+ });
+ // Touch - Color picker
+ $(document).on('touchstart', function(e) {
+ var container = $("#colorpicker");
+ if (!container.is(e.target) // if the target of the click isn't the container...
+ && container.has(e.target).length === 0 // ... nor a descendant of the container
+ && !$("input").is(e.target) && container.length > 0) // ... is not an input
+ {
+ container.remove();
+ }
+ });
+});
+
+function triggerResize() {
+ window.dispatchEvent(new Event('resize'));
+}
+
+function togglecolorpicker(counter) {
+ $('#colorpicker'+counter).toggle('fast');
+ $('#colorminus'+counter).toggle();
+ $('#colorplus'+counter).toggle();
+}
+function togglecolorpickerct(counter) {
+ $('#colorpicker_ct_mired'+counter).toggle('fast');
+ $('#colorctminus'+counter).toggle();
+ $('#colorctplus'+counter).toggle();
+}
+
+window.addEventListener("load",triggerResize,false);
\ No newline at end of file
diff --git a/fhem/www/pgm2/ios6touchpadstyle.css b/fhem/www/pgm2/ios6touchpadstyle.css
index 4c9027bad..bea7c00b2 100644
--- a/fhem/www/pgm2/ios6touchpadstyle.css
+++ b/fhem/www/pgm2/ios6touchpadstyle.css
@@ -3,7 +3,7 @@
/* iOS 6 Theme for FHEM */
/* by Sandra Ohmayer */
-/* http://www.animeschatten.net */
+/* http://www.foodcat.de */
body {
width:100%
}
@@ -72,9 +72,7 @@ and (orientation : portrait) {
body {
width:320px
}
-.colorpicker_widget {
- display: none !important;
-}
+
.SVGplot {
width: 265px;
overflow: scroll;
@@ -102,9 +100,7 @@ and (orientation : portrait) {
body {
width:320px
}
-.colorpicker_widget {
- display: none !important;
-}
+
.SVGplot {
width: 265px;
overflow: scroll;
@@ -131,9 +127,7 @@ and (orientation : portrait) {
body {
width:375px
}
-.colorpicker_widget {
- display: none !important;
-}
+
.SVGplot {
width: 320px;
overflow: scroll;
@@ -163,9 +157,6 @@ body {
width: 359px;
overflow: scroll;
}
-.colorpicker_widget {
-display: none;
-}
}
/* iPhone 6+(landscape) ----------- */
@@ -195,9 +186,6 @@ and (orientation : portrait) {
.isAndroidPhone {
width:360px;
}
-.colorpicker_widget {
-display: none;
-}
.isAndroidTablet {
}
}
@@ -606,7 +594,8 @@ table.block td {
table.block td {
border-top:1px solid #fdfdfd;
- border-bottom:1px solid #cbcbcb
+ border-bottom:1px solid #cbcbcb;
+ padding-right: 9px;
}
table.block tr:first-child td {
@@ -620,7 +609,6 @@ table.block tr:last-child td {
.block td:first-child {
padding-left:10px;
font-weight:700;
- word-break: break-word;
}
.block > tbody > tr > td:last-child {
@@ -742,9 +730,13 @@ table.room tr.sel a:hover svg {
box-shadow:0 1px #fefefe,inset 0 1px #d7d7d7;
background:#f7f7f7
}
+.colorpicker {
+ display: inline-block;
+}
.slider {
- margin-top:0px;
+ margin-top: 4px;
+ margin-bottom: 4px;
display:inline-block;
-webkit-box-sizing:border-box;
-moz-box-sizing:padding-box;