Zugriff auf LESS-Variablen im Frontend

the_waiters · March 30, 2016 at 8:16 PM

Hallo,

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

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

Matthias Schmidt · March 30, 2016 at 9:14 PM Official Post

https://github.com/WoltLab/WCF/bl…e.class.php#L62 und vorher https://github.com/WoltLab/WCF/bl…e.class.php#L78~~, wenn man den Style-Handler als Core-Objekt registriert~~.

the_waiters · March 30, 2016 at 9:22 PM

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.

Matthias Schmidt · March 30, 2016 at 9:27 PM Official Post

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.

SoftCreatR · March 30, 2016 at 10:10 PM

Kannst dich ja inspirieren lassen: http://packages.softcreatr.de/release/2.1/#d…phoon-mucaptcha

the_waiters · March 31, 2016 at 11:44 AM

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?

Black Rider · April 1, 2016 at 10:08 AM

In der Datenbank wird immer nur der RGBA-Wert gespeichert. Warum genau brauchst du sie denn zwingend als Hex-Format?

the_waiters · April 1, 2016 at 10:31 AM

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.

**Alexander Ebert** · April 1, 2016 at 10:46 AM Official Post

Am einfachsten wäre es, wenn du dir ein kleines Template-Plugin schreibst mit dem die Umrechnung in HEX vorgenommen wird. Der grundsätzliche Code dafür ist relativ trivial: https://github.com/WoltLab/WCF/bl…rPicker.js#L691 (Ist zwar JS, aber das ändert nichts daran)

the_waiters · April 25, 2016 at 5:18 PM

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

JavaScript

<script>




function mynewcolor(r, g, b) {
	return ("0123456789ABCDEF".charAt((r - r % 16) / 16) + '' + "0123456789ABCDEF".charAt(r % 16)) + '' + ("0123456789ABCDEF".charAt((g - g % 16) / 16) + '' + "0123456789ABCDEF".charAt(g % 16)) + '' + ("0123456789ABCDEF".charAt((b - b % 16) / 16) + '' + "0123456789ABCDEF".charAt(b % 16));
}




var simpleString = "{$__wcf->getStyleHandler()->getStyle()->getVariable('wcfPageBackgroundColor')}"; //hole die RGBA-Farbe aus dem Stil




var rep = simpleString.replace(/[^0-9,]/g,''); //hole die ','- getrenten Zahlen aus dem String
alert (rep); //zwischenausgabe rgba
var res = rep.split(",",3); //entferne alles ab der 3. Zahl
alert(res); //zwischenausgabe rbg




var color = mynewcolor(res); //rufe funktion auf und übergebe den RGB-Wert
alert (color); //gebe den HEX-Wert aus







</script>

Display More

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

**Alexander Ebert** · April 25, 2016 at 5:42 PM Official Post

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:

JavaScript

function mynewcolor(r, g, b) {
	return ("0123456789ABCDEF".charAt((r - r % 16) / 16) + '' + "0123456789ABCDEF".charAt(r % 16)) + '' + ("0123456789ABCDEF".charAt((g - g % 16) / 16) + '' + "0123456789ABCDEF".charAt(g % 16)) + '' + ("0123456789ABCDEF".charAt((b - b % 16) / 16) + '' + "0123456789ABCDEF".charAt(b % 16));
}




function convertColor(rgba) {
	return rgba.replace(/^rgba\((\d+), (\d+), (\d+)[^)]+\)$/, function(match, r, g, b) {
		return mynewcolor(r, g, b);
	});
}




var color = convertColor("{$__wcf->getStyleHandler()->getStyle()->getVariable('wcfPageBackgroundColor')}");

Display More

the_waiters · April 26, 2016 at 4:54 PM

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.

JavaScript

<script>
	function hexConverter(r, g, b) {
		return ("0123456789ABCDEF".charAt((r - r % 16) / 16) + '' + "0123456789ABCDEF".charAt(r % 16)) + '' + ("0123456789ABCDEF".charAt((g - g % 16) / 16) + '' + "0123456789ABCDEF".charAt(g % 16)) + '' + ("0123456789ABCDEF".charAt((b - b % 16) / 16) + '' + "0123456789ABCDEF".charAt(b % 16));
	}
	function convertThemeColor(rgba) {
		return rgba.replace(/^rgba\((\d+), (\d+), (\d+)[^)]+\)$/, function(match, r, g, b) {
			return hexConverter(r, g, b);
		});
	}
	var themeColorInput = "{$__wcf->getStyleHandler()->getStyle()->getVariable('wcfPageBackgroundColor')}";




	if(themeColorInput.startsWith('#')) {
		var themeColor = themeColorInput; 
	} else {
		var themeColor = "#" + convertThemeColor(themeColorInput);
	}
	console.debug(themeColorInput);
	console.debug(themeColor);
</script>

Display More

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.

**Alexander Ebert** · April 26, 2016 at 5:00 PM Official Post

Quote from the_waiters

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.

Quote from the_waiters

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.

Quote from the_waiters

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

the_waiters · April 26, 2016 at 5:08 PM

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.

**Alexander Ebert** · April 26, 2016 at 5:17 PM Official Post

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.

the_waiters · April 27, 2016 at 7:33 AM

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

SoftCreatR · April 27, 2016 at 8:30 PM

Quote from Alexander Ebert

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

Zugriff auf LESS-Variablen im Frontend

Participate now!

Tags