Farbige Auswahlboxen

[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:



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

[emergence]

intressante lösung...