widget 'shutter': code für korrekte Lamellendarstellung

[alkazaa]

Im widget shutter werden die Lamellenwinkel für 'Lamellen offen' und 'Lamellen geschlossen' auf die gleiche Art visualisiert, sodass man am Bild nicht erkennen kann, welcher Zustand vorliegt.

Verantwortlich ist ein Fehler in der Datei /widgets/basic.js. Damit die Darstellung der Lamellen korrekt wird, muss man in den Zeilen 880-885 den

                if (a > 0) {
                    $(this).attr('class', 'blade-pos');
                }
                else {
                    $(this).attr('class', 'blade-pos');
                }​

ändern in den

                if (a > 0) {
                    $(this).attr('class', 'blade-pos');
                }
                else {
                    $(this).attr('class', 'blade-neg');
                }​

[wvhn]

Moin alkazaa

super, dass Du Dir die Dinge so genau anschaust und die uralten Bugs aufdeckst. Wenn man es so genau nimmt, stellt sich IMHO noch die Frage, ob man blade-pos und blade-neg vertauschen sollte. Der Blick geht ja von innen durch das Fenster nach außen. Wenn die Jalousie geschlossen ist, blickt man in der Regel in die gewölbte Lamelle hinein. Da würde aus meiner Sicht die Klasse blade-neg besser passen.

Und wenn wir schon dabei sind: ich kenne nur Jalousien, bei denen die noch nicht ausgefahrenen Lamellen unten im Bündel anhängen und nicht oben. Sollen wir das auch gleich ändern?

Heute:
grafik.png
Geändert:
grafik.png

Gruß
Wolfram

[alkazaa]

... stellt sich IMHO noch die Frage, ob man blade-pos und blade-neg vertauschen sollte. ...

Damit hatte ich bei mir in der visu.css begonnen. Hatte erwartet, dabei auch das Lamellen Zu/Auf Problem lösen zu können, nur um zu merken, dass es blade-pos und blade-neg ja schon gab. Um dann auf den Copy&Paste-Progammierfehler zu stoßen...

Und wenn wir schon dabei sind: ich kenne nur Jalousien, bei denen die noch nicht ausgefahrenen Lamellen unten im Bündel anhängen und nicht oben. Sollen wir das auch gleich ändern?

Na klar, macht Sinn. Hab ich mich als html/php/twig/css/usw nur sehr mäßig Kundiger nicht getraut.

Danke und beste Grüße
Franz

[alkazaa]

Na klar, macht Sinn. Hab ich mich als html/php/twig/css/usw nur sehr mäßig Kundiger nicht getraut.

Hab mich jetzt doch getraut und war überrascht, wie einfach es ging: ich habe in /widgets/basic.js in der Zeile

 $.each(this.element.find('.blade-pos, .blade-neg').get().reverse(), function(i) {​

das reverse() rausgeschmissen

 $.each(this.element.find('.blade-pos, .blade-neg').get(), function(i) {​

und es funktioniert wie gewünscht, d.h. das ungenutzte Lamellenbündel hängt nun unten.


Unabhängig davon habe ich die Optik meiner shutter-Darstellung (in /pages/meinhaus/visu.css) so angepasst, wie es mir bei meinen Raffstores am passendsten erschien:

.shutter .blade-pos {
  width: 100px;
  height: 1px;
  background: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(40%, #999), color-stop(70%, #444), color-stop(100%, #222));
  background-image: -webkit-linear-gradient(#fff, #999 40% , #444 70%, #222);
  background-image: -moz-linear-gradient(#fff, #999 40% , #444 70%, #222);
  background-image: -ms-linear-gradient(#fff, #999 40% , #444 70%, #222);
  background-image: -o-linear-gradient(#fff, #999 40% , #444 70%, #222);
  background-image: linear-gradient(#fff, #999 40% , #444 70%, #222);
}

.shutter .blade-neg {
  width: 100px;
  height: 1px;
  background: #bbb;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bbb), color-stop(20%, #777), color-stop(70%, #222), color-stop(100%, #000));
  background-image: -webkit-linear-gradient(#bbb, #777 20% , #222 70%, #000);
  background-image: -moz-linear-gradient(#bbb, #777 20% , #222 70%, #000);
  background-image: -ms-linear-gradient(#bbb, #777 20% , #222 70%, #000);
  background-image: -o-linear-gradient(#bbb, #777 20% , #222 70%, #000);
  background-image: linear-gradient(#bbb, #777 20% , #222 70%, #000);
}​

[wvhn]

Moin Franz,

danke für die Hinweise. Wenn man den Shutter intensiv durchtestet (ich nutze den Widget-Assistenten mit dem Widget und je einem Slider zum Verändern von Position und Lamellenwinkel), dann zeigen sich Kombinationen, in denen der Shutter nicht richtig dargestellt wird. Ich habe deshalb noch ein paar andere Stellen geändert. Das Ergebnis ist jetzt im develop branch.

An den CSS-Klassen habe ich erst einmal nichts geändert. Insofern ist es richtig, wenn Du Deine Anpassungen in der visu.css behältst.

Gruß
Wolfram