http://www.mediawiki.org/wiki/Special:Code/MediaWiki/91737
Revision: 91737
Author: salvatoreingala
Date: 2011-07-08 17:25:38 +0000 (Fri, 08 Jul 2011)
Log Message:
-----------
- 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
branches/salvatoreingala/Gadgets/Gadgets.php
branches/salvatoreingala/Gadgets/Gadgets_tests.php
branches/salvatoreingala/Gadgets/backend/GadgetHooks.php
branches/salvatoreingala/Gadgets/backend/GadgetPrefs.php
branches/salvatoreingala/Gadgets/ui/resources/jquery.formBuilder.js
Added Paths:
-----------
branches/salvatoreingala/Gadgets/ui/resources/images/
branches/salvatoreingala/Gadgets/ui/resources/images/marker.png
branches/salvatoreingala/Gadgets/ui/resources/images/mask.png
branches/salvatoreingala/Gadgets/ui/resources/images/wheel.png
branches/salvatoreingala/Gadgets/ui/resources/jquery.farbtastic.css
branches/salvatoreingala/Gadgets/ui/resources/jquery.farbtastic.js
branches/salvatoreingala/Gadgets/ui/resources/jquery.formBuilder.css
Removed Paths:
-------------
branches/salvatoreingala/Gadgets/ui/resources/ext.gadgets.preferences.css
Modified: branches/salvatoreingala/Gadgets/Gadgets.i18n.php
===================================================================
--- branches/salvatoreingala/Gadgets/Gadgets.i18n.php 2011-07-08 17:20:56 UTC
(rev 91736)
+++ branches/salvatoreingala/Gadgets/Gadgets.i18n.php 2011-07-08 17:25:38 UTC
(rev 91737)
@@ -60,6 +60,7 @@
'gadgets-formbuilder-max' => 'Please enter a value not greater than
$1.',
'gadgets-formbuilder-integer' => 'Please enter an integer number.',
'gadgets-formbuilder-date' => 'Please enter a valid date.',
+ 'gadgets-formbuilder-color' => 'Please enter a valid color.',
);
/** Message documentation (Message documentation)
Modified: branches/salvatoreingala/Gadgets/Gadgets.php
===================================================================
--- branches/salvatoreingala/Gadgets/Gadgets.php 2011-07-08 17:20:56 UTC
(rev 91736)
+++ branches/salvatoreingala/Gadgets/Gadgets.php 2011-07-08 17:25:38 UTC
(rev 91737)
@@ -72,12 +72,25 @@
'remoteExtPath' => 'Gadgets/ui/resources'
);
+$wgResourceModules['jquery.farbtastic'] = array(
+ 'scripts' => array( 'jquery.farbtastic.js' ),
+ 'styles' => array( 'jquery.farbtastic.css' ),
+ 'dependencies' => array( 'jquery', 'jquery.colorUtil' ),
+ 'localBasePath' => $dir . 'ui/resources/',
+ 'remoteExtPath' => 'Gadgets/ui/resources'
+);
+
$wgResourceModules['jquery.formBuilder'] = array(
'scripts' => array( 'jquery.formBuilder.js' ),
- 'dependencies' => array( 'jquery', 'jquery.ui.slider',
'jquery.ui.datepicker', 'jquery.validate' ),
+ 'styles' => array( 'jquery.formBuilder.css' ),
+ 'dependencies' => array(
+ 'jquery', 'jquery.ui.slider', 'jquery.ui.datepicker',
'jquery.ui.position',
+ 'jquery.farbtastic', 'jquery.colorUtil', 'jquery.validate'
+ ),
'messages' => array(
'gadgets-formbuilder-required',
'gadgets-formbuilder-minlength', 'gadgets-formbuilder-maxlength',
- 'gadgets-formbuilder-min', 'gadgets-formbuilder-max',
'gadgets-formbuilder-integer', 'gadgets-formbuilder-date'
+ 'gadgets-formbuilder-min', 'gadgets-formbuilder-max',
'gadgets-formbuilder-integer', 'gadgets-formbuilder-date',
+ 'gadgets-formbuilder-color'
),
'localBasePath' => $dir . 'ui/resources/',
'remoteExtPath' => 'Gadgets/ui/resources'
Modified: branches/salvatoreingala/Gadgets/Gadgets_tests.php
===================================================================
--- branches/salvatoreingala/Gadgets/Gadgets_tests.php 2011-07-08 17:20:56 UTC
(rev 91736)
+++ branches/salvatoreingala/Gadgets/Gadgets_tests.php 2011-07-08 17:25:38 UTC
(rev 91737)
@@ -427,6 +427,49 @@
$this->assertFalse(
GadgetPrefs::isPrefsDescriptionValid( $wrong ) );
}
}
+
+ //Tests for 'color' type preferences
+ function testPrefsDescriptionsColor() {
+ $correct = array(
+ 'fields' => array(
+ 'testColor' => array(
+ 'type' => 'color',
+ 'label' => 'some label',
+ 'default' => '#123456'
+ )
+ )
+ );
+
+ //Tests with correct default values
+ $correct2 = $correct;
+ foreach ( array(
+ '#000000',
+ '#ffffff',
+ '#8ed36e',
+ ) as $def )
+ {
+ $correct2['fields']['testColor']['default'] = $def;
+ $this->assertTrue(
GadgetPrefs::isPrefsDescriptionValid( $correct2 ) );
+ }
+
+ //Tests with wrong default values
+ $wrong = $correct;
+ foreach ( array(
+ '', true, false, null, 0, array(),
+ '123456',
+ '#629af',
+ '##123456',
+ '#1aefdq',
+ '#145aeF', //uppercase letters not allowed
+ '#179', //syntax not allowed
+ 'red', //syntax not allowed
+ ) as $def )
+ {
+ $wrong['fields']['testColor']['default'] = $def;
+ $this->assertFalse(
GadgetPrefs::isPrefsDescriptionValid( $wrong ) );
+ }
+ }
+
//Data provider to be able to reuse this preference description for
several tests.
function prefsDescProvider() {
Modified: branches/salvatoreingala/Gadgets/backend/GadgetHooks.php
===================================================================
--- branches/salvatoreingala/Gadgets/backend/GadgetHooks.php 2011-07-08
17:20:56 UTC (rev 91736)
+++ branches/salvatoreingala/Gadgets/backend/GadgetHooks.php 2011-07-08
17:25:38 UTC (rev 91737)
@@ -128,7 +128,6 @@
//TODO: fix caching issues for user-defined messages
$resourceLoader->register( 'ext.gadgets.preferences', array(
'scripts' => array(
'ext.gadgets.preferences.js' ),
- 'styles' => array( 'ext.gadgets.preferences.css'
),
'dependencies' => array(
'jquery', 'jquery.json', 'jquery.ui.dialog',
'jquery.formBuilder',
'mediawiki.htmlform', 'ext.gadgets'
Modified: branches/salvatoreingala/Gadgets/backend/GadgetPrefs.php
===================================================================
--- branches/salvatoreingala/Gadgets/backend/GadgetPrefs.php 2011-07-08
17:20:56 UTC (rev 91736)
+++ branches/salvatoreingala/Gadgets/backend/GadgetPrefs.php 2011-07-08
17:25:38 UTC (rev 91737)
@@ -113,6 +113,15 @@
'isMandatory' => true,
'checker' => 'is_string'
)
+ ),
+ 'color' => array(
+ 'default' => array(
+ 'isMandatory' => true
+ ),
+ 'label' => array(
+ 'isMandatory' => true,
+ 'checker' => 'is_string'
+ )
)
);
@@ -426,6 +435,10 @@
//Full parsing
return date_create( $pref ) !== false;
+ case 'color':
+ //Check if it's a string representing a color
+ //(with 6 hexadecimal lowercase characters).
+ return is_string( $pref ) && preg_match(
'/^#[0-9a-f]{6}$/', $pref );
default:
return false; //unexisting type
}
Deleted:
branches/salvatoreingala/Gadgets/ui/resources/ext.gadgets.preferences.css
===================================================================
--- branches/salvatoreingala/Gadgets/ui/resources/ext.gadgets.preferences.css
2011-07-08 17:20:56 UTC (rev 91736)
+++ branches/salvatoreingala/Gadgets/ui/resources/ext.gadgets.preferences.css
2011-07-08 17:25:38 UTC (rev 91737)
@@ -1,33 +0,0 @@
-/*
- * Styles for gadget's preference setting dialogs.
- */
-
-.formBuilder-intro {
- margin-left: 1em;
-}
-
-#mw-gadgets-prefsDialog label {
- display: inline-block;
- text-align: right;
- margin-right: 2%;
- width: 45%;
-}
-
-#mw-gadgets-prefsDialog label.error {
- display: block;
- margin-left: 50%;
- font-size: 90%;
-}
-
-#mw-gadgets-prefsDialog input[type="text"] {
- width: 50%;
-}
-
-#mw-gadgets-prefsDialog select {
- width: 40%;
-}
-
-#mw-gadgets-prefsDialog .ui-slider {
- display: inline-block;
- width: 50%;
-}
Added: branches/salvatoreingala/Gadgets/ui/resources/images/marker.png
===================================================================
(Binary files differ)
Property changes on:
branches/salvatoreingala/Gadgets/ui/resources/images/marker.png
___________________________________________________________________
Added: svn:executable
+ *
Added: svn:mime-type
+ image/png
Added: branches/salvatoreingala/Gadgets/ui/resources/images/mask.png
===================================================================
(Binary files differ)
Property changes on:
branches/salvatoreingala/Gadgets/ui/resources/images/mask.png
___________________________________________________________________
Added: svn:mime-type
+ image/png
Added: branches/salvatoreingala/Gadgets/ui/resources/images/wheel.png
===================================================================
(Binary files differ)
Property changes on:
branches/salvatoreingala/Gadgets/ui/resources/images/wheel.png
___________________________________________________________________
Added: svn:mime-type
+ image/png
Added: branches/salvatoreingala/Gadgets/ui/resources/jquery.farbtastic.css
===================================================================
--- branches/salvatoreingala/Gadgets/ui/resources/jquery.farbtastic.css
(rev 0)
+++ branches/salvatoreingala/Gadgets/ui/resources/jquery.farbtastic.css
2011-07-08 17:25:38 UTC (rev 91737)
@@ -0,0 +1,51 @@
+/**
+ * Farbtastic Color Picker 1.2
+ * © 2008 Steven Wittens
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
USA
+ */
+.farbtastic {
+ position: relative;
+}
+.farbtastic * {
+ position: absolute;
+ cursor: crosshair;
+}
+.farbtastic, .farbtastic .wheel {
+ width: 195px;
+ height: 195px;
+}
+.farbtastic .color, .farbtastic .overlay {
+ top: 47px;
+ left: 47px;
+ width: 101px;
+ height: 101px;
+}
+.farbtastic .wheel {
+ background: url(images/wheel.png) no-repeat;
+ width: 195px;
+ height: 195px;
+}
+.farbtastic .overlay {
+ background: url(images/mask.png) no-repeat;
+}
+.farbtastic .marker {
+ width: 17px;
+ height: 17px;
+ margin: -8px 0 0 -8px;
+ overflow: hidden;
+ background: url(images/marker.png) no-repeat;
+}
+
Property changes on:
branches/salvatoreingala/Gadgets/ui/resources/jquery.farbtastic.css
___________________________________________________________________
Added: svn:eol-style
+ native
Added: branches/salvatoreingala/Gadgets/ui/resources/jquery.farbtastic.js
===================================================================
--- branches/salvatoreingala/Gadgets/ui/resources/jquery.farbtastic.js
(rev 0)
+++ branches/salvatoreingala/Gadgets/ui/resources/jquery.farbtastic.js
2011-07-08 17:25:38 UTC (rev 91737)
@@ -0,0 +1,286 @@
+/**
+ * Farbtastic Color Picker 1.2
+ * © 2008 Steven Wittens
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
USA
+ */
+
+//Adapted to uniform style with jQuery UI widgets and slightly change behavior
+//TODO:
+// - remove duplicated code by replacing it with jquery.colorUtils and modern
jQuery
+// - uniform code style
+
+jQuery.fn.farbtastic = function (callback) {
+ $.farbtastic(this, callback);
+ return this;
+};
+
+jQuery.farbtastic = function (container, callback) {
+ var container = $(container).get(0);
+ return container.farbtastic || (container.farbtastic = new
jQuery._farbtastic(container, callback));
+}
+
+jQuery._farbtastic = function (container, callback) {
+ // Store farbtastic object
+ var fb = this;
+
+ // Insert markup
+ $(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>');
+ $(container).addClass('ui-widget');
+ var e = $('.farbtastic', container);
+ fb.wheel = $('.wheel', container).get(0);
+ // Dimensions
+ fb.radius = 84;
+ fb.square = 100;
+ fb.width = 194;
+
+ // Fix background PNGs in IE6
+ if (navigator.appVersion.match(/MSIE [0-6]\./)) {
+ $('*', e).each(function () {
+ if (this.currentStyle.backgroundImage != 'none') {
+ var image = this.currentStyle.backgroundImage;
+ image = this.currentStyle.backgroundImage.substring(5, image.length -
2);
+ $(this).css({
+ 'backgroundImage': 'none',
+ 'filter':
"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=crop, src='" + image + "')"
+ });
+ }
+ });
+ }
+
+ /**
+ * Link to the given element(s) or callback.
+ */
+ fb.linkTo = function (callback) {
+ // Unbind previous nodes
+ if (typeof fb.callback == 'object') {
+ $(fb.callback).unbind('keyup', fb.updateValue);
+ }
+
+ // Reset color
+ fb.color = null;
+
+ // Bind callback or elements
+ if (typeof callback == 'function') {
+ fb.callback = callback;
+ }
+ else if (typeof callback == 'object' || typeof callback == 'string') {
+ fb.callback = $(callback);
+ fb.callback.bind('keyup', fb.updateValue);
+ if (fb.callback.get(0).value) {
+ fb.setColor(fb.callback.get(0).value);
+ }
+ }
+ return this;
+ }
+ fb.updateValue = function (event) {
+ if (this.value != fb.color) {
+ fb.setColor(this.value);
+ }
+ }
+
+ /**
+ * Change color with HTML syntax #123456
+ */
+ fb.setColor = function (color) {
+ var rgb = $.colorUtil.getRGB( color );
+ if (fb.color != color && rgb) {
+ rgb = rgb.slice( 0 ); //make a clone
+ //TODO: rewrite code so that this is not needed
+ rgb[0] /= 255;
+ rgb[1] /= 255;
+ rgb[2] /= 255;
+ fb.color = color;
+ fb.rgb = rgb;
+ fb.hsl = fb.RGBToHSL(fb.rgb);
+ fb.updateDisplay();
+ }
+ return this;
+ }
+
+ /**
+ * Change color with HSL triplet [0..1, 0..1, 0..1]
+ */
+ fb.setHSL = function (hsl) {
+ fb.hsl = hsl;
+ fb.rgb = fb.HSLToRGB(hsl);
+ fb.color = fb.pack(fb.rgb);
+ fb.updateDisplay();
+ return this;
+ }
+
+ /////////////////////////////////////////////////////
+
+ /**
+ * Retrieve the coordinates of the given event relative to the center
+ * of the widget.
+ */
+ fb.widgetCoords = function (event) {
+ var ref = $( fb.wheel ).offset();
+ return {
+ x: event.pageX - ref.left - fb.width / 2,
+ y: event.pageY - ref.top - fb.width / 2
+ };
+ }
+
+ /**
+ * Mousedown handler
+ */
+ fb.mousedown = function (event) {
+ // Capture mouse
+ if (!document.dragging) {
+ $(document).bind('mousemove', fb.mousemove).bind('mouseup', fb.mouseup);
+ document.dragging = true;
+ }
+
+ // Check which area is being dragged
+ var pos = fb.widgetCoords(event);
+ fb.circleDrag = Math.max(Math.abs(pos.x), Math.abs(pos.y)) * 2 > fb.square;
+
+ // Process
+ fb.mousemove(event);
+ return false;
+ }
+
+ /**
+ * Mousemove handler
+ */
+ fb.mousemove = function (event) {
+ // Get coordinates relative to color picker center
+ var pos = fb.widgetCoords(event);
+
+ // Set new HSL parameters
+ if (fb.circleDrag) {
+ var hue = Math.atan2(pos.x, -pos.y) / 6.28;
+ if (hue < 0) hue += 1;
+ fb.setHSL([hue, fb.hsl[1], fb.hsl[2]]);
+ }
+ else {
+ var sat = Math.max(0, Math.min(1, -(pos.x / fb.square) + .5));
+ var lum = Math.max(0, Math.min(1, -(pos.y / fb.square) + .5));
+ fb.setHSL([fb.hsl[0], sat, lum]);
+ }
+ return false;
+ }
+
+ /**
+ * Mouseup handler
+ */
+ fb.mouseup = function () {
+ // Uncapture mouse
+ $(document).unbind('mousemove', fb.mousemove);
+ $(document).unbind('mouseup', fb.mouseup);
+ document.dragging = false;
+ }
+
+ /**
+ * Update the markers and styles
+ */
+ fb.updateDisplay = function () {
+ // Markers
+ var angle = fb.hsl[0] * 6.28;
+ $('.h-marker', e).css({
+ left: Math.round(Math.sin(angle) * fb.radius + fb.width / 2) + 'px',
+ top: Math.round(-Math.cos(angle) * fb.radius + fb.width / 2) + 'px'
+ });
+
+ $('.sl-marker', e).css({
+ left: Math.round(fb.square * (.5 - fb.hsl[1]) + fb.width / 2) + 'px',
+ top: Math.round(fb.square * (.5 - fb.hsl[2]) + fb.width / 2) + 'px'
+ });
+
+ // Saturation/Luminance gradient
+ $('.color', e).css('backgroundColor', fb.pack(fb.HSLToRGB([fb.hsl[0], 1,
0.5])));
+
+ // Linked elements or callback
+ if (typeof fb.callback == 'object') {
+ // Set background/foreground color
+ $(fb.callback).css({
+ backgroundColor: fb.color,
+ color: fb.hsl[2] > 0.5 ? '#000' : '#fff'
+ });
+
+ // Change linked value
+ $(fb.callback).each(function() {
+ if ( $( this ).val() != fb.color) {
+ $( this ).val( fb.color ).change();
+ }
+ });
+ }
+ else if (typeof fb.callback == 'function') {
+ fb.callback.call(fb, fb.color);
+ }
+ }
+
+ /* Various color utility functions */
+ fb.pack = function (rgb) {
+ var r = Math.round(rgb[0] * 255);
+ var g = Math.round(rgb[1] * 255);
+ var b = Math.round(rgb[2] * 255);
+ return '#' + (r < 16 ? '0' : '') + r.toString(16) +
+ (g < 16 ? '0' : '') + g.toString(16) +
+ (b < 16 ? '0' : '') + b.toString(16);
+ }
+
+ fb.HSLToRGB = function (hsl) {
+ var m1, m2, r, g, b;
+ var h = hsl[0], s = hsl[1], l = hsl[2];
+ m2 = (l <= 0.5) ? l * (s + 1) : l + s - l*s;
+ m1 = l * 2 - m2;
+ return [this.hueToRGB(m1, m2, h+0.33333),
+ this.hueToRGB(m1, m2, h),
+ this.hueToRGB(m1, m2, h-0.33333)];
+ }
+
+ fb.hueToRGB = function (m1, m2, h) {
+ h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h);
+ if (h * 6 < 1) return m1 + (m2 - m1) * h * 6;
+ if (h * 2 < 1) return m2;
+ if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6;
+ return m1;
+ }
+
+ fb.RGBToHSL = function (rgb) {
+ var min, max, delta, h, s, l;
+ var r = rgb[0], g = rgb[1], b = rgb[2];
+ min = Math.min(r, Math.min(g, b));
+ max = Math.max(r, Math.max(g, b));
+ delta = max - min;
+ l = (min + max) / 2;
+ s = 0;
+ if (l > 0 && l < 1) {
+ s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l));
+ }
+ h = 0;
+ if (delta > 0) {
+ if (max == r && max != g) h += (g - b) / delta;
+ if (max == g && max != b) h += (2 + (b - r) / delta);
+ if (max == b && max != r) h += (4 + (r - g) / delta);
+ h /= 6;
+ }
+ return [h, s, l];
+ }
+
+ // Install mousedown handler (the others are set on the document on-demand)
+ $('*', e).mousedown(fb.mousedown);
+
+ // Init color
+ fb.setColor('#000000');
+
+ // Set linked elements/callback
+ if (callback) {
+ fb.linkTo(callback);
+ }
+}
Property changes on:
branches/salvatoreingala/Gadgets/ui/resources/jquery.farbtastic.js
___________________________________________________________________
Added: svn:eol-style
+ native
Added: branches/salvatoreingala/Gadgets/ui/resources/jquery.formBuilder.css
===================================================================
--- branches/salvatoreingala/Gadgets/ui/resources/jquery.formBuilder.css
(rev 0)
+++ branches/salvatoreingala/Gadgets/ui/resources/jquery.formBuilder.css
2011-07-08 17:25:38 UTC (rev 91737)
@@ -0,0 +1,48 @@
+/**
+ * jQuery Form Builder
+ * Written by Salvatore Ingala in 2011
+ * Released under the MIT and GPL licenses.
+ */
+
+.formBuilder-intro {
+ margin-left: 1em;
+}
+
+.formbuilder label {
+ display: inline-block;
+ text-align: right;
+ margin-right: 2%;
+ width: 45%;
+}
+
+.formbuilder label.error {
+ display: block;
+ margin-left: 50%;
+ font-size: 90%;
+}
+
+.formbuilder input[type="text"] {
+ width: 50%;
+}
+
+.formbuilder .ui-slider {
+ display: inline-block;
+ width: 50%;
+}
+
+.formbuilder select {
+ width: 40%;
+}
+
+#colorpicker {
+ width: 197;
+}
+
+.colorpicker-input.error {
+ border-color: red;
+}
+
+.farbtastic {
+ border: 1px solid #cccccc;
+}
+
Property changes on:
branches/salvatoreingala/Gadgets/ui/resources/jquery.formBuilder.css
___________________________________________________________________
Added: svn:eol-style
+ native
Modified: branches/salvatoreingala/Gadgets/ui/resources/jquery.formBuilder.js
===================================================================
--- branches/salvatoreingala/Gadgets/ui/resources/jquery.formBuilder.js
2011-07-08 17:20:56 UTC (rev 91736)
+++ branches/salvatoreingala/Gadgets/ui/resources/jquery.formBuilder.js
2011-07-08 17:25:38 UTC (rev 91737)
@@ -24,6 +24,15 @@
}
+ function pad( n, len ) {
+ var res = '' + n;
+ while ( res.length < len ) {
+ res = '0' + res;
+ }
+ return res;
+ }
+
+
function testOptional( value, element ) {
var rules = $( element ).rules();
if ( typeof rules.required == 'undefined' || rules.required ===
false ) {
@@ -65,6 +74,10 @@
}
}, mw.msg( 'gadgets-formbuilder-date' ) );
+ //validator for colorpicker fields
+ $.validator.addMethod( "color", function( value, element ) {
+ return $.colorUtil.getRGB( value ) !== undefined;
+ }, mw.msg( 'gadgets-formbuilder-color' ) );
//Helper function for inheritance, see
http://javascript.crockford.com/prototypal.html
function object(o) {
@@ -388,14 +401,6 @@
}
DateField.prototype.getValue = function() {
- function pad( n, len ) {
- var res = '' + n;
- while ( res.length < len ) {
- res = '0' + res;
- }
- return res;
- }
-
var d = this.$text.datepicker( 'getDate' );
if ( d === null ) {
@@ -421,13 +426,95 @@
return settings;
}
+ //A field with color picker
+
+ function closeColorPicker() {
+ $( '#colorpicker' ).fadeOut( 'fast', function() {
+ $( this ).remove()
+ } );
+ }
+
+ ColorField.prototype = object( LabelField.prototype );
+ ColorField.prototype.constructor = ColorField;
+ function ColorField( $form, name, desc ){
+ LabelField.call( this, $form, name, desc );
+
+ if ( typeof desc.value == 'undefined' ) {
+ $.error( "desc.value is invalid" );
+ }
+
+ this.$text = $( '<input/>' )
+ .attr( 'type', 'text' )
+ .attr( 'id', idPrefix + this.name )
+ .attr( 'name', idPrefix + this.name )
+ .addClass( 'colorpicker-input' )
+ .val( desc.value )
+ .css( 'background-color', desc.value )
+ .focus( function() {
+ $( '<div/>' )
+ .attr( 'id', 'colorpicker' )
+ .css( 'position', 'absolute' )
+ .hide()
+ .appendTo( document.body )
+ .zIndex( $( this ).zIndex() + 1 )
+ .farbtastic( this )
+ .position( {
+ my: 'left bottom',
+ at: 'left top',
+ of: this,
+ collision: 'none'
+ } )
+ .fadeIn( 'fast' );
+ } )
+ .keydown( function( event ) {
+ if ( event.keyCode == 13 || event.keyCode == 27
) {
+ closeColorPicker();
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ } )
+ .change( function() {
+ //Force validation
+ $( this ).valid();
+ } )
+ .blur( closeColorPicker );
+
+ this.$p.append( this.$text );
+ }
+
+ ColorField.prototype.getValidationSettings = function() {
+ var settings =
LabelField.prototype.getValidationSettings.call( this ),
+ fieldId = idPrefix + this.name;
+
+ settings.rules[fieldId] = {
+ "color": true
+ };
+ return settings;
+ }
+
+ ColorField.prototype.getValue = function() {
+ var color = $.colorUtil.getRGB( this.$text.val() );
+ return '#' + pad( color[0].toString( 16 ), 2 ) +
+ pad( color[1].toString( 16 ), 2 ) + pad(
color[2].toString( 16 ), 2 );
+ };
+
+ //If a click happens outside the colorpicker while it is showed, remove
it
+ $( document ).mousedown( function( event ) {
+ var $target = $( event.target );
+ if ( $target.parents( '#colorpicker' ).length == 0 ) {
+ closeColorPicker();
+ }
+ } );
+
+
var validFieldTypes = {
"boolean": BooleanField,
"string" : StringField,
"number" : NumberField,
"select" : SelectField,
"range" : RangeField,
- "date" : DateField
+ "date" : DateField,
+ "color" : ColorField
};
/* Public methods */
@@ -446,7 +533,7 @@
return null;
}
- var $form = $( '<form/>' );
+ var $form = $( '<form/>' ).addClass( 'formbuilder' );
//If there is an "intro", adds it to the form as a label
if ( typeof description.intro == 'string' ) {
_______________________________________________
MediaWiki-CVS mailing list
MediaWiki-CVS@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-cvs
