r91737 MediaWiki - Code Review archive

Repository:	MediaWiki
Revision:	< r91736‎ \| r91737 \| r91738 >
Date:	17:25, 8 July 2011
Author:	salvatoreingala
Status:	deferred
Tags:
Comment:	- Added a simple implementation of 'color' preferences, with (an adaptation of) the jquery plugin 'farbtastic' as a color picker. - Removed ext.gadgets.preferences.css, replaced with jquery.formBuilder.css.
Modified paths:	/branches/salvatoreingala/Gadgets/Gadgets.i18n.php (modified) (history) /branches/salvatoreingala/Gadgets/Gadgets.php (modified) (history) /branches/salvatoreingala/Gadgets/Gadgets_tests.php (modified) (history) /branches/salvatoreingala/Gadgets/backend/GadgetHooks.php (modified) (history) /branches/salvatoreingala/Gadgets/backend/GadgetPrefs.php (modified) (history) /branches/salvatoreingala/Gadgets/ui/resources/ext.gadgets.preferences.css (deleted) (history) /branches/salvatoreingala/Gadgets/ui/resources/images (added) (history) /branches/salvatoreingala/Gadgets/ui/resources/images/marker.png (added) (history) /branches/salvatoreingala/Gadgets/ui/resources/images/mask.png (added) (history) /branches/salvatoreingala/Gadgets/ui/resources/images/wheel.png (added) (history) /branches/salvatoreingala/Gadgets/ui/resources/jquery.farbtastic.css (added) (history) /branches/salvatoreingala/Gadgets/ui/resources/jquery.farbtastic.js (added) (history) /branches/salvatoreingala/Gadgets/ui/resources/jquery.formBuilder.css (added) (history) /branches/salvatoreingala/Gadgets/ui/resources/jquery.formBuilder.js (modified) (history)

Diff [purge]

Index: branches/salvatoreingala/Gadgets/Gadgets.i18n.php
—	—	@@ -60,6 +60,7 @@
61	61	'gadgets-formbuilder-max' => 'Please enter a value not greater than $1.',
62	62	'gadgets-formbuilder-integer' => 'Please enter an integer number.',
63	63	'gadgets-formbuilder-date' => 'Please enter a valid date.',
	64	+ 'gadgets-formbuilder-color' => 'Please enter a valid color.',
64	65	);
65	66
66	67	/** Message documentation (Message documentation)
Index: branches/salvatoreingala/Gadgets/Gadgets.php
—	—	@@ -72,12 +72,25 @@
73	73	'remoteExtPath' => 'Gadgets/ui/resources'
74	74	);
75	75
	76	+$wgResourceModules['jquery.farbtastic'] = array(
	77	+ 'scripts' => array( 'jquery.farbtastic.js' ),
	78	+ 'styles' => array( 'jquery.farbtastic.css' ),
	79	+ 'dependencies' => array( 'jquery', 'jquery.colorUtil' ),
	80	+ 'localBasePath' => $dir . 'ui/resources/',
	81	+ 'remoteExtPath' => 'Gadgets/ui/resources'
	82	+);
	83	+
76	84	$wgResourceModules['jquery.formBuilder'] = array(
77	85	'scripts' => array( 'jquery.formBuilder.js' ),
78		~~- 'dependencies' => array( 'jquery', 'jquery.ui.slider', 'jquery.ui.datepicker', 'jquery.validate' ),~~
	86	+ 'styles' => array( 'jquery.formBuilder.css' ),
	87	+ 'dependencies' => array(
	88	+ 'jquery', 'jquery.ui.slider', 'jquery.ui.datepicker', 'jquery.ui.position',
	89	+ 'jquery.farbtastic', 'jquery.colorUtil', 'jquery.validate'
	90	+ ),
79	91	'messages' => array(
80	92	'gadgets-formbuilder-required', 'gadgets-formbuilder-minlength', 'gadgets-formbuilder-maxlength',
81		~~- 'gadgets-formbuilder-min', 'gadgets-formbuilder-max', 'gadgets-formbuilder-integer', 'gadgets-formbuilder-date'~~
	93	+ 'gadgets-formbuilder-min', 'gadgets-formbuilder-max', 'gadgets-formbuilder-integer', 'gadgets-formbuilder-date',
	94	+ 'gadgets-formbuilder-color'
82	95	),
83	96	'localBasePath' => $dir . 'ui/resources/',
84	97	'remoteExtPath' => 'Gadgets/ui/resources'
Index: branches/salvatoreingala/Gadgets/Gadgets_tests.php
—	—	@@ -427,6 +427,49 @@
428	428	$this->assertFalse( GadgetPrefs::isPrefsDescriptionValid( $wrong ) );
429	429	}
430	430	}
	431	+
	432	+ //Tests for 'color' type preferences
	433	+ function testPrefsDescriptionsColor() {
	434	+ $correct = array(
	435	+ 'fields' => array(
	436	+ 'testColor' => array(
	437	+ 'type' => 'color',
	438	+ 'label' => 'some label',
	439	+ 'default' => '#123456'
	440	+ )
	441	+ )
	442	+ );
	443	+
	444	+ //Tests with correct default values
	445	+ $correct2 = $correct;
	446	+ foreach ( array(
	447	+ '#000000',
	448	+ '#ffffff',
	449	+ '#8ed36e',
	450	+ ) as $def )
	451	+ {
	452	+ $correct2['fields']['testColor']['default'] = $def;
	453	+ $this->assertTrue( GadgetPrefs::isPrefsDescriptionValid( $correct2 ) );
	454	+ }
	455	+
	456	+ //Tests with wrong default values
	457	+ $wrong = $correct;
	458	+ foreach ( array(
	459	+ '', true, false, null, 0, array(),
	460	+ '123456',
	461	+ '#629af',
	462	+ '##123456',
	463	+ '#1aefdq',
	464	+ '#145aeF', //uppercase letters not allowed
	465	+ '#179', //syntax not allowed
	466	+ 'red', //syntax not allowed
	467	+ ) as $def )
	468	+ {
	469	+ $wrong['fields']['testColor']['default'] = $def;
	470	+ $this->assertFalse( GadgetPrefs::isPrefsDescriptionValid( $wrong ) );
	471	+ }
	472	+ }
	473	+
431	474
432	475	//Data provider to be able to reuse this preference description for several tests.
433	476	function prefsDescProvider() {
Index: branches/salvatoreingala/Gadgets/backend/GadgetPrefs.php
—	—	@@ -113,6 +113,15 @@
114	114	'isMandatory' => true,
115	115	'checker' => 'is_string'
116	116	)
	117	+ ),
	118	+ 'color' => array(
	119	+ 'default' => array(
	120	+ 'isMandatory' => true
	121	+ ),
	122	+ 'label' => array(
	123	+ 'isMandatory' => true,
	124	+ 'checker' => 'is_string'
	125	+ )
117	126	)
118	127	);
119	128
—	—	@@ -426,6 +435,10 @@
427	436
428	437	//Full parsing
429	438	return date_create( $pref ) !== false;
	439	+ case 'color':
	440	+ //Check if it's a string representing a color
	441	+ //(with 6 hexadecimal lowercase characters).
	442	+ return is_string( $pref ) && preg_match( '/^#[0-9a-f]{6}$/', $pref );
430	443	default:
431	444	return false; //unexisting type
432	445	}
Index: branches/salvatoreingala/Gadgets/backend/GadgetHooks.php
—	—	@@ -128,7 +128,6 @@
129	129	//TODO: fix caching issues for user-defined messages
130	130	$resourceLoader->register( 'ext.gadgets.preferences', array(
131	131	'scripts' => array( 'ext.gadgets.preferences.js' ),
132		~~- 'styles' => array( 'ext.gadgets.preferences.css' ),~~
133	132	'dependencies' => array(
134	133	'jquery', 'jquery.json', 'jquery.ui.dialog', 'jquery.formBuilder',
135	134	'mediawiki.htmlform', 'ext.gadgets'
Index: branches/salvatoreingala/Gadgets/ui/resources/ext.gadgets.preferences.css
—	—	@@ -1,33 +0,0 @@
2		-/*
3		~~- * Styles for gadget's preference setting dialogs.~~
4		~~- */~~
5		-
6		~~-.formBuilder-intro {~~
7		~~- margin-left: 1em;~~
8		-}
9		-
10		~~-#mw-gadgets-prefsDialog label {~~
11		~~- display: inline-block;~~
12		~~- text-align: right;~~
13		~~- margin-right: 2%;~~
14		~~- width: 45%;~~
15		-}
16		-
17		~~-#mw-gadgets-prefsDialog label.error {~~
18		~~- display: block;~~
19		~~- margin-left: 50%;~~
20		~~- font-size: 90%;~~
21		-}
22		-
23		~~-#mw-gadgets-prefsDialog input[type="text"] {~~
24		~~- width: 50%;~~
25		-}
26		-
27		~~-#mw-gadgets-prefsDialog select {~~
28		~~- width: 40%;~~
29		-}
30		-
31		~~-#mw-gadgets-prefsDialog .ui-slider {~~
32		~~- display: inline-block;~~
33		~~- width: 50%;~~
34		-}
Index: branches/salvatoreingala/Gadgets/ui/resources/jquery.formBuilder.css
—	—	@@ -0,0 +1,48 @@
	2	+/**
	3	+ * jQuery Form Builder
	4	+ * Written by Salvatore Ingala in 2011
	5	+ * Released under the MIT and GPL licenses.
	6	+ */
	7	+
	8	+.formBuilder-intro {
	9	+ margin-left: 1em;
	10	+}
	11	+
	12	+.formbuilder label {
	13	+ display: inline-block;
	14	+ text-align: right;
	15	+ margin-right: 2%;
	16	+ width: 45%;
	17	+}
	18	+
	19	+.formbuilder label.error {
	20	+ display: block;
	21	+ margin-left: 50%;
	22	+ font-size: 90%;
	23	+}
	24	+
	25	+.formbuilder input[type="text"] {
	26	+ width: 50%;
	27	+}
	28	+
	29	+.formbuilder .ui-slider {
	30	+ display: inline-block;
	31	+ width: 50%;
	32	+}
	33	+
	34	+.formbuilder select {
	35	+ width: 40%;
	36	+}
	37	+
	38	+#colorpicker {
	39	+ width: 197;
	40	+}
	41	+
	42	+.colorpicker-input.error {
	43	+ border-color: red;
	44	+}
	45	+
	46	+.farbtastic {
	47	+ border: 1px solid #cccccc;
	48	+}
	49	+
Property changes on: branches/salvatoreingala/Gadgets/ui/resources/jquery.formBuilder.css
___________________________________________________________________
Added: svn:eol-style
1	50	+ native
Index: branches/salvatoreingala/Gadgets/ui/resources/jquery.formBuilder.js
—	—	@@ -24,6 +24,15 @@
25	25	}
26	26
27	27
	28	+ function pad( n, len ) {
	29	+ var res = '' + n;
	30	+ while ( res.length < len ) {
	31	+ res = '0' + res;
	32	+ }
	33	+ return res;
	34	+ }
	35	+
	36	+
28	37	function testOptional( value, element ) {
29	38	var rules = $( element ).rules();
30	39	if ( typeof rules.required == 'undefined' \|\| rules.required === false ) {
—	—	@@ -65,6 +74,10 @@
66	75	}
67	76	}, mw.msg( 'gadgets-formbuilder-date' ) );
68	77
	78	+ //validator for colorpicker fields
	79	+ $.validator.addMethod( "color", function( value, element ) {
	80	+ return $.colorUtil.getRGB( value ) !== undefined;
	81	+ }, mw.msg( 'gadgets-formbuilder-color' ) );
69	82
70	83	//Helper function for inheritance, see http://javascript.crockford.com/prototypal.html
71	84	function object(o) {
—	—	@@ -388,14 +401,6 @@
389	402	}
390	403
391	404	DateField.prototype.getValue = function() {
392		~~- function pad( n, len ) {~~
393		~~- var res = '' + n;~~
394		~~- while ( res.length < len ) {~~
395		~~- res = '0' + res;~~
396		~~- }~~
397		~~- return res;~~
398		~~- }~~
399		-
400	405	var d = this.$text.datepicker( 'getDate' );
401	406
402	407	if ( d === null ) {
—	—	@@ -421,13 +426,95 @@
422	427	return settings;
423	428	}
424	429
	430	+ //A field with color picker
	431	+
	432	+ function closeColorPicker() {
	433	+ $( '#colorpicker' ).fadeOut( 'fast', function() {
	434	+ $( this ).remove()
	435	+ } );
	436	+ }
	437	+
	438	+ ColorField.prototype = object( LabelField.prototype );
	439	+ ColorField.prototype.constructor = ColorField;
	440	+ function ColorField( $form, name, desc ){
	441	+ LabelField.call( this, $form, name, desc );
	442	+
	443	+ if ( typeof desc.value == 'undefined' ) {
	444	+ $.error( "desc.value is invalid" );
	445	+ }
	446	+
	447	+ this.$text = $( '<input/>' )
	448	+ .attr( 'type', 'text' )
	449	+ .attr( 'id', idPrefix + this.name )
	450	+ .attr( 'name', idPrefix + this.name )
	451	+ .addClass( 'colorpicker-input' )
	452	+ .val( desc.value )
	453	+ .css( 'background-color', desc.value )
	454	+ .focus( function() {
	455	+ $( '<div/>' )
	456	+ .attr( 'id', 'colorpicker' )
	457	+ .css( 'position', 'absolute' )
	458	+ .hide()
	459	+ .appendTo( document.body )
	460	+ .zIndex( $( this ).zIndex() + 1 )
	461	+ .farbtastic( this )
	462	+ .position( {
	463	+ my: 'left bottom',
	464	+ at: 'left top',
	465	+ of: this,
	466	+ collision: 'none'
	467	+ } )
	468	+ .fadeIn( 'fast' );
	469	+ } )
	470	+ .keydown( function( event ) {
	471	+ if ( event.keyCode == 13 \|\| event.keyCode == 27 ) {
	472	+ closeColorPicker();
	473	+ event.preventDefault();
	474	+ event.stopPropagation();
	475	+ }
	476	+ } )
	477	+ .change( function() {
	478	+ //Force validation
	479	+ $( this ).valid();
	480	+ } )
	481	+ .blur( closeColorPicker );
	482	+
	483	+ this.$p.append( this.$text );
	484	+ }
	485	+
	486	+ ColorField.prototype.getValidationSettings = function() {
	487	+ var settings = LabelField.prototype.getValidationSettings.call( this ),
	488	+ fieldId = idPrefix + this.name;
	489	+
	490	+ settings.rules[fieldId] = {
	491	+ "color": true
	492	+ };
	493	+ return settings;
	494	+ }
	495	+
	496	+ ColorField.prototype.getValue = function() {
	497	+ var color = $.colorUtil.getRGB( this.$text.val() );
	498	+ return '#' + pad( color[0].toString( 16 ), 2 ) +
	499	+ pad( color[1].toString( 16 ), 2 ) + pad( color[2].toString( 16 ), 2 );
	500	+ };
	501	+
	502	+ //If a click happens outside the colorpicker while it is showed, remove it
	503	+ $( document ).mousedown( function( event ) {
	504	+ var $target = $( event.target );
	505	+ if ( $target.parents( '#colorpicker' ).length == 0 ) {
	506	+ closeColorPicker();
	507	+ }
	508	+ } );
	509	+
	510	+
425	511	var validFieldTypes = {
426	512	"boolean": BooleanField,
427	513	"string" : StringField,
428	514	"number" : NumberField,
429	515	"select" : SelectField,
430	516	"range" : RangeField,
431		~~- "date" : DateField~~
	517	+ "date" : DateField,
	518	+ "color" : ColorField
432	519	};
433	520
434	521	/* Public methods */
—	—	@@ -446,7 +533,7 @@
447	534	return null;
448	535	}
449	536
450		~~- var $form = $( '<form/>' );~~
	537	+ var $form = $( '<form/>' ).addClass( 'formbuilder' );
451	538
452	539	//If there is an "intro", adds it to the form as a label
453	540	if ( typeof description.intro == 'string' ) {
Index: branches/salvatoreingala/Gadgets/ui/resources/images/marker.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png
Property changes on: branches/salvatoreingala/Gadgets/ui/resources/images/marker.png
___________________________________________________________________
Added: svn:mime-type
454	541	+ image/png
Added: svn:executable
455	542	+ *
Index: branches/salvatoreingala/Gadgets/ui/resources/images/wheel.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png
Property changes on: branches/salvatoreingala/Gadgets/ui/resources/images/wheel.png
___________________________________________________________________
Added: svn:mime-type
456	543	+ image/png
Index: branches/salvatoreingala/Gadgets/ui/resources/images/mask.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png
Property changes on: branches/salvatoreingala/Gadgets/ui/resources/images/mask.png
___________________________________________________________________
Added: svn:mime-type
457	544	+ image/png
Index: branches/salvatoreingala/Gadgets/ui/resources/jquery.farbtastic.css
—	—	@@ -0,0 +1,51 @@
	2	+/**
	3	+ * Farbtastic Color Picker 1.2
	4	+ * © 2008 Steven Wittens
	5	+ *
	6	+ * This program is free software; you can redistribute it and/or modify
	7	+ * it under the terms of the GNU General Public License as published by
	8	+ * the Free Software Foundation; either version 2 of the License, or
	9	+ * (at your option) any later version.
	10	+ *
	11	+ * This program is distributed in the hope that it will be useful,
	12	+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
	13	+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
	14	+ * GNU General Public License for more details.
	15	+ *
	16	+ * You should have received a copy of the GNU General Public License
	17	+ * along with this program; if not, write to the Free Software
	18	+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
	19	+ */
	20	+.farbtastic {
	21	+ position: relative;
	22	+}
	23	+.farbtastic * {
	24	+ position: absolute;
	25	+ cursor: crosshair;
	26	+}
	27	+.farbtastic, .farbtastic .wheel {
	28	+ width: 195px;
	29	+ height: 195px;
	30	+}
	31	+.farbtastic .color, .farbtastic .overlay {
	32	+ top: 47px;
	33	+ left: 47px;
	34	+ width: 101px;
	35	+ height: 101px;
	36	+}
	37	+.farbtastic .wheel {
	38	+ background: url(images/wheel.png) no-repeat;
	39	+ width: 195px;
	40	+ height: 195px;
	41	+}
	42	+.farbtastic .overlay {
	43	+ background: url(images/mask.png) no-repeat;
	44	+}
	45	+.farbtastic .marker {
	46	+ width: 17px;
	47	+ height: 17px;
	48	+ margin: -8px 0 0 -8px;
	49	+ overflow: hidden;
	50	+ background: url(images/marker.png) no-repeat;
	51	+}
	52	+
Property changes on: branches/salvatoreingala/Gadgets/ui/resources/jquery.farbtastic.css
___________________________________________________________________
Added: svn:eol-style
1	53	+ native
Index: branches/salvatoreingala/Gadgets/ui/resources/jquery.farbtastic.js
—	—	@@ -0,0 +1,286 @@
	2	+/**
	3	+ * Farbtastic Color Picker 1.2
	4	+ * © 2008 Steven Wittens
	5	+ *
	6	+ * This program is free software; you can redistribute it and/or modify
	7	+ * it under the terms of the GNU General Public License as published by
	8	+ * the Free Software Foundation; either version 2 of the License, or
	9	+ * (at your option) any later version.
	10	+ *
	11	+ * This program is distributed in the hope that it will be useful,
	12	+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
	13	+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
	14	+ * GNU General Public License for more details.
	15	+ *
	16	+ * You should have received a copy of the GNU General Public License
	17	+ * along with this program; if not, write to the Free Software
	18	+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
	19	+ */
	20	+
	21	+//Adapted to uniform style with jQuery UI widgets and slightly change behavior
	22	+//TODO:
	23	+// - remove duplicated code by replacing it with jquery.colorUtils and modern jQuery
	24	+// - uniform code style
	25	+
	26	+jQuery.fn.farbtastic = function (callback) {
	27	+ $.farbtastic(this, callback);
	28	+ return this;
	29	+};
	30	+
	31	+jQuery.farbtastic = function (container, callback) {
	32	+ var container = $(container).get(0);
	33	+ return container.farbtastic \|\| (container.farbtastic = new jQuery._farbtastic(container, callback));
	34	+}
	35	+
	36	+jQuery._farbtastic = function (container, callback) {
	37	+ // Store farbtastic object
	38	+ var fb = this;
	39	+
	40	+ // Insert markup
	41	+ $(container).html('<div class="farbtastic ui-widget-content"><div class="color"></div><div class="wheel"></div><div class="overlay"></div><div class="h-marker marker"></div><div class="sl-marker marker"></div></div>');
	42	+ $(container).addClass('ui-widget');
	43	+ var e = $('.farbtastic', container);
	44	+ fb.wheel = $('.wheel', container).get(0);
	45	+ // Dimensions
	46	+ fb.radius = 84;
	47	+ fb.square = 100;
	48	+ fb.width = 194;
	49	+
	50	+ // Fix background PNGs in IE6
	51	+ if (navigator.appVersion.match(/MSIE [0-6]\./)) {
	52	+ $('*', e).each(function () {
	53	+ if (this.currentStyle.backgroundImage != 'none') {
	54	+ var image = this.currentStyle.backgroundImage;
	55	+ image = this.currentStyle.backgroundImage.substring(5, image.length - 2);
	56	+ $(this).css({
	57	+ 'backgroundImage': 'none',
	58	+ 'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image + "')"
	59	+ });
	60	+ }
	61	+ });
	62	+ }
	63	+
	64	+ /**
	65	+ * Link to the given element(s) or callback.
	66	+ */
	67	+ fb.linkTo = function (callback) {
	68	+ // Unbind previous nodes
	69	+ if (typeof fb.callback == 'object') {
	70	+ $(fb.callback).unbind('keyup', fb.updateValue);
	71	+ }
	72	+
	73	+ // Reset color
	74	+ fb.color = null;
	75	+
	76	+ // Bind callback or elements
	77	+ if (typeof callback == 'function') {
	78	+ fb.callback = callback;
	79	+ }
	80	+ else if (typeof callback == 'object' \|\| typeof callback == 'string') {
	81	+ fb.callback = $(callback);
	82	+ fb.callback.bind('keyup', fb.updateValue);
	83	+ if (fb.callback.get(0).value) {
	84	+ fb.setColor(fb.callback.get(0).value);
	85	+ }
	86	+ }
	87	+ return this;
	88	+ }
	89	+ fb.updateValue = function (event) {
	90	+ if (this.value != fb.color) {
	91	+ fb.setColor(this.value);
	92	+ }
	93	+ }
	94	+
	95	+ /**
	96	+ * Change color with HTML syntax #123456
	97	+ */
	98	+ fb.setColor = function (color) {
	99	+ var rgb = $.colorUtil.getRGB( color );
	100	+ if (fb.color != color && rgb) {
	101	+ rgb = rgb.slice( 0 ); //make a clone
	102	+ //TODO: rewrite code so that this is not needed
	103	+ rgb[0] /= 255;
	104	+ rgb[1] /= 255;
	105	+ rgb[2] /= 255;
	106	+ fb.color = color;
	107	+ fb.rgb = rgb;
	108	+ fb.hsl = fb.RGBToHSL(fb.rgb);
	109	+ fb.updateDisplay();
	110	+ }
	111	+ return this;
	112	+ }
	113	+
	114	+ /**
	115	+ * Change color with HSL triplet [0..1, 0..1, 0..1]
	116	+ */
	117	+ fb.setHSL = function (hsl) {
	118	+ fb.hsl = hsl;
	119	+ fb.rgb = fb.HSLToRGB(hsl);
	120	+ fb.color = fb.pack(fb.rgb);
	121	+ fb.updateDisplay();
	122	+ return this;
	123	+ }
	124	+
	125	+ /////////////////////////////////////////////////////
	126	+
	127	+ /**
	128	+ * Retrieve the coordinates of the given event relative to the center
	129	+ * of the widget.
	130	+ */
	131	+ fb.widgetCoords = function (event) {
	132	+ var ref = $( fb.wheel ).offset();
	133	+ return {
	134	+ x: event.pageX - ref.left - fb.width / 2,
	135	+ y: event.pageY - ref.top - fb.width / 2
	136	+ };
	137	+ }
	138	+
	139	+ /**
	140	+ * Mousedown handler
	141	+ */
	142	+ fb.mousedown = function (event) {
	143	+ // Capture mouse
	144	+ if (!document.dragging) {
	145	+ $(document).bind('mousemove', fb.mousemove).bind('mouseup', fb.mouseup);
	146	+ document.dragging = true;
	147	+ }
	148	+
	149	+ // Check which area is being dragged
	150	+ var pos = fb.widgetCoords(event);
	151	+ fb.circleDrag = Math.max(Math.abs(pos.x), Math.abs(pos.y)) * 2 > fb.square;
	152	+
	153	+ // Process
	154	+ fb.mousemove(event);
	155	+ return false;
	156	+ }
	157	+
	158	+ /**
	159	+ * Mousemove handler
	160	+ */
	161	+ fb.mousemove = function (event) {
	162	+ // Get coordinates relative to color picker center
	163	+ var pos = fb.widgetCoords(event);
	164	+
	165	+ // Set new HSL parameters
	166	+ if (fb.circleDrag) {
	167	+ var hue = Math.atan2(pos.x, -pos.y) / 6.28;
	168	+ if (hue < 0) hue += 1;
	169	+ fb.setHSL([hue, fb.hsl[1], fb.hsl[2]]);
	170	+ }
	171	+ else {
	172	+ var sat = Math.max(0, Math.min(1, -(pos.x / fb.square) + .5));
	173	+ var lum = Math.max(0, Math.min(1, -(pos.y / fb.square) + .5));
	174	+ fb.setHSL([fb.hsl[0], sat, lum]);
	175	+ }
	176	+ return false;
	177	+ }
	178	+
	179	+ /**
	180	+ * Mouseup handler
	181	+ */
	182	+ fb.mouseup = function () {
	183	+ // Uncapture mouse
	184	+ $(document).unbind('mousemove', fb.mousemove);
	185	+ $(document).unbind('mouseup', fb.mouseup);
	186	+ document.dragging = false;
	187	+ }
	188	+
	189	+ /**
	190	+ * Update the markers and styles
	191	+ */
	192	+ fb.updateDisplay = function () {
	193	+ // Markers
	194	+ var angle = fb.hsl[0] * 6.28;
	195	+ $('.h-marker', e).css({
	196	+ left: Math.round(Math.sin(angle) * fb.radius + fb.width / 2) + 'px',
	197	+ top: Math.round(-Math.cos(angle) * fb.radius + fb.width / 2) + 'px'
	198	+ });
	199	+
	200	+ $('.sl-marker', e).css({
	201	+ left: Math.round(fb.square * (.5 - fb.hsl[1]) + fb.width / 2) + 'px',
	202	+ top: Math.round(fb.square * (.5 - fb.hsl[2]) + fb.width / 2) + 'px'
	203	+ });
	204	+
	205	+ // Saturation/Luminance gradient
	206	+ $('.color', e).css('backgroundColor', fb.pack(fb.HSLToRGB([fb.hsl[0], 1, 0.5])));
	207	+
	208	+ // Linked elements or callback
	209	+ if (typeof fb.callback == 'object') {
	210	+ // Set background/foreground color
	211	+ $(fb.callback).css({
	212	+ backgroundColor: fb.color,
	213	+ color: fb.hsl[2] > 0.5 ? '#000' : '#fff'
	214	+ });
	215	+
	216	+ // Change linked value
	217	+ $(fb.callback).each(function() {
	218	+ if ( $( this ).val() != fb.color) {
	219	+ $( this ).val( fb.color ).change();
	220	+ }
	221	+ });
	222	+ }
	223	+ else if (typeof fb.callback == 'function') {
	224	+ fb.callback.call(fb, fb.color);
	225	+ }
	226	+ }
	227	+
	228	+ /* Various color utility functions */
	229	+ fb.pack = function (rgb) {
	230	+ var r = Math.round(rgb[0] * 255);
	231	+ var g = Math.round(rgb[1] * 255);
	232	+ var b = Math.round(rgb[2] * 255);
	233	+ return '#' + (r < 16 ? '0' : '') + r.toString(16) +
	234	+ (g < 16 ? '0' : '') + g.toString(16) +
	235	+ (b < 16 ? '0' : '') + b.toString(16);
	236	+ }
	237	+
	238	+ fb.HSLToRGB = function (hsl) {
	239	+ var m1, m2, r, g, b;
	240	+ var h = hsl[0], s = hsl[1], l = hsl[2];
	241	+ m2 = (l <= 0.5) ? l * (s + 1) : l + s - l*s;
	242	+ m1 = l * 2 - m2;
	243	+ return [this.hueToRGB(m1, m2, h+0.33333),
	244	+ this.hueToRGB(m1, m2, h),
	245	+ this.hueToRGB(m1, m2, h-0.33333)];
	246	+ }
	247	+
	248	+ fb.hueToRGB = function (m1, m2, h) {
	249	+ h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h);
	250	+ if (h * 6 < 1) return m1 + (m2 - m1) * h * 6;
	251	+ if (h * 2 < 1) return m2;
	252	+ if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6;
	253	+ return m1;
	254	+ }
	255	+
	256	+ fb.RGBToHSL = function (rgb) {
	257	+ var min, max, delta, h, s, l;
	258	+ var r = rgb[0], g = rgb[1], b = rgb[2];
	259	+ min = Math.min(r, Math.min(g, b));
	260	+ max = Math.max(r, Math.max(g, b));
	261	+ delta = max - min;
	262	+ l = (min + max) / 2;
	263	+ s = 0;
	264	+ if (l > 0 && l < 1) {
	265	+ s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l));
	266	+ }
	267	+ h = 0;
	268	+ if (delta > 0) {
	269	+ if (max == r && max != g) h += (g - b) / delta;
	270	+ if (max == g && max != b) h += (2 + (b - r) / delta);
	271	+ if (max == b && max != r) h += (4 + (r - g) / delta);
	272	+ h /= 6;
	273	+ }
	274	+ return [h, s, l];
	275	+ }
	276	+
	277	+ // Install mousedown handler (the others are set on the document on-demand)
	278	+ $('*', e).mousedown(fb.mousedown);
	279	+
	280	+ // Init color
	281	+ fb.setColor('#000000');
	282	+
	283	+ // Set linked elements/callback
	284	+ if (callback) {
	285	+ fb.linkTo(callback);
	286	+ }
	287	+}
Property changes on: branches/salvatoreingala/Gadgets/ui/resources/jquery.farbtastic.js
___________________________________________________________________
Added: svn:eol-style
1	288	+ native

Status & tagging log

01:57, 22 October 2011 Reedy (talk | contribs) changed the status of r91737 [removed: new added: deferred]