aboutsummaryrefslogtreecommitdiff
path: root/contexts/data/lib/closure-library/closure/goog/demos/palette.html
diff options
context:
space:
mode:
Diffstat (limited to 'contexts/data/lib/closure-library/closure/goog/demos/palette.html')
-rw-r--r--contexts/data/lib/closure-library/closure/goog/demos/palette.html302
1 files changed, 0 insertions, 302 deletions
diff --git a/contexts/data/lib/closure-library/closure/goog/demos/palette.html b/contexts/data/lib/closure-library/closure/goog/demos/palette.html
deleted file mode 100644
index b2fbe24..0000000
--- a/contexts/data/lib/closure-library/closure/goog/demos/palette.html
+++ /dev/null
@@ -1,302 +0,0 @@
-<!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.events');
- goog.require('goog.object');
- goog.require('goog.debug.DivConsole');
- goog.require('goog.debug.Logger');
- goog.require('goog.debug.LogManager');
- goog.require('goog.ui.Component.EventType');
- goog.require('goog.ui.Palette');
- goog.require('goog.ui.ColorPalette');
- goog.require('goog.ui.CustomColorPalette');
- </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.debug.Logger.Level.ALL);
- var logger = goog.debug.Logger.getLogger('demo');
- var logconsole = new goog.debug.DivConsole(goog.dom.getElement('log'));
- logconsole.setCapturing(true);
-
- var EVENTS = goog.object.getValues(goog.ui.Component.EventType);
- logger.fine('Listening for: ' + EVENTS.join(', ') + '.');
-
- function logEvent(e) {
- var component = e.target;
- var caption = (typeof component.getCaption == 'function' &&
- component.getCaption()) || component.getId();
- logger.info('"' + 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.classes.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.classes.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');
-
- goog.events.listen(window, 'unload', function() {
- goog.events.removeAll();
- });
- </script>
-</body>
-</html>
generated by cgit v1.2.3 (git 2.39.1) at 2024-05-28 22:44:14 +0000