data-hide-on unterdrückt class="inline"? [gelöst]

[Shoddy]

Hi,

ich lasse mir mit Labels Artist und Titel von Musik anzeigen. Abgegriffen werden diese Readings von meinem SB-Player (Cubieplayer). Die Labels stehen via class="inline" in einer Zeile mit Push-Widgets für Play, Pause, etc.

So funktionierts mit dem inline:

Code Auswählen Erweitern



[...]
<div class="inline small truncate"
                                                data-type="label"
                                                data-device="Cubieplayer"
                                                data-get="currentArtist"
                                                data-post-text=" - "></div>
                                        <div class="inline small truncate"
                                                data-type="label"
                                                data-device="Cubieplayer"
                                                data-get="currentTitle"></div>
[...]


Da der Cubieplayer aber u.a. auch für TTS genutzt wird, tauchen manchmal beim Titel hässlich lange "http://..."-geschichten auf, die ich mittels data-hide(-on) unterdrücken möchte.

Sobald ich nun meine Parameter für data-hide hinzufüge, wird "inline" ignoriert und die Labels ploppen jeweils in einer neuen Zeile auf.

Code Auswählen Erweitern



[...]
                                         <div class="inline small truncate"
                                                data-type="label"
                                                data-device="Cubieplayer"
                                                data-get="currentArtist"
                                                data-post-text=" - "
                                                data-hide="currentTitle"
                                                data-hide-on="(http.*|bellen)"></div>
                                        <div class="inline small truncate"
                                                data-type="label"
                                                data-device="Cubieplayer"
                                                data-get="currentTitle"
                                                data-hide-on="(http.*|bellen)"></div>
[...]


Im Anhang ein Screen, wie das Ganze dann aussieht (Beim "Cubie" ohne data-hide, bei "Boxxy" mit).

Hat jemand eine Idee? Bug, Feature oder sitzt der Fehler vorm Bildschirm?

[setstate]

Es wird darauf ankommen, was die beiden "inline"s umschließt.

Hierbei passiert es nicht

Code Auswählen Erweitern


            <li data-row="1" data-col="4" data-sizex="3" data-sizey="2">
                <header>tracks</header>
                   <div class="inline small truncate"
                    data-type="label"
...
                    ></div>
                    <div class="inline small truncate"
                    data-type="label"
...
                    ></div>
            </li>


[Shoddy]

Also vom Layout insgesamt sieht das komplette Element so aus:

Code Auswählen Erweitern


<li data-row="1" data-col="4" data-sizey="2" data-sizex="10">
<header>Media</header>
<div class="row">
<div class="cell-10">...</div>
<div class="cell">
<div class="sheet">
<div class="row">
<div class="cell left-align">...</div>
                                                </div>
<div class="row">
<div class="cell left-align">...</div>
                                                </div>
</div>
</div>
</div>               
</li>


Da das Ganze komplett ausgeschrieben zu lang wird, ist der Code hier entsprechend stark eingekürzt. Komplett habe ich ihn einfach mal angefügt (die Playlist Heuck Zeug kann ich empfehlen

Hierbei passiert es nicht

Code Auswählen Erweitern


            <li data-row="1" data-col="4" data-sizex="3" data-sizey="2">
                <header>tracks</header>
                   <div class="inline small truncate"
                    data-type="label"
...
                    ></div>
                    <div class="inline small truncate"
                    data-type="label"
...
                    ></div>
            </li>


Sieht bei mir auch gut aus. Sobald ich jedoch ein device hinzufüge, welches abgefragt wird und zusätzlich mittels data-hide-on anweise, dass das label versteckt wird, wenn das device den Zustand "on" hat, wird inline wieder ignoriert:

Code Auswählen Erweitern

            <li data-row="5" data-col="4" data-sizex="2" data-sizey="2">
                <header>tracks</header>
                   <div class="inline small truncate"
                    data-type="label"
                    > TEST </div>
                    <div class="inline small truncate"
                    data-type="label"
                    > TEST</div>
            </li>

            <li data-row="5" data-col="6" data-sizex="2" data-sizey="2">
                <header>tracks</header>
                   <div class="inline small truncate"
                    data-type="label"
                    > TEST </div>
                    <div class="inline small truncate"
                    data-type="label"
                    data-device="dummydevice"
                    data-hide-on="on"
                    > TEST</div>
            </li>



Wenn das device "on" ist, verschwindet das Label auch zuverlässig. Aber sobald es "off" ist, klappt inline nicht mehr.
Zudem verschwindet plötzlich der Text "TEST"  (siehe Screenshot im Anhang).

[setstate]

ich denke, wenn man in der fhem-tablet-ui.css, ab Zeile 1800 !important hinzufügt, funktioniert es

Code Auswählen Erweitern


.inline {
    display: inline-block !important;


[Shoddy]

ich denke, wenn man in der fhem-tablet-ui.css, ab Zeile 1800 !important hinzufügt, funktioniert es

Code Auswählen Erweitern


.inline {
    display: inline-block !important;


Jein 

Inline funktioniert dann zwar, jedoch wird nichts mehr versteckt. Nun ist quasi data-hide(-on) außer Funktion.

[setstate]

Mist.

Na, ja. muss ich nochmal nachdenken ...

Dann das !important wieder weg und die update_hide function geändert

Code Auswählen Erweitern


    function update_hide(dev, par) {
        $.each(['hide', 'hide-on', 'hide-off'], function (index, key) {
            me.elements.filterDeviceReading(key, dev, par)
                .each(function (idx) {
                    var elem = $(this);
                    var value = elem.getReading('hide').val;
                    if (elem.matchingState('hide', value) === 'on') {
                        if (ftui.isValid(elem.data('hideparents'))) {
                            elem.parents(elem.data('hideparents')).addClass('hide');
                        } else {
                            elem.addClass('hide');
                        }
                    }
                    if (elem.matchingState('hide', value) === 'off') {
                        if (ftui.isValid(elem.data('hideparents'))) {
                            elem.parents(elem.data('hideparents')).removeClass('hide');
                        } else {
                            elem.removeClass('hide');
                        }
                    }
                });
        });
    }


[Shoddy]

Ha! Läuft!

Besten Dank und schönen Abend noch!