| <!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.ColorMenuButton</title> |
| <script src="../base.js"></script> |
| <script> |
| goog.require('goog.array'); |
| goog.require('goog.color'); |
| goog.require('goog.debug.DivConsole'); |
| goog.require('goog.debug.LogManager'); |
| 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.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 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> |
