/* 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();
resetcolumns();
calccolumns();
} else {
recalculateStyleWithoutMenu();
resetcolumns();
calccolumns();
}
};
//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 tr =$(this).children("tbody").children("tr");
tr.each(function(){
var td = $(this).children("td");
var trlength = 0;
td.each(function() {
trlength = trlength+$(this).prop("colSpan");
});
if (trlength > maxlength) {
maxlength = trlength;
maxtr=$(this);
}
});
});
// 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) {
maxwidthtd[index] = 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);