| <!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.LogManager'); |
| goog.require('goog.dom'); |
| goog.require('goog.events'); |
| goog.require('goog.events.EventType'); |
| goog.require('goog.log'); |
| 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.ToolbarButton'); |
| goog.require('goog.ui.ToolbarMenuButton'); |
| goog.require('goog.ui.ToolbarRenderer'); |
| 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.log.Level.ALL); |
| var logger = goog.log.getLogger('demo'); |
| var logconsole = new goog.debug.DivConsole(goog.dom.getElement('log')); |
| logconsole.setCapturing(true); |
| |
| var EVENTS = goog.object.getValues(goog.ui.Component.EventType); |
| goog.log.fine(logger, '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() + ')'; |
| } |
| goog.log.info(logger, '"' + 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.setElementShown(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() + ')'; |
| } |
| goog.log.info(logger, (this.isVisible() ? 'Showed' : 'Hid') + ' ' + caption |
| + ' in ' + (goog.now() - t) + 'ms'); |
| } |
| |
| function handleEnable(e) { |
| if (typeof this.isParentDisabled_ == 'function' && |
| this.isParentDisabled_()) { |
| goog.log.warning(logger, '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() + ')'; |
| } |
| goog.log.info(logger, (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> |
