<!DOCTYPE html>
<html>
<!--
Copyright 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.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 & 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.log.setLevel(goog.log.getRootLogger(), 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>
Codebase Browser
chromium