Seite 1 von 1

Farbige Auswahlboxen

Verfasst: Mi 23. Feb 2005, 00:33
von Edanis
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:

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>
Dieses Teil sollte in die templates/standard/template.tplcfg_edit_form.html hinter

Code: Alles auswählen

<script type="text/javascript">
{SCRIPT}
</script>
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:

Bild

Und danach

Bild

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

Verfasst: Sa 26. Feb 2005, 14:14
von emergence
intressante lösung...