<!DOCTYPE html>
<html>
<!--
Copyright 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.ColorMenuButton</title>
<script src="../base.js"></script>
<script>
goog.require('goog.array');
goog.require('goog.color');
goog.require('goog.debug.DivConsole');
goog.require('goog.events');
goog.require('goog.log');
goog.require('goog.object');
goog.require('goog.ui.ColorMenuButton');
goog.require('goog.ui.ColorMenuButtonRenderer');
goog.require('goog.ui.Component.EventType');
goog.require('goog.ui.CustomColorPalette');
goog.require('goog.ui.Menu');
goog.require('goog.ui.MenuItem');
goog.require('goog.ui.Separator');
goog.require('goog.ui.Toolbar');
goog.require('goog.ui.ToolbarColorMenuButton');
goog.require('goog.ui.ToolbarColorMenuButtonRenderer');
goog.require('goog.ui.decorate');
</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/menubutton.css">
<link rel="stylesheet" href="../css/custombutton.css">
<link rel="stylesheet" href="../css/palette.css">
<link rel="stylesheet" href="../css/colorpalette.css">
<link rel="stylesheet" href="../css/colormenubutton.css">
<link rel="stylesheet" href="../css/toolbar.css">
<style>
/* Text color. */
.goog-text-color {
width: 15px;
height: 13px;
background: url(../images/toolbar_icons.gif) no-repeat -48px;
}
/* Background color. */
.goog-bg-color {
width: 15px;
height: 13px;
background: url(../images/toolbar_icons.gif) no-repeat -64px;
}
</style>
</head>
<body>
<h2>goog.ui.ColorMenuButton Demo</h2>
<table border="0" cellpadding="0" cellspacing="4" width="100%">
<tbody>
<tr valign="top">
<td width="67%">
<fieldset>
<legend><strong>goog.ui.ColorMenuButton</strong> demo:</legend>
<div id="cmb1">This button was created programmatically: </div>
<br>
<div>
This button decorates a <strong>DIV</strong>:
<div id="cmb2" class="goog-color-menu-button"
title="Decorated tooltip">Color</div>
</div>
<br>
<div id="cmb3">This button has a custom color menu: </div>
</fieldset>
<br>
<br>
<fieldset>
<legend>
<strong>goog.ui.ToolbarColorMenuButtonRenderer</strong> demo:
</legend>
<div id="tcmb1">
This toolbar button was created programmatically:
</div>
<br>
<div>
This toolbar button decorates a <strong>DIV</strong>:
<div id="tcmb2" class="goog-toolbar-color-menu-button"
title="Decorated tooltip">Color</div>
</div>
<br>
<div>
This is what these would look like in an actual toolbar, with
icons instead of text captions:
<br>
<br>
<div id="tb" class="goog-toolbar">
<div id="textColor" class="goog-toolbar-color-menu-button"
title="Text color">
<div class="goog-text-color"></div>
</div>
<div id="bgColor" class="goog-toolbar-color-menu-button"
title="Background color">
<div class="goog-bg-color"></div>
</div>
</div>
</div>
<br>
<div dir="rtl">
BiDi is all the rage these days
<br>
<br>
<div id="tbRtl" class="goog-toolbar">
<div id="textColorRtl" class="goog-toolbar-color-menu-button"
title="Text color">
<div class="goog-text-color"></div>
</div>
<div id="bgColorRtl" class="goog-toolbar-color-menu-button"
title="Background color">
<div class="goog-bg-color"></div>
</div>
</div>
</div>
</fieldset>
<br>
<br>
</td>
<td width="33%">
<!-- Event log. -->
<fieldset class="goog-debug-panel">
<legend>Event Log</legend>
<div id="log"></div>
</fieldset>
</td>
</tr>
</tbody>
</table>
<br>
<div id="perf"></div>
<script>
var timer = goog.now();
// Set up a logger.
goog.log.setLevel(goog.log.getRootLogger(), 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 component = e.target;
var caption = (typeof component.getCaption == 'function' &&
component.getCaption()) || component.getId();
goog.log.info(logger, '"' + caption + '" dispatched: ' + e.type);
}
// Create the first ColorMenuButton programmatically.
var cmb1 = new goog.ui.ColorMenuButton('Color');
cmb1.setTooltip('Click to select color');
cmb1.setSelectedColor('#FF0000');
cmb1.render(goog.dom.getElement('cmb1'));
goog.events.listen(cmb1, EVENTS, logEvent);
// Decorate the second ColorMenuButton.
var cmb2 = goog.ui.decorate(goog.dom.getElement('cmb2'));
cmb2.setSelectedColor('#0000FF');
goog.events.listen(cmb2, EVENTS, logEvent);
// Create a custom palette and add it to a menu.
var customColorPalette = new goog.ui.CustomColorPalette(
['#FE1', '#ACD', '#119']);
customColorPalette.setSize(8);
var customColorMenu = new goog.ui.Menu();
customColorMenu.addItem(new goog.ui.MenuItem(
'None', goog.ui.ColorMenuButton.NO_COLOR));
customColorMenu.addItem(new goog.ui.Separator());
customColorMenu.addItem(customColorPalette);
// Create a ColorMenuButton with a custom menu.
var cmb3 = new goog.ui.ColorMenuButton('Custom', customColorMenu);
cmb3.setTooltip('Click to select a custom color');
// Currently, the "add custom color" dialog created by CustomColorPalette
// blurs the button unless we set it to non-focusable.
cmb3.setSupportedState(goog.ui.Component.State.FOCUSED, false);
cmb3.render(goog.dom.getElement('cmb3'));
goog.events.listen(cmb3, EVENTS, logEvent);
// Create the first toolbar-style ColorMenuButton programmatically.
var tcmb1 = new goog.ui.ColorMenuButton('Color',
goog.ui.ColorMenuButton.newColorMenu(),
goog.ui.ToolbarColorMenuButtonRenderer.getInstance());
tcmb1.render(goog.dom.getElement('tcmb1'));
tcmb1.setTooltip('Click to select color');
tcmb1.setSelectedColor('#FF00FF');
goog.events.listen(tcmb1, EVENTS, logEvent);
// Decorate the second toolbar-style ColorMenuButton.
var tcmb2 = goog.ui.decorate(goog.dom.getElement('tcmb2'));
tcmb2.setSelectedColor('#FFFF00');
goog.events.listen(tcmb2, EVENTS, logEvent);
// Decorate the sample toolbar.
var tb = new goog.ui.Toolbar();
tb.decorate(goog.dom.getElement('tb'));
goog.events.listen(tb, EVENTS, logEvent);
// Decorate the BiDi toolbar.
var tbRtl = new goog.ui.Toolbar();
tbRtl.decorate(goog.dom.getElement('tbRtl'));
goog.events.listen(tbRtl, EVENTS, logEvent);
// Perf and clean up
goog.dom.setTextContent(goog.dom.getElement('perf'),
(goog.now() - timer) + 'ms');
</script>
</body>
</html>
Codebase Browser
chromium