Merge pull request #2520 from dvoytenko/target3

History push for click interceptor
ampproject · Mar 9, 2016 · 796bcba · 796bcba
2 parents 5eb097a + 722f0a7
commit 796bcba
Show file tree

Hide file tree

Showing 5 changed files with 155 additions and 65 deletions.
diff --git a/examples/viewer-integr-messaging.js b/examples/viewer-integr-messaging.js
@@ -21,9 +21,10 @@
  * @param {string} targetOrigin
  * @param {function(string, *, boolean):(!Promise<*>|undefined)}
  *    requestProcessor
+ * @param {string=} opt_targetId
  * @constructor
  */
-function ViewerMessaging(target, targetOrigin, requestProcessor) {
+function ViewerMessaging(target, targetOrigin, requestProcessor, opt_targetId) {
   this.sentinel_ = '__AMP__';
   this.requestSentinel_ = this.sentinel_ + 'REQUEST';
   this.responseSentinel_ = this.sentinel_ + 'RESPONSE';
@@ -33,6 +34,8 @@ function ViewerMessaging(target, targetOrigin, requestProcessor) {
 
   /** @const @private {!Widnow} */
   this.target_ = target;
+  /** @const @private {string|undefined} */
+  this.targetId_ = opt_targetId;
   /** @const @private {string} */
   this.targetOrigin_ = targetOrigin;
   /** @const @private {function(string, *, boolean):(!Promise<*>|undefined)} */
@@ -74,7 +77,7 @@ ViewerMessaging.prototype.sendRequest = function(eventType, payload,
  * @private
  */
 ViewerMessaging.prototype.onMessage_ = function(event) {
-  if (event.source != this.target_ && event.origin != this.targetOrigin_) {
+  if (event.source != this.target_ || event.origin != this.targetOrigin_) {
     return;
   }
   var message = event.data;

diff --git a/examples/viewer-integr.js b/examples/viewer-integr.js
@@ -67,7 +67,7 @@ function whenMessagingLoaded(callback) {
         var messaging = new ViewerMessaging(window.parent, viewerOrigin,
             function(type, payload, awaitResponse) {
               return viewer.receiveMessage(type, payload, awaitResponse);
-            });
+            }, window.location.href);
         viewer.setMessageDeliverer(function(type, payload, awaitResponse) {
           return messaging.sendRequest(type, payload, awaitResponse);
         }, viewerOrigin);

diff --git a/examples/viewer.html b/examples/viewer.html
@@ -140,8 +140,9 @@
 
     var allViewers = [];
 
-    function Viewer(containerId, id, visible) {
+    function Viewer(containerId, id, url, visible) {
       this.id = id;
+      this.url = url;
       this.alreadyLoaded_ = false;
       this.stackIndex_ = 0;
       this.viewportType_ = 'natural';  // "natural" or "virtual"
@@ -154,6 +155,7 @@
       this.header = document.querySelector('header');
       this.container = document.getElementById(containerId);
       this.iframe = document.createElement('iframe');
+      this.iframe.setAttribute('id', 'AMP_DOC_' + this.id);
       // TODO(dvoytenko): Set to the final value when crbug/577330 is fixed:
       // this.iframe.setAttribute('sandbox',
       //     'allow-popups allow-scripts allow-forms allow-pointer-lock' +
@@ -199,7 +201,7 @@
       };
       log('Params:' + JSON.stringify(params));
 
-      var inputUrl = './article-access.amp.max.html#' + paramsStr(params);
+      var inputUrl = this.url + '#' + paramsStr(params);
       if (window.location.hash && window.location.hash.length > 1) {
         inputUrl += '&' + window.location.hash.substring(1);
       }
@@ -228,6 +230,7 @@
 
 
     Viewer.prototype.awaitHandshake_ = function() {
+      var targetId = this.iframe.id;
       var target = this.iframe.contentWindow;
       var targetOrigin = this.frameOrigin_;
       var listener = function(event) {
@@ -241,7 +244,7 @@
           target./*OK*/postMessage('amp-handshake-response', targetOrigin);
 
           this.messaging_ = new ViewerMessaging(target, targetOrigin,
-              this.processRequest_.bind(this));
+              this.processRequest_.bind(this), targetId);
           this.sendRequest_('visibilitychange', {
             state: this.visibilityState_,
             prerenderSize: this.prerenderSize
@@ -348,6 +351,7 @@
       }
       this.stackIndex_ = stackIndex;
       window.history.pushState({}, '');
+      return Promise.resolve();
     };
 
 
@@ -359,6 +363,7 @@
       }
       this.stackIndex_ = stackIndex;
       window.history.go(-1);
+      return Promise.resolve();
     };
 
 
@@ -467,13 +472,25 @@
 
 
     function loadAmpDoc() {
-      new Viewer('container1', '1', true).start();
+      new Viewer(
+          'container1',
+          '1',
+          './everything.amp.max.html',
+          true).start();
       addShowContainer('1');
 
-      new Viewer('container2', '2', false).start();
+      new Viewer(
+          'container2',
+          '2',
+          './article-access.amp.max.html',
+          false).start();
       addShowContainer('2');
 
-      new Viewer('container3', '3', false).start();
+      new Viewer(
+          'container3',
+          '3',
+          './article-access.amp.max.html',
+          false).start();
       addShowContainer('3');
 
       showContainer('1');

diff --git a/src/document-click.js b/src/document-click.js
@@ -17,6 +17,7 @@
 import {closestByTag} from './dom';
 import {getService} from './service';
 import {log} from './log';
+import {historyFor} from './history';
 import {parseUrl} from './url';
 import {viewerFor} from './viewer';
 import {viewportFor} from './viewport';
@@ -60,10 +61,16 @@ export class ClickHandler {
     this.win = window;
 
     /** @private @const {!Viewport} */
-    this.viewport_ = viewportFor(window);
+    this.viewport_ = viewportFor(this.win);
+
+    /** @private @const {!Viewer} */
+    this.viewer_ = viewerFor(this.win);
+
+    /** @private @const {!History} */
+    this.history_ = historyFor(this.win);
 
     // Only intercept clicks when iframed.
-    if (viewerFor(this.win).isEmbedded()) {
+    if (this.viewer_.isEmbedded() && this.viewer_.isOvertakeHistory()) {
       /** @private @const {!function(!Event)|undefined} */
       this.boundHandle_ = this.handle_.bind(this);
       this.win.document.documentElement.addEventListener(
@@ -87,7 +94,7 @@ export class ClickHandler {
    * @param {!Event} e
    */
   handle_(e) {
-    onDocumentElementClick_(e, this.viewport_);
+    onDocumentElementClick_(e, this.viewport_, this.history_);
   }
 }
 
@@ -101,8 +108,9 @@ export class ClickHandler {
  *
  * @param {!Event} e
  * @param {!Viewport} viewport
+ * @param {!History} history
  */
-export function onDocumentElementClick_(e, viewport) {
+export function onDocumentElementClick_(e, viewport, history) {
   if (e.defaultPrevented) {
     return;
   }
@@ -112,7 +120,6 @@ export function onDocumentElementClick_(e, viewport) {
     return;
   }
 
-  let elem = null;
   const docElement = e.currentTarget;
   const doc = docElement.ownerDocument;
   const win = doc.defaultView;
@@ -147,25 +154,26 @@ export function onDocumentElementClick_(e, viewport) {
     return;
   }
 
+  // Has the fragment actually changed?
+  if (tgtLoc.hash == curLoc.hash) {
+    return;
+  }
+
   // We prevent default so that the current click does not push
   // into the history stack as this messes up the external documents
   // history which contains the amp document.
   e.preventDefault();
 
+  // Look for the referenced element.
   const hash = tgtLoc.hash.slice(1);
-  elem = doc.getElementById(hash);
-
-  if (!elem) {
-    // Fallback to anchor[name] if element with id is not found.
-    // Linking to an anchor element with name is obsolete in html5.
-    elem = doc.querySelector(`a[name=${hash}]`);
-  }
-
-  if (elem) {
-    viewport./*OK*/scrollIntoView(elem);
-  } else {
-    log.warn('documentElement',
-        `failed to find element with id=${hash} or a[name=${hash}]`);
+  let elem = null;
+  if (hash) {
+    elem = doc.getElementById(hash);
+    if (!elem) {
+      // Fallback to anchor[name] if element with id is not found.
+      // Linking to an anchor element with name is obsolete in html5.
+      elem = doc.querySelector(`a[name=${hash}]`);
+    }
   }
 
   // If possible do update the URL with the hash. As explained above
@@ -176,5 +184,16 @@ export function onDocumentElementClick_(e, viewport) {
   // for more details.
   win.location.replace(`#${hash}`);
 
-  // TODO(dvoytenko, #2440): Push/pop history via viewer
+  // Scroll to the element if found.
+  if (elem) {
+    viewport./*OK*/scrollIntoView(elem);
+  } else {
+    log.warn('documentElement',
+        `failed to find element with id=${hash} or a[name=${hash}]`);
+  }
+
+  // Push/pop history.
+  history.push(() => {
+    win.location.replace(`${curLoc.hash || '#'}`);
+  });
 };