From 29649a2d298cc446877234d66460842a74dd9c37 Mon Sep 17 00:00:00 2001 From: Just van den Broecke Date: Thu, 23 Jan 2014 15:07:59 +0100 Subject: [PATCH] issue #216 - colorpickerwin: close when color selected and allow 3-digit colors in ColorField --- src/script/widgets/VectorStylesDialog.js | 142 ++--------------------- src/script/widgets/form/ColorField.js | 27 ++++- 2 files changed, 31 insertions(+), 138 deletions(-) diff --git a/src/script/widgets/VectorStylesDialog.js b/src/script/widgets/VectorStylesDialog.js index 415036ce..f32ad1c9 100644 --- a/src/script/widgets/VectorStylesDialog.js +++ b/src/script/widgets/VectorStylesDialog.js @@ -496,128 +496,9 @@ gxp.VectorStylesDialog.createVectorStylerConfig = function (layerRecord) { }; }; -//gxp.VectorStylesDialog.createColorsArr = function () { -// -// var colors = new Array('00', 'CC', '33', '66', '99', 'FF'); -// var colorsArr = []; -// for (var i = 0; i < 6; i++) { -// for (var j = 0; j < 6; j++) { -// // each row will have 6 colors -// for (var k = 0; k < 6; k++) { -// //this creates hex code for each color -// colorsArr.push(colors[i] + '' + colors[k] + '' + colors[j]); -// } -// } -// -// } -// return colorsArr; -//}; - /** api: xtype = gxp_vectorstylesdialog */ Ext.reg('gxp_vectorstylesdialog', gxp.VectorStylesDialog); -/** Using the ExtJS-way to override single methods of classes. Extend colors available in standard palette. */ -Ext.override(Ext.ColorPalette, { - // Use the 256 web-safe colors, see http://www.w3schools.com/html/html_colors.asp - colors: [ - '000000', '000033', '000066', '000099', '0000CC', '0000FF', - '003300', '003333', '003366', '003399', '0033CC', '0033FF', - '006600', '006633', '006666', '006699', '0066CC', '0066FF', - '009900', '009933', '009966', '009999', '0099CC', '0099FF', - '00CC00', '00CC33', '00CC66', '00CC99', '00CCCC', '00CCFF', - '00FF00', '00FF33', '00FF66', '00FF99', '00FFCC', '00FFFF', - '330000', '330033', '330066', '330099', '3300CC', '3300FF', - '333300', '333333', '333366', '333399', '3333CC', '3333FF', - '336600', '336633', '336666', '336699', '3366CC', '3366FF', - '339900', '339933', '339966', '339999', '3399CC', '3399FF', - '33CC00', '33CC33', '33CC66', '33CC99', '33CCCC', '33CCFF', - '33FF00', '33FF33', '33FF66', '33FF99', '33FFCC', '33FFFF', - '660000', '660033', '660066', '660099', '6600CC', '6600FF', - '663300', '663333', '663366', '663399', '6633CC', '6633FF', - '666600', '666633', '666666', '666699', '6666CC', '6666FF', - '669900', '669933', '669966', '669999', '6699CC', '6699FF', - '66CC00', '66CC33', '66CC66', '66CC99', '66CCCC', '66CCFF', - '66FF00', '66FF33', '66FF66', '66FF99', '66FFCC', '66FFFF', - '990000', '990033', '990066', '990099', '9900CC', '9900FF', - '993300', '993333', '993366', '993399', '9933CC', '9933FF', - '996600', '996633', '996666', '996699', '9966CC', '9966FF', - '999900', '999933', '999966', '999999', '9999CC', '9999FF', - '99CC00', '99CC33', '99CC66', '99CC99', '99CCCC', '99CCFF', - '99FF00', '99FF33', '99FF66', '99FF99', '99FFCC', '99FFFF', - 'CC0000', 'CC0033', 'CC0066', 'CC0099', 'CC00CC', 'CC00FF', - 'CC3300', 'CC3333', 'CC3366', 'CC3399', 'CC33CC', 'CC33FF', - 'CC6600', 'CC6633', 'CC6666', 'CC6699', 'CC66CC', 'CC66FF', - 'CC9900', 'CC9933', 'CC9966', 'CC9999', 'CC99CC', 'CC99FF', - 'CCCC00', 'CCCC33', 'CCCC66', 'CCCC99', 'CCCCCC', 'CCCCFF', - 'CCFF00', 'CCFF33', 'CCFF66', 'CCFF99', 'CCFFCC', 'CCFFFF', - 'FF0000', 'FF0033', 'FF0066', 'FF0099', 'FF00CC', 'FF00FF', - 'FF3300', 'FF3333', 'FF3366', 'FF3399', 'FF33CC', 'FF33FF', - 'FF6600', 'FF6633', 'FF6666', 'FF6699', 'FF66CC', 'FF66FF', - 'FF9900', 'FF9933', 'FF9966', 'FF9999', 'FF99CC', 'FF99FF', - 'FFCC00', 'FFCC33', 'FFCC66', 'FFCC99', 'FFCCCC', 'FFCCFF', - 'FFFF00', 'FFFF33', 'FFFF66', 'FFFF99', 'FFFFCC', 'FFFFFF' - ] -}); - -Ext.override(gxp.form.ColorField, { - - /** private: method[expand3DigitHex] - * :returns: ``String`` A RGB 6-digit hex color string. - * - * Return the 6-digit RGB hex representation for a shorthand 3-digit hex color. - * See http://en.wikipedia.org/wiki/Web_colors - * - */ - expand3DigitHex: function (color) { - if (color && color.length == 4 && color.indexOf('#') == 0) { - // For example #37f becomes #3377ff - color = '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3]; - } - return color; - }, - - /** private: method[colorToHex] - * :returns: ``String`` A RGB hex color string or null if none found. - * - * 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. - * Shorthand (3-digit) hexcodes will be expanded to 6-digits. - */ - colorToHex: function (color) { - if (!color) { - return color; - } - color = this.expand3DigitHex(color); - var hex; - if (color.match(/^#[0-9a-f]{6}$/i)) { - hex = color; - } else { - hex = this.cssColors[color.toLowerCase()] || null; - } - return hex; - }, - - /** private: method[hexToColor] - */ - hexToColor: function (hex) { - if (!hex) { - return hex; - } - - // Added by Just: in some cases a 3-digit hexcolor may be used - hex = this.expand3DigitHex(hex); - var color = hex; - for (var c in this.cssColors) { - if (this.cssColors[c] == color.toUpperCase()) { - color = c; - break; - } - } - return color; - }}); - (function () { // register the color manager with every color field Ext.util.Observable.observeClass(Ext.ColorPalette); @@ -628,19 +509,12 @@ Ext.override(gxp.form.ColorField, { } } }); + // Hide color-picker window on color select + Ext.ColorPalette.on({ + select: function () { + if (gxp.ColorManager.pickerWin) { + gxp.ColorManager.pickerWin.hide(); + } + } + }); })(); - -//(function() { -// // register the color manager with every color field -// Ext.util.Observable.observeClass(gxp.TextSymbolizer); -// gxp.TextSymbolizer.on({ -// afterrender: function(textSymbolizer) { -// var items = textSymbolizer.items; -// for (var i=3; i < items.length-1; i++) { -// textSymbolizer.remove(items[i], true); -// } -// textSymbolizer.doLayout(); -// } -// }); -//})(); - diff --git a/src/script/widgets/form/ColorField.js b/src/script/widgets/form/ColorField.js index 8438747a..499840f6 100644 --- a/src/script/widgets/form/ColorField.js +++ b/src/script/widgets/form/ColorField.js @@ -104,6 +104,21 @@ gxp.form.ColorField = Ext.extend(Ext.form.TextField, { }); }, + /** private: method[expand3DigitHex] + * :returns: ``String`` A RGB 6-digit hex color string. + * + * Return the 6-digit RGB hex representation for a shorthand 3-digit hex color. + * See http://en.wikipedia.org/wiki/Web_colors + * + */ + expand3DigitHex: function (color) { + if (color && color.length == 4 && color.indexOf('#') == 0) { + // For example #37f becomes #3377ff + color = '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3]; + } + return color; + }, + /** api: method[getHexValue] * :returns: ``String`` The RGB hex string for the field's value (prefixed * with '#'). @@ -148,16 +163,18 @@ gxp.form.ColorField = Ext.extend(Ext.form.TextField, { /** private: method[colorToHex] * :returns: ``String`` A RGB hex color string or null if none found. - * + * * 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. + * Shorthand (3-digit) hexcodes will be expanded to 6-digits. */ - colorToHex: function(color) { + colorToHex: function (color) { if (!color) { return color; } + color = this.expand3DigitHex(color); var hex; if (color.match(/^#[0-9a-f]{6}$/i)) { hex = color; @@ -169,10 +186,13 @@ gxp.form.ColorField = Ext.extend(Ext.form.TextField, { /** private: method[hexToColor] */ - hexToColor: function(hex) { + hexToColor: function (hex) { if (!hex) { return hex; } + + // Added by Just: in some cases a 3-digit hexcolor may be used + hex = this.expand3DigitHex(hex); var color = hex; for (var c in this.cssColors) { if (this.cssColors[c] == color.toUpperCase()) { @@ -182,7 +202,6 @@ gxp.form.ColorField = Ext.extend(Ext.form.TextField, { } return color; } - }); Ext.reg("gxp_colorfield", gxp.form.ColorField);