chao
/
CocoCAD


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
							<!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:&nbsp;</div>
            <br>
            <div>
              This button decorates a <strong>DIV</strong>:&nbsp;
              <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:&nbsp;</div>
          </fieldset>
          <br>
          <br>
          <fieldset>
            <legend>
              <strong>goog.ui.ToolbarColorMenuButtonRenderer</strong> demo:
            </legend>
            <div id="tcmb1">
              This toolbar button was created programmatically:&nbsp;
            </div>
            <br>
            <div>
              This toolbar button decorates a <strong>DIV</strong>:&nbsp;
              <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>