diff options
Diffstat (limited to 'contexts/data/lib/closure-library/closure/goog/demos/colormenubutton.html')
| -rw-r--r-- | contexts/data/lib/closure-library/closure/goog/demos/colormenubutton.html | 221 |
1 files changed, 0 insertions, 221 deletions
diff --git a/contexts/data/lib/closure-library/closure/goog/demos/colormenubutton.html b/contexts/data/lib/closure-library/closure/goog/demos/colormenubutton.html deleted file mode 100644 index 3936458..0000000 --- a/contexts/data/lib/closure-library/closure/goog/demos/colormenubutton.html +++ /dev/null @@ -1,221 +0,0 @@ -<!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.Logger'); - goog.require('goog.debug.LogManager'); - goog.require('goog.events'); - goog.require('goog.object'); - goog.require('goog.ui.ColorMenuButton'); - goog.require('goog.ui.ColorMenuButtonRenderer'); - goog.require('goog.ui.CustomColorPalette'); - goog.require('goog.ui.Component.EventType'); - 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.debug.Logger.Level.ALL); - var logger = goog.debug.Logger.getLogger('demo'); - var logConsole = new goog.debug.DivConsole(goog.dom.getElement('log')); - logConsole.setCapturing(true); - - var EVENTS = goog.object.getValues(goog.ui.Component.EventType); - logger.fine('Listening for: ' + EVENTS.join(', ') + '.'); - - function logEvent(e) { - var component = e.target; - var caption = (typeof component.getCaption == 'function' && - component.getCaption()) || component.getId(); - logger.info('"' + 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'); - goog.events.listen(window, 'unload', function() { - goog.events.removeAll(); - }); - </script> -</body> -</html> |