Implement pull-to-refresh blocker

src/amp.js

@@ -18,6 +18,7 @@ import './polyfills';
 
 import {historyFor} from './history';
 import {viewerFor} from './viewer';
+import {installPullToRefreshBlocker} from './pull-to-refresh';
 
 import {installAd} from '../builtins/amp-ad';
 import {installImg} from '../builtins/amp-img';
@@ -46,6 +47,8 @@ installStyles(document, cssText, () => {
   stubElements(window);
   action.addEvent('tap');
 
+  installPullToRefreshBlocker(window);
+
   maybeValidate(window);
 }, /* opt_isRuntimeCss */ true);
 

src/platform.js

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import {getService} from './service';
+
 
 /**
  * A helper class that provides information about device/OS/browser currently
@@ -47,4 +49,14 @@ export class Platform {
 };
 
 
-export const platform = new Platform(window);
+/**
+ * @param {!Window} window
+ * @return {!Platform}
+ */
+export function platformFor(window) {
+  return getService(window, 'platform', () => {
+    return new Platform(window);
+  });
+};
+
+export const platform = platformFor(window);

src/pull-to-refresh.js

@@ -0,0 +1,151 @@
+/**
+ * Copyright 2015 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {platformFor} from './platform';
+import {viewerFor} from './viewer';
+import {viewportFor} from './viewport';
+
+
+/**
+ * Installs "pull-to-refresh" (P2R) blocker if viewer has requested. P2R can
+ * be very disruptive for different viewer scenarios. This is currently only
+ * done on Chrome (both Android and iOS).
+ * @param {!Window} win
+ */
+export function installPullToRefreshBlocker(win) {
+  // Only do when requested and don't even try it on Safari!
+  if (viewerFor(win).getParam('p2r') == '0' &&
+          platformFor(win).isChrome()) {
+    new PullToRefreshBlocker(win.document, viewportFor(win));
+  }
+}
+
+
+/**
+ * Visible for testing only.
+ * @private
+ */
+export class PullToRefreshBlocker {
+  /**
+   * @param {!Document} doc
+   * @param {!Viewport} viewport
+   */
+  constructor(doc, viewport) {
+    /** @private {!Document} */
+    this.doc_ = doc;
+
+    /** @private {!Viewport} */
+    this.viewport_ = viewport;
+
+    /** @private {boolean} */
+    this.tracking_ = false;
+
+    /** @private {number} */
+    this.startPos_ = 0;
+
+    /** @private {!Function} */
+    this.boundTouchStart_ = this.onTouchStart_.bind(this);
+    /** @private {!Function} */
+    this.boundTouchMove_ = this.onTouchMove_.bind(this);
+    /** @private {!Function} */
+    this.boundTouchEnd_ = this.onTouchEnd_.bind(this);
+    /** @private {!Function} */
+    this.boundTouchCancel_ = this.onTouchCancel_.bind(this);
+
+    this.doc_.addEventListener('touchstart', this.boundTouchStart_, true);
+  }
+
+  /** */
+  cleanup() {
+    this.stopTracking_();
+    this.doc_.removeEventListener('touchstart', this.boundTouchStart_, true);
+  }
+
+  /**
+   * @param {!Event} event
+   * @private
+   */
+  onTouchStart_(event) {
+    // P2R won't trigger when document is scrolled. Also can ignore when we are
+    // already tracking this touch and for non-single-touch events.
+    if (this.tracking_ ||
+          !(event.touches && event.touches.length == 1) ||
+          this.viewport_.getTop() > 0) {
+      return;
+    }
+
+    this.startTracking_(event.touches[0].clientY);
+  }
+
+  /**
+   * @param {number} startPos
+   * @private
+   */
+  startTracking_(startPos) {
+    this.tracking_ = true;
+    this.startPos_ = startPos;
+    this.doc_.addEventListener('touchmove', this.boundTouchMove_, true);
+    this.doc_.addEventListener('touchend', this.boundTouchEnd_, true);
+    this.doc_.addEventListener('touchcancel', this.boundTouchCancel_, true);
+  }
+
+  /** @private */
+  stopTracking_() {
+    this.tracking_ = false;
+    this.startPos_ = 0;
+    this.doc_.removeEventListener('touchmove', this.boundTouchMove_, true);
+    this.doc_.removeEventListener('touchend', this.boundTouchEnd_, true);
+    this.doc_.removeEventListener('touchcancel', this.boundTouchCancel_, true);
+  }
+
+  /**
+   * @param {!Event} event
+   * @private
+   */
+  onTouchMove_(event) {
+    if (!this.tracking_) {
+      return;
+    }
+
+    let dy = event.touches[0].clientY - this.startPos_;
+
+    // Immediately cancel the P2R if dragging down.
+    if (dy > 0) {
+      event.preventDefault();
+    }
+
+    // Stop tracking if there was any motion at all.
+    if (dy != 0) {
+      this.stopTracking_();
+    }
+  }
+
+  /**
+   * @param {!Event} event
+   * @private
+   */
+  onTouchEnd_(event) {
+    this.stopTracking_();
+  }
+
+  /**
+   * @param {!Event} event
+   * @private
+   */
+  onTouchCancel_(event) {
+    this.stopTracking_();
+  }
+}

src/viewer.js

@@ -18,7 +18,6 @@ import {Observable} from './observable';
 import {assert} from './asserts';
 import {documentStateFor} from './document-state';
 import {getService} from './service';
-import {installStyles} from './styles';
 import {log} from './log';
 import {parseQueryString} from './url';
 import {platform} from './platform';

test/functional/test-pull-to-refresh.js

@@ -0,0 +1,180 @@
+/**
+ * Copyright 2015 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {PullToRefreshBlocker} from '../../src/pull-to-refresh';
+import * as sinon from 'sinon';
+
+
+describe('PullToRefreshBlocker', () => {
+
+  let sandbox;
+  let eventListeners;
+  let viewportMock;
+  let blocker;
+
+  beforeEach(() => {
+    sandbox = sinon.sandbox.create();
+
+    eventListeners = {};
+    let documentApi = {
+      addEventListener: (eventType, handler) => {
+        eventListeners[eventType] = handler;
+      },
+      removeEventListener: (eventType, handler) => {
+        if (eventListeners[eventType] == handler) {
+          delete eventListeners[eventType];
+        }
+      }
+    };
+
+    let viewportApi = {
+      getTop: () => 0
+    };
+    viewportMock = sandbox.mock(viewportApi);
+
+    blocker = new PullToRefreshBlocker(documentApi, viewportApi);
+  });
+
+  afterEach(() => {
+    viewportMock.verify();
+    viewportMock.restore();
+    viewportMock = null;
+    blocker.cleanup();
+    blocker = null;
+    sandbox.restore();
+    sandbox = null;
+  });
+
+  function sendEvent(event, opt_prevetDefault) {
+    event.preventDefault = opt_prevetDefault || () => {};
+    event.stopPropagation = () => {};
+    eventListeners[event.type](event);
+  }
+
+  it('should only subscribe to touchstart initially', () => {
+    expect(eventListeners['touchstart']).to.not.equal(undefined);
+    expect(eventListeners['touchmove']).to.equal(undefined);
+    expect(eventListeners['touchend']).to.equal(undefined);
+    expect(eventListeners['touchcancel']).to.equal(undefined);
+  });
+
+
+  it('should start tracking on touch start', () => {
+    sendEvent({type: 'touchstart', touches: [{clientY: 111}]});
+
+    expect(blocker.tracking_).to.equal(true);
+    expect(blocker.startPos_).to.equal(111);
+
+    expect(eventListeners['touchstart']).to.not.equal(undefined);
+    expect(eventListeners['touchmove']).to.not.equal(undefined);
+    expect(eventListeners['touchend']).to.not.equal(undefined);
+    expect(eventListeners['touchcancel']).to.not.equal(undefined);
+  });
+
+  it('should NOT start tracking with non-single-touch', () => {
+    // No touches.
+    sendEvent({type: 'touchstart'});
+    expect(blocker.tracking_).to.equal(false);
+    sendEvent({type: 'touchstart', touches: []});
+    expect(blocker.tracking_).to.equal(false);
+
+    // Multi-touch.
+    sendEvent({type: 'touchstart', touches: [{}, {}]});
+    expect(blocker.tracking_).to.equal(false);
+  });
+
+  it('should NOT start tracking when scrolled', () => {
+    viewportMock.expects('getTop').returns(11).once();
+    sendEvent({type: 'touchstart', touches: [{clientY: 111}]});
+    expect(blocker.tracking_).to.equal(false);
+  });
+
+
+  it('should stop tracking on touch end', () => {
+    sendEvent({type: 'touchstart', touches: [{clientY: 111}]});
+    expect(blocker.tracking_).to.equal(true);
+
+    sendEvent({type: 'touchend'});
+    expect(blocker.tracking_).to.equal(false);
+
+    expect(eventListeners['touchstart']).to.not.equal(undefined);
+    expect(eventListeners['touchmove']).to.equal(undefined);
+    expect(eventListeners['touchend']).to.equal(undefined);
+    expect(eventListeners['touchcancel']).to.equal(undefined);
+  });
+
+  it('should stop tracking on touch cancel', () => {
+    sendEvent({type: 'touchstart', touches: [{clientY: 111}]});
+    expect(blocker.tracking_).to.equal(true);
+
+    sendEvent({type: 'touchend'});
+    expect(blocker.tracking_).to.equal(false);
+
+    expect(eventListeners['touchstart']).to.not.equal(undefined);
+    expect(eventListeners['touchmove']).to.equal(undefined);
+    expect(eventListeners['touchend']).to.equal(undefined);
+    expect(eventListeners['touchcancel']).to.equal(undefined);
+  });
+
+
+  it('should cancel pull down on touch move', () => {
+    sendEvent({type: 'touchstart', touches: [{clientY: 111}]});
+    expect(blocker.tracking_).to.equal(true);
+
+    let preventDefault = sinon.spy();
+    sendEvent({type: 'touchmove', touches: [{clientY: 112}]},
+        preventDefault);
+    expect(blocker.tracking_).to.equal(false);
+    expect(preventDefault.callCount).to.equal(1);
+
+    expect(eventListeners['touchstart']).to.not.equal(undefined);
+    expect(eventListeners['touchmove']).to.equal(undefined);
+    expect(eventListeners['touchend']).to.equal(undefined);
+    expect(eventListeners['touchcancel']).to.equal(undefined);
+  });
+
+  it('should NOT cancel pull up on touch move', () => {
+    sendEvent({type: 'touchstart', touches: [{clientY: 111}]});
+    expect(blocker.tracking_).to.equal(true);
+
+    let preventDefault = sinon.spy();
+    sendEvent({type: 'touchmove', touches: [{clientY: 100}]},
+        preventDefault);
+    expect(blocker.tracking_).to.equal(false);
+    expect(preventDefault.callCount).to.equal(0);
+
+    expect(eventListeners['touchstart']).to.not.equal(undefined);
+    expect(eventListeners['touchmove']).to.equal(undefined);
+    expect(eventListeners['touchend']).to.equal(undefined);
+    expect(eventListeners['touchcancel']).to.equal(undefined);
+  });
+
+  it('should keep tracking on touch move if ', () => {
+    sendEvent({type: 'touchstart', touches: [{clientY: 111}]});
+    expect(blocker.tracking_).to.equal(true);
+
+    let preventDefault = sinon.spy();
+    sendEvent({type: 'touchmove', touches: [{clientY: 111}]},
+        preventDefault);
+    expect(blocker.tracking_).to.equal(true);
+    expect(preventDefault.callCount).to.equal(0);
+
+    expect(eventListeners['touchstart']).to.not.equal(undefined);
+    expect(eventListeners['touchmove']).to.not.equal(undefined);
+    expect(eventListeners['touchend']).to.not.equal(undefined);
+    expect(eventListeners['touchcancel']).to.not.equal(undefined);
+  });
+});