Andreas Hocevar
704 lines
23 KiB
HTML
704 lines
23 KiB
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>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>
|