jack
/
cocorobolx


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
							<!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.Palette &amp; goog.ui.ColorPalette</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.dom.classlist');
    goog.require('goog.events');
    goog.require('goog.log');
    goog.require('goog.object');
    goog.require('goog.ui.ColorPalette');
    goog.require('goog.ui.Component.EventType');
    goog.require('goog.ui.CustomColorPalette');
    goog.require('goog.ui.Palette');
    goog.require('goog.dom.TagName');
  </script>
  <link rel="stylesheet" href="css/demo.css">
  <link rel="stylesheet" href="../css/palette.css">
  <style>
    #cp_text, #ccp_text {
      font: medium monospace;
    }

    .fakelink {
      text-decoration: underline;
      color: blue;
      cursor: pointer;
    }

    /* Demo styles */
    .simple-palette .goog-palette-active {
      border-color: #edf;
    }

    .simple-palette .goog-palette-table {
      border: 1px solid #888;
      border-collapse: separate;
    }

    .simple-palette .goog-palette-cell {
      height: 16px;
      width: 16px;
      margin: 0;
      border: 0;
      padding: 1px;
      text-align: center;
      vertical-align: middle;
    }

    .simple-palette .goog-palette-cell-hover {
      border: 1px solid #cc0;
      padding: 0;
      background-color: #ff0 !important;
    }

    .simple-palette .goog-palette-cell-selected {
      border: 1px solid #008 !important;
      padding: 0;
      color: #00f;
      font-weight: bold;
    }

    .goog-palette-colorswatch {
      position: relative;
      height: 18px;
      width: 18px;
      font-size: x-small;
    }

    .goog-palette-cell-hover .goog-palette-colorswatch {
      height: 16px;
      width: 16px;
      border: 1px solid #FFF;
    }

    .goog-palette-cell-selected .goog-palette-colorswatch {
      height: 16px;
      width: 16px;
      border: 1px solid #333;
      color: #fff;
      font-weight: bold;
      background-image: url(../images/color-swatch-tick.gif);
      background-repeat: no-repeat;
      background-position: center center;
    }

    .goog-palette-customcolor {
      position: relative;
      height: 16px;
      width: 16px;
      font-size: x-small;
      background-color: #FAFAFA;
      color: #666;
      border: 1px solid #EEE;
    }

    .goog-palette-cell-hover .goog-palette-customcolor {
      background-color: #FEE;
      border: 1px solid #F66;
      color: #F66;
    }
  </style>
</head>
<body>
  <h1>goog.ui.Palette &amp; goog.ui.ColorPalette</h1>
  <table border="0" cellpadding="0" cellspacing="4" width="100%">
    <tbody>
      <tr valign="top">
        <td width="67%">
          <fieldset>
            <legend>Demo of the <strong>goog.ui.Palette</strong>:</legend>
            <br/>
            <label id="p1">This is a 3x3 palette with only 8 elements:</label>
            <label>You selected <span id="p1_value">nothing</span></label>
            <br/>
            <i>Note that if you don't specify any dimensions, the palette will auto-size
              to fit your items in the smallest square.</i><br/>
          </fieldset>
          <br/>
          <br/>
          <fieldset>
            <legend>Demo of the <strong>goog.ui.ColorPalette</strong>:</legend>
            <div id="cp"></div>
            <p>The color you selected was:
              <span id="cp_value" class="goog-inline-block goog-palette-colorswatch">
                &nbsp;
              </span>
              <span id="cp_text"></span>
            </p>
          </fieldset>
          <br/>
          <br/>
          <fieldset>
            <legend>Demo of the <strong>goog.ui.CustomColorPalette</strong>:</legend>
            <div id="ccp"></div>
            <p>The color you selected was:
              <span id="ccp_value" class="goog-inline-block goog-palette-colorswatch">
                &nbsp;
              </span>
              <span id="ccp_text"></span>
            </p>
          </fieldset>
        </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);
    }

    var items = [];
    for (var i = 1; i < 9; i++) {
      items.push(goog.dom.createTextNode('' + i));
    }
    var p1 = new goog.ui.Palette(items);
    p1.render(goog.dom.getElement('p1'));
    goog.dom.classlist.add(p1.getElement(), 'simple-palette');

    goog.events.listen(p1, goog.ui.Component.EventType.ACTION,
        function(e) {
          var palette = e.target;
          goog.dom.setTextContent(goog.dom.getElement('p1_value'),
              goog.dom.getTextContent(palette.getSelectedItem()));
        });
    goog.events.listen(p1, EVENTS, logEvent);


    // Color Palette Examples


    function createColorPaletteDemo(colors, width, caption) {
      goog.dom.getElement('cp').appendChild(goog.dom.createDom(goog.dom.TagName.P, null, caption));
      var cp = new goog.ui.ColorPalette(colors);
      cp.setSize(width); // If we only set the columns, the rows are calculated.
      cp.render(goog.dom.getElement('cp'));
      goog.events.listen(cp, goog.ui.Component.EventType.ACTION, onColorEvent);
      goog.events.listen(cp, EVENTS, logEvent);
      return cp;
    }

    function onColorEvent(e) {
      var palette = e.target;
      var color = palette.getSelectedColor();
      goog.style.setStyle(goog.dom.getElement('cp_value'), 'background-color',
          color);
      goog.dom.getElement('cp_value').title = color;
      goog.dom.getElement('cp_text').innerHTML = goog.color.parse(color).hex;
    }

    createColorPaletteDemo(['black', 'blue', 'red', 'magenta',
        'green', 'cyan', 'orange', 'yellow', '#404040', '#808080', '#b0b0b0',
        'white'], 4, 'This is a 4x3 color palette with named colors:');


    createColorPaletteDemo(
        ['#F00', '#F90', '#FF0', '#3F3', '#0FF', '#00F', '#90F', '#F0F'], 8,
        'These colors are bright:');

    createColorPaletteDemo([
        '#EA9999', '#F9CB9C', '#FFE599', '#B6D7A8',
        '#A2C4C9', '#9FC5E8', '#B4A7D6', '#D5A6BD',
        '#E06666', '#F6B26B', '#FFD966', '#93C47D',
        '#76A5AF', '#6FA8DC', '#8E7CC3', '#C27BA0',
        '#CC0000', '#E69138', '#F1C232', '#6AA84F',
        '#45818E', '#3D85C6', '#674EA7', '#A64D79'],
        8, 'This is a lovely pastelle color palette:');


    var cpg = createColorPaletteDemo(['#000', '#444', '#666', '#999', '#AAA',
        '#CCC', '#EEE', '#FFF'], 8,
        'This is a grey scale color palette:');

    // Hack for the demo, don't try this at home, kids!
    var cpc = goog.dom.getElement('cp');
    cpc.appendChild(document.createTextNode('Change: '));
    cpc.appendChild(goog.dom.createDom(goog.dom.TagName.SPAN,
        {'class': 'fakelink', 'onclick': function() {
          cpg.setColors(
              ['#000', '#400', '#600', '#900', '#A00', '#C00', '#E00', '#F00']);
        }}, 'Reds'));
    cpc.appendChild(document.createTextNode(', '));
    cpc.appendChild(goog.dom.createDom(goog.dom.TagName.SPAN,
        {'class': 'fakelink', 'onclick': function() {
          cpg.setColors(
              ['#000', '#040', '#060', '#090', '#0A0', '#0C0', '#0E0', '#0F0']);
        }}, 'Greens'));
    cpc.appendChild(document.createTextNode(', '));
    cpc.appendChild(goog.dom.createDom(goog.dom.TagName.SPAN,
        {'class': 'fakelink', 'onclick': function() {
          cpg.setColors(
              ['#000', '#004', '#006', '#009', '#00A', '#00C', '#00E', '#00F']);
        }}, 'Blues'));
    cpc.appendChild(document.createTextNode(', '));
    cpc.appendChild(goog.dom.createDom(goog.dom.TagName.SPAN,
        {'class': 'fakelink', 'onclick': function() {
          cpg.setColors(
              ['#000', '#444', '#666', '#999', '#AAA', '#CCC', '#EEE', '#FFF']);
        }}, 'Greys'));


    // Custom Color Palette Examples

    var cp = new goog.ui.CustomColorPalette(['#FE1', '#ACD' , '#119']);
    cp.setSize(6);
    cp.render(goog.dom.getElement('ccp'));
    goog.dom.classlist.add(cp.getElement(), 'color-picker');
    goog.events.listen(cp, goog.ui.Component.EventType.ACTION,  function (e) {
      var palette = e.target;
      var color = palette.getSelectedColor();
      goog.style.setStyle(goog.dom.getElement('ccp_value'), 'background-color',
          color);
      goog.dom.getElement('ccp_value').title = color;
      goog.dom.getElement('ccp_text').innerHTML =
          goog.color.parse(color).hex;
    });
    goog.events.listen(cp, EVENTS, logEvent);

    // Perf and clean up

    goog.dom.setTextContent(goog.dom.getElement('perf'),
        (goog.now() - timer) + 'ms');
  </script>
</body>
</html>