Onclick und weitere Events ohne Funktion auf Touch-Devices

[Schneewa]

Hi all

ich muss leider das Thema nochmal aufgreifen 

https://forum.fhem.de/index.php/topic,81996.msg740518.html#msg740518

ich habe ein widget_onclick.js von choenig gebaut - leider funktioniert das attr.

Code Auswählen Erweitern


data-onclick="$('#statusoverlay').hide();


nicht 

hat von den Experten vielleicht jemand Rat....

vielen Dank

[Thorsten Pferdekaemper]

Da fehlen zumindest mal schließende Anführungszeichen.
Gruß,
   Thorsten

[Schneewa]

Hi Thorsten

Danke für die rasche Antwort - Stimmt das " habe ich beim kopieren vergessen 

folgendes widget_onclick.js habe ich im Ordner js erstellt

Code Auswählen Erweitern


/* FTUI Plugin
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*/

/* global ftui:true, Modul_switch:true */

"use strict";

function depends_onclick() {
    var deps = [];
    if(typeof window["Modul_switch"] === 'undefined' || !$.fn.switch){
        return ["switch"];
    }
    return deps;
}

var Modul_onclick = function () {
    function init_ui(elem) {
        base.init_ui.call(me, elem);

        elem.on('clicked', function() {
           var onclick = elem.data('onclick');
           eval(onclick);
        });
    }

    // public
    // inherit all public members from base class
    var parent = new Modul_switch();
    var base = {
        init_ui: parent.init_ui
    };
    var me = $.extend(parent, {
        //override or own public members
        widgetname: 'onclick',
        init_ui: init_ui,
    });

    return me;
};


folgenden Code habe ich auf der FTUI Seite

Code Auswählen Erweitern


<div data-type="popup" id="Fenster_Wecker" data-width="500px" data-height="400px">
<div data-type="push"
data-device="Schlaf_Wecker_einstellen"
data-icon="mi-edit"
data-set="state"
data-cmd = "setreading"
data-on-background-color="#088A29"
data-set-on="on" data-set-off="off"
data-get-on="on" data-get-off="off"
class="big">
</div>
<div class="dialog">
<header>Wecker einstellen!</header>
.....

<div data-type="popup" data-return-time="10" id="fenster" data-width="170px" data-height="150px">
<div data-type="onclick"
data-device="Schlaf_Wecker_uebernehmen"
data-icon="fa-check"
data-set="state"
data-cmd = "setreading"
data-on-background-color="#088A29"
data-set-on="on" data-set-off="off"
data-get-on="on" data-get-off="off"
data-onclick="$('#Fenster_Wecker').hide();"
class="big">
</div>
<div class="dialog">
<header>Daten werden übernommen!</header>
<div data-type="image"
data-device="dauer_eins"
data-get="Zahnrad_lauft"
data-path="/fhem/www/tablet/pictures/"
data-size="120px"
class="">
</div>
</div>
</div>
</div>
</div>



irgendwie bekomme ich das nicht hin....

[OdfFhem]

@Schneewa

Funktioniert es denn generell bei Dir nicht oder hast Du es bis jetzt nur im popup-Umfeld getestet?

[Schneewa]

Hi OdfFhem

Schalter erscheint im popup und beim click kommt auch das 2.popup Fenster - das schließt sich auch automatisch nach 10sec.

das erste Fenster "Fenster_Wecker" wird nicht mit onclick bearbeitet - mit Touch nicht und auch nicht mit dem Mausclick

[OdfFhem]

@Schneewa

Bei mir funktioniert am PC und auch auf dem Tablet bzw. Smartphone das standardmäßige onclick-Attribut beim popup-Widget.

Das spezielle onclick-Widget benötige ich allerdings außerhalb vom Popup ... es funktioniert ohne scheinbar nirgends; mit aber dann wieder bei allen getesteten Geräten.

[Schneewa]

OK

eigentlich habe ich eine Verschachtelung -  in dem einen popup mache ich die Einstellungen und mit einem weiteren onclick soll dann dieses dieses popup geschlossen werden und das nächste dafür geöffnet.

stimmt den der Code? 

Code Auswählen Erweitern


data-onclick="$('#Fenster_Wecker').hide();"



irgendwie stehe ich auf'n Schlauch....

[OdfFhem]

@Schneewa

Ich nutze folgende Definition, um den äußeren Dialog beim Öffnen des inneren zu schließen:

Code Auswählen Erweitern


<div data-type="switch"
  data-device="Schlaf_Wecker_uebernehmen"
  .
  .
  .
  onclick="console.log('Schlafwecker'); $('#Fenster_Wecker.dialog-close').trigger('click');"
  class="big readonly">
</div>


[Schneewa]

Hi

<div data-type="switch"
  data-device="Schlaf_Wecker_uebernehmen"
  .
  .
  .
  onclick="console.log('Schlafwecker'); $('#Fenster_Wecker.dialog-close').trigger('click');"
  class="big readonly">
</div>

Der Aufbau funktioniert bei mir leider nur mit Mouseclick, leider nicht mit Touch 

[OdfFhem]

@Schneewa

Was für ein Touch-Device ist das denn?

Hersteller, Modell, Betriebssystem, Browser, ... vielleicht kann man auf diese Art dem Problem auf die Spur kommen.

[Schneewa]

Hi

2 Geräte

1x Surface mit z.B.: Google - nehme ich zum testen
1x Amazon HD Tablet mit Silk oder Google

leider funktionierts bei keinem Gerät mit Touch - beim Surface mit Mouseclick jedoch schon

Darkon hatte eigentlich dasselbe Problem
https://forum.fhem.de/index.php/topic,81996.msg740518.html#msg740518

[Schneewa]

habs jetzt hinbekommen...  - aber nur mit switch

Code Auswählen Erweitern


<div data-type="switchtouch"  data-receiver="#Fenster_Wecker"></div>


Hier der Code:

Code Auswählen Erweitern


/* FTUI Plugin
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*/

/* global ftui:true, Modul_switch:true */

"use strict";

function depends_switchtouch() {
    var deps = [];
    if(typeof window["Modul_switch"] === 'undefined' || !$.fn.switch){
        return ["switch"];
    }
    return deps;
}

var Modul_switchtouch = function () {
    function init_ui(elem) {
        base.init_ui.call(me, elem);

        elem.on('clicked', function() {
           var receiver = elem.data('receiver');
           $(receiver + '.dialog-close').trigger('click');
        });
    }

    // public
    // inherit all public members from base class
    var parent = new Modul_switch();
    var base = {
        init_ui: parent.init_ui
    };
    var me = $.extend(parent, {
        //override or own public members
        widgetname: 'switchtouch',
        init_ui: init_ui,
    });

    return me;
};


was ich nicht realisieren konnte - ist das ganze mit Push

bei der Vererbung bekomme ich immer
Fehler: "famultibutton"

kann da wer vielleicht helfen

besten dank