From 0f4b8663b4fc6eaa8ec5ea7519a45048f6ed20d1 Mon Sep 17 00:00:00 2001 From: rudolfkoenig <> Date: Sun, 14 Jan 2018 21:35:42 +0000 Subject: [PATCH] f18.js: Css editor, less flicker for SVG, longpollSVG fix, etc (Forum #82351) git-svn-id: https://svn.fhem.de/fhem/trunk@15896 2b470e98-0d58-463d-a4d8-8e2adae1ed80 --- fhem/FHEM/01_FHEMWEB.pm | 13 +++ fhem/www/pgm2/f18.js | 231 ++++++++++++++++++++++++------------- fhem/www/pgm2/f18style.css | 3 +- fhem/www/pgm2/svg.js | 3 + 4 files changed, 168 insertions(+), 82 deletions(-) diff --git a/fhem/FHEM/01_FHEMWEB.pm b/fhem/FHEM/01_FHEMWEB.pm index 23c455343..a60415fab 100644 --- a/fhem/FHEM/01_FHEMWEB.pm +++ b/fhem/FHEM/01_FHEMWEB.pm @@ -141,6 +141,7 @@ FHEMWEB_Initialize($) CORS:0,1 HTTPS:1,0 CssFiles + Css:textField-long JavaScripts SVGcache:1,0 addHtmlTitle:1,0 @@ -951,6 +952,8 @@ FW_answerCall($) FW_pO sprintf($cssTemplate, "pgm2/jquery-ui.min.css"); map { FW_pO sprintf($cssTemplate, $_); } split(" ", AttrVal($FW_wname, "CssFiles", "")); + my $css = AttrVal($FW_wname, "Css", ""); + FW_pO "\n" if($css); ######################## # JavaScripts @@ -3399,6 +3402,11 @@ FW_widgetOverride($$)
+ +
  • Css
    + CSS included in the header after the CssFiles section. +

    • +
  • cmdIcon
    Space separated list of cmd:iconName pairs. If set, the webCmd text is @@ -4099,6 +4107,11 @@ FW_widgetOverride($$)

    • + +
  • Css
    + CSS, was nach dem CssFiles Abschnitt im Header eingefuegt wird. +

    • +
  • defaultRoom
    Zeigt den angegebenen Raum an falls kein Raum explizit ausgewählt diff --git a/fhem/www/pgm2/f18.js b/fhem/www/pgm2/f18.js index c7d9f181a..dab2275c0 100644 --- a/fhem/www/pgm2/f18.js +++ b/fhem/www/pgm2/f18.js @@ -1,14 +1,9 @@ -/* - - style FW_okDialog - - SVG width on mobile - - FLOORPLAN - - Dashboard - */ +"use strict"; +FW_version["f18.js"] = "$Id$"; -var f18_attr, f18_aCol, f18_pinOut, f18_sd, f18_isMobile; +// TODO: rewrite menu, dashboard, floorplan, fix longpollSVG +var f18_attr, f18_aCol, f18_sd, f18_isMobile, f18_icon={}, f18_move=false; var f18_small = (screen.width < 480 || screen.height < 480); -// font-awesome: map-pin -var f18_pinIn='data:image/svg+xml;utf8,'; $(window).resize(f18_resize); $(document).ready(function(){ @@ -20,12 +15,12 @@ $(document).ready(function(){ f18_attr = f18_sd.f18; } if(!f18_attr) { - f18_attr = { "Pinned.menu":"true" }; + f18_attr = { "Pinned.menu":"true", "savePinChanges":true }; f18_resetCol(); f18_sd.f18 = f18_attr; } - f18_setCss(); + f18_setCss('init'); var icon = FW_root+"/images/default/fhemicon_ios.png"; $('head').append( @@ -41,8 +36,10 @@ $(document).ready(function(){ f18_aCol = getComputedStyle($("a").get(0),null).getPropertyValue('color'); - f18_pinIn = f18_pinIn.replace('gray', f18_aCol); - f18_pinOut = f18_pinIn.replace('/>',' transform="rotate(90,896,896)"/>'); + for(var i in f18_icon) + f18_icon[i] = f18_icon[i].replace('gray', f18_aCol); + f18_icon.pinOut = f18_icon.pinIn + .replace('/>',' transform="rotate(90,896,896)"/>'); if(f18_attr.hideLogo) { $("div#menuScrollArea div#logo").css("display", "none"); @@ -51,16 +48,15 @@ $(document).ready(function(){ f18_menu(); f18_tables(); f18_svgSetCols(); + if(typeof svgCallback != "undefined") + svgCallback.f18 = f18_svgSetCols; }); function f18_menu() { - // font-awesome: bars - var bars='data:image/svg+xml;utf8,' - .replace('gray', f18_aCol); $("").prependTo("div#menuScrollArea") - .css( {"background-image":"url('"+bars+"')", "cursor":"pointer" }) + .css( {"background-image":"url('"+f18_icon.bars+"')", "cursor":"pointer" }) .click(function(){ $("div#menu").toggleClass("visible") }); $("div#menu").prepend("
    "); @@ -102,6 +98,7 @@ f18_tables() var ntr = $(el).closest("tr").next("tr"); isFixed ? $(ntr).show() : $(ntr).hide(); }); + f18_addMove(el, function(){ log("Hello") }); }); if(FW_urlParams.detail) { @@ -123,8 +120,8 @@ f18_tables() function addRow(name, desc, val) { - $("table.colors") - .append(""+ + $("table.f18colors") + .append(""+ ""+ "
    "+desc+"
    "+ (val ? "
    "+val+"
    " : '')+ @@ -132,14 +129,15 @@ f18_tables() } function - addHider(name, desc, fn) + addHider(name, desc, fn, lVarName) { addRow(name, desc, ""); - $("table.colors tr."+name+" input") - .prop("checked", f18_attr[name]) + $("table.f18colors tr.ar_"+name+" input") + .prop("checked", lVarName ? window[lVarName] : f18_attr[name]) .click(function(){ var c = $(this).is(":checked"); - f18_setAttr(name, c); + if(!lVarName) + f18_setAttr(name, c); fn(c); }); } @@ -148,12 +146,12 @@ f18_tables() addColorChooser(name, desc) { addRow(name, desc, "
    "); - FW_replaceWidget("table.colors tr."+name+" div.col2 div.cp", name, + FW_replaceWidget("table.f18colors tr.ar_"+name+" div.col2 div.cp", name, ["colorpicker","RGB"], f18_attr.cols[name], name, "rgb", undefined, function(value) { f18_attr.cols[name] = value; f18_setAttr(); - f18_setCss(); + f18_setCss(name); }); } @@ -162,14 +160,14 @@ f18_tables() $("tr.f18").append("
    f18 special
    "); $("div.f18colors").css("margin-top", "20px"); - $("tr.f18").append("
    "); + $("tr.f18").append("
    "); loadScript("pgm2/fhemweb_colorpicker.js", addColors); function addColors() { - $("table.colors") + $("table.f18colors") .append(""+ "
    Preset colors: "+ "default "+ @@ -177,11 +175,11 @@ f18_tables() "dark "+ "
    "+ ""); - $("table.colors tr.reset a").click(function(){ + $("table.f18colors tr.reset a").click(function(){ row = 0; - $("table.colors").html(""); + $("table.f18colors").html(""); f18_resetCol($(this).text()); - f18_setCss(); + f18_setCss('preset'); f18_setAttr(); addColors(); }); @@ -192,9 +190,38 @@ f18_tables() addColorChooser("oddrow", "Odd row"); addColorChooser("header", "Header row"); addColorChooser("menu", "Menu"); - addColorChooser("sel", "Menu/Selected"); + addColorChooser("sel", "Menu:Selected"); addColorChooser("inpBack", "Input bg"); - $("table.colors input").attr("size", 8); + $("table.f18colors input").attr("size", 8); + + addRow("editStyle", "Additional CSS"); + $("table.f18colors tr.ar_editStyle a").click(function(){ + $('body').append( + '