diff options
Diffstat (limited to 'contexts/data/lib/closure-library/closure/goog/demos/toolbar.html')
| -rw-r--r-- | contexts/data/lib/closure-library/closure/goog/demos/toolbar.html | 703 |
1 files changed, 0 insertions, 703 deletions
diff --git a/contexts/data/lib/closure-library/closure/goog/demos/toolbar.html b/contexts/data/lib/closure-library/closure/goog/demos/toolbar.html deleted file mode 100644 index d4e8f98..0000000 --- a/contexts/data/lib/closure-library/closure/goog/demos/toolbar.html +++ /dev/null @@ -1,703 +0,0 @@ -<!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>goog.ui.Toolbar</title> - <script src="../base.js"></script> - <script> - goog.require('goog.array'); - goog.require('goog.debug.DivConsole'); - goog.require('goog.debug.Logger'); - goog.require('goog.debug.LogManager'); - goog.require('goog.dom'); - goog.require('goog.events'); - goog.require('goog.events.EventType'); - goog.require('goog.object'); - goog.require('goog.style'); - goog.require('goog.ui.Button'); - goog.require('goog.ui.ButtonSide'); - goog.require('goog.ui.Component.EventType'); - goog.require('goog.ui.Component.State'); - goog.require('goog.ui.Menu'); - goog.require('goog.ui.MenuItem'); - goog.require('goog.ui.Option'); - goog.require('goog.ui.SelectionModel'); - goog.require('goog.ui.Separator'); - goog.require('goog.ui.Toolbar'); - goog.require('goog.ui.ToolbarRenderer'); - goog.require('goog.ui.ToolbarButton'); - goog.require('goog.ui.ToolbarMenuButton'); - goog.require('goog.ui.ToolbarSelect'); - goog.require('goog.ui.ToolbarSeparator'); - goog.require('goog.ui.ToolbarToggleButton'); - </script> - <link rel="stylesheet" href="css/demo.css"> - <link rel="stylesheet" href="../css/menu.css"> - <link rel="stylesheet" href="../css/menuitem.css"> - <link rel="stylesheet" href="../css/menuseparator.css"> - <link rel="stylesheet" href="../css/toolbar.css"> - <style> - /* - * Sample toolbar styles. - */ - - /* Base class for all icon elements. */ - .icon { - height: 16px; - width: 16px; - background-image: url(../images/toolbar_icons.gif); - background-repeat: no-repeat; - vertical-align: middle; - } - - /* Font select. */ - .goog-edit-font .goog-toolbar-menu-button-caption { - color: #246; - width: 15ex; - overflow: hidden; - } - - /* Font select options. */ - .goog-edit-font-normal { - font-family: Arial, sans-serif; - } - .goog-edit-font-times { - font-family: Times, serif; - } - .goog-edit-font-courier { - font-family: "Courier New", Courier, monospace; - } - .goog-edit-font-georgia { - font-family: Georgia, serif; - } - .goog-edit-font-trebuchet { - font-family: "Trebuchet MS", sans-serif; - } - .goog-edit-font-verdana { - font-family: Verdana, sans-serif; - } - - /* Font size. */ - .goog-edit-font-size .goog-toolbar-menu-button-caption { - color: #246; - width: 5ex; - } - - /* Bold. */ - .goog-edit-bold { - background-position: 0; - } - - /* Italic. */ - .goog-edit-italic { - background-position: -16px; - } - - /* Underline. */ - .goog-edit-underline { - background-position: -32px; - } - - /* Color. */ - .goog-edit-color { - background-position: -48px; - } - - /* Background color. */ - .goog-edit-background { - background-position: -64px; - } - - /* Menu buttons. */ - .goog-edit-style, - .goog-edit-insert, - .goog-edit-link, - .goog-edit-spellcheck { - font-weight: bold; - color: #246; - } - - /* Link. */ - .goog-edit-link { - color: #009; - text-decoration: underline; - } - - /* Insert menu. */ - .goog-edit-insert-icon { - background-position: -80px; - vertical-align: bottom; - } - .goog-edit-insert-caption { - padding: 0 2px; - vertical-align: bottom; - } - - /* List style menu. */ - .goog-edit-list-style { - background-position: -96px; - } - - /* Text alignment buttons. */ - .goog-edit-align-left { - background-position: -128px; - } - .goog-edit-align-center { - background-position: -144px; - } - .goog-edit-align-right { - background-position: -160px; - } - - /* - * Menu styles, overriding those in menus.css to make these menus a little - * more like the CCC editor UI design. - */ - - .goog-menu { - position: absolute; - margin: 0; - border-width: 1px; - border-style: solid; - border-color: #ccc #999 #999 #ccc; - padding: 0; - font: normal 10pt Arial, sans-serif; - color: #000; - background-color: #fff; - cursor: default; - outline: none; - } - - .goog-menuitem { - margin: 0; - border: 0; - padding: 4px 32px 4px 4px; - color: #000; - background-color: #fff; - list-style: none; - } - - .goog-menuitem-disabled { - color: #999; - } - - .goog-menuitem-highlight { - background-color: #e8eef7 !important; - } - - .goog-menuseparator { - position: relative; - margin: 2px 0; - border-top: 1px solid #999; - padding: 0; - outline: none; - } - </style> -</head> -<body> - <h2>goog.ui.Toolbar</h2> - <fieldset> - <legend>These toolbars were created programmatically:</legend> - <label> - Show toolbar: - <input id="t1_show" type="checkbox" checked> - </label> - - <label> - Enable toolbar: - <input id="t1_enable" type="checkbox" checked> - </label> - - <label> - Enable last button: - <input id="toggleButton_enable" type="checkbox" checked> - </label> - <br> - <br> - <div id="t1"></div> - <br> - <div id="perf1" class="perf"></div> - <br> - <label> - Show right-to-left toolbar: - <input id="t1rtl_show" type="checkbox" checked> - </label> - - <label> - Enable right-to-left toolbar: - <input id="t1rtl_enable" type="checkbox" checked> - </label> - - <label> - Enable last button: - <input id="rtlToggleButton_enable" type="checkbox" checked> - </label> - <br> - <br> - <div id="t1rtl" dir="rtl"></div> - <br> - <div id="perf1rtl" class="perf"></div> - </fieldset> - <br> - <br> - <fieldset> - <legend>This toolbar was created by decorating a bunch of DIVs:</legend> - <label> - Show toolbar: - <input id="t2_show" type="checkbox" checked> - </label> - - <label> - Enable toolbar: - <input id="t2_enable" type="checkbox"> - </label> - - <label> - Enable menu button: - <input id="menuButton_enable" type="checkbox" checked> - </label> - <br> - <br> - <div id="t2" class="goog-toolbar goog-toolbar-disabled"> - <div class="goog-toolbar-button">Button</div> - <div class="goog-toolbar-button"> - <b><i>Fancy</i></b> <u>Button</u> - </div> - <hr> - <div class="goog-toolbar-button goog-toolbar-button-disabled"> - Disabled Button - </div> - <div id="menuButton" class="goog-toolbar-menu-button"> - Menu Button - <div id="decoratedMenu" class="goog-menu"> - <div class="goog-menuitem">Foo</div> - <div class="goog-menuitem">Bar</div> - <hr> - <div class="goog-menuitem goog-menuitem-disabled">Cake</div> - </div> - </div> - <hr> - <div class="goog-toolbar-toggle-button goog-toolbar-button-checked"> - Toggle Button - </div> - <div class="goog-toolbar-toggle-button"> - <div class="icon goog-edit-underline"></div> - </div> - </div> - <br> - <div id="perf2" class="perf"></div> - <br> - <label> - Show right-to-left toolbar: - <input id="t2rtl_show" type="checkbox" checked> - </label> - - <label> - Enable right-to-left toolbar: - <input id="t2rtl_enable" type="checkbox"> - </label> - - <label> - Enable menu button: - <input id="rtlMenuButton_enable" type="checkbox" checked> - </label> - <br> - <br> - <div id="t2rtl" class="goog-toolbar goog-toolbar-disabled" dir="rtl"> - <div class="goog-toolbar-button">Button</div> - <div class="goog-toolbar-button"> - <div><b><i>Fancy</i></b> <u>Button</u></div> - </div> - <hr> - <div class="goog-toolbar-button goog-toolbar-button-disabled"> - Disabled Button - </div> - <div id="rtlMenuButton" class="goog-toolbar-menu-button"> - Menu Button - <div id="rtlDecoratedMenu" class="goog-menu" dir="rtl"> - <div class="goog-menuitem">Foo</div> - <div class="goog-menuitem">Bar</div> - <div class="goog-menuitem"><span>????... </span> - <span style="font-size:90%; text-align: left;">Ctrl+P</span></div> - <div class="goog-menuitem">???? ?-HTML (????? ZIP)</div> - <hr> - <div class="goog-menuitem goog-menuitem-disabled">Cake</div> - </div> - </div> - <hr> - <div class="goog-toolbar-toggle-button goog-toolbar-button-checked"> - Toggle Button - </div> - <div class="goog-toolbar-toggle-button"> - <!-- For reasons unknown, on FF2, we need an for BiDi. --> - <div class="icon goog-edit-underline"> </div> - </div> - </div> - <br> - <div id="perf2rtl" class="perf"></div> - </fieldset> - <br> - <br> - <fieldset> - <legend>This is starting to look like an editor toolbar:</legend> - <label> - Show toolbar: - <input id="t3_show" type="checkbox" checked> - </label> - - <label> - Enable toolbar: - <input id="t3_enable" type="checkbox" checked> - </label> - - <label> - Enable font dropdown: - <input id="font_enable" type="checkbox" checked> - </label> - - <label> - Show font size dropdown: - <input id="fontSize_show" type="checkbox" checked> - </label> - <br> - <br> - <div id="t3" class="goog-toolbar"> - <div id="font" title="Font" class="goog-toolbar-select goog-edit-font"> - Select font - <div id="fontMenu" class="goog-menu"> - <div class="goog-option goog-edit-font-normal">Normal</div> - <div class="goog-option goog-edit-font-times">Times</div> - <div class="goog-option goog-edit-font-courier">Courier New</div> - <div class="goog-option goog-edit-font-georgia">Georgia</div> - <div class="goog-option goog-edit-font-trebuchet">Trebuchet</div> - <div class="goog-option goog-edit-font-verdana">Verdana</div> - </div> - </div> - <div id="fontSize" title="Font size" - class="goog-toolbar-select goog-edit-font-size"> - Size - <div id="fontSizeMenu" class="goog-menu"> - <div class="goog-option">7pt</div> - <div class="goog-option">10pt</div> - <div class="goog-option">14pt</div> - <div class="goog-option">18pt</div> - <div class="goog-option">24pt</div> - <div class="goog-option">36pt</div> - </div> - </div> - <div id="bold" title="Bold" class="goog-toolbar-toggle-button"> - <div class="icon goog-edit-bold"></div> - </div> - <div id="italic" title="Italic" - class="goog-toolbar-toggle-button goog-toolbar-button-checked"> - <div class="icon goog-edit-italic"></div> - </div> - <div id="underline" title="Underline" class="goog-toolbar-toggle-button"> - <div class="icon goog-edit-underline"></div> - </div> - <div id="color" title="Text color" class="goog-toolbar-menu-button"> - <div class="icon goog-edit-color"></div> - <div id="colorMenu" class="goog-menu"> - <div class="goog-menuitem" style="color:#800;">Red</div> - <div class="goog-menuitem" style="color:#080;">Green</div> - <div class="goog-menuitem" style="color:#008;">Blue</div> - </div> - </div> - <div id="bgColor" title="Background color" - class="goog-toolbar-menu-button"> - <div class="icon goog-edit-background"></div> - <div id="bgColorMenu" class="goog-menu"> - <div class="goog-menuitem" style="color:#800;">Red</div> - <div class="goog-menuitem" style="color:#080;">Green</div> - <div class="goog-menuitem" style="color:#008;">Blue</div> - </div> - </div> - <div id="style" title="Style" class="goog-toolbar-menu-button"> - <div class="goog-edit-style">Style</div> - <div id="styleMenu" class="goog-menu"> - <div class="goog-menuitem">Clear formatting</div> - <hr> - <div class="goog-menuitem">Normal paragraph text</div> - <div class="goog-menuitem">Minor heading (H3)</div> - <div class="goog-menuitem">Sub-heading (H2)</div> - <div class="goog-menuitem">Heading (H1)</div> - <hr> - <div class="goog-menuitem">Indent more</div> - <div class="goog-menuitem">Indent less</div> - <div class="goog-menuitem goog-menuitem-disabled">Blockquote</div> - </div> - </div> - <hr> - <div id="insert" title="Insert" class="goog-toolbar-menu-button"> - <div class="goog-edit-insert"> - <span class="icon goog-inline-block goog-edit-insert-icon"> </span> - <span class="goog-inline-block goog-edit-insert-caption">Insert</span> - </div> - <div id="insertMenu" class="goog-menu"> - <div class="goog-menuitem">Picture</div> - <div class="goog-menuitem">Drawing</div> - <div class="goog-menuitem">Other...</div> - </div> - </div> - <hr> - <div id="link" title="Create link" class="goog-toolbar-button"> - <div class="goog-edit-link">Link</div> - </div> - <hr> - <div id="listStyle" title="List style" - class="goog-toolbar-menu-button goog-toolbar-menu-button-disabled"> - <div class="icon goog-edit-list-style"></div> - </div> - <hr> - <div id="alignLeft" title="Left" class="goog-toolbar-toggle-button goog-toolbar-button-collapse-right"> - <div class="icon goog-edit-align-left"></div> - </div> - <div id="alignCenter" title="Center" - class="goog-toolbar-toggle-button goog-toolbar-button-collapse-left goog-toolbar-button-collapse-right"> - <div class="icon goog-edit-align-center"></div> - </div> - <div id="alignRight" title="Right" class="goog-toolbar-toggle-button goog-toolbar-button-collapse-left"> - <div class="icon goog-edit-align-right"></div> - </div> - <hr> - <div id="spellcheck" title="Check spelling" - class="goog-toolbar-menu-button goog-toolbar-menu-button-disabled"> - <div class="goog-edit-spellcheck">Check spelling</div> - </div> - </div> - <br> - <div id="perf3" class="perf"></div> - </fieldset> - <br> - <br> - <!-- Event log. --> - <fieldset class="goog-debug-panel"> - <legend>Event Log</legend> - <div class="hint"> - <b style="color: #800;">Warning!</b> On Gecko, the event log may cause - the page to flicker when mousing over toolbar items. This is a Gecko - issue triggered by scrolling in the event log; see - <a target="_blank" href="http://b/issue?id=756988">bug 756988</a>.<br> - <br> - Enable logging: <input id="enable_log" type="checkbox" checked> - </div> - <br> - <div id="log"></div> - </fieldset> - <script> - var timer; - - // Set up a logger. - goog.debug.LogManager.getRoot().setLevel(goog.debug.Logger.Level.ALL); - var logger = goog.debug.Logger.getLogger('demo'); - var logconsole = new goog.debug.DivConsole(goog.dom.getElement('log')); - logconsole.setCapturing(true); - - var EVENTS = goog.object.getValues(goog.ui.Component.EventType); - logger.fine('Listening for: ' + EVENTS.join(', ') + '.'); - - function logEvent(e) { - var caption = e.target.getId(); - if (typeof e.target.getCaption == 'function' && e.target.getCaption()) { - caption += ' (' + e.target.getCaption() + ')'; - } - logger.info('"' + caption + '" dispatched: ' + e.type); - } - - function showPerf(id, start) { - goog.dom.setTextContent(goog.dom.getElement(id), - (goog.now() - start) + 'ms'); - } - - goog.events.listen(goog.dom.getElement('enable_log'), - goog.events.EventType.CLICK, - function(e) { - goog.style.showElement(goog.dom.getElement('log'), e.target.checked); - logconsole.setCapturing(e.target.checked); - }); - - function handleShow(e) { - var t = goog.now(); - var box = e.target; - this.setVisible(box.checked); - var caption = this.getId(); - if (typeof this.getCaption == 'function' && this.getCaption()) { - caption += ' (' + this.getCaption() + ')'; - } - logger.info((this.isVisible() ? 'Showed' : 'Hid') + ' ' + caption - + ' in ' + (goog.now() - t) + 'ms'); - } - - function handleEnable(e) { - if (typeof this.isParentDisabled_ == 'function' && - this.isParentDisabled_()) { - logger.warning('Can\'t enable/disable control if parent is disabled!'); - return false; - } - - var t = goog.now(); - var box = e.target; - this.setEnabled(box.checked); - var caption = this.getId(); - if (typeof this.getCaption == 'function' && this.getCaption()) { - caption += ' (' + this.getCaption() + ')'; - } - logger.info((this.isEnabled() ? 'Enabled' : 'Disabled') + ' ' + caption - + ' in ' + (goog.now() - t) + 'ms'); - return true; - } - - // Create first toolbar programmatically. - timer = goog.now(); - var t1 = new goog.ui.Toolbar(); - t1.addChild(new goog.ui.ToolbarButton('Button'), true); - t1.getChildAt(0).setTooltip('This is a tooltip for a button'); - t1.addChild(new goog.ui.ToolbarButton('AnotherButton'), true); - t1.addChild(new goog.ui.ToolbarSeparator(), true); - t1.addChild(new goog.ui.ToolbarButton('Disabled'), true); - t1.getChildAt(3).setEnabled(false); - t1.addChild(new goog.ui.ToolbarButton('YetAnotherButton'), true); - var toggleButton = new goog.ui.ToolbarToggleButton(goog.dom.createDom('div', - 'icon goog-edit-bold')); - toggleButton.setChecked(true); - t1.addChild(toggleButton, true); - var btnLeft = new goog.ui.ToolbarButton('Left'); - btnLeft.setCollapsed(goog.ui.ButtonSide.END); - t1.addChild(btnLeft, true); - var btnCenter = new goog.ui.ToolbarButton('Center'); - btnCenter.setCollapsed(goog.ui.ButtonSide.END | goog.ui.ButtonSide.START); - t1.addChild(btnCenter, true); - var btnRight = new goog.ui.ToolbarButton('Right'); - btnRight.setCollapsed(goog.ui.ButtonSide.START); - t1.addChild(btnRight, true); - t1.render(goog.dom.getElement('t1')); - showPerf('perf1', timer); - goog.events.listen(t1, EVENTS, logEvent); - - // Hook up checkboxes. - goog.events.listen(goog.dom.getElement('t1_show'), - goog.events.EventType.CLICK, handleShow, false, t1); - goog.events.listen(goog.dom.getElement('t1_enable'), - goog.events.EventType.CLICK, handleEnable, false, t1); - goog.events.listen(goog.dom.getElement('toggleButton_enable'), - goog.events.EventType.CLICK, handleEnable, false, toggleButton); - - // Create right-to-left toolbar programmatically. - timer = goog.now(); - var t1rtl = new goog.ui.Toolbar(); - t1rtl.addChild(new goog.ui.ToolbarButton('Button'), true); - t1rtl.getChildAt(0).setTooltip('This is a tooltip for a button'); - t1rtl.addChild(new goog.ui.ToolbarButton('AnotherButton'), true); - t1rtl.addChild(new goog.ui.ToolbarSeparator(), true); - t1rtl.addChild(new goog.ui.ToolbarButton('Disabled'), true); - t1rtl.getChildAt(3).setEnabled(false); - t1rtl.addChild(new goog.ui.ToolbarButton('YetAnotherButton'), true); - // For reasons unknown, on FF2, we have to inject an character into - // the icon div for RTL positioning to work. FF2 BiDi sucks! - var rtlToggleButton = new goog.ui.ToolbarToggleButton(goog.dom.createDom( - 'div', 'icon goog-edit-bold', '\u00A0')); - rtlToggleButton.setChecked(true); - t1rtl.addChild(rtlToggleButton, true); - var btnLeftRtl = new goog.ui.ToolbarButton('Left'); - t1rtl.addChild(btnLeftRtl, true); - var btnCenterRtl = new goog.ui.ToolbarButton('Center'); - t1rtl.addChild(btnCenterRtl, true); - var btnRightRtl = new goog.ui.ToolbarButton('Right'); - t1rtl.addChild(btnRightRtl, true); - - t1rtl.render(goog.dom.getElement('t1rtl')); - showPerf('perf1rtl', timer); - goog.events.listen(t1rtl, EVENTS, logEvent); - - // The setCollapsed method needs to be called after the toolbar is rendered - // for it to pick up the directionality of the toolbar. - btnLeftRtl.setCollapsed(goog.ui.ButtonSide.END); - btnCenterRtl.setCollapsed( - goog.ui.ButtonSide.END | goog.ui.ButtonSide.START); - btnRightRtl.setCollapsed(goog.ui.ButtonSide.START); - - // Hook up checkboxes. - goog.events.listen(goog.dom.getElement('t1rtl_show'), - goog.events.EventType.CLICK, handleShow, false, t1rtl); - goog.events.listen(goog.dom.getElement('t1rtl_enable'), - goog.events.EventType.CLICK, handleEnable, false, t1rtl); - goog.events.listen(goog.dom.getElement('rtlToggleButton_enable'), - goog.events.EventType.CLICK, handleEnable, false, rtlToggleButton); - - // Decorate the second toolbar. - timer = goog.now(); - var t2 = new goog.ui.Toolbar(); - t2.decorate(goog.dom.getElement('t2')); - showPerf('perf2', timer); - goog.events.listen(t2, EVENTS, logEvent); - - // Hook up checkboxes. - goog.events.listen(goog.dom.getElement('t2_show'), - goog.events.EventType.CLICK, handleShow, false, t2); - goog.events.listen(goog.dom.getElement('t2_enable'), - goog.events.EventType.CLICK, handleEnable, false, t2); - goog.events.listen(goog.dom.getElement('menuButton_enable'), - goog.events.EventType.CLICK, handleEnable, false, - t2.getChild('menuButton')); - - // Decorate the second toolbar. - timer = goog.now(); - var t2rtl = new goog.ui.Toolbar(); - t2rtl.decorate(goog.dom.getElement('t2rtl')); - showPerf('perf2rtl', timer); - goog.events.listen(t2rtl, EVENTS, logEvent); - - // Hook up checkboxes. - goog.events.listen(goog.dom.getElement('t2rtl_show'), - goog.events.EventType.CLICK, handleShow, false, t2rtl); - goog.events.listen(goog.dom.getElement('t2rtl_enable'), - goog.events.EventType.CLICK, handleEnable, false, t2rtl); - goog.events.listen(goog.dom.getElement('rtlMenuButton_enable'), - goog.events.EventType.CLICK, handleEnable, false, - t2rtl.getChild('rtlMenuButton')); - - // Decorate the third toolbar. - timer = goog.now(); - var t3 = new goog.ui.Toolbar(); - t3.decorate(goog.dom.getElement('t3')); - showPerf('perf3', timer); - goog.events.listen(t3, EVENTS, logEvent); - - // Have the alignment buttons be controlled by a selection model. - var selectionModel = new goog.ui.SelectionModel(); - selectionModel.setSelectionHandler(function(button, select) { - if (button) { - button.setChecked(select); - } - }); - goog.array.forEach(['alignLeft', 'alignCenter', 'alignRight'], - function(id) { - var button = t3.getChild(id); - // Let the selection model control the button's checked state. - button.setAutoStates(goog.ui.Component.State.CHECKED, false); - selectionModel.addItem(button); - goog.events.listen(button, goog.ui.Component.EventType.ACTION, - function(e) { - selectionModel.setSelectedItem(e.target); - }); - }); - - // Hook up checkboxes. - goog.events.listen(goog.dom.getElement('t3_show'), - goog.events.EventType.CLICK, handleShow, false, t3); - goog.events.listen(goog.dom.getElement('t3_enable'), - goog.events.EventType.CLICK, handleEnable, false, t3); - goog.events.listen(goog.dom.getElement('font_enable'), - goog.events.EventType.CLICK, handleEnable, false, - t3.getChild('font')); - goog.events.listen(goog.dom.getElement('fontSize_show'), - goog.events.EventType.CLICK, handleShow, false, - t3.getChild('fontSize')); - </script> -</body> -</html> |