Zugriff auf LESS-Variablen im Frontend

  • Hallo,


    kann man irgendwie im Frontent die LESS-Variablen (z.B. @wcfPageBackgroundColor) vom Stil abfragen?


    Z.B. irgendwie {$__wcf->getStyleHandler()->getStyle()->...

  • Danke,


    gibt es auch einen Weg ohne eine separate PHP-Datei?
    Ich will im Template (via TemplateListeners) die für den gerade aktiven Stil geltende LESS-Variable auslesen.

  • Das kann alles im Template ausgeführt werden. loadVariables kann mittels assign aufgerufen werden und danach einfach getVariable(). StyleHandler muss auch nicht, wie ich oben geschrieben habe, als Core-Objekt registriert werden, weil es ja WCF::getStyleHandler() gibt.

  • Danke @SoftCreatR


    Jetzt hab ich noch eine Hürde.


    Wenn ich mir z.B. die Variable $__wcf->getStyleHandler()->getStyle()->getVariable('wcfContainerBackgroundColor') ausgeben lasse, kommt eine RGBA-Farbe raus. Für meinen Zweck brauche ich sie als HEX.


    Kann ich das Irgendwie im Template umwandeln bzw. mir gleich als Hex ausgeben lassen?


    Mein Weg bisher:


    Im Styleditor komme ich zwar auf HEX, aber auf die Variable @testcolor kann ich über ->getVariable nicht im Frontend zugreifen.


    CSS
    @testcolor: rgb(red(@wcfContentBackgroundColor), green(@wcfContentBackgroundColor), blue(@wcfContentBackgroundColor));
    Body {
    background-color: @testcolor !important;
    }



    Ergebnis durch Umwandlung:


    Kann man @testcolor Registrieren ich es über ->getVariable nutzen kann oder gibt es einen ganz anderen Weg?

  • Für ein neues Plugin.
    https://support.destinaja.de/t…ta-tags/?postID=91#post91


    Im Rahmen von Metatags im Header kann ich nur Hex nutzen. Ich wollte eine bestehende LESS-variable (@wcfPageBackgroundColor oder @wcfTabularBoxBackgroundColor) als Initialwert nutzen, damit grundsätzlich eine Theme-Color gesetzt ist. Diese soll man dann manuell ändern können.
    Wenn ich die vom aktiven Stil nutzen kann wäre das von Vorteil, wenn man mehrere Stile auf der Seite nutzt.


    Bei einer reinen manuellen Vorgabe wäre die Theme-Color immer gleich.

  • Ich hab hier an dem Punkt jetzt wieder weitergemacht.
    Irgendwie stelle ich mich bei der Nutzung der Funktion doof an.



    Wenn ich mir Color ausgebe bekomme "000000" angezeigt anstatt dem gewünschten Hex-Wert. Mein Aufruf ist bestimmt falsch.

  • Ich empfehle dir die Nutzung von console.debug(…) statt alert(…), damit landet die Ausgabe gut lesbar in der Console der Entwickler-Tools.


    Davon abgesehen kannst du den Code auch einfacher schreiben:

    Alexander Ebert
    Senior Developer WoltLab® GmbH

  • Vielen Dank für die Vereinfachung. Das mit dem console.debug(…) erleichtert vieles.


    Wieso hat mein vorheriger Code an der Stelle wo ich die Funktion aufgerufen habe, nicht mehr funktioniert. Damit ich für die Zukunft verstehe was falsch war?


    Ich hab jetzt noch die Bezeichnungen geändert und eine Abfrage eingefügt ob bereits ein Hex-Code vorgelegen hat.

    Jetzt stehe ich noch vor dem Problem das Javascript ja clientseitig nach dem Laden ausgeführt wird. Gibt es die Möglichkeit die Seite neu zu laden und dabei das Ergebnis der Variable themeColor so zu übergeben/speichern, dass es von Beginn an zur Verfügung steht? (vlt. als php-Variable)


    Ich hab es in verschiedenen Varianten mit data-relocate="true" probiert und bin gescheitert.

  • Wieso hat mein vorheriger Code an der Stelle wo ich die Funktion aufgerufen habe, nicht mehr funktioniert. Damit ich für die Zukunft verstehe was falsch war?

    So genau habe ich mir den gar nicht angeschaut, er sah für mich einfach nur unnötig umständlich und intransparent raus. Statt also nach dem Fehler zu suchen, habe ich den Code einfach so umgeschrieben das er etwas einfacher und übersichtlicher ist.

    Ich hab jetzt noch die Bezeichnungen geändert und eine Abfrage eingefügt ob bereits ein Hex-Code vorgelegen hat.

    Die Farbwerte werden immer als rgba(…) hinterlegt.

    Gibt es die Möglichkeit die Seite neu zu laden und dabei das Ergebnis der Variable themeColor so zu übergeben/speichern, dass es von Beginn an zur Verfügung steht?

    Dafür gibt es viele Möglichkeiten:

    • Server (Speicherung via AJAX)
    • Client[list=1]
    • Local Storage
    • Cookie

    [/list]Cookies würde ich aus verschiedenen Gründen nicht nehmen, die Speicherung am Server ist zuverlässig und persistent, erfordert aber zusätzlichen Datenverkehr und entsprechende Logik beim Auslesen. Der Local Storage dagegen ist ziemlich persistent und kann über JavaScript sehr einfach abgefragt werden: https://developer.mozilla.org/en-US/docs/Web/API/Storage

    Alexander Ebert
    Senior Developer WoltLab® GmbH

  • Kannst du mir noch sagen wie ich den Local Storage mittels php im html auslesen kann. Damit ich beim Laden der Seite an die Informationen komme und nicht wie beim Javascript erst nach dem laden.

  • Gar nicht, der Local Storage ist nur via JavaScript zugänglich und wird zum Beispiel von uns für die Speicherung des Nachrichtentextes im Redactor verwendet. In deinem Fall bleibt also nur eine Speicherung via AJAX übrig, Cookies sind zu unzuverlässig / nicht persistent.

    Alexander Ebert
    Senior Developer WoltLab® GmbH

  • Danke für die Hilfe.
    Alles weitere würde zu sehr vom Thema abschweifen. Meine Eingangsfrage und wie man die Farbwerte umwandeln kann ist ja geklärt,


    Nachdem ich mich weiter eingearbeitet habe werde ich ggf. ein neues Thema eröffnen

  • Davon abgesehen kannst du den Code auch einfacher schreiben:


    Und noch einfacher:


    JavaScript
    function rgb2hex(rgb) {
    return rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i), rgb && 4 == rgb.length ? "#" + ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) + ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) + ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2) : ""
    }


    bzw:


    JavaScript
    function rgb2hex(rgb) {
    rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
     
    return (rgb && rgb.length == 4) ? '#' + ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[3], 10).toString(16)).slice(-2) : '';
    }