Prevent modal from triggering while scrolling

[cadrell0]

Solves issue #598

[cadrell0]

The build failed due to issues in _site/components/index.html, which was not touched in these commits. It looks like those errors have been corrected.

[helloworlder]

I tried to implement solution, but it seems to prevent normal modals from opening. I need to try clicking a link several times before a modal opens. Has anyone also had a similar issue? Tested on the iPad with iOS 8, Ratchet 2.0.2 and Cordova 3.6. Maybe there needs to be some sort of time delay before scrolling is considered scrolling.

[helloworlder]

Thanks, the implementation in the patch seems to be on the right track, but it appears to break the reliability of other anchor links.

In testing, about 50% of the time touches on anchors do not work on the device I was testing on (iphone5 and ipad 2), because the tiniest move not even perceptible to the user, will result in dragging being set to true. Unfortunately, this is a serious usability problem and some of the users I've tested it on were confused why links weren't firing.

Possible fix: the following code builds in a pixel based "delay" so that that there is a buffer before dragging counts as dragging.

Keep in mind though, this code does not take into account the different sizes of physical devices out there, and the value of 100 might need to change based on device DPI.

Also testing on my iphone the value of 100 seems to refer to a pixel value of about 10, which I think is kid of odd, but I haven't investigated further. Perhaps it's not a pixel value. Nevertheless, the general idea is here:

    var start = {x:0,y:0};
    var totalOffsetY = 0;
    var totalOffsetX = 0;
    var dragging = false;
   window.addEventListener('touchmove', function (event) {
       var offset = {};
       offset.x = start.x - event.touches[0].pageX;
       offset.y = start.y - event.touches[0].pageY;
       totalOffsetY += offset.y;
       if( Math.abs(totalOffsetY) > 100) {
           dragging = true;
       }
    });
      window.addEventListener('touchstart', function (event) {
          dragging = false;
          start.x = event.touches[0].pageX;
          start.y = event.touches[0].pageY;
    });
  window.addEventListener('touchend', function (event) {
      totalOffsetY = 0;
      if (dragging) {
          dragging = false;
          return false;
     }
//...
      });