UZSU icon in einem popup

[fuxl66]

Hi,

Grundsätzlich habe ich im Laufe der Zeit meine komplette Steuerung innerhalb meiner navigation.html in Popups verlegt.
Das klappt eigentlich sehr gut, ausser mit den UZSU Icons. Wie in folgendem Bild. Das Icon wird zwar angezeigt, jedoch ist es nicht klickbar. Läßt sich das lösen?
image.png

Ausschnitt:

<div id="popupIndoor" data-role="popup" style="width:380px; height:760px; border-color: white; border-style=solid;" data-theme="a">
    <table border="0" width="100%" cellpadding="0" cellspacing="8" align="center" border-spacing="9">
        <tr>
            <th colspan="2" align=left width="70%">{{ basic.print('', 'Text.WW', 'text', '', '', 'icon1') }}</th>
            <th colspan="1" align=right width="30%">{{ basic.symbol('', 'LWZ.iconDHW', '', 'sani_water_tap.svg', 1, '', 'icon1', '', '', 'micro') }}</th>
        </tr>
        <tr>
            <th  width="100%" colspan="3" align="center" style="border-top: 1px solid white;"></th>
        </tr>
        <tr>
            <td align=left width="35%">{{ basic.print('', 'Text.IST', 'text', '', '', 'icon0') }}</td>
            <td align=center width="35%"><b>{{ basic.print('', 'ModbusItems.LWZ404.dhwTemp', '°', '', '', 'icon1', '', '', 'micro') }}</b></td>
            <td align=center width="30%"></td>
        </tr>
        <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center" border-spacing="0">
            <tr>
                <td width="35%" align=left style="text-indent: 5px;">{{ basic.print('', 'Text.SollTag', 'text', '', '', 'icon0') }}</td>
                <td width="35%" align=left>{{ basic.select('', 'ModbusItems.LWZ404.p04DHWsetDayTemp', 'mini', [37,45,50], '', ['37°C','45°C','50°C']) }}</td>
                <td width="30%" align=center></td>
            </tr>
            <tr>
                <td align=left style="text-indent: 5px;">{{ basic.print('', 'Text.SollNacht', 'text', '', '', 'icon0') }}</td>
                <td align=left>{{ basic.select('', 'ModbusItems.LWZ404.p05DHWsetNightTemp', 'mini', [37,45,50], '', ['37°C','45°C','50°C']) }}</td>
                <td align=right>{{ device.uzsuicon('', 'ModbusItems.LWZ404.p05DHWsetNightTemp.uzsu', 'WW Nacht Automatik Mod', '', '', 'list', [37, 40, 43, 47, 53]) }}</td>

            </tr>
        </table>
    </table>​

mfg
Markus

[wvhn]

Moin Markus,

Eine schicke Visu hast Du da gebaut!

Leider lassen sich Popups mit jQuery mobile nicht verketten. Da device.uzsuicon selbst ein Popup ist, kann das eben nicht in einem übergeordneten Popup funktionieren. Das ist mit smartVISU Bordmitteln nicht zu lösen.

Es gibt aber einen Trick, mit dem man das neue Popup erst per Timeout öffnet, nachdem das erste geschlossen ist. Das ist hier ganz gut beschrieben.

Gruß
Wolfram

[schuma]

Du könntest das erste Fenster als Block erstellen und den schließen/ öffnen. Darin funktioniert dann wieder ein Popup (Uzsu).
Falls es in das Design passt.
Ich hatte das so im AlexaRadio Widget so gemacht.

[wvhn]

Es ist doch einfacher, als gedacht. Da device.uzsuicon einen eigenen click-Handler hat, kann man mit diesem das übergeordnete Popup finden und schließen, wie in dem o.g. Link vorgeschlagen.

Probier mal, ob folgender Code in der ./widgets/device.js für Dich funktioniert:

  _events: {
    'click': function(event) {
      // hier werden die Parameter aus den Attributen herausgenommen und beim Öffnen mit .open(....) an das Popup Objekt übergeben
      // und zwar mit deep copy, damit ich bei cancel die ursprünglichen werte nicht überschrieben habe
      var response = jQuery.extend(true, {}, this._uzsudata);
	  var that = this;

      if (this._uzsuParseAndCheckResponse(response)) {
		  // Öffnen des Popups bei clicken des icons und Ausführung der Eingabefunktion
		  // vorher das übergeordnete Popup schließen, falls uzsuicon in einem Popup platziert ist
		  var target = $(this.element).parents('[data-role="popup"]');
		  if (target.length != 0){
			  target.popup('close');
			  setTimeout(function(){that._uzsuRuntimePopup(response);}, 100)
		  } 
		  else
			  this._uzsuRuntimePopup(response);
      }
    }
  },

Der Einfachheit halber habe ich den gesamten Event-Handler angegeben, damit Du nicht einzelne Zeilen einfügen musst, sondern den Handler komplett tauschen kannst. In der Version v3.5.0 beginnt dieser in Zeile 1644. In der develop-Version v3.5.a ist dies Zeile 1700.

Falls Du eine Sicherheitskopie der device.js anlegst, benenne bitte die Deteiendung um, da jede .js-Datei im Widgets-Verzeichnis importiert wird und es dann zu Konflikten kommt.

Gruß
Wolfram