Andreas Hocevar
300 lines
9.4 KiB
HTML
300 lines
9.4 KiB
HTML
<!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>
|