SV 2.9: basis.stateswitch mit hidden

[Sisamiwe]

Hallo,

bei der Verwendung von basic.stateswitch mit der Option "hidden" ist mit aufgefallen, dass die entsprechenden Symbole zwar nicht angezeigt werden, aber der Platz dafür reserviert ist.

Anwendung:
Ich habe mit eine Pop-Up gebaut, in der ich alle aktiven Leuchten zeigen will. Dafür habe ich alle verwendeten basic.stateswitch aller Seiten in dieses Pop-Up gebracht und möchte nur die sehen, die auch an sind. Durch die Reservierung des Platzes klappt das aber nun unschön.

hier die alte Version mit hiddenswitch:
2.JPG


und so mit basic.stateswitch

1.JPG

der Code:

    <li data-role="list-divider">
    <a href="#popup3" data-rel="popup">
    <img class="icon icon1" src="{{ icon0 }}control_all_on_off.svg" /> 
    </a>

    <div id="popup3" data-role="popup" style="width:280px; height:500px;">
    <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
        {{ basic.stateswitch('', 'Licht.Wohnzimmer.Stedo_WZ.OnOff', 'icon', [0,1], ['', 'light_floor_lamp.svg'], ['', 'WZ Stehleuchte'], ['hidden', 'icon1']) }}
        {{ basic.stateswitch('', 'Licht.Wohnzimmer.LED.OnOff', 'icon', [0,1], ['', 'light_led.svg'], ['', 'WZ LED an Decke'], ['hidden', 'icon1']) }}
        {{ basic.stateswitch('', 'Licht.Wohnzimmer.Vorsatz_nische.OnOff', 'icon', [0,1], ['', 'light_led.svg'], ['', 'WZ LED Nische'], ['hidden', 'icon1']) }}
        {{ basic.stateswitch('', 'Licht.Wohnzimmer.Vorsatz_weiss.OnOff_DALI', 'icon', [0,1], ['', 'light_diffused.svg'], ['', 'WZ Decke_Weiß'], ['hidden', 'icon1']) }}
        {{ basic.stateswitch('', 'Licht.Wohnzimmer.Vorsatz_farbe.OnOff_DALI', 'icon', [0,1], ['', 'light_diffused.svg'], ['', 'WZ Decke_Farbe'], ['hidden', 'icon1']) }}
        {{ basic.stateswitch('', 'Licht.Wohnzimmer.Wandleuchten.OnOff', 'light_wall_1.svg', [0,1], ['', 'symbol'], ['', 'WZ Deko'], ['hidden', 'icon1']) }}
        {{ basic.stateswitch('', 'Licht.Wohnzimmer.Wandschrank_oben.OnOff', 'icon', [0,1], ['', 'light_light_dim_100.svg'], ['', 'WZ Wandleuchten'], ['hidden', 'icon1']) }}
        {{ basic.stateswitch('', 'Licht.Wohnzimmer.Wandschrank_unten.OnOff', 'icon', [0,1], ['', 'light_diffused.svg'], ['', 'WZ WS-Flood'], ['hidden', 'icon1']) }}
        {{ basic.stateswitch('', 'Licht.Kueche.Deckenfluter.OnOff_DALI', 'icon', [0,1], ['', 'light_diffused.svg'], ['', 'KÜ Deckenfluter'], ['hidden', 'icon1']) }}
        {{ basic.stateswitch('', 'Licht.Kueche.Deckenleuchten.OnOff', 'icon', [0,1], ['', 'light_wall_1.svg'], ['', 'KÜ Decke'], ['hidden', 'icon1']) }}
        {{ basic.stateswitch('', 'Licht.Kueche.Regalleuchte.OnOff', 'icon', [0,1], ['', 'light_wall_2.svg'], ['', 'KÜ Regalleuchte'], ['hidden', 'icon1']) }}
        {{ basic.stateswitch('', 'Licht.Kueche.Hochschrank.OnOff', 'icon', [0,1], ['', 'ight_diffused.svg'], ['', 'KÜ Hochschrank'], ['hidden', 'icon1']) }}
        {{ basic.stateswitch('', 'Licht.Esszimmer.Esstisch.OnOff', 'icon', [0,1], ['', 'light_dinner_table.svg'], ['', 'EZ Tischleuchte'], ['hidden', 'icon1']) }}
        {{ basic.stateswitch('', 'Licht.Esszimmer.Panoramafenster.OnOff', 'icon', [0,1], ['', 'light_wall_2.svg'], ['', 'EZ Panoramafenster'], ['hidden', 'icon1']) }}
        {{ basic.stateswitch('', 'Licht.Esszimmer.Suedwand_links.OnOff', 'icon', [0,1], ['', 'light_wall_1.svg'], ['', 'EZ Wandleuchte Süd'], ['hidden', 'icon1']) }}
        {{ basic.stateswitch('', 'Licht.Esszimmer.Suedwand_mitte.OnOff', 'icon', [0,1], ['', 'light_wall_1.svg'], ['', 'EZ Wandleuchte Mitte'], ['hidden', 'icon1']) }}
        {{ basic.stateswitch('', 'Licht.Esszimmer.Bodenleuchte.OnOff', 'icon', [0,1], ['', 'light_uplight.svg'], ['', 'EZ Bodenleuchten'], ['hidden', 'icon1']) }}
        {{ basic.stateswitch('', 'Licht.Esszimmer.Leseleuchte.OnOff', 'icon', [0,1], ['', 'light_floor_lamp.svg'], ['', 'EZ Leseleuchte'], ['hidden', 'icon1']) }}
        {{ basic.stateswitch('', 'Licht.Esszimmer.Traeger.OnOff_DALI', 'icon', [0,1], ['', 'light_diffused.svg'], ['', 'EZ Deckenfluter'], ['hidden', 'icon1']) }}
        {{ basic.stateswitch('', 'Aussen.Steckdose.Pumpe.OnOff', 'icon', [0,1], ['', 'sani_domestic_waterworks.svg'], ['', 'Außen Pumpe'], ['hidden', 'icon1']) }}
        {{ basic.stateswitch('', 'Licht.Aussen.Ost.OnOff', 'icon', [0,1], ['', 'light_outdoor.svg'], ['', 'Außen Licht Ost'], ['hidden', 'icon1']) }}
        {{ basic.stateswitch('', 'Licht.Aussen.Terrasse.OnOff', 'icon', [0,1], ['', 'light_wall_3.svg'], ['', 'Außen Licht Terrasse'], ['hidden', 'icon1']) }}
        {{ basic.stateswitch('', 'Aussen.Steckdose.Terrasse.OnOff', 'icon', [0,1], ['', 'message_socket.svg'], ['', 'Steckdose Terrasse'], ['hidden', 'icon1']) }}
        {{ basic.stateswitch('', 'Licht.Windfang.Garderobe.OnOff', 'icon', [0,1], ['', 'light_diffused.svg'], ['', 'WF Garderobe'], ['hidden', 'icon1']) }}
    </div> 
    </li>

Mach ich was falsch?
DANKE

[smai]

Du machst nichts falsch, dies ist tatsächlich so. Ich hatte das bewusst so gemacht, damit beim Ausblenden nicht alle anderen Elemente herumspringen. In deinem Anwendungsfall ist das allerdings nicht sinnvoll.
Da es einfach ist, bei Bedarf einen fixen Platzhalter einzufügen aber kaum möglich, den jetzigen zu entfernen, werde ich das wohl ändern (ausser es kommt hier noch heftiger Widerspruch).

[gama]

Vielleicht als Option, sodass man den Platzhalter je nach Verwendung de-/aktivieren kann?

[smai]

Ja, das habe ich mir auch überlegt. Technisch wäre das ganz einfach, ich hatte nur noch keine Idee, welche beiden Begriffe ich als Parameterwert verwenden soll, damit es intuitiv verständlich ist.
Aktuell heisst es ja 'hidden', was in CSS als "visibility: hidden" für "ausgeblendet mit Platzhalter" steht.
Wie würdet ihr "ausblenden ohne Platzhalter" bezeichnen? In CSS wäre das "display: none". Diese ganz andere Angabe für fast das gleiche führt auch bei CSS-Einsteigern immer wieder zu Verwirrung.
Gute Vorschläge nehme ich gerne entgegen.

[gama]

Wirklich schwierig, aber vielleicht "dynamic"? Oder doch zwei Wörter "hidden_placeholder" und "hidden_dynamic" oder "hidden_displace"

[smai]

Ich habe nun 'hidden' für ganz ausgeblendet und 'blank' für Platzhalter implementiert und in der Doku so aufgeführt.

[Sisamiwe]

Top!
Danke