| <!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 & 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'); |
| </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 & 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"> |
| |
| </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"> |
| |
| </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('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('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('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('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('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> |
