Polymer Track and Holdpulse Events

I confess that, until last night, I was largely unaware of Polymer's normalized events. I had seen them (and even used them) in passing, but had not given them much thought. The Simple Event Example from the Polymer team gives a nice feel for what they are, but I would like to play with them a little more before moving on to other topics.

First, I am curious about the “holdpulse” event. As the name implies, it generates events for as long as the pointer (mouse or touch) is down. But what properties are supported by such an event and how might I use them? To answer those questions, I add a Polymer on-holdpulse handler to a card element:

        <div class="card" layout horizontal
             hero-id="{{selectedTopping}}"
             hero
             on-holdpulse="{{pulse}}"
             on-tap="{{transitionTopping}}">
          <!-- ... -->
        </div>

And, in that bound pulse() method, I simply debug:

Polymer('x-pizza', {
  // ...
  pulse: function(evt) {
    debugger
  },
  // ...
});

After initiating a hold, I find evt in the Scope Variables tab of Chrome's JavaScript console:



Of note in here is that the time is not exactly 200ms. So, if I wanted to send ripples from the current location on some modulo of time, I would have to round the value first:

Polymer('x-pizza', {
  // ...
  pulse: function(evt) {
    //debugger
    if (Math.round(evt.holdTime/100)*100 % 1200 == 0) {
      this.$.ripple.downAction({x: evt.x, y: evt.y});
      var that = this;
      setTimeout(
        function(){
          that.$.ripple.upAction();
        },
        800
      );
    }
  },
  // ...
}

I am also curious about the “track” events. They seem like a cheap way to implement drag events in Polymer elements (among other applications). So I create a dirt simple track icon to test it out:

<polymer-element name="x-pizza">
  <template>
    <!-- ... -->
    <div id=track
         style="position: absolute; top: 50px; right: 50px; width: 25px; height: 25px; background-color: orange; cursor: pointer;"
         on-track="{{track}}"></div>
    <!-- ... -->
  </template>
  <script src="x_pizza.js"></script>
</polymer-element>

I half expected (OK, to be honest, I 100% expected) the X-Y position to be normalized into x and y properties on the event. But they are available on pageX and pageY like normal mouse DOM events:

Polymer('x-pizza', {
  // ...
  track: function(evt) {
    evt.target.style.top = evt.pageY + "px";
    evt.target.style.left = evt.pageX + "px";
  },
  // ...
}

With that, I have a simple drag working.

In the end, these Polymer events work pretty much like a developer might expect. And yes, they work quite well on touch devices as well.


Day #155

‹prev | My Chain | next›