Farbige Auswahlboxen
Verfasst: Mi 23. Feb 2005, 00:33
Hallo, weiß nicht ob es nicht eine Radneuerfindung ist, poste trotzdem, vielleicht findet jemand je nach Farboffenheit
nützlich.
Die Erweiterung kommt auf die indirekte Anregung von Karin bzw ihr Modul zurück.
Es ist mir schon zweimal passiert dass nach der "Möbelumstellung" alle Kategorien und einige Artikel neukonfiguriert werden mussten, das kann bei einer mittelgrooßen Site schon stunden in Anspruch nehmen. Folgendes könnte da etwas helfen:
Dieses Teil sollte in die templates/standard/template.tplcfg_edit_form.html hinter
stehen. Folge: Der Skript durchsucht die Konfigurationsseite (Content/Artikel/Konfiguration bzw. Style/Module/Vorkonfiguration) und vergibt den Einträgen der Auswahllisten unterschiedliche Farben. Die sind hinterher zwar schwerer zu lesen, hinterlassen aber ein "Farbabdruck", den man sich leichter merken kann.
Einmal konfiguriert kann man schneller erkennen ob die Konfiguration anderer Seiten identisch ist und man sucht nicht mehr nach dem Eintrag sondern nach seiner Farbe.
Das Ergebnis, ohne die Erweiterung:

Und danach

Eigene CSS - Farbeinstellungen bleiben unberührt, sind keine definiert (bei einer "farblosen Programmierung" der Fall), werden zugewiesen.
Falls das man auch eher praktisch und weniger kitch findet, viel spass damit
MfG, Edward

Die Erweiterung kommt auf die indirekte Anregung von Karin bzw ihr Modul zurück.
Es ist mir schon zweimal passiert dass nach der "Möbelumstellung" alle Kategorien und einige Artikel neukonfiguriert werden mussten, das kann bei einer mittelgrooßen Site schon stunden in Anspruch nehmen. Folgendes könnte da etwas helfen:
Code: Alles auswählen
<script type="text/javascript">
function MNHtoRGB (M, N, H) {
if (H < 0) H += 360;
if (H < 60) { return (M + (N-M)*H/60); }
else if (H < 180) { return (N); }
else if (H < 240) { return (M + (N-M)*(240-H)/60); }
else { return (M); }
}
function HLStoRGB (H, L, S) {
if (S == 0) {
return ("#000000");
} else {
H = H % 360;
var N = ((L > 0.5) ? L+S - L*S : L * (S + 1));
var M = L * 2 - N;
var R = Math.floor(255 * MNHtoRGB (M, N, H + 120)); R = (R < 16 ? "0" : "") + R.toString(16);
var G = Math.floor(255 * MNHtoRGB (M, N, H)); G = (G < 16 ? "0" : "") + G.toString(16);
var B = Math.floor(255 * MNHtoRGB (M, N, H - 120)); B = (B < 16 ? "0" : "") + B.toString(16);
return ("#" + R + G + B);
}
}
var Forms = document.forms;
for (var i = 0; i < Forms.length; i++) for (var k = 0; k < Forms[i].elements.length; k++){
var Element = Forms[i].elements[k];
if (Element.type.substr(0, 6) == "select") {
//Jeder Option-Eintrag der Auswahlbox bekommt laufend eine
//weitere Farbe (Farbtabelle: HLS, 360 Farben.)
var L = 0.5; //Heligkeit (0..1, 0 = schwarz, 1 = weiß).
var S = 1; //Sättigung (0..1).
var Len = Element.options.length % 360;
for (var n = 0; n < Element.options.length; n++) {
Opti = Element.options[n];
//Ist die CSS - Hintergrundfarbe nicht gesetzt, zuweisen.
if (Opti.style.backgroundColor == "") {
var Clr = (Len < 1 ? 0 : Math.floor(n * 360 / Len));
Opti.style.color = "white";
Opti.style.backgroundColor = HLStoRGB(Clr, L, S);
}
}
}
}
</script>
Code: Alles auswählen
<script type="text/javascript">
{SCRIPT}
</script>
Einmal konfiguriert kann man schneller erkennen ob die Konfiguration anderer Seiten identisch ist und man sucht nicht mehr nach dem Eintrag sondern nach seiner Farbe.
Das Ergebnis, ohne die Erweiterung:

Und danach

Eigene CSS - Farbeinstellungen bleiben unberührt, sind keine definiert (bei einer "farblosen Programmierung" der Fall), werden zugewiesen.
Falls das man auch eher praktisch und weniger kitch findet, viel spass damit

MfG, Edward