Zugriff auf LESS-Variablen im Frontend

  • 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/thread/44-addi…ostID=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.

    • Offizieller Beitrag

    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:

  • 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.

    • Offizieller Beitrag

    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
      • Local Storage
      • Cookie

    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

    • Offizieller Beitrag

    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.

  • 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) : '';
    }

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!