Navigation

    Monaca & Onsen UI
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. markh
    M
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    markh

    @markh

    0
    Reputation
    4
    Posts
    597
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    markh Follow

    Posts made by markh

    • RE: onTouch events conflict when using with Polymer

      @Fran-Diox Yes, it would be great if OnsenUI is made fully compatible with Polymer. After all, Polymer is a very good fit for the web components style that OnsenUI uses. Even better, would be Polymer versions of all the components. I did see a blog post about this on your site somewhere but don’t know whether it is something you are planning in the future?

      posted in Onsen UI
      M
      markh
    • RE: onTouch events conflict when using with Polymer

      OK, I’ve had a bit more of a play with this and have now got ons-switch fully working within a Polymer element. This is what I had to do:

      1- First I uncommented the ‘onTouch’ lines that I detailed above.

      2- I changed the ‘click’ method of ons-switch to:

      key: 'click',
      value: function click(ev) {
          if (!this.disabled && (!this._lastTimeStampClick || ev.timeStamp - this._lastTimeStampClick > 10)) {
              this.checked = !this.checked;
              this._emitChangeEvent();
            }
            this._lastTimeStampClick = ev.timeStamp;
          }
      

      This uses a timestamp parameter to ensure that the switch is not switched if ‘click’ gets called twice quickly in succession, (once from OnsenUI and then from Polymer). It’s a bit hacky but seems to work.

      3- I also set the timestamp in the _onRelease handler so the same double switching did not happen after a drag.

      if (this.checked !== previousValue) {
          this._emitChangeEvent();
          this._lastTimeStampClick = e.timeStamp;
      }
      

      4- I had to add a listener for the ‘release’ event to the ons-switch component. The existing document listener did not get fired when the switch was inside a Polymer element, probably due to encapsulation.

      function _onHold(e) {
      ...
      document.addEventListener('release', this._onRelease);
      this.addEventListener('release', this._onRelease);
      ... 
      
      function _onDragStart(e) {
      ...
      document.addEventListener('release', this._onRelease);
      this.addEventListener('release', this._onRelease);
      ...
      
      function _onRelease(e) {
      ...
      document.removeEventListener('release', this._onRelease);
      this.removeEventListener('release', this._onRelease);
      ...
      

      Doing all this gets the switch working. I don’t know how many other components will have problems. It would be great if the OnsenUI components worked inside Polymer elements without any modifications. I don’t think it would be too much work.

      Thanks

      posted in Onsen UI
      M
      markh
    • RE: onTouch events conflict when using with Polymer

      @Fran-Diox The timestamp check is in the _onClick handler. This is never called in the situation I described. The stack trace for the first ‘click’ call from GestureDetector is:

      click (ons-switch.js:175)
      triggerEvent (gesture-detector.js:1321)
      tapGesture (gesture-detector.js:1852)
      triggerGesture (gesture-detector.js:1019)
      each (gesture-detector.js:261)
      detect (gesture-detector.js:1016)
      doDetect (gesture-detector.js:737)
      onTouchHandler (gesture-detector.js:657)
      

      and then the subsequent ‘click’ call via Polymer:

      click (ons-switch.js:175)
      _fire (gestures.html:589)
      forward (gestures.html:952)
      click (gestures.html:921)
      _handleNative (gestures.html:377)
      

      Therefore, to solve this issue, there would need to be an additional timestamp check in the ‘click’ method of ons-switch.

      Thanks

      posted in Onsen UI
      M
      markh
    • onTouch events conflict when using with Polymer

      When using OnsenUI with Polymer, there seems to be a conflict between the onTouch event listeners. For example, if I use the ons-switch component inside a Polymer element, the switch does not move when it is clicked/tapped. This, I have found, is due to the ‘click’ method of ons-switch being called twice. It is called once from onTouchHandler in gesture-detector.js and then again from _handleNative in Polymer’s gestures.html. This has the effect of the switch doing nothing, as it switches rapidly one way and then back the other.

      Is there a way to disable the onTouch handling in OnsenUI? At the moment I have fixed it by commenting out (or removing) the following lines in gesture-detector.js:

       // Add touch events on the document
       // Event$1.onTouch(GestureDetector.DOCUMENT, EVENT_MOVE, Detection.detect, opts);
       // Event$1.onTouch(GestureDetector.DOCUMENT, EVENT_END, Detection.detect, opts);
      

      However, I’m not sure what other effects this may have?

      Thanks.
      Mark

      posted in Onsen UI
      M
      markh