diff options
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> <html ng-app ng-csp> <head> <script src="angular.min.js"></script> @@ -41,7 +53,12 @@ as long as they are CSP compliant, can be used in a Chrome App. We will use the </div> </body> </html> -</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. |