support lightbox & sidebar history (#43)

* support lightbox & sidebar history * comments * fix * fix * fix * fix * fix * fix * fix
ampproject · Jul 7, 2017 · 12ffdeb · 12ffdeb
1 parent 782647e
commit 12ffdeb
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 51 deletions.
diff --git a/example/platform.html b/example/platform.html
@@ -113,25 +113,22 @@ <h1>Viewer</h1>
   var viewerEl = document.getElementsByTagName("viewer")[0];
   var ampDocEl = document.getElementsByTagName("ampdoc")[0];
   var viewer;
-
   function initViewer() {
     var ampDocUrl = ampDocEl.getAttribute('url');
     var viewerHost = document.getElementById('viewerHost');
-    var referrer = 'http://localhost:8000/';
-    var prerender = true; // Can be true, false, or undefined.
-    viewer = new Viewer(viewerHost, ampDocUrl, referrer, prerender);
-    viewer.setViewerShowAndHide(showViewer, hideViewer);
+    viewer = new Viewer(viewerHost, ampDocUrl);
+    viewer.setViewerShowAndHide(showViewer, hideViewer, isViewerHidden);
     ampDocEl.addEventListener('click', openAmpDocInViewer);
   }
-
   function hideViewer() {
     viewerEl.classList.add('hidden');
   }
-
   function showViewer() {
     viewerEl.classList.remove('hidden');
   }
-
+  function isViewerHidden() {
+    return viewerEl.classList.contains('hidden');
+  }
   function openAmpDocInViewer() {
     viewer.attach();
     showViewer();

diff --git a/src/history.js b/src/history.js
@@ -15,6 +15,7 @@
  */
 
 import {log} from '../utils/log';
+import {parseUrl} from '../utils/url';
 
 /**
  * This file manages history for the Viewer.
@@ -37,8 +38,17 @@ export class History {
    */
   init_() {
     window.addEventListener('popstate', event => {
-      const urlPath = event.state ? event.state.urlPath : null;
-      this.handleChangeHistoryState_(urlPath);
+      const state = event.state;
+      if (!state) {
+        this.handleChangeHistoryState_(
+          true /* isLastBack */, 
+          false /* isAMP */);
+        return;
+      }
+
+      this.handleChangeHistoryState_(
+        false /* isLastBack */, 
+        !!state.isAMP);
     });
   }
 
@@ -47,7 +57,32 @@ export class History {
    * @param {string} url The url to push onto the Viewer history.
    */
   pushState(url) {
-    const urlStr = '/amp/' + url;
-    window.history.pushState({urlPath: url}, '', urlStr);
+    let stateData = {
+      urlPath: url,
+      isAMP: true
+    };
+
+    // The url should have /amp/ + url added to it. For example:
+    // example.com -> example.com/amp/s/www.ampproject.org
+    // TODO(chenshay): Include path & query parameters.
+    const parsedUrl = parseUrl(url);
+    let urlStr = '/amp/';
+    if (parsedUrl.protocol == 'https:') urlStr += 's/';
+    urlStr += parsedUrl.host;
+    history.pushState(stateData, '', urlStr);
+  }
+
+  /**
+   * Go back to the previous history state.
+   */
+  goBack() {
+    history.back();
+  }
+
+  /**
+   * Go forward to the next history state.
+   */
+  goForward() {
+    history.forward();
   }
 }
diff --git a/src/message-handler.js b/src/message-handler.js
diff --git a/src/viewer-messaging.js b/src/viewer-messaging.js
@@ -18,9 +18,9 @@ import {
   APP,
   Messaging,
   MessageType,
+  RequestHandler,
   WindowPortEmulator,
 } from 'amp-viewer-messaging/messaging';
-import {messageHandler} from './message-handler';
 import {log} from '../utils/log';
 
 
@@ -32,14 +32,17 @@ export class ViewerMessaging {
    * @param {!Window} win
    * @param {!HTMLIFrameElement} ampIframe
    * @param {string} frameOrigin
+   * @param {!RequestHandler} messageHandler
    */
-  constructor(win, ampIframe, frameOrigin) {
+  constructor(win, ampIframe, frameOrigin, messageHandler) {
     /** @const {!Window} */
     this.win = win;
     /** @private {!HTMLIFrameElement} */
     this.ampIframe_ = ampIframe;
     /** @private {string} */
     this.frameOrigin_ = frameOrigin;
+    /** @private {!RequestHandler} */
+    this.messageHandler_ = messageHandler;
   }
 
   /**
@@ -83,7 +86,7 @@ export class ViewerMessaging {
             this.hanshakePollPromiseResolve_();
           });
         } else {
-          messageHandler(data.name, data.data, data.rsvp);
+          this.messageHandler_(data.name, data.data, data.rsvp);
         }
       }
     }
@@ -132,7 +135,7 @@ export class ViewerMessaging {
     port./*OK*/postMessage(message);
 
     this.messaging_ = new Messaging(this.win, port);
-    this.messaging_.setDefaultHandler(messageHandler);
+    this.messaging_.setDefaultHandler(this.messageHandler_);
 
     this.sendRequest('visibilitychange', {
       state: this.visibilityState_,

diff --git a/src/viewer.js b/src/viewer.js
@@ -57,12 +57,23 @@ class Viewer {
   /**
    * @param {!Function} showViewer method that shows the viewer.
    * @param {!Function} hideViewer method that hides the viewer.
+   * @param {!Function():boolean} isViewerHidden method that determines if viewer is hidden.
    */
-  setViewerShowAndHide(showViewer, hideViewer) {
+  setViewerShowAndHide(showViewer, hideViewer, isViewerHidden) {
     /** @private {!Function} */
     this.showViewer_ = showViewer;
     /** @private {!Function} */
     this.hideViewer_ = hideViewer;
+    /** @private {!Function} */
+    this.isViewerHidden_ = isViewerHidden;
+  }
+
+  /**
+   * @return {boolean} true if the viewer has already been loaded.
+   * @private
+   */
+  isLoaded_() {
+    return !!this.iframe_ && !!this.viewerMessaging_;
   }
 
   /**
@@ -77,7 +88,8 @@ class Viewer {
       this.viewerMessaging_ = new ViewerMessaging(
         window,
         this.iframe_,
-        parseUrl(ampDocCachedUrl).origin);
+        parseUrl(ampDocCachedUrl).origin,
+        this.messageHandler_.bind(this));
 
       this.viewerMessaging_.start().then(()=>{
         log('this.viewerMessaging_.start() Promise resolved !!!');
@@ -102,17 +114,17 @@ class Viewer {
     });
   }
 
-
   /**
    * Computes the init params that will be used to create the AMP Cache URL.
    * @return {object} the init params.
    * @private
-    */
+   */
   createInitParams_() {
     const parsedViewerUrl = parseUrl(window.location.href);
 
     const initParams = {
       'origin': parsedViewerUrl.origin,
+      'cap': 'history',
     };
 
     if (this.referrer_) initParams['referrer'] = this.referrer_;
@@ -136,14 +148,46 @@ class Viewer {
   }
 
   /**
-   * @param {?string} urlPath
+   * @param {boolean} isLastBack true if back button was hit and viewer should hide.
+   * @param {boolean} isAMP true if going to AMP document.
    * @private
     */
-  handleChangeHistoryState_(urlPath) {
-    if (urlPath) {
-      if (this.showViewer_) this.showViewer_();
-    } else {
+  handleChangeHistoryState_(isLastBack, isAMP) {
+    if (isLastBack) {
       if (this.hideViewer_) this.hideViewer_();
+      return;
+    }
+    if (isAMP && this.showViewer_ && this.isViewerHidden_ && this.isViewerHidden_()) {
+      this.showViewer_();
+    }
+  }
+
+  /**
+   * Place holder message handler. 
+   * @param {string} name
+   * @param {*} data
+   * @param {boolean} rsvp
+   * @return {!Promise<*>|undefined}
+   * @private
+   */
+  messageHandler_(name, data, rsvp) {
+    log('messageHandler: ', name, data, rsvp);
+    switch(name) {
+      case 'pushHistory':
+        this.history_.pushState(this.ampDocUrl_, data);
+        return Promise.resolve();
+      case 'popHistory':
+        this.history_.goBack();
+        return Promise.resolve();
+      case 'cancelFullOverlay':
+      case 'documentLoaded':
+      case 'documentHeight':
+      case 'prerenderComplete':
+      case 'requestFullOverlay':
+      case 'scroll':
+        return Promise.resolve();
+      default:
+        return Promise.reject(name + ' Message is not supported!');
     }
   }
 }