开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
当前位置：首页 > 源码/资料 > Java编程 > Ajax > 查看源码
ColorPicker.js
资源名称：qWikiOffice-Version-1.0.zip　[点击查看]
上传用户：snow1005
上传日期：2015-11-10
资源大小：3151k
文件大小：22k
源码类别：

Ajax

开发平台：

JavaScript

ColorPicker.js：源码内容
  1. /**
  2.  * Original code is taken from vtswingkid's (Ext JS Forum member) form.ux.ColorPickerField
  3.  * URL: http://extjs.com/forum/showthread.php?t=47450
  4.  * 
  5.  * Additional modifications have been made to the Ext.ux.ColorDialog by Todd Murdock.
  6.  */
  8. /**
  9.  * @class Ext.ux.ColorPicker
  10.  * @extends Ext.BoxComponent
  11.  * This is a color picker.
  12.  * @license: LGPLv3
  13.  * @author: Amon
  14.  * @constructor
  15.  * Creates a new ColorPicker
  16.  * @param {Object} config Configuration options
  17.  * @version 1.1.2
  18.  */
  20. Ext.namespace("Ext.ux", "Ext.ux.menu");
  22. Ext.ux.ColorPicker = Ext.extend( Ext.BoxComponent, {
  23. // will need to update css 'height' if more than one color box is enabled
  24. showWebSafeColorbox : false,
  25. showInverseColorbox : false,
  26. showColorbox : true,
  28. initComponent: function() {
  29. this.applyDefaultsCP();
  30. Ext.ux.ColorPicker.superclass.initComponent.apply( this, arguments );
  31. this.addEvents('select');
  32. },
  34. onRender: function() {
  35. Ext.ux.ColorPicker.superclass.onRender.apply( this, arguments );
  36. // check if container, self-container or renderTo exists
  37. this.body = this.body || ( this.container || ( this.renderTo || Ext.DomHelper.append( Ext.getBody(), {}, true ) ) );
  38. if( !this.el ) {
  39. this.el = this.body;
  40. if( this.cls ) { Ext.get( this.el ).addClass( this.cls ); }
  41. }
  42. // render this component
  43. this.renderComponent();
  44. },
  46. applyDefaultsCP: function() {
  47. Ext.apply( this, {
  48. 'cls': 'x-cp-mainpanel',
  49. 'resizable': this.resizable || false,
  50. 'HSV': {
  51. h: 0,
  52. s: 0,
  53. v: 0
  54. },
  55. updateMode: null
  56. });
  57. },
  59. renderComponent: function() {
  60. // create RGB Slider
  61. Ext.DomHelper.append( this.body, {
  62. 'id': this.cpGetId( 'rgb' ),
  63. 'cls': 'x-cp-rgbpicker'
  64. });
  66. // Create HUE Slider
  67. Ext.DomHelper.append( this.body, {
  68. 'id': this.cpGetId( 'hue' ),
  69. 'cls': 'x-cp-huepicker'
  70. });
  72. // Initialize HUE Picker DD
  73. this.huePicker = Ext.DomHelper.append( this.body, { 'cls': 'x-cp-hueslider' });
  74. this.hueDD = new Ext.dd.DD( this.huePicker, 'huePicker' );
  75. this.hueDD.constrainTo( this.cpGetId( 'hue' ), {'top':-7,'right':-3,'bottom':-7,'left':-3} );
  76. this.hueDD.onDrag = this.moveHuePicker.createDelegate( this );
  78. // initialize onclick on the rgb picker
  79. Ext.get( this.cpGetId( 'hue' ) ).on( 'mousedown', this.clickHUEPicker.createDelegate( this ) );
  81. // initialize start position
  82. Ext.get( this.huePicker ).moveTo( Ext.get( this.cpGetId( 'hue' ) ).getLeft() - 3, Ext.get( this.cpGetId( 'hue' ) ).getTop() - 7 );
  84. // Initialize RGB Picker DD
  85. this.rgbPicker = Ext.DomHelper.append( this.body, { 'cls': 'x-cp-rgbslider' });
  86. this.rgbDD = new Ext.dd.DD( this.rgbPicker, 'rgbPicker' );
  87. this.rgbDD.constrainTo( this.cpGetId( 'rgb' ), -7 );
  88. this.rgbDD.onDrag = this.moveRGBPicker.createDelegate( this );
  90. // initialize onclick on the rgb picker
  91. Ext.get( this.cpGetId( 'rgb' ) ).on( 'mousedown', this.clickRGBPicker.createDelegate( this ) );
  92. // initialize start position
  93. Ext.get( this.rgbPicker ).moveTo( Ext.get( this.cpGetId( 'rgb' ) ).getLeft() - 7, Ext.get( this.cpGetId( 'rgb' ) ).getTop() - 7 );
  95. // Create color divs and Form elements
  96. this.formPanel = new Ext.form.FormPanel({
  97. 'border': false,
  98. 'renderTo': Ext.DomHelper.append( this.body, {
  99. 'id': this.cpGetId( 'fCont' ),
  100. 'cls': 'x-cp-formcontainer'
  101. }, true ),
  102. 'frame': false,
  103. 'labelAlign': 'left',
  104. 'labelWidth': 10,
  105. 'items': [{ // Color box
  106. 'border': false,
  107. 'layout': 'form',
  108. 'id': this.cpGetId( 'cCont' )
  109. },{
  110. 'bodyStyle': 'padding-top:10px;',
  111. 'border': false,
  112. 'layout': 'column',
  113. 'items': [{ // RGB fields
  114. 'border': false,
  115. 'columnWidth': .5,
  116. 'layout': 'form',
  117. 'defaultType': 'numberfield',
  118. 'defaults': {
  119. 'width': 30,
  120. 'value': 0,
  121. 'minValue': 0,
  122. 'maxValue': 255,
  123. 'allowBlank': false,
  124. 'labelSeparator': '',
  125. 'enableKeyEvents': true
  126. },
  127. 'items': [{
  128. 'fieldLabel': 'R',
  129. 'id': this.cpGetId( 'iRed' )
  130. },{
  131. 'fieldLabel': 'G',
  132. 'id': this.cpGetId( 'iGreen' )
  133. },{
  134. 'fieldLabel': 'B',
  135. 'id': this.cpGetId( 'iBlue' )
  136. }]
  137. },{ // HSV Fields
  138. 'border': false,
  139. 'columnWidth': .5,
  140. 'layout': 'form',
  141. 'defaultType': 'numberfield',
  142. 'defaults': {
  143. 'width': 30,
  144. 'value': 0,
  145. 'minValue': 0,
  146. 'maxValue': 255,
  147. 'allowBlank': false,
  148. 'labelSeparator': '',
  149. 'enableKeyEvents': true
  150. },
  151. 'items': [{
  152. 'fieldLabel': 'H',
  153. 'maxValue': 360,
  154. 'id': this.cpGetId( 'iHue' )
  155. },{
  156. 'fieldLabel': 'S',
  157. 'id': this.cpGetId( 'iSat' )
  158. },{
  159. 'fieldLabel': 'V',
  160. 'id': this.cpGetId( 'iVal' )
  161. }]
  162. },{ // HEX field panel
  163. 'border': false,
  164. 'layout': 'form',
  165. 'labelAlign': 'left',
  166. 'items': [{
  167. 'width': 88,
  168. 'value': '000000',
  169. 'labelSeparator': '',
  170. 'allowBlank': false,
  171. 'fieldLabel': '#',
  172. 'id': this.cpGetId( 'iHexa' ),
  173. 'value': '000000',
  174. 'xtype': 'hexfield',
  175. 'enableKeyEvents': true
  176. // 'regex': /^[0-9a-fA-F]{6}$/
  177. }]
  178. }]
  179. }]
  180. });
  182. Ext.getCmp( this.cpGetId( 'iRed' ) ).on( 'keyup', this.updateFromIRGB.createDelegate( this ), {buffer: 750} );
  183. Ext.getCmp( this.cpGetId( 'iGreen' ) ).on( 'keyup', this.updateFromIRGB.createDelegate( this ), {buffer: 750} );
  184. Ext.getCmp( this.cpGetId( 'iBlue' ) ).on( 'keyup', this.updateFromIRGB.createDelegate( this ), {buffer: 750} );
  185. Ext.getCmp( this.cpGetId( 'iHue' ) ).on( 'keyup', this.updateFromIHSV.createDelegate( this ), {buffer: 750} );
  186. Ext.getCmp( this.cpGetId( 'iSat' ) ).on( 'keyup', this.updateFromIHSV.createDelegate( this ), {buffer: 750} );
  187. Ext.getCmp( this.cpGetId( 'iVal' ) ).on( 'keyup', this.updateFromIHSV.createDelegate( this ), {buffer: 750} );
  188. Ext.getCmp( this.cpGetId( 'iHexa' ) ).on( 'keyup', this.updateFromIHexa.createDelegate( this ), {buffer: 750} );
  190. var cContBody = Ext.getCmp( this.cpGetId( 'cCont' ) ).body;
  192. if(this.showWebSafeColorbox === true){ // show web save color box
  193. Ext.DomHelper.append( cContBody, { 'cls': 'x-cp-colorbox', 'id': this.cpGetId( 'cWebSafe' ) }, true ).update( 'Websafe' );
  194. Ext.get( this.cpGetId( 'cWebSafe' ) ).on( 'click', this.updateFromBox.createDelegate( this ) );
  195. }
  196. if(this.showInverseColorbox === true){ // show inverse color box
  197. Ext.DomHelper.append( cContBody, { 'cls': 'x-cp-colorbox', 'id': this.cpGetId( 'cInverse' ) }, true ).update( 'Inverse' );
  198. Ext.get( this.cpGetId( 'cInverse' ) ).on( 'click', this.updateFromBox.createDelegate( this ) );
  199. }
  200. if(this.showColorbox === true){ // show color box
  201. Ext.DomHelper.append( cContBody, { 'cls': 'x-cp-colorbox', 'id': this.cpGetId( 'cColor' ) }, true );//.update( 'Pick Color' );
  202. Ext.get( this.cpGetId( 'cColor' ) ).on( 'click', this.selectColor.createDelegate( this ) );
  203. }
  205. Ext.DomHelper.append( this.body, {'tag':'br','cls':'x-cp-clearfloat'});
  206. },
  208. cpGetId: function( postfix ) {
  209. return this.getId() + '__' + ( postfix || 'cp' );
  210. },
  212. updateRGBPosition: function( x, y ) {
  213. this.updateMode = 'click';
  214. x = x < 0 ? 0 : x;
  215. x = x > 181 ? 181 : x;
  216. y = y < 0 ? 0 : y;
  217. y = y > 181 ? 181 : y;
  218. this.HSV.s = this.getSaturation( x );
  219. this.HSV.v = this.getValue( y );
  220. Ext.get( this.rgbPicker ).moveTo( Ext.get( this.cpGetId( 'rgb' ) ).getLeft() + x - 7, Ext.get( this.cpGetId( 'rgb' ) ).getTop() + y - 7, ( this.animateMove || true ) );
  221. this.updateColor();
  222. },
  224. updateHUEPosition: function( y ) {
  225. this.updateMode = 'click';
  226. y = y < 1 ? 1 : y;
  227. y = y > 181 ? 181 : y;
  228. this.HSV.h = Math.round( 360 / 181 * ( 181 - y ) );
  229. Ext.get( this.huePicker ).moveTo( Ext.get( this.huePicker ).getLeft(), Ext.get( this.cpGetId( 'hue' ) ).getTop() + y - 7, ( this.animateMove || true ) );
  230. this.updateRGBPicker( this.HSV.h );
  231. this.updateColor();
  232. },
  234. clickRGBPicker: function( event, element ) {
  235. this.updateRGBPosition( event.xy[0] - Ext.get( this.cpGetId( 'rgb' ) ).getLeft() , event.xy[1] - Ext.get( this.cpGetId( 'rgb' ) ).getTop() );
  236. },
  238. clickHUEPicker: function( event, element ) {
  239. this.updateHUEPosition( event.xy[1] - Ext.get( this.cpGetId( 'hue' ) ).getTop() );
  240. },
  242. moveRGBPicker: function( event ) {
  243. this.rgbDD.constrainTo( this.cpGetId( 'rgb' ), -7 );
  244. this.updateRGBPosition( Ext.get( this.rgbPicker ).getLeft() - Ext.get( this.cpGetId( 'rgb' ) ).getLeft() + 7 , Ext.get( this.rgbPicker ).getTop() - Ext.get( this.cpGetId( 'rgb' ) ).getTop() + 7 );
  245. },
  247. moveHuePicker: function( event ) {
  248. this.hueDD.constrainTo( this.cpGetId( 'hue' ), {'top':-7,'right':-3,'bottom':-7,'left':-3} );
  249. this.updateHUEPosition( Ext.get( this.huePicker ).getTop() - Ext.get( this.cpGetId( 'hue' ) ).getTop() + 7 );
  250. },
  252. updateRGBPicker: function( newValue ) {
  253. this.updateMode = 'click';
  254. Ext.get( this.cpGetId( 'rgb' ) ).setStyle({ 'background-color': '#' + this.rgbToHex( this.hsvToRgb( newValue, 1, 1 ) ) });
  255. this.updateColor();
  256. },
  258. updateColor: function() {
  259. var rgb = this.hsvToRgb( this.HSV.h, this.HSV.s, this.HSV.v );
  260. var websafe = this.websafe( rgb );
  261. var invert = this.invert( rgb );
  262. var wsInvert = this.invert( websafe );
  263. if( this.updateMode !== 'hexa' ) {
  264. Ext.getCmp( this.cpGetId( 'iHexa' ) ).setValue( this.rgbToHex( rgb ) );
  265. }
  266. if( this.updateMode !== 'rgb' ) {
  267. Ext.getCmp( this.cpGetId( 'iRed' ) ).setValue( rgb[0] );
  268. Ext.getCmp( this.cpGetId( 'iGreen' ) ).setValue( rgb[1] );
  269. Ext.getCmp( this.cpGetId( 'iBlue' ) ).setValue( rgb[2] );
  270. }
  271. if( this.updateMode !== 'hsv' ) {
  272. Ext.getCmp( this.cpGetId( 'iHue' ) ).setValue( Math.round( this.HSV.h ) );
  273. Ext.getCmp( this.cpGetId( 'iSat' ) ).setValue( Math.round( this.HSV.s * 100 ) );
  274. Ext.getCmp( this.cpGetId( 'iVal' ) ).setValue( Math.round( this.HSV.v * 100 ) );
  275. }
  277. if(this.showColorbox === true){
  278. Ext.get( this.cpGetId( 'cColor' ) ).setStyle({
  279. 'background': '#' + this.rgbToHex( rgb ),
  280. 'color': '#' + this.rgbToHex( invert )
  281. });
  282. //Ext.getDom( this.cpGetId( 'cColor' ) ).title = '#'+this.rgbToHex( rgb );
  283. }
  285. if(this.showInverseColorbox === true){
  286. Ext.get( this.cpGetId( 'cInverse' ) ).setStyle({
  287. 'background': '#' + this.rgbToHex( invert ),
  288. 'color': '#' + this.rgbToHex( rgb )
  289. });
  290. //Ext.getDom( this.cpGetId( 'cInverse' ) ).title = '#'+this.rgbToHex( invert );
  291. }
  293. if(this.showWebSafeColorbox === true){
  294. Ext.get( this.cpGetId( 'cWebSafe' ) ).setStyle({
  295. 'background': '#' + this.rgbToHex( websafe ),
  296. 'color': '#' + this.rgbToHex( wsInvert )
  297. });
  298. //Ext.getDom( this.cpGetId( 'cWebSafe' ) ).title = '#'+this.rgbToHex( websafe );
  299. }
  301. if( this.updateMode !== 'click' ) {
  302. Ext.get( this.huePicker ).moveTo( Ext.get( this.huePicker ).getLeft(), Ext.get( this.cpGetId( 'hue' ) ).getTop() + this.getHPos( Ext.getCmp( this.cpGetId( 'iHue' ) ).getValue() ) - 7, ( this.animateMove || true ) );
  303. Ext.get( this.rgbPicker ).moveTo( Ext.get( this.cpGetId( 'rgb' ) ).getLeft() + this.getSPos( Ext.getCmp( this.cpGetId( 'iSat' ) ).getValue() / 100 ) - 7, Ext.get( this.cpGetId( 'hue' ) ).getTop() + this.getVPos( Ext.getCmp( this.cpGetId( 'iVal' ) ).getValue() / 100 ) - 7, ( this.animateMove || true ) );
  304. }
  306. Ext.get( this.cpGetId( 'rgb' ) ).setStyle({ 'background-color': '#' + this.rgbToHex( this.hsvToRgb( Ext.getCmp( this.cpGetId( 'iHue' ) ).getValue(), 1, 1 ) ) });
  308. this.selectColor(); // fire the 'select' event now
  309. },
  311. setColor: function(c) {
  312. if(!/^[0-9a-fA-F]{6}$/.test(c))return;
  313. Ext.getCmp( this.cpGetId( 'iHexa' ) ).setValue(c);
  314. this.updateFromIHexa();
  315. },
  317. getColor: function(){
  318. return Ext.getCmp( this.cpGetId( 'iHexa' ) ).getValue();
  319. },
  321. updateFromIRGB: function( input, newValue, oldValue ) {
  322. this.updateMode = 'rgb';
  323. var temp = this.rgbToHsv( Ext.getCmp( this.cpGetId( 'iRed' ) ).getValue(), Ext.getCmp( this.cpGetId( 'iGreen' ) ).getValue(), Ext.getCmp( this.cpGetId( 'iBlue' ) ).getValue() );
  324. this.HSV = { h: temp[0], s:temp[1], v:temp[2]};
  325. this.updateColor();
  326. },
  328. updateFromIHSV: function( input, newValue, oldValue ) {
  329. this.updateMode = 'hsv';
  330. this.HSV = { h: Ext.getCmp( this.cpGetId( 'iHue' ) ).getValue(), s:Ext.getCmp( this.cpGetId( 'iSat' ) ).getValue() / 100, v:Ext.getCmp( this.cpGetId( 'iVal' ) ).getValue() / 100};
  331. this.updateColor();
  332. },
  334. updateFromIHexa: function( input, e) {
  335. var value = Ext.getCmp( this.cpGetId( 'iHexa' ) ).getValue();
  336. if(!/^[0-9a-fA-F]{6}$/.test(value))return;
  338. this.updateMode = 'hexa';
  339. var temp = this.rgbToHsv( this.hexToRgb( value ) );
  340. this.HSV = { h: temp[0], s:temp[1], v:temp[2]};
  341. this.updateColor();
  342. },
  344. updateFromBox: function( event, element ) {
  345. this.updateMode = 'click';
  346. var temp = this.rgbToHsv( this.hexToRgb( Ext.get( element ).getColor( 'backgroundColor', '', '' ) ) );
  347. this.HSV = { h: temp[0], s:temp[1], v:temp[2]};
  348. this.updateColor();
  349. },
  351. selectColor: function( event, element ) {
  352. //this.fireEvent('select', this, Ext.get( element ).getColor( 'backgroundColor', '', '' ));
  353. this.fireEvent( 'select', this, this.getColor() );
  354. },
  355. /**
  356.  * Convert HSV color format to RGB color format
  357.  * @param {Integer/Array( h, s, v )} h
  358.  * @param {Integer} s (optional)
  359.  * @param {Integer} v (optional)
  360.  * @return {Array}
  361.  */
  362. hsvToRgb: function( h, s, v ) {
  363. if( h instanceof Array ) { return this.hsvToRgb.call( this, h[0], h[1], h[2] ); }
  364. var r, g, b, i, f, p, q, t;
  365.     i = Math.floor( ( h / 60 ) % 6 );
  366.     f = ( h / 60 ) - i;
  367.     p = v * ( 1 - s );
  368.     q = v * ( 1 - f * s );
  369.     t = v * ( 1 - ( 1 - f ) * s );
  370.     switch(i) {
  371.         case 0: r=v; g=t; b=p; break;
  372.         case 1: r=q; g=v; b=p; break;
  373.         case 2: r=p; g=v; b=t; break;
  374.         case 3: r=p; g=q; b=v; break;
  375.         case 4: r=t; g=p; b=v; break;
  376.         case 5: r=v; g=p; b=q; break;
  377.     }
  378.     return [this.realToDec( r ), this.realToDec( g ), this.realToDec( b )];
  379. },
  380. /**
  381.  * Convert RGB color format to HSV color format
  382.  * @param {Integer/Array( r, g, b )} r
  383.  * @param {Integer} g (optional)
  384.  * @param {Integer} b (optional)
  385.  * @return {Array}
  386.  */
  387. rgbToHsv: function( r, g, b ) {
  388. if( r instanceof Array ) { return this.rgbToHsv.call( this, r[0], r[1], r[2] ); }
  389.         r = r / 255;
  390.         g = g / 255;
  391.         b = b / 255;
  392.         var min, max, delta, h, s, v;
  393.         min = Math.min( Math.min( r, g ), b );
  394.         max = Math.max( Math.max( r, g ), b );
  395.         delta = max - min;
  396.         switch (max) {
  397.             case min: h = 0; break;
  398.             case r:   h = 60 * ( g - b ) / delta;
  399.                       if ( g < b ) { h += 360; }
  400.                       break;
  401.             case g:   h = ( 60 * ( b - r ) / delta ) + 120; break;
  402.             case b:   h = ( 60 * ( r - g ) / delta ) + 240; break;
  403.         }
  404.         s = ( max === 0 ) ? 0 : 1 - ( min / max );
  405.         return [Math.round( h ), s, max];
  406. },
  407. /**
  408.  * Convert a float to decimal
  409.  * @param {Float} n
  410.  * @return {Integer}
  411.  */
  412. realToDec: function( n ) {
  413. return Math.min( 255, Math.round( n * 256 ) );
  414. },
  415. /**
  416.  * Convert RGB color format to Hexa color format
  417.  * @param {Integer/Array( r, g, b )} r
  418.  * @param {Integer} g (optional)
  419.  * @param {Integer} b (optional)
  420.  * @return {String}
  421.  */
  422. rgbToHex: function( r, g, b ) {
  423. if( r instanceof Array ) { return this.rgbToHex.call( this, r[0], r[1], r[2] ); }
  424. return this.decToHex( r ) + this.decToHex( g ) + this.decToHex( b );
  425. },
  426. /**
  427.  * Convert an integer to hexa
  428.  * @param {Integer} n
  429.  * @return {String}
  430.  */
  431. decToHex: function( n ) {
  432. var HCHARS = '0123456789ABCDEF';
  433.         n = parseInt(n, 10);
  434.         n = ( !isNaN( n )) ? n : 0;
  435.         n = (n > 255 || n < 0) ? 0 : n;
  436.         return HCHARS.charAt( ( n - n % 16 ) / 16 ) + HCHARS.charAt( n % 16 );
  437. },
  438. /**
  439.  * Return with position of a character in this.HCHARS string
  440.  * @private
  441.  * @param {Char} c
  442.  * @return {Integer}
  443.  */
  444. getHCharPos: function( c ) {
  445. var HCHARS = '0123456789ABCDEF';
  446. return HCHARS.indexOf( c.toUpperCase() );
  447. },
  448. /**
  449.  * Convert a hexa string to decimal
  450.  * @param {String} hex
  451.  * @return {Integer}
  452.  */
  453. hexToDec: function( hex ) {
  454.         var s = hex.split('');
  455.         return ( ( this.getHCharPos( s[0] ) * 16 ) + this.getHCharPos( s[1] ) );
  456. },
  457. /**
  458.  * Convert a hexa string to RGB color format
  459.  * @param {String} hex
  460.  * @return {Array}
  461.  */
  462. hexToRgb: function( hex ) {
  463. return [ this.hexToDec( hex.substr(0, 2) ), this.hexToDec( hex.substr(2, 2) ), this.hexToDec( hex.substr(4, 2) ) ];
  464. },
  465. /**
  466.  * Convert Y coordinate to HUE value
  467.  * @private
  468.  * @param {Integer} y
  469.  * @return {Integer}
  470.  */
  471. getHue: function( y ) {
  472. var hue = 360 - Math.round( ( ( 181 - y ) / 181 ) * 360 );
  473. return hue === 360 ? 0 : hue;
  474. },
  475. /**
  476.  * Convert HUE value to Y coordinate
  477.  * @private
  478.  * @param {Integer} hue
  479.  * @return {Integer}
  480.  */
  481. getHPos: function( hue ) {
  482. return 181 - hue * ( 181 / 360 );
  483. },
  484. /**
  485.  * Convert X coordinate to Saturation value
  486.  * @private
  487.  * @param {Integer} x
  488.  * @return {Integer}
  489.  */
  490. getSaturation: function( x ) {
  491. return x / 181;
  492. },
  493. /**
  494.  * Convert Saturation value to Y coordinate
  495.  * @private
  496.  * @param {Integer} saturation
  497.  * @return {Integer}
  498.  */
  499. getSPos: function( saturation ) {
  500. return saturation * 181;
  501. },
  502. /**
  503.  * Convert Y coordinate to Brightness value
  504.  * @private
  505.  * @param {Integer} y
  506.  * @return {Integer}
  507.  */
  508. getValue: function( y ) {
  509. return ( 181 - y ) / 181;
  510. },
  511. /**
  512.  * Convert Brightness value to Y coordinate
  513.  * @private
  514.  * @param {Integer} value
  515.  * @return {Integer}
  516.  */
  517. getVPos: function( value ) {
  518. return 181 - ( value * 181 );
  519. },
  520. /**
  521.  * Not documented yet
  522.  */
  523. checkSafeNumber: function( v ) {
  524.     if ( !isNaN( v ) ) {
  525.         v = Math.min( Math.max( 0, v ), 255 );
  526.         var i, next;
  527.         for( i=0; i<256; i=i+51 ) {
  528.             next = i + 51;
  529.             if ( v>=i && v<=next ) { return ( v - i > 25 ) ? next : i; }
  530.         }
  531.     }
  532.     return v;
  533. },
  534. /**
  535.  * Not documented yet
  536.  */
  537. websafe: function( r, g, b ) {
  538. if( r instanceof Array ) { return this.websafe.call( this, r[0], r[1], r[2] ); }
  539. return [this.checkSafeNumber( r ), this.checkSafeNumber( g ), this.checkSafeNumber( b )];
  540. },
  541. /**
  542.  * Not documented yet
  543.  */
  544. invert: function( r, g, b ) {
  545. if( r instanceof Array ) { return this.invert.call( this, r[0], r[1], r[2] ); }
  546. return [255-r,255-g,255-b];
  547. }
  548. });
  549. /**
  550.  *
  551.  */
  552. Ext.ux.ColorDialog = Ext.extend( Ext.Window, {
  553. constructor: function(config){
  554. config = config || {};
  555. Ext.applyIf(config, {
  556. buttons: [{
  557. handler: this.onOk,
  558. scope: this,
  559. text: 'Ok'
  560. },{
  561. handler: this[this.closeAction].createDelegate(this, []),
  562. scope: this,
  563. text: 'Cancel'
  564. }]
  565. });
  566. Ext.ux.ColorDialog.superclass.constructor.apply(this, [config]);
  567. },
  568. initComponent: function() {
  569. this.width = ( !this.width || this.width < 353 ) ? 353 : this.width;
  570. this.applyDefaultsCP();
  571. Ext.ux.ColorDialog.superclass.initComponent.apply( this, arguments );
  572. },
  573. onRender: function() {
  574. Ext.ux.ColorDialog.superclass.onRender.apply( this, arguments );
  575. this.renderComponent();
  576. },
  577. onOk: function(){
  578. //this.selectColor(); // will fire the 'select' event
  579. if(this.callback && this.scope){
  580. this.callback.call( this.scope, this.getColor() );
  581. }
  582. this[this.closeAction]();
  583. },
  584. show : function(hex, cb, scope){ // override the superclass show() so the callback is not called from show()
  585. if(!this.rendered){
  586.             this.render(Ext.getBody());
  587.         }
  588.         if(this.hidden === false){
  589.             this.toFront();
  590.             return;
  591.         }
  592.         if(this.fireEvent("beforeshow", this) === false){
  593.             return;
  594.         }
  595.         if(cb){
  596.             this.callback = cb;
  597.         }
  598.         if(scope){
  599.          this.scope = scope;
  600.         }
  601.         this.hidden = false;
  602.         this.beforeShow();
  603.         this.afterShow();
  604.         hex = hex || '000000';
  605.         this.setColor(hex);
  606. }
  607. });
  608. Ext.applyIf( Ext.ux.ColorDialog.prototype, Ext.ux.ColorPicker.prototype );
  609. /**
  610.  *
  611.  */
  612. Ext.ux.ColorPanel = Ext.extend( Ext.Panel, {
  613. initComponent: function() {
  614. this.width = ( !this.width || this.width < 300 ) ? 300 : this.width;
  615. this.applyDefaultsCP();
  616. Ext.ux.ColorPanel.superclass.initComponent.apply( this, arguments );
  617. },
  618. onRender: function() {
  619. Ext.ux.ColorPanel.superclass.onRender.apply( this, arguments );
  620. this.renderComponent();
  621. }
  622. });
  623. Ext.applyIf( Ext.ux.ColorPanel.prototype, Ext.ux.ColorPicker.prototype );
  624. /**
  625.  * Register Color* for Lazy Rendering
  626.  */
  627. Ext.reg( 'colorpicker', Ext.ux.ColorPicker );
  628. Ext.reg( 'colordialog', Ext.ux.ColorDialog );
  629. Ext.reg( 'colorpanel', Ext.ux.ColorPanel );
  633. /**
  634.  * @class Ext.ux.form.ColorPickerField
  635.  * @extends Ext.form.TriggerField
  636.  * This class makes Ext.ux.ColorPicker available as a form field.
  637.  * @license: BSD
  638.  * @author: Robert B. Williams (extjs id: vtswingkid)
  639.  * @constructor
  640.  * Creates a new ColorPickerField
  641.  * @param {Object} config Configuration options
  642.  * @version 1.1.2
  643.  */
  645. Ext.ux.menu.ColorItem = function(config){
  646. if(!config)config={};
  647. config.style="width:350px;";
  648.     Ext.ux.menu.ColorItem.superclass.constructor.call(this, new Ext.ux.ColorPicker(config), config);
  649.     this.picker = this.component;
  650. this.addEvents('select');
  651.     this.picker.on("render", function(picker){
  652.         picker.getEl().swallowEvent("click");
  653.     });
  654. this.picker.on("select", this.onSelect, this);
  655. };
  656. Ext.extend(Ext.ux.menu.ColorItem, Ext.menu.Adapter, {
  657.     // private
  658.     onSelect : function(picker, color){
  659.         this.fireEvent("select", this, color, picker);
  660.         Ext.ux.menu.ColorItem.superclass.handleClick.call(this);
  661.     }
  662. });
  664. Ext.ux.menu.ColorMenu = function(config){
  665.     Ext.ux.menu.ColorMenu.superclass.constructor.call(this, config);
  666.     this.plain = true;
  667.     var ci = new Ext.ux.menu.ColorItem(config);
  668.     this.add(ci);
  669.     this.picker = ci.picker;
  670.     this.relayEvents(ci, ["select"]);
  671. };
  672. Ext.extend(Ext.ux.menu.ColorMenu, Ext.menu.Menu, {
  673.     beforeDestroy : function() {
  674.         this.picker.destroy();
  675.     }
  676. });