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:
[...]
<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.
[...]
<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?
Es wird darauf ankommen, was die beiden "inline"s umschließt.
Hierbei passiert es nicht
<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>
Also vom Layout insgesamt sieht das komplette Element so aus:
<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 ;-)
Zitat von: setstate am 18 Februar 2018, 22:30:26
Hierbei passiert es nicht
<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:
<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).
ich denke, wenn man in der fhem-tablet-ui.css, ab Zeile 1800 !important hinzufügt, funktioniert es
.inline {
display: inline-block !important;
Zitat von: setstate am 19 Februar 2018, 19:52:33
ich denke, wenn man in der fhem-tablet-ui.css, ab Zeile 1800 !important hinzufügt, funktioniert es
.inline {
display: inline-block !important;
Jein :-X
Inline funktioniert dann zwar, jedoch wird nichts mehr versteckt. Nun ist quasi data-hide(-on) außer Funktion.
Mist.
Na, ja. muss ich nochmal nachdenken ...
Dann das !important wieder weg und die update_hide function geändert
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');
}
}
});
});
}
Ha! Läuft!
Besten Dank und schönen Abend noch!