[NaCl SDK] AppEngine: Fix navigation on the demo pages.

* Back/Forward works
* Set title properly
* Highlight navbar

BUG=none
TBR=sbc@chromium.org

Review URL: https://codereview.chromium.org/69933002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@234397 0039d316-1c4b-4281-b951-d872f2087c98

2 files changed, 169 insertions, 107 deletions

diff --git a/native_client_sdk/src/gonacl_appengine/static/frame.js b/native_client_sdk/src/gonacl_appengine/static/frame.js
new file mode 100644
index 0000000..580d994
--- /dev/null
+++ b/native_client_sdk/src/gonacl_appengine/static/frame.js
@@ -0,0 +1,168 @@
+// Copyright (c) 2013 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+var examples = [
+  {name: 'bullet', text: 'Bullet Physics'},
+  {name: 'earth', text: 'Raycasted Earth'},
+  {name: 'lua', text: 'Lua Interpreter'},
+  {name: 'life', text: 'Game of Life'},
+  {name: 'voronoi', text: 'Voronoi Simulation'},
+  {name: 'smoothlife', text: 'SmoothLife'},
+  {name: 'cube', text: 'Rotating Cube'},
+];
+var exampleMap = {};  // Created below.
+
+var iframeEl = null;
+var isChrome = /Chrome\/([^\s]+)/.test(navigator.userAgent);
+var isMobile = /Mobi/.test(navigator.userAgent);
+var hasPnacl = navigator.mimeTypes['application/x-pnacl'] !== undefined;
+
+if (isChrome && !isMobile) {
+  if (hasPnacl) {
+    makeExampleList();
+    window.onpopstate = function(popState) {
+      if (popState.state == null) {
+        updateViewFromLocation();
+      } else {
+        var exampleName = popState.state;
+        loadExample(popState.state);
+      }
+    }
+  } else {
+    // Older version of Chrome?
+    showOldChromeErrorMessage();
+  }
+} else {
+  // Not Chrome, or is mobile Chrome.
+  showNotChromeErrorMessage();
+}
+
+function makeExampleList() {
+  var listEl = document.querySelector('nav ul');
+  for (var i = 0; i < examples.length; ++i) {
+    var example = examples[i];
+
+    // Populate exampleMap
+    exampleMap[example.name] = example;
+
+    // Create li
+    var listItemEl = document.createElement('li');
+    var anchorEl = document.createElement('a');
+    listItemEl.setAttribute('id', example.name);
+    anchorEl.setAttribute('href', getExampleUrl(example.name));
+    anchorEl.setAttribute('target', 'content');
+    anchorEl.textContent = example.text;
+
+    // Listen for clicks and update the nav
+    anchorEl.addEventListener('click', onLinkClick.bind(example), false);
+
+    listItemEl.appendChild(anchorEl);
+    listEl.appendChild(listItemEl);
+  }
+}
+
+function getExampleUrl(exampleName) {
+  return '/static/' + exampleName + '/index.html';
+}
+
+function onLinkClick(evt) {
+  evt.preventDefault();
+  pushState(this.name);
+  loadExample(this.name);
+}
+
+function updateViewFromLocation() {
+  // Get the location's path.
+  var anchorEl = document.createElement('a');
+  anchorEl.href = location.href;
+  var pathname = anchorEl.pathname;
+
+  // Load the correct page, based on the demo name.
+  var matches = pathname.match(/demo(?:\/(.*))?$/);
+  var iframeUrl = null;
+  if (matches) {
+    var matchedExample = matches[1];
+    // Strip trailing slash, if any.
+    if (matchedExample && matchedExample.slice(-1) === '/') {
+      matchedExample = matchedExample.slice(0, -1);
+    }
+
+    if (matchedExample in exampleMap) {
+      replaceState(matchedExample);
+      loadExample(matchedExample);
+    } else {
+      replaceHomeState();
+      createHomeIframe();
+    }
+  }
+}
+
+function loadExample(exampleName) {
+  updateTitle(exampleName);
+  createExampleIframe(exampleName);
+  updateNav(exampleName);
+}
+
+function updateNav(exampleName) {
+  var links = document.querySelectorAll('li a');
+  for (var l = 0; l < links.length; l++) {
+    links[l].classList.remove('active');
+  }
+
+  if (exampleName != 'home')
+    document.querySelector('li#' + exampleName + ' a').classList.add('active');
+}
+
+function updateTitle(exampleName) {
+  var title = 'PNaCl Demos';
+  if (exampleName != 'home') {
+    title += ': ' + exampleMap[exampleName].text;
+  }
+  document.title = title;
+}
+
+function createExampleIframe(exampleName) {
+  createIframe(getExampleUrl(exampleName));
+}
+
+function createHomeIframe() {
+  createIframe('/static/home/index.html');
+}
+
+function createIframe(src) {
+  var oldIframeEl = iframeEl;
+
+  iframeEl = document.createElement('iframe');
+  iframeEl.setAttribute('frameborder', '0');
+  iframeEl.setAttribute('width', '100%');
+  iframeEl.setAttribute('height', '100%');
+  iframeEl.src = src;
+  iframeEl.setAttribute('hidden');
+  iframeEl.onload = function() {
+    if (oldIframeEl)
+      oldIframeEl.parentNode.removeChild(oldIframeEl);
+    iframeEl.removeAttribute('hidden');
+  }
+  document.querySelector('section').appendChild(iframeEl);
+}
+
+function pushState(exampleName) {
+  window.history.pushState(exampleName, '', '/demo/' + exampleName);
+}
+
+function replaceState(exampleName) {
+  window.history.replaceState(exampleName, '', '/demo/' + exampleName);
+}
+
+function replaceHomeState() {
+  window.history.replaceState('home', '', '/demo');
+}
+
+function showOldChromeErrorMessage() {
+  document.getElementById('old-chrome').removeAttribute('hidden');
+}
+
+function showNotChromeErrorMessage() {
+  document.getElementById('not-chrome').removeAttribute('hidden');
+}
diff --git a/native_client_sdk/src/gonacl_appengine/static/index.html b/native_client_sdk/src/gonacl_appengine/static/index.html
index 5b1877d..368e676 100644
--- a/native_client_sdk/src/gonacl_appengine/static/index.html
+++ b/native_client_sdk/src/gonacl_appengine/static/index.html
@@ -18,7 +18,6 @@
   </nav>
 
   <section>
-    <iframe src="/static/home/index.html" frameborder="0" name="content" width="100%" height="100%"></iframe>
   </section>
 
   <div id="not-chrome" class="error" hidden>
@@ -47,111 +46,6 @@
       </p>
     </div>
   </div>
-
-  <script>
-    var examples = [
-      {name: 'bullet', text: 'Bullet Physics'},
-      {name: 'earth', text: 'Raycasted Earth'},
-      {name: 'lua', text: 'Lua Interpreter'},
-      {name: 'life', text: 'Game of Life'},
-      {name: 'voronoi', text: 'Voronoi Simulation'},
-      {name: 'smoothlife', text: 'SmoothLife'},
-      {name: 'cube', text: 'Rotating Cube'},
-    ];
-    var exampleUrls = {};  // Created below.
-
-    var isChrome = /Chrome\/([^\s]+)/.test(navigator.userAgent);
-    var isMobile = /Mobi/.test(navigator.userAgent);
-    var hasPnacl = navigator.mimeTypes['application/x-pnacl'] !== undefined;
-
-    if (isChrome && !isMobile) {
-      if (!hasPnacl) {
-        // Older version of Chrome?
-        showOldChromeErrorMessage();
-      } else {
-        init();
-      }
-    } else {
-      // Not Chrome, or is mobile Chrome.
-      showNotChromeErrorMessage();
-    }
-
-    function showOldChromeErrorMessage() {
-      document.getElementById('old-chrome').removeAttribute('hidden');
-    }
-
-    function showNotChromeErrorMessage() {
-      document.getElementById('not-chrome').removeAttribute('hidden');
-    }
-
-    function init() {
-      makeExampleList();
-      setIframeFromLocation();
-    }
-
-    function makeExampleList() {
-      var listEl = document.querySelector('nav ul');
-      for (var i = 0; i < examples.length; ++i) {
-        var example = examples[i];
-
-        // Populate exampleUrls
-        var url = '/static/' + example.name + '/index.html';
-        exampleUrls[example.name] = url;
-
-        // Create li
-        var listItemEl = document.createElement('li');
-        var anchorEl = document.createElement('a');
-        listItemEl.setAttribute('id', example.name);
-        anchorEl.setAttribute('href', url);
-        anchorEl.setAttribute('target', 'content');
-        anchorEl.textContent = example.text;
-
-        // Listen for clicks and update the nav
-        anchorEl.addEventListener('click', onLinkClick.bind(example), false);
-
-        listItemEl.appendChild(anchorEl);
-        listEl.appendChild(listItemEl);
-      }
-    }
-
-    function onLinkClick(evt) {
-      var links = document.querySelectorAll('li a');
-      for (var l = 0; l < links.length; l++) {
-        links[l].classList.remove('active');
-      }
-      evt.target.classList.add('active');
-      updateUrl(this.name);
-    }
-
-    function updateUrl(exampleName) {
-      window.history.replaceState(null, '', '/demo/' + exampleName);
-    }
-
-    function setIframeFromLocation() {
-      // Get the location's path.
-      var anchorEl = document.createElement('a');
-      anchorEl.href = location.href;
-      var pathname = anchorEl.pathname;
-
-      // Load the correct page, based on the demo name.
-      var matches = pathname.match(/demo(?:\/(.*))?$/);
-      var iframeUrl = null;
-      if (matches) {
-        var matchedExample = matches[1];
-        // Strip trailing slash, if any.
-        if (matchedExample && matchedExample.slice(-1) === '/') {
-          matchedExample = matchedExample.slice(0, -1);
-        }
-
-        iframeUrl = exampleUrls[matchedExample];
-        if (iframeUrl) {
-          document.querySelector('iframe').src = iframeUrl;
-          updateUrl(matchedExample);
-        } else {
-          updateUrl('');
-        }
-      }
-    }
-  </script>
 </body>
+<script src="/static/frame.js"></script>
 </html>