Skip to content

Commit

Permalink
issue planetfederal#216 - colorpickerwin: close when color selected a…
Browse files Browse the repository at this point in the history 
…nd allow 3-digit colors in ColorField
  • Loading branch information
@justb4
justb4 committed Jan 23, 2014
1 parent 4c3f540 commit 29649a2
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 138 deletions.
142 changes: 8 additions & 134 deletions src/script/widgets/VectorStylesDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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();
// }
// });
//})();

27 changes: 23 additions & 4 deletions src/script/widgets/form/ColorField.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 '#').
Expand Down Expand Up @@ -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;
Expand All @@ -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()) {
Expand All @@ -182,7 +202,6 @@ gxp.form.ColorField = Ext.extend(Ext.form.TextField, {
}
return color;
}

});

Ext.reg("gxp_colorfield", gxp.form.ColorField);

0 comments on commit 29649a2

Please sign in to comment.