Skip to content
This repository was archived by the owner on Aug 25, 2022. It is now read-only.
This repository was archived by the owner on Aug 25, 2022. It is now read-only.

clear doesn't work on mobile devices #48

@Aetherus

Description

@Aetherus

I want to reveal the whole card when 60% of it is scratched off:

$(function() {
  $('[data-role=scratch-off]').wScratchPad({
    size        : 20,          // The size of the brush/scratch.
    bg          : '/assets/score.png',  // Background (image path or hex color).
    fg          : '#6699ff',  // Foreground (image path or hex color).
    realtime    : true,       // Calculates percentage in realitime.
    cursor      : 'pointer', // Set cursor.
    scratchUp : function(e, percent) {
      if (percent > 60) this.clear();
    }
  });
});

On PC, it works as expected. But on my iPad's Chrome and Safari, it just does not clear.
P.S. this.clear() is copied from the demo site.

UPDATE

The direct cause is:

Uncaught TypeError: Cannot read property 'screenX' of undefined
(anonymous function)  @ wScratchPad.js: 312

It seems that event.changedTouches is always undefined, and when the touch event type is touchend, event.originalEvent.targetTouches is a zero-length array.

I monkey patched line from 311 like this:

      if (first) {
        simulatedEvent.initMouseEvent(
          type, true, true, window, 1,
          first.screenX, first.screenY, first.clientX, first.clientY,
          false, false, false, false, 0/*left*/, null
        );
      } else {
        simulatedEvent.initMouseEvent(
          type, true, true, window, 1,
          0, 0, 0, 0,
          false, false, false, false, 0/*left*/, null
        );
      }

      event.target.dispatchEvent(simulatedEvent);

and everything works fine.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions