r99923 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r99922‎ | r99923 | r99924 >
Date:22:41, 15 October 2011
Author:catrope
Status:resolved (Comments)
Tags:
Comment:
Add jquery.farbtastic module to core, copied from branches/salvatoreingala
Modified paths:
  • /trunk/phase3/resources/Resources.php (modified) (history)
  • /trunk/phase3/resources/jquery/images/marker.png (added) (history)
  • /trunk/phase3/resources/jquery/images/mask.png (added) (history)
  • /trunk/phase3/resources/jquery/images/wheel.png (added) (history)
  • /trunk/phase3/resources/jquery/jquery.farbtastic.css (added) (history)
  • /trunk/phase3/resources/jquery/jquery.farbtastic.js (added) (history)

Diff [purge]

Index: trunk/phase3/resources/jquery/images/marker.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png
Property changes on: trunk/phase3/resources/jquery/images/marker.png
___________________________________________________________________
Added: svn:executable
11 + *
Added: svn:mime-type
22 + image/png
Index: trunk/phase3/resources/jquery/images/wheel.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png
Property changes on: trunk/phase3/resources/jquery/images/wheel.png
___________________________________________________________________
Added: svn:mime-type
33 + image/png
Index: trunk/phase3/resources/jquery/images/mask.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png
Property changes on: trunk/phase3/resources/jquery/images/mask.png
___________________________________________________________________
Added: svn:mime-type
44 + image/png
Index: trunk/phase3/resources/jquery/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: trunk/phase3/resources/jquery/jquery.farbtastic.css
___________________________________________________________________
Added: svn:eol-style
153 + native
Index: trunk/phase3/resources/jquery/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: trunk/phase3/resources/jquery/jquery.farbtastic.js
___________________________________________________________________
Added: svn:eol-style
1288 + native
Index: trunk/phase3/resources/Resources.php
——@@ -122,6 +122,10 @@
123123 'scripts' => 'resources/jquery/jquery.expandableField.js',
124124 'dependencies' => 'jquery.delayedBind',
125125 ),
 126+ 'jquery.farbtastic' => array(
 127+ 'scripts' => 'resources/jquery/jquery.farbtastic.js',
 128+ 'styles' => 'resources/jquery/jquery.farbtastic.css',
 129+ ),
126130 'jquery.form' => array(
127131 'scripts' => 'resources/jquery/jquery.form.js',
128132 ),

Follow-up revisions

RevisionCommit summaryAuthorDate
r99927Followup r99923: spaces->tabs, add @embedcatrope23:08, 15 October 2011
r99930Followup r99923: add missing dependencycatrope23:16, 15 October 2011

Comments

#Comment by Nikerabbit (talk | contribs)   10:35, 16 October 2011

What does this module do?

#Comment by Nikerabbit (talk | contribs)   10:35, 16 October 2011

Ah, found the words "Color Picker" hidden in one of the comments.

Status & tagging log