senchalabs / jQTouch

Create powerful mobile apps with just HTML, CSS, and Zepto.js (or jQuery).
http://www.jqtouch.com/
MIT License
2.79k stars 592 forks source link

Double tapping a link for an external page breaks the app (custom fix inside) #525

Open tegola opened 9 years ago

tegola commented 9 years ago

jQTouch already stops taps when animating from one page to another, but it doesn't when tapping an element that triggers an ajax page load, so tapping such element twice results in broken element bindings and ugly animations.

To fix this, read below, but first apply the fix for #524.

Fix

// jqt.js
{
  name: "external",
  isSupported: function(e, params) {
    return true;
  },
  fn: function(e, params) {
    var animation;
    animation = getAnimation(params.$el);
    $body.addClass("external-loading"); // FIX
    params.$el.addClass("loading active");
    showPageByHref(params.$el.attr("href"), {
      animation: animation,
      callback: function() {
        $body.removeClass("external-loading"); // FIX
        params.$el.removeClass("loading");
        return setTimeout(function() {
          return params.$el.removeClass('active');
        }, 250);
      },
      $referrer: params.$el
    });
    return false;
  }
}
// _core.scss - inside the #jqt selector

// Make sure nothing is tappable when loading external pages
&.external-loading:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
}