<!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');
goog.require('goog.dom.TagName');
</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.
<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(goog.dom.TagName.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(
goog.dom.TagName.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>