src/third_party/closure_library/closure/goog/demos/index_nav.html - incubator-pagespeed-debian - Git at Google

 <!DOCTYPE html>
 <html>
 <!--
 Copyright 2010 The Closure Library Authors. All Rights Reserved.

 Use of this source code is governed by the Apache License, Version 2.0.
 See the COPYING file for details.
 -->
 <head>
   <title>Closure Demos</title>
   <script src="../base.js"></script>
   <script>
     goog.require('goog.ui.tree.TreeControl');
     goog.require('goog.dom');
   </script>
   <script>
     var treeData = [
       {name: 'Advanced Tooltip', url: 'advancedtooltip.html'},
       {name: 'Autocomplete', childNodes: [
         {name: 'Basic', url: 'autocomplete-basic.html'},
         {name: 'Remote', url: 'autocompleteremote.html'},
         {name: 'Rich Remote', url: 'autocompleterichremote.html'}
       ]},
       {name: 'Bidi Input', url: 'bidiinput.html'},
       {name: 'Bubble', url: 'bubble.html'},
       {name: 'Char Counter', url: 'charcounter.html'},
       {name: 'Color Pickers and Palettes', childNodes: [
         {name: 'Color Contrast', url: 'color-contrast.html'},
         {name: 'HSV Palette', url: 'hsvpalette.html'},
         {name: 'HSVA Palette', url: 'hsvapalette.html'},
         {name: 'Simple Color Grid', url: 'colorpicker.html'},
         {name: 'Popup Color Picker', url: 'popupcolorpicker.html'},
         {name: 'Palette Examples', url: 'palette.html'}
       ]},
       {name: 'Common UI Controls', childNodes: [
         {name: 'Buttons', childNodes: [
           {name: 'CSS 3', url: 'css3button.html'},
           {name: 'Imageless', url: 'imagelessbutton.html'},
           {name: 'Simple', url: 'button.html'}
         ]},
         {name: 'Checkbox', url: 'checkbox.html'},
         {name: 'Combobox', url: 'combobox.html'},
         {name: 'Container', url: 'container.html'},
         {name: 'Control', url: 'control.html'},
         {name: 'Dimension Picker', childNodes: [
           {name: 'LTR', url: 'dimensionpicker.html'},
           {name: 'RTL', url: 'dimensionpicker_rtl.html'}
         ]},
         {name: 'Menu', childNodes: [
           {name: 'Menu Bar', url: 'menubar.html'},
           {name: 'Filtered Menu', url: 'filteredmenu.html'},
           {name: 'Popup Menu', url: 'popupmenu.html'},
           {name: 'Simple Menu', url: 'menu.html'},
           {name: 'Submenus', url: 'submenus.html'},
           {name: 'Submenus Flyweight', url: 'submenus2.html'}
         ]},
         {name: 'Menu Buttons', childNodes: [
           {name: 'Color', url: 'colormenubutton.html'},
           {name: 'CSS 3', url: 'css3menubutton.html'},
           {name: 'Imageless', url: 'imagelessmenubutton.html'},
           {name: 'Selection', url: 'selectionmenubutton.html'},
           {name: 'Simple', url: 'menubutton.html'}
         ]},
         {name: 'Select', url: 'select.html'},
         {name: 'Tab Bar and Tabs', url: 'tabbar.html'},
         {name: 'Tab Pane', url: 'tabpane.html'},
         {name: 'Toolbar', url: 'toolbar.html'}
       ]},
       {name: 'Date Pickers', childNodes: [
         {name: 'Date Picker', url: 'datepicker.html'},
         {name: 'Input Date Picker', url: 'inputdatepicker.html'},
         {name: 'Popup Date Picker', url: 'popupdatepicker.html'}
       ]},
       {name: 'Debug', url: 'debug.html'},
       {name: 'Dependency Graph', url: 'depsgraph.html'},
       {name: 'Dialog', url: 'dialog.html'},
       {name: 'Dom Selection', url: 'dom_selection.html'},
       {name: 'Drag', url: 'drag.html'},
       {name: 'Drag & Drop', childNodes: [
         {name: 'Drag & Drop', url: 'dragdrop.html'},
         {name: 'Drag & Drop Detector', url: 'dragdropdetector.html'},
         {name: 'Drag List Group', url: 'draglistgroup.html'},
         {name: 'Dragger', url: 'dragger.html'},
         {name: 'File Drop Handler', url: 'filedrophandler.html'}
       ]},
       {name: 'Editor', childNodes: [
         {name: 'Field - Basic', url: 'editor/field_basic.html'},
         {name: 'Full Editor', url: 'editor/editor.html'},
         {name: 'Hello World Plugin', url: 'editor/helloworld.html'},
         {name: 'Seamless Field', url: 'editor/seamlessfield.html'}
       ]},
       {name: 'Effects', childNodes: [
         {name: 'Animation', url: 'effects.html'},
         {name: 'Animation Queue', url: 'animationqueue.html'},
         {name: 'CSS Sprite Animation', url: 'cssspriteanimation.html'},
         {name: 'CSS3 targeted transition', url: 'fx/css3/transition.html'}
       ]},
       {name: 'Emoji Picker', url: 'popupemojipicker.html'},
       {name: 'Events', childNodes: [
         {name: 'Event Propagation', url: 'event-propagation.html'},
         {name: 'Event Target', url: 'eventtarget.html'},
         {name: 'Events', url: 'events.html'},
         {name: 'Focus Handler', url: 'focushandler.html'},
         {name: 'Input Handler', url: 'inputhandler.html'},
         {name: 'Key Handler', url: 'keyhandler.html'},
         {name: 'Keyboard Shortcuts', url: 'keyboardshortcuts.html'},
         {name: 'Mouse Wheel Handler', url: 'mousewheelhandler.html'},
         {name: 'Online Handler', url: 'onlinehandler.html'},
         {name: 'Paste Handler', url: 'pastehandler.html'},
         {name: 'Stop Event Propagation', url: 'stopevent.html'}
       ]},
       {name: 'Gauge', url: 'gauge.html'},
       {name: 'Graphics', childNodes: [
         {name: 'Basic Elements', url: 'graphics/basicelements.html'},
         {name: 'Events', url: 'graphics/events.html'},
         {name: 'Imageless Rounded Corner', url: 'imagelessroundedcorner.html'},
         {name: 'Modify Elements', url: 'graphics/modifyelements.html'},
         {name: 'Tiger', url: 'graphics/tiger.html'}
       ]},
       {name: 'History', childNodes: [
         {name: 'Demo 1', url: 'history1.html'},
         {name: 'Demo 2', url: 'history2.html'},
         {name: 'HTML 5', url: 'html5history.html'},
         {name: 'Iframe Based', url: 'history3.html'}
       ]},
       {name: 'Hover Card', url: 'hovercard.html'},
       {name: 'Inline Block', childNodes: [
         {name: 'Quirks mode', url: 'inline_block_quirks.html'},
         {name: 'Standards mode', url: 'inline_block_standards.html'}
       ]},
       {name: 'JSON Pretty Printer', url: 'jsonprettyprinter.html'},
       {name: 'Label Input', url: 'labelinput.html'},
       {name: 'Offline UI', url: 'offline.html'},
       {name: 'Pixel Density Monitor', url: 'pixeldensitymonitor.html'},
       {name: 'Plain Text Spell Checker', url: 'plaintextspellchecker.html'},
       {name: 'Popup', url: 'popup.html'},
       {name: 'Progress Bar', url: 'progressbar.html'},
       {name: 'Prompt', url: 'prompt.html'},
       {name: 'QuadTree', url: 'quadtree.html'},
       {name: 'Ratings', url: 'ratings.html'},
       {name: 'Rich Text Spell Checker', url: 'richtextspellchecker.html'},
       {name: 'Rounded Panel', url: 'roundedpanel.html'},
       {name: 'Sample Component', url: 'samplecomponent.html'},
       {name: 'Scroll Floater', url: 'scrollfloater.html'},
       {name: 'Server Chart', url: 'serverchart.html'},
       {name: 'Sliders', childNodes: [
         {name: 'Slider', url: 'slider.html'},
         {name: 'Two Thumb Slider', url: 'twothumbslider.html'}
       ]},
       {name: 'Split Behavior', url: 'splitbehavior.html'},
       {name: 'Split Pane', url: 'splitpane.html'},
       {name: 'Table Sorting', url: 'tablesorter.html'},
       {name: 'Textarea', url: 'textarea.html'},
       {name: 'Timer', url: 'timers.html'},
       {name: 'Tooltips', childNodes: [
         {name: 'Simple Tooltip', url: 'tooltip.html'},
         {name: 'Advanced Tooltip', url: 'advancedtooltip.html'}
       ]},
       {name: 'Tracer', url: 'tracer.html'},
       {name: 'Trees', childNodes: [
         {name: 'Drilldown Row', url: 'drilldownrow.html'},
         {name: 'Tree', url: 'tree/demo.html'}
       ]},
       {name: 'TweakUi', url: 'tweakui.html'},
       {name: 'User Agent', url: 'useragent.html'},
       {name: 'Viewport Size Monitor', url: 'viewportsizemonitor.html'},
       {name: 'XPC', url: 'xpc/'},
       {name: 'Zippy', url: 'zippy.html'}
     ];

     function initTree() {
       goog.ui.tree.TreeControl.defaultConfig.cleardotPath =
           '../images/tree/cleardot.gif';
       var tree = new goog.ui.tree.TreeControl('All Demos');
       tree.setIsUserCollapsible(false);
       buildNode(tree, treeData);
       tree.render(goog.dom.getElement('demo-list'));
     }

     function buildNode(parent, nodeArray) {
       for (var i = 0, node; node = nodeArray[i]; i++) {
         if (node.name) {
           var childNode = parent.getTree().createNode();
           parent.add(childNode);
           if (node.url) {
             childNode.setHtml('<a href="' + node.url + '" title="' + node.name +
                 '" target="demo">' + node.name + '</a>');
             // Need to prevent BaseNode.onClick_ from calling preventDefault.
             childNode.onClick_ = goog.nullFunction;
           } else if (node.childNodes) {
             childNode.setHtml(node.name);
             buildNode(childNode, node.childNodes);
           }
         }
       }
     }

     //function showDemo(node) {
     //  window.top.frames['demo'].location = node.getClientData();
     //}
   </script>
   <link rel="stylesheet" href="../css/tree.css">
   <style>
     body {
       font: normal 10pt Tahoma, Arial, sans-serif;
       color: #333;
       background-color: #eee;
     }

     h2 a {
       font: bold 18pt Tahoma, Arial, sans-serif;
       color: #333;
       text-decoration: underline;
     }

     h2 a:hover {
       color: #00f;
       text-decoration: underline;
     }

     .goog-tree-children {
       background-repeat: repeat-y;
       background-image: url("../images/tree/I.png") !important;
       background-position-y: 1px !important; /* IE only */
       font: icon;
     }

     .goog-tree-icon {
       background-image:url("../images/tree/tree.png");
     }

     .goog-tree-item-label {
       font: bold 10pt Tahoma, Arial, sans-serif;
       color: #333;
       text-decoration: none;
     }

     .goog-tree-item-label a {
       font: normal 10pt Tahoma, Arial, sans-serif;
       color: #333;
       text-decoration: none;
     }

     .goog-tree-item-label a:hover {
       color: #00f;
       text-decoration: underline;
     }
   </style>
 </head>
 <body>
   <h2><a href="index_splash.html" title="Home" target="demo">Index</a></h2>
   <div id="demo-list"></div>
   <script>initTree();</script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<!--
	Copyright 2010 The Closure Library Authors. All Rights Reserved.

	Use of this source code is governed by the Apache License, Version 2.0.
	See the COPYING file for details.
	-->
	<head>
	<title>Closure Demos</title>
	<script src="../base.js"></script>
	<script>
	goog.require('goog.ui.tree.TreeControl');
	goog.require('goog.dom');
	</script>
	<script>
	var treeData = [
	{name: 'Advanced Tooltip', url: 'advancedtooltip.html'},
	{name: 'Autocomplete', childNodes: [
	{name: 'Basic', url: 'autocomplete-basic.html'},
	{name: 'Remote', url: 'autocompleteremote.html'},
	{name: 'Rich Remote', url: 'autocompleterichremote.html'}
	]},
	{name: 'Bidi Input', url: 'bidiinput.html'},
	{name: 'Bubble', url: 'bubble.html'},
	{name: 'Char Counter', url: 'charcounter.html'},
	{name: 'Color Pickers and Palettes', childNodes: [
	{name: 'Color Contrast', url: 'color-contrast.html'},
	{name: 'HSV Palette', url: 'hsvpalette.html'},
	{name: 'HSVA Palette', url: 'hsvapalette.html'},
	{name: 'Simple Color Grid', url: 'colorpicker.html'},
	{name: 'Popup Color Picker', url: 'popupcolorpicker.html'},
	{name: 'Palette Examples', url: 'palette.html'}
	]},
	{name: 'Common UI Controls', childNodes: [
	{name: 'Buttons', childNodes: [
	{name: 'CSS 3', url: 'css3button.html'},
	{name: 'Imageless', url: 'imagelessbutton.html'},
	{name: 'Simple', url: 'button.html'}
	]},
	{name: 'Checkbox', url: 'checkbox.html'},
	{name: 'Combobox', url: 'combobox.html'},
	{name: 'Container', url: 'container.html'},
	{name: 'Control', url: 'control.html'},
	{name: 'Dimension Picker', childNodes: [
	{name: 'LTR', url: 'dimensionpicker.html'},
	{name: 'RTL', url: 'dimensionpicker_rtl.html'}
	]},
	{name: 'Menu', childNodes: [
	{name: 'Menu Bar', url: 'menubar.html'},
	{name: 'Filtered Menu', url: 'filteredmenu.html'},
	{name: 'Popup Menu', url: 'popupmenu.html'},
	{name: 'Simple Menu', url: 'menu.html'},
	{name: 'Submenus', url: 'submenus.html'},
	{name: 'Submenus Flyweight', url: 'submenus2.html'}
	]},
	{name: 'Menu Buttons', childNodes: [
	{name: 'Color', url: 'colormenubutton.html'},
	{name: 'CSS 3', url: 'css3menubutton.html'},
	{name: 'Imageless', url: 'imagelessmenubutton.html'},
	{name: 'Selection', url: 'selectionmenubutton.html'},
	{name: 'Simple', url: 'menubutton.html'}
	]},
	{name: 'Select', url: 'select.html'},
	{name: 'Tab Bar and Tabs', url: 'tabbar.html'},
	{name: 'Tab Pane', url: 'tabpane.html'},
	{name: 'Toolbar', url: 'toolbar.html'}
	]},
	{name: 'Date Pickers', childNodes: [
	{name: 'Date Picker', url: 'datepicker.html'},
	{name: 'Input Date Picker', url: 'inputdatepicker.html'},
	{name: 'Popup Date Picker', url: 'popupdatepicker.html'}
	]},
	{name: 'Debug', url: 'debug.html'},
	{name: 'Dependency Graph', url: 'depsgraph.html'},
	{name: 'Dialog', url: 'dialog.html'},
	{name: 'Dom Selection', url: 'dom_selection.html'},
	{name: 'Drag', url: 'drag.html'},
	{name: 'Drag & Drop', childNodes: [
	{name: 'Drag & Drop', url: 'dragdrop.html'},
	{name: 'Drag & Drop Detector', url: 'dragdropdetector.html'},
	{name: 'Drag List Group', url: 'draglistgroup.html'},
	{name: 'Dragger', url: 'dragger.html'},
	{name: 'File Drop Handler', url: 'filedrophandler.html'}
	]},
	{name: 'Editor', childNodes: [
	{name: 'Field - Basic', url: 'editor/field_basic.html'},
	{name: 'Full Editor', url: 'editor/editor.html'},
	{name: 'Hello World Plugin', url: 'editor/helloworld.html'},
	{name: 'Seamless Field', url: 'editor/seamlessfield.html'}
	]},
	{name: 'Effects', childNodes: [
	{name: 'Animation', url: 'effects.html'},
	{name: 'Animation Queue', url: 'animationqueue.html'},
	{name: 'CSS Sprite Animation', url: 'cssspriteanimation.html'},
	{name: 'CSS3 targeted transition', url: 'fx/css3/transition.html'}
	]},
	{name: 'Emoji Picker', url: 'popupemojipicker.html'},
	{name: 'Events', childNodes: [
	{name: 'Event Propagation', url: 'event-propagation.html'},
	{name: 'Event Target', url: 'eventtarget.html'},
	{name: 'Events', url: 'events.html'},
	{name: 'Focus Handler', url: 'focushandler.html'},
	{name: 'Input Handler', url: 'inputhandler.html'},
	{name: 'Key Handler', url: 'keyhandler.html'},
	{name: 'Keyboard Shortcuts', url: 'keyboardshortcuts.html'},
	{name: 'Mouse Wheel Handler', url: 'mousewheelhandler.html'},
	{name: 'Online Handler', url: 'onlinehandler.html'},
	{name: 'Paste Handler', url: 'pastehandler.html'},
	{name: 'Stop Event Propagation', url: 'stopevent.html'}
	]},
	{name: 'Gauge', url: 'gauge.html'},
	{name: 'Graphics', childNodes: [
	{name: 'Basic Elements', url: 'graphics/basicelements.html'},
	{name: 'Events', url: 'graphics/events.html'},
	{name: 'Imageless Rounded Corner', url: 'imagelessroundedcorner.html'},
	{name: 'Modify Elements', url: 'graphics/modifyelements.html'},
	{name: 'Tiger', url: 'graphics/tiger.html'}
	]},
	{name: 'History', childNodes: [
	{name: 'Demo 1', url: 'history1.html'},
	{name: 'Demo 2', url: 'history2.html'},
	{name: 'HTML 5', url: 'html5history.html'},
	{name: 'Iframe Based', url: 'history3.html'}
	]},
	{name: 'Hover Card', url: 'hovercard.html'},
	{name: 'Inline Block', childNodes: [
	{name: 'Quirks mode', url: 'inline_block_quirks.html'},
	{name: 'Standards mode', url: 'inline_block_standards.html'}
	]},
	{name: 'JSON Pretty Printer', url: 'jsonprettyprinter.html'},
	{name: 'Label Input', url: 'labelinput.html'},
	{name: 'Offline UI', url: 'offline.html'},
	{name: 'Pixel Density Monitor', url: 'pixeldensitymonitor.html'},
	{name: 'Plain Text Spell Checker', url: 'plaintextspellchecker.html'},
	{name: 'Popup', url: 'popup.html'},
	{name: 'Progress Bar', url: 'progressbar.html'},
	{name: 'Prompt', url: 'prompt.html'},
	{name: 'QuadTree', url: 'quadtree.html'},
	{name: 'Ratings', url: 'ratings.html'},
	{name: 'Rich Text Spell Checker', url: 'richtextspellchecker.html'},
	{name: 'Rounded Panel', url: 'roundedpanel.html'},
	{name: 'Sample Component', url: 'samplecomponent.html'},
	{name: 'Scroll Floater', url: 'scrollfloater.html'},
	{name: 'Server Chart', url: 'serverchart.html'},
	{name: 'Sliders', childNodes: [
	{name: 'Slider', url: 'slider.html'},
	{name: 'Two Thumb Slider', url: 'twothumbslider.html'}
	]},
	{name: 'Split Behavior', url: 'splitbehavior.html'},
	{name: 'Split Pane', url: 'splitpane.html'},
	{name: 'Table Sorting', url: 'tablesorter.html'},
	{name: 'Textarea', url: 'textarea.html'},
	{name: 'Timer', url: 'timers.html'},
	{name: 'Tooltips', childNodes: [
	{name: 'Simple Tooltip', url: 'tooltip.html'},
	{name: 'Advanced Tooltip', url: 'advancedtooltip.html'}
	]},
	{name: 'Tracer', url: 'tracer.html'},
	{name: 'Trees', childNodes: [
	{name: 'Drilldown Row', url: 'drilldownrow.html'},
	{name: 'Tree', url: 'tree/demo.html'}
	]},
	{name: 'TweakUi', url: 'tweakui.html'},
	{name: 'User Agent', url: 'useragent.html'},
	{name: 'Viewport Size Monitor', url: 'viewportsizemonitor.html'},
	{name: 'XPC', url: 'xpc/'},
	{name: 'Zippy', url: 'zippy.html'}
	];

	function initTree() {
	goog.ui.tree.TreeControl.defaultConfig.cleardotPath =
	'../images/tree/cleardot.gif';
	var tree = new goog.ui.tree.TreeControl('All Demos');
	tree.setIsUserCollapsible(false);
	buildNode(tree, treeData);
	tree.render(goog.dom.getElement('demo-list'));
	}

	function buildNode(parent, nodeArray) {
	for (var i = 0, node; node = nodeArray[i]; i++) {
	if (node.name) {
	var childNode = parent.getTree().createNode();
	parent.add(childNode);
	if (node.url) {
	childNode.setHtml('<a href="' + node.url + '" title="' + node.name +
	'" target="demo">' + node.name + '</a>');
	// Need to prevent BaseNode.onClick_ from calling preventDefault.
	childNode.onClick_ = goog.nullFunction;
	} else if (node.childNodes) {
	childNode.setHtml(node.name);
	buildNode(childNode, node.childNodes);
	}
	}
	}
	}

	//function showDemo(node) {
	// window.top.frames['demo'].location = node.getClientData();
	//}
	</script>
	<link rel="stylesheet" href="../css/tree.css">
	<style>
	body {
	font: normal 10pt Tahoma, Arial, sans-serif;
	color: #333;
	background-color: #eee;
	}

	h2 a {
	font: bold 18pt Tahoma, Arial, sans-serif;
	color: #333;
	text-decoration: underline;
	}

	h2 a:hover {
	color: #00f;
	text-decoration: underline;
	}

	.goog-tree-children {
	background-repeat: repeat-y;
	background-image: url("../images/tree/I.png") !important;
	background-position-y: 1px !important; /* IE only */
	font: icon;
	}

	.goog-tree-icon {
	background-image:url("../images/tree/tree.png");
	}

	.goog-tree-item-label {
	font: bold 10pt Tahoma, Arial, sans-serif;
	color: #333;
	text-decoration: none;
	}

	.goog-tree-item-label a {
	font: normal 10pt Tahoma, Arial, sans-serif;
	color: #333;
	text-decoration: none;
	}

	.goog-tree-item-label a:hover {
	color: #00f;
	text-decoration: underline;
	}
	</style>
	</head>
	<body>
	<h2><a href="index_splash.html" title="Home" target="demo">Index</a></h2>
	<div id="demo-list"></div>
	<script>initTree();</script>
	</body>
	</html>