Adding mapbox-gl branch
This commit is contained in:
Andreas Hocevar
@@ -0,0 +1,703 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user