[Commits] r1583 - in sandbox/pgiraud/ux/ColorPicker: examples ux/widgets/form
commits at geoext.org
commits at geoext.org
Sun Dec 13 17:54:29 CET 2009
Author: pgiraud
Date: 2009-12-13 17:54:29 +0100 (Sun, 13 Dec 2009)
New Revision: 1583
Added:
sandbox/pgiraud/ux/ColorPicker/examples/ColorPicker_3.0.3.html
sandbox/pgiraud/ux/ColorPicker/ux/widgets/form/ColorPickerField_3.0.3.js
Log:
ColorPicker modified a bit to work with ExtJS 3.0.3, the Ext.menu.Adapter is no longer required
Added: sandbox/pgiraud/ux/ColorPicker/examples/ColorPicker_3.0.3.html
===================================================================
--- sandbox/pgiraud/ux/ColorPicker/examples/ColorPicker_3.0.3.html (rev 0)
+++ sandbox/pgiraud/ux/ColorPicker/examples/ColorPicker_3.0.3.html 2009-12-13 16:54:29 UTC (rev 1583)
@@ -0,0 +1,80 @@
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+ <title>Ext ColorPicker User Extension Demo</title>
+
+ <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.0.3/adapter/ext/ext-base.js"></script>
+ <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.0.3/ext-all-debug.js"></script>
+ <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.0.3/resources/css/ext-all.css" />
+
+ <script language="javascript" src="../ux/widgets/ColorPicker.js"></script>
+ <script language="javascript" src="../ux/widgets/form/ColorPickerField_3.0.3.js"></script>
+ <link rel="stylesheet" type="text/css" href="../resources/color-picker.ux.css" />
+
+ <script type="text/javascript" src="ColorPicker.js"></script>
+
+ <!-- examples -->
+ <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.0.3/examples/shared/examples.css" />
+ <script language="javascript" src="http://extjs.cachefly.net/ext-3.0.3/examples/shared/examples.js" ></script>
+
+
+ <style type="text/css">
+ .x-panel-body p {
+ margin:10px;
+ font-size:12px;
+ }
+ </style>
+
+ <style type="text/css">
+ body {
+ margin: 25px;
+ line-height: 1.25em;
+ }
+ h1 {
+ font-size: 2em;
+ }
+ h2 {
+ font-size: 1.5em;
+ }
+ .support {
+ overflow: hidden;
+ margin: 1em 0;
+ }
+ .support dt {
+ font-weight: bold;
+ margin: auto .5em;
+ }
+ .support dt, dd {
+ font-size: 1em;
+ }
+ dd {
+ margin-left: 25px;
+ }
+ p {
+ margin: 1em auto;
+ }
+ </style>
+
+</head>
+<body>
+ <h1>Ext.ux.ColorPicker for Ext 3.0.3</h1>
+ <p>ColorField is a user extension component for the popular Javascript library, <a href='http://extjs.com'>ExtJS</a>.</p>
+ <p>The js is not minified so it is readable. See <a href="ColorPicker.js">ColorPicker.js</a>.</p>
+
+ <h2>Browser Compatibility</h2>
+ <dl class='support'>
+ <dt >IE6+ (Win)</dt>
+ <dd>Needs some position fix.</dd>
+ <dt >Firefox 3 (Linux) </dt>
+ <dt>
+ </dl>
+ <h2>Live Demo</h2>
+ <div id="standalone">Standalone Ext.ux.ColorPicker</div><br />
+ <div id="colormenu">Picker within an Ext.ux.ColorMenu</div><br />
+ <div id="colorfield">Picker within an Ext.ux.ColorField</div>
+ <h2>Issues</h2>
+ <ul>
+ <li>Ext.ux.ColorPickerField fires the 'valid' event twice when the ColorPicker is opened and user clicks on a color</li>
+ </ul>
+</body>
+</html>
Added: sandbox/pgiraud/ux/ColorPicker/ux/widgets/form/ColorPickerField_3.0.3.js
===================================================================
--- sandbox/pgiraud/ux/ColorPicker/ux/widgets/form/ColorPickerField_3.0.3.js (rev 0)
+++ sandbox/pgiraud/ux/ColorPicker/ux/widgets/form/ColorPickerField_3.0.3.js 2009-12-13 16:54:29 UTC (rev 1583)
@@ -0,0 +1,214 @@
+Ext.namespace('Ext.ux');
+
+/**
+ * Ext.ux.ColorPickerField Extension Class for ExtJs 2.0
+ *
+ * @author Pierre GIRAUD (pierre.giraud at camptocamp.com)
+ *
+ * @class Ext.ux.ColorPickerField
+ * @extends Ext.form.TriggerField
+ * A trigger field that colors its own background based on the input value. The
+ * value may be any one of the 16 W3C supported CSS color names
+ * (http://www.w3.org/TR/css3-color/). The value can also be an arbitrary
+ * RGB hex value prefixed by a '#' (e.g. '#FFCC66').
+ *
+ * Clicking on the trigger opens a ColorPickerMenu.
+ *
+ * @constructor
+ * Create a new ColorPickerField
+ * @param {Object} config The config object
+ *
+ * Here's an example of typical usage:
+ * <pre><code>
+var cpf = new Ext.ux.ColorPickerField({
+ fieldLabel: 'Choose a color',
+ value: '#0A9F50'
+});
+cpf.on('valid', function(field) {
+ Ext.example.msg('Color Selected', 'You chose {0}.', field.getValue());
+});
+</code></pre>
+ *
+ */
+Ext.ux.ColorPickerField = function(config){
+ Ext.ux.ColorPickerField.superclass.constructor.call(this, config);
+
+ this.on({
+ 'change': this.setStyle,
+ 'valid': this.setStyle,
+ scope: this
+ });
+};
+Ext.extend(Ext.ux.ColorPickerField, Ext.form.TriggerField, {
+
+ triggerClass : 'x-form-color-trigger',
+
+ // The Javascript RegExp object to be tested against the field value during validation (See Ext.TextField)
+ regex: /^#[0-9a-f]{6}$/i,
+
+ // The error text to display if the test fails during validation (See Ext.TextField)
+ regexText: 'This is not a valid color',
+
+ /**
+ * Property: cssColors
+ * {Object} Properties are supported CSS color names. Values are RGB hex
+ * strings (prefixed with '#').
+ */
+ cssColors: {
+ aqua: "#00FFFF",
+ black: "#000000",
+ blue: "#0000FF",
+ fuchsia: "#FF00FF",
+ gray: "#808080",
+ green: "#008000",
+ lime: "#00FF00",
+ maroon: "#800000",
+ navy: "#000080",
+ olive: "#808000",
+ purple: "#800080",
+ red: "#FF0000",
+ silver: "#C0C0C0",
+ teal: "#008080",
+ white: "#FFFFFF",
+ yellow: "#FFFF00"
+ },
+
+ /**
+ * Method: isDark
+ * Determine if a color is dark by avaluating brightness according to the
+ * W3C suggested algorithm for calculating brightness of screen colors.
+ * http://www.w3.org/WAI/ER/WD-AERT/#color-contrast
+ *
+ * Parameters:
+ * hex - {String} A RGB hex color string (prefixed by '#').
+ *
+ * Returns:
+ * {Boolean} The color is dark.
+ */
+ isDark: function(hex) {
+ var dark = false;
+ if(hex) {
+ // convert hex color values to decimal
+ var r = parseInt(hex.substring(1, 3), 16) / 255;
+ var g = parseInt(hex.substring(3, 5), 16) / 255;
+ var b = parseInt(hex.substring(5, 7), 16) / 255;
+ // use w3C brightness measure
+ var brightness = (r * 0.299) + (g * 0.587) + (b * 0.144);
+ dark = brightness < 0.5;
+ }
+ return dark;
+ },
+
+ setStyle: function() {
+ var color = this.getValue();
+ var hex = this.colorToHex(color) || "#ffffff";
+ this.getEl().setStyle({
+ "background": hex,
+ "color": this.isDark(hex) ? "#ffffff" : "#000000"
+ });
+ },
+
+ /**
+ * Method: getHexValue
+ * As a compliment to the field's getValue method, this method always
+ * returns the RGB hex string representation of the current value
+ * in the field (given a named color or a hex string).
+ *
+ * Returns:
+ * {String} The RGB hex string for the field's value (prefixed with '#').
+ */
+ getHexValue: function() {
+ return this.colorToHex(this.getValue());
+ },
+
+ /**
+ * Method: colorToHex
+ * Return the RGB hex representation of a color string. If a CSS supported
+ * named color is supplied, the hex representation will be returned.
+ * If a non-CSS supported named color is supplied, null will be
+ * returned. If a RGB hex string is supplied, the same will be
+ * returned.
+ *
+ * Returns:
+ * {String} A RGB hex color string or null if none found.
+ */
+ colorToHex: function(color) {
+ var hex;
+ if(color.match(this.regex)) {
+ hex = color;
+ } else {
+ hex = this.cssColors[color.toLowerCase()] || null;
+ }
+ return hex;
+ },
+
+ // private
+ menuListeners : {
+ select: function(m, d){
+ this.setValue(d);
+ this.fireEvent('select', m, d);
+ },
+ show : function(){ // retain focus styling
+ this.onFocus();
+ },
+ hide : function(){
+ this.focus.defer(10, this);
+ var ml = this.menuListeners;
+ this.menu.un("select", ml.select, this);
+ this.menu.un("show", ml.show, this);
+ this.menu.un("hide", ml.hide, this);
+ }
+ },
+
+ onRender : function(ct, position){
+ Ext.ux.ColorPickerField.superclass.onRender.call(this, ct, position);
+ this.fireEvent('change', this, this.getValue());
+ },
+
+ // private
+ // Implements the default empty TriggerField.onTriggerClick function to display the ColorPicker
+ onTriggerClick : function(){
+ if(this.disabled){
+ return;
+ }
+ var value = this.isValid() ? this.getValue() : '#FFFFFF';
+ if(this.menu == null){
+ this.menu = new Ext.ux.ColorPickerMenu({
+ hideOnClick: false,
+ value: value
+ });
+ } else {
+ this.menu.picker.setColor(value);
+ }
+ this.menu.on(Ext.apply({}, this.menuListeners, {
+ scope:this
+ }));
+ this.menu.show(this.el);
+ }
+
+});
+Ext.reg('ext.ux.colorpicker', Ext.ux.ColorPickerField);
+
+Ext.ux.ColorPickerMenu = function(config){
+ Ext.ux.ColorPickerMenu.superclass.constructor.call(this, config);
+ this.plain = true;
+ var cp = new Ext.ux.ColorPicker(config);
+ this.add(cp);
+ /**
+ * The {@link Ext.ux.ColorPicker} instance for this ColorMenu
+ * @type ColorPicker
+ */
+ this.picker = cp;
+ /**
+ * @event select
+ * @param {@link Ext.ux.ColorPicker} color picker
+ * @param {String} color
+ */
+ this.relayEvents(cp, ["select"]);
+};
+Ext.extend(Ext.ux.ColorPickerMenu, Ext.menu.Menu, {
+ //private
+ beforeDestroy: function(){
+ this.picker.destroy();
+ }
+});
More information about the Commits
mailing list