Add support for tabbed panes in apps and extensions docs

BUG=162992


Review URL: https://chromiumcodereview.appspot.com/12615010

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

4 files changed, 158 insertions, 3 deletions

diff --git a/chrome/common/extensions/docs/static/css/site.css b/chrome/common/extensions/docs/static/css/site.css
index 9833d06..6bc2a1a 100644
--- a/chrome/common/extensions/docs/static/css/site.css
+++ b/chrome/common/extensions/docs/static/css/site.css
@@ -561,3 +561,36 @@ dd {
 .imaged + p {
   clear: right;
 }
+
+/* Tabbed pane with header (tabs) and content */
+tabs {
+  margin: 25px 0;
+  display: block;
+}
+tabs header {
+  display: inline-block;
+  padding: 10px;
+  border: 1px solid #ccc;
+  margin-bottom: 0;
+  background: inherit;
+  border-bottom: 1px solid white;
+  cursor: auto;
+}
+tabs header.unselected {
+  border-bottom: 1px solid #ccc;
+  background: #eee;
+  cursor: pointer;
+}
+tabs content {
+  display: block;
+  padding: 20px;
+  border: 1px solid #ccc;
+  margin-top: -1px;
+}
+tabs content.unselected {
+  display: none;
+}
+tabs content pre {
+  margin: 0;
+  padding: 10px;
+}
diff --git a/chrome/common/extensions/docs/static/js/tabs.js b/chrome/common/extensions/docs/static/js/tabs.js
new file mode 100644
index 0000000..405d369
--- /dev/null
+++ b/chrome/common/extensions/docs/static/js/tabs.js
@@ -0,0 +1,104 @@
+// Copyright (c) 2012 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.
+
+/**
+ * Add support for tab pannels on custom elements (tabs, header and content)
+ *
+ **/
+(function() {
+
+function registerEvent(target, eventType, handler) {
+  if (target.addEventListener) {
+    target.addEventListener(eventType, handler);
+  } else {
+    target.attachEvent(eventType, handler);
+  }
+}
+
+function getSessionKey(key) {
+  return window.sessionStorage.getItem("__tab_"+key);
+}
+
+function setSessionKey(key, value) {
+  window.sessionStorage.setItem("__tab_"+key, value);
+}
+
+function onTabHeaderKeyDown(e) {
+  if (e.keyCode == 13) {
+    e.preventDefault();
+    onTabClicked(e);
+  }
+}
+
+function onTabClicked(e) {
+  var tabs = e.target.parentNode;
+  if (!tabs || tabs.tagName !== 'TABS')
+    return;
+
+  var headers = tabs.getElementsByTagName('header'),
+    contents = tabs.getElementsByTagName('content'),
+    tabGroup = tabs.getAttribute("data-group"),
+    tabValue = e.target.getAttribute("data-value");
+
+  if (tabGroup && tabValue && window.sessionStorage)
+    setSessionKey(tabGroup, tabValue);
+
+  for (var i=0; i<headers.length; i++) {
+    if (headers[i] === e.target) {
+      headers[i].classList.remove('unselected');
+      if (contents.length > i)
+        contents[i].classList.remove('unselected');
+    } else {
+      headers[i].classList.add('unselected');
+      if (contents.length > i)
+        contents[i].classList.add('unselected');
+    }
+  }
+}
+
+function initTabPane(tab) {
+  var tabGroup = tab.getAttribute("data-group");
+  if (tabGroup && window.sessionStorage)
+    var tabGroupSelectedValue = getSessionKey(tabGroup);
+
+  var headers = tab.getElementsByTagName('header');
+  var contents = tab.getElementsByTagName('content');
+  var hasSelected = false;
+
+  if (headers.length==0 || contents.length==0)
+    return;
+
+  for (var j=0; j<headers.length; j++) {
+    var selected = tabGroup && tabGroupSelectedValue
+      && tabGroupSelectedValue===headers[j].getAttribute("data-value");
+
+    if (!hasSelected && selected) {
+      headers[j].classList.remove("unselected");
+      contents[j].classList.remove("unselected");
+      hasSelected = true;
+    } else {
+      headers[j].classList.add("unselected");
+      contents[j].classList.add("unselected");
+    }
+
+    headers[j].addEventListener('click', onTabClicked);
+    headers[j].addEventListener('keydown', onTabHeaderKeyDown);
+  }
+
+  if (!hasSelected) {
+    headers[0].classList.remove("unselected");
+    contents[0].classList.remove("unselected");
+  }
+}
+
+function onLoad() {
+  var tabs = document.getElementsByTagName('tabs');
+  for (var i=0; i<tabs.length; i++) {
+    initTabPane(tabs[i]);
+  }
+}
+
+window.addEventListener('DOMContentLoaded', onLoad);
+
+})();
diff --git a/chrome/common/extensions/docs/templates/articles/app_codelab3_mvc.html b/chrome/common/extensions/docs/templates/articles/app_codelab3_mvc.html
index f7ccc56..941f54f 100644
--- a/chrome/common/extensions/docs/templates/articles/app_codelab3_mvc.html
+++ b/chrome/common/extensions/docs/templates/articles/app_codelab3_mvc.html
@@ -21,8 +21,20 @@ as long as they are CSP compliant, can be used in a Chrome App. We will use the
 
 <ol>
 <li><p>Download the <a href="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js">Angular script</a> and save it as <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab3_mvc/angularjs/simpleview/angular.min.js">angular.min.js</a>.</p></li>
-<li><p>Change your <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab3_mvc/angularjs/simpleview/index.html">index.html</a> to use a simple Angular sample:
-<pre>
+<li><p>Change your <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab3_mvc/angularjs/simpleview/index.html">index.html</a> to use a simple Angular sample:</p>
+
+<tabs data-group="source">
+
+  <header tabindex="0" data-value="js">JavaScript</header>
+  <header tabindex="0" data-value="angular">Angular</header>
+
+  <content>
+    <pre>
+      This is where the pure javascript code comes in
+    </pre>
+  </content>
+  <content>
+    <pre>
 &lt;html ng-app ng-csp&gt;
   &lt;head&gt;
     &lt;script src=&quot;angular.min.js&quot;&gt;&lt;/script&gt;
@@ -41,7 +53,12 @@ as long as they are CSP compliant, can be used in a Chrome App. We will use the
     &lt;/div&gt;
   &lt;/body&gt;
 &lt;/html&gt;
-</pre></p></li>
+    </pre>
+  </content>
+
+</tabs>
+
+</li>
 <li><p>Add a simple stylesheet: <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab3_mvc/angularjs/simpleview/todo.css">todo.css</a>
 <pre>
 body {
diff --git a/chrome/common/extensions/docs/templates/private/footer.html b/chrome/common/extensions/docs/templates/private/footer.html
index 11783bc..2d02793 100644
--- a/chrome/common/extensions/docs/templates/private/footer.html
+++ b/chrome/common/extensions/docs/templates/private/footer.html
@@ -15,6 +15,7 @@
     <script src="{{static}}/js/prettify.js" type="text/javascript"></script>
     <script src="{{static}}/js/scroll.js" type="text/javascript"></script>
     <script src="{{static}}/js/sidebar.js" type="text/javascript"></script>
+    <script src="{{static}}/js/tabs.js" type="text/javascript"></script>
     <script>
       (function() {
         // Auto syntax highlight all pre tags.