colorpicker.js

Extjs写的一个桌面应用。。功能很强大

/**
 * Original code is taken from vtswingkid's (Ext JS Forum member) form.ux.ColorPickerField
 * URL: http://extjs.com/forum/showthread.php?t=47450
 * 
 * Additional modifications have been made to the Ext.ux.ColorDialog by Todd Murdock.
 */

/**
 * @class Ext.ux.ColorPicker
 * @extends Ext.BoxComponent
 * This is a color picker.
 * @license: LGPLv3
 * @author: Amon
 * @constructor
 * Creates a new ColorPicker
 * @param {Object} config Configuration options
 * @version 1.1.2
 */

Ext.namespace("Ext.ux", "Ext.ux.menu");

Ext.ux.ColorPicker = Ext.extend( Ext.BoxComponent, {
	// will need to update css 'height' if more than one color box is enabled
	showWebSafeColorbox : false,
	showInverseColorbox : false,
	showColorbox : true,
	
	initComponent: function() {
		this.applyDefaultsCP();
		Ext.ux.ColorPicker.superclass.initComponent.apply( this, arguments );
		this.addEvents('select');
	},
	
	onRender: function() {
		Ext.ux.ColorPicker.superclass.onRender.apply( this, arguments );
		// check if container, self-container or renderTo exists
		this.body = this.body || ( this.container || ( this.renderTo || Ext.DomHelper.append( Ext.getBody(), {}, true ) ) );
		if( !this.el ) {
			this.el = this.body;
			if( this.cls ) { Ext.get( this.el ).addClass( this.cls ); }
		}
		// render this component
		this.renderComponent();
	},
	
	applyDefaultsCP: function() {
		Ext.apply( this, {
			'cls': 'x-cp-mainpanel',
			'resizable': this.resizable || false,
			'HSV': {
				h: 0,
				s: 0,
				v: 0
			},
			updateMode: null
		});
	},
	
	renderComponent: function() {
		// create RGB Slider
		Ext.DomHelper.append( this.body, {
			'id': this.cpGetId( 'rgb' ),
			'cls': 'x-cp-rgbpicker'
		});
		
		// Create HUE Slider
		Ext.DomHelper.append( this.body, {
			'id': this.cpGetId( 'hue' ),
			'cls': 'x-cp-huepicker'
		});
		
		// Initialize HUE Picker DD
		this.huePicker = Ext.DomHelper.append( this.body, { 'cls': 'x-cp-hueslider' });
		this.hueDD = new Ext.dd.DD( this.huePicker, 'huePicker' );
		this.hueDD.constrainTo( this.cpGetId( 'hue' ), {'top':-7,'right':-3,'bottom':-7,'left':-3} );
		this.hueDD.onDrag = this.moveHuePicker.createDelegate( this );
		
		// initialize onclick on the rgb picker
		Ext.get( this.cpGetId( 'hue' ) ).on( 'mousedown', this.clickHUEPicker.createDelegate( this ) );
		
		// initialize start position
		Ext.get( this.huePicker ).moveTo( Ext.get( this.cpGetId( 'hue' ) ).getLeft() - 3, Ext.get( this.cpGetId( 'hue' ) ).getTop() - 7 );
		
		// Initialize RGB Picker DD
		this.rgbPicker = Ext.DomHelper.append( this.body, { 'cls': 'x-cp-rgbslider' });
		this.rgbDD = new Ext.dd.DD( this.rgbPicker, 'rgbPicker' );
		this.rgbDD.constrainTo( this.cpGetId( 'rgb' ), -7 );
		this.rgbDD.onDrag = this.moveRGBPicker.createDelegate( this );
		
		// initialize onclick on the rgb picker
		Ext.get( this.cpGetId( 'rgb' ) ).on( 'mousedown', this.clickRGBPicker.createDelegate( this ) );
		// initialize start position
		Ext.get( this.rgbPicker ).moveTo( Ext.get( this.cpGetId( 'rgb' ) ).getLeft() - 7, Ext.get( this.cpGetId( 'rgb' ) ).getTop() - 7 );
		
		// Create color divs and Form elements
		this.formPanel = new Ext.form.FormPanel({
			'border': false,
			'renderTo': Ext.DomHelper.append( this.body, {
							'id': this.cpGetId( 'fCont' ),
							'cls': 'x-cp-formcontainer'
						}, true ),
			'frame': false,
			'labelAlign': 'left',
			'labelWidth': 10,
			'items': [{ // Color box
				'border': false,
				'layout': 'form',
				'id': this.cpGetId( 'cCont' )
			},{
				'bodyStyle': 'padding-top:10px;',
				'border': false,
				'layout': 'column',
				'items': [{ // RGB fields
					'border': false,
					'columnWidth': .5,
					'layout': 'form',
					'defaultType': 'numberfield',
					'defaults': {
						'width': 30,
						'value': 0,
						'minValue': 0,
						'maxValue': 255,
						'allowBlank': false,
						'labelSeparator': '',
						'enableKeyEvents': true
					},
					'items': [{
						'fieldLabel': 'R',
						'id': this.cpGetId( 'iRed' )
					},{
						'fieldLabel': 'G',
						'id': this.cpGetId( 'iGreen' )
					},{
						'fieldLabel': 'B',
						'id': this.cpGetId( 'iBlue' )
					}]
				},{ // HSV Fields
					'border': false,
					'columnWidth': .5,
					'layout': 'form',
					'defaultType': 'numberfield',
					'defaults': {
						'width': 30,
						'value': 0,
						'minValue': 0,
						'maxValue': 255,
						'allowBlank': false,
						'labelSeparator': '',
						'enableKeyEvents': true
					},
					'items': [{
						'fieldLabel': 'H',
						'maxValue': 360,
						'id': this.cpGetId( 'iHue' )
					},{
						'fieldLabel': 'S',
						'id': this.cpGetId( 'iSat' )
					},{
						'fieldLabel': 'V',
						'id': this.cpGetId( 'iVal' )
					}]
				},{ // HEX field panel
				'border': false,
				'layout': 'form',
				'labelAlign': 'left',
				'items': [{
					'width': 88,
					'value': '000000',
					'labelSeparator': '',
					'allowBlank': false,
					'fieldLabel': '#',
					'id': this.cpGetId( 'iHexa' ),
					'value': '000000',
					'xtype': 'hexfield',
					'enableKeyEvents': true
					// 'regex': /^[0-9a-fA-F]{6}$/
				}]
			}]
			}]
		});
		
		Ext.getCmp( this.cpGetId( 'iRed' ) ).on( 'keyup', this.updateFromIRGB.createDelegate( this ), {buffer: 750} );
		Ext.getCmp( this.cpGetId( 'iGreen' ) ).on( 'keyup', this.updateFromIRGB.createDelegate( this ), {buffer: 750} );
		Ext.getCmp( this.cpGetId( 'iBlue' ) ).on( 'keyup', this.updateFromIRGB.createDelegate( this ), {buffer: 750} );
		Ext.getCmp( this.cpGetId( 'iHue' ) ).on( 'keyup', this.updateFromIHSV.createDelegate( this ), {buffer: 750} );
		Ext.getCmp( this.cpGetId( 'iSat' ) ).on( 'keyup', this.updateFromIHSV.createDelegate( this ), {buffer: 750} );
		Ext.getCmp( this.cpGetId( 'iVal' ) ).on( 'keyup', this.updateFromIHSV.createDelegate( this ), {buffer: 750} );
		Ext.getCmp( this.cpGetId( 'iHexa' ) ).on( 'keyup', this.updateFromIHexa.createDelegate( this ), {buffer: 750} );
		
		var cContBody = Ext.getCmp( this.cpGetId( 'cCont' ) ).body;
		
		if(this.showWebSafeColorbox === true){ // show web save color box
			Ext.DomHelper.append( cContBody, { 'cls': 'x-cp-colorbox', 'id': this.cpGetId( 'cWebSafe' ) }, true ).update( 'Websafe' );
			Ext.get( this.cpGetId( 'cWebSafe' ) ).on( 'click', this.updateFromBox.createDelegate( this ) );
		}
		if(this.showInverseColorbox === true){ // show inverse color box
			Ext.DomHelper.append( cContBody, { 'cls': 'x-cp-colorbox', 'id': this.cpGetId( 'cInverse' ) }, true ).update( 'Inverse' );
			Ext.get( this.cpGetId( 'cInverse' ) ).on( 'click', this.updateFromBox.createDelegate( this ) );
		}
		if(this.showColorbox === true){ // show color box
			Ext.DomHelper.append( cContBody, { 'cls': 'x-cp-colorbox', 'id': this.cpGetId( 'cColor' ) }, true );//.update( 'Pick Color' );
			Ext.get( this.cpGetId( 'cColor' ) ).on( 'click', this.selectColor.createDelegate( this ) );
		}
		
		Ext.DomHelper.append( this.body, {'tag':'br','cls':'x-cp-clearfloat'});
	},
	
	cpGetId: function( postfix ) {
		return this.getId() + '__' + ( postfix || 'cp' );
	},
	
	updateRGBPosition: function( x, y ) {
		this.updateMode = 'click';
		x = x < 0 ? 0 : x;
		x = x > 181 ? 181 : x;
		y = y < 0 ? 0 : y;
		y = y > 181 ? 181 : y;
		this.HSV.s = this.getSaturation( x );
		this.HSV.v = this.getValue( y );
		Ext.get( this.rgbPicker ).moveTo( Ext.get( this.cpGetId( 'rgb' ) ).getLeft() + x - 7, Ext.get( this.cpGetId( 'rgb' ) ).getTop() + y - 7, ( this.animateMove || true ) );
		this.updateColor();
	},
	
	updateHUEPosition: function( y ) {
		this.updateMode = 'click';
		y = y < 1 ? 1 : y;
		y = y > 181 ? 181 : y;
		this.HSV.h = Math.round( 360 / 181 * ( 181 - y ) );
		Ext.get( this.huePicker ).moveTo( Ext.get( this.huePicker ).getLeft(), Ext.get( this.cpGetId( 'hue' ) ).getTop() + y - 7, ( this.animateMove || true ) );
		this.updateRGBPicker( this.HSV.h );
		this.updateColor();
	},
	
	clickRGBPicker: function( event, element ) {
		this.updateRGBPosition( event.xy[0] - Ext.get( this.cpGetId( 'rgb' ) ).getLeft() , event.xy[1] - Ext.get( this.cpGetId( 'rgb' ) ).getTop() );
	},
	
	clickHUEPicker: function( event, element ) {
		this.updateHUEPosition( event.xy[1] - Ext.get( this.cpGetId( 'hue' ) ).getTop() );
	},
	
	moveRGBPicker: function( event ) {
		this.rgbDD.constrainTo( this.cpGetId( 'rgb' ), -7 );
		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 );
	},
	
	moveHuePicker: function( event ) {
		this.hueDD.constrainTo( this.cpGetId( 'hue' ), {'top':-7,'right':-3,'bottom':-7,'left':-3} );
		this.updateHUEPosition( Ext.get( this.huePicker ).getTop() - Ext.get( this.cpGetId( 'hue' ) ).getTop() + 7 );
	},
	
	updateRGBPicker: function( newValue ) {
		this.updateMode = 'click';
		Ext.get( this.cpGetId( 'rgb' ) ).setStyle({ 'background-color': '#' + this.rgbToHex( this.hsvToRgb( newValue, 1, 1 ) ) });
		this.updateColor();
	},
	
	updateColor: function() {
		var rgb = this.hsvToRgb( this.HSV.h, this.HSV.s, this.HSV.v );
		var websafe = this.websafe( rgb );
		var invert = this.invert( rgb );
		var wsInvert = this.invert( websafe );
		if( this.updateMode !== 'hexa' ) {
			Ext.getCmp( this.cpGetId( 'iHexa' ) ).setValue( this.rgbToHex( rgb ) );
		}
		if( this.updateMode !== 'rgb' ) {
			Ext.getCmp( this.cpGetId( 'iRed' ) ).setValue( rgb[0] );
			Ext.getCmp( this.cpGetId( 'iGreen' ) ).setValue( rgb[1] );
			Ext.getCmp( this.cpGetId( 'iBlue' ) ).setValue( rgb[2] );
		}
		if( this.updateMode !== 'hsv' ) {
			Ext.getCmp( this.cpGetId( 'iHue' ) ).setValue( Math.round( this.HSV.h ) );
			Ext.getCmp( this.cpGetId( 'iSat' ) ).setValue( Math.round( this.HSV.s * 100 ) );
			Ext.getCmp( this.cpGetId( 'iVal' ) ).setValue( Math.round( this.HSV.v * 100 ) );
		}
		
		if(this.showColorbox === true){
			Ext.get( this.cpGetId( 'cColor' ) ).setStyle({
				'background': '#' + this.rgbToHex( rgb ),
				'color': '#' + this.rgbToHex( invert )
			});
			//Ext.getDom( this.cpGetId( 'cColor' ) ).title = '#'+this.rgbToHex( rgb );
		}
		
		if(this.showInverseColorbox === true){
			Ext.get( this.cpGetId( 'cInverse' ) ).setStyle({
				'background': '#' + this.rgbToHex( invert ),
				'color': '#' + this.rgbToHex( rgb )
			});
			//Ext.getDom( this.cpGetId( 'cInverse' ) ).title = '#'+this.rgbToHex( invert );
		}
		
		if(this.showWebSafeColorbox === true){
			Ext.get( this.cpGetId( 'cWebSafe' ) ).setStyle({
				'background': '#' + this.rgbToHex( websafe ),
				'color': '#' + this.rgbToHex( wsInvert )
			});
			//Ext.getDom( this.cpGetId( 'cWebSafe' ) ).title = '#'+this.rgbToHex( websafe );
		}
		
		if( this.updateMode !== 'click' ) {
			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 ) );
			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 ) );
		}
		
		Ext.get( this.cpGetId( 'rgb' ) ).setStyle({ 'background-color': '#' + this.rgbToHex( this.hsvToRgb( Ext.getCmp( this.cpGetId( 'iHue' ) ).getValue(), 1, 1 ) ) });
	
		this.selectColor(); // fire the 'select' event now
	},
	
	setColor: function(c) {
		if(!/^[0-9a-fA-F]{6}$/.test(c))return;
		Ext.getCmp( this.cpGetId( 'iHexa' ) ).setValue(c);
		this.updateFromIHexa();
	},
	
	getColor: function(){
		return Ext.getCmp( this.cpGetId( 'iHexa' ) ).getValue();
	},
	
	updateFromIRGB: function( input, newValue, oldValue ) {
		this.updateMode = 'rgb';
		var temp = this.rgbToHsv( Ext.getCmp( this.cpGetId( 'iRed' ) ).getValue(), Ext.getCmp( this.cpGetId( 'iGreen' ) ).getValue(), Ext.getCmp( this.cpGetId( 'iBlue' ) ).getValue() );
		this.HSV = { h: temp[0], s:temp[1], v:temp[2]};
		this.updateColor();
	},
	
	updateFromIHSV: function( input, newValue, oldValue ) {
		this.updateMode = 'hsv';
		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};
		this.updateColor();
	},
	
	updateFromIHexa: function( input, e) {
		var value = Ext.getCmp( this.cpGetId( 'iHexa' ) ).getValue();
		if(!/^[0-9a-fA-F]{6}$/.test(value))return;
		
		this.updateMode = 'hexa';