Skip to content

Commit

Permalink
Item14570: add "use strict" to farbtastic's init
Browse files Browse the repository at this point in the history
... and fix js errors
  • Loading branch information
MichaelDaum committed Dec 11, 2017
1 parent 4ea7f2f commit 9742085
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 43 deletions.
5 changes: 3 additions & 2 deletions JQueryPlugin/data/System/JQueryPlugin.txt
Original file line number Diff line number Diff line change
Expand Up @@ -125,8 +125,9 @@ required for Foswiki 1.1 or later.

---++ Change History
%TABLE{columnwidths="7em" tablewidth="100%"}%
| 11 Dec 2017: | (7.25) - Item14565: bundle jquery.validate js files into one <br />\
Item14566: don't cache a null result in foswiki.getPreference() |
| 11 Dec 2017: | (7.25) - Item14565: bundle jquery.validate js files into one <br /> \
Item14566: don't cache a null result in foswiki.getPreference() <br /> \
Item14570: add "use strict" to farbtastic's init and fix js errors |
| 8 Dec 2017: | (7.24) - Released with Foswiki 2.1.5<br />\
Item14518: JQueryPlugin should warn configure if an older version of jquery is selected.<br />\
Item14555: make build work with latest uglifyjs 3.<br />\
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
// initializer for foswiki
"use strict";
(function($) {

// defaults
Expand All @@ -11,12 +12,12 @@
// helper snarfed from farbtastic
function unpack(color) {
var re = /^rgb\((.*?),(.*?),(.*?)\)/;
if (color.length == 7) {
if (color.length === 7) {
return [parseInt('0x' + color.substring(1, 3)) / 255,
parseInt('0x' + color.substring(3, 5)) / 255,
parseInt('0x' + color.substring(5, 7)) / 255];
}
else if (color.length == 4) {
else if (color.length === 4) {
return [parseInt('0x' + color.substring(1, 2)) / 15,
parseInt('0x' + color.substring(2, 3)) / 15,
parseInt('0x' + color.substring(3, 4)) / 15];
Expand All @@ -41,56 +42,91 @@
}
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);
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];
}
function getFgColor(bgColor, dark, light) {
var color = unpack(bgColor);
var hsl = RGBToHSL(color);
return hsl[2] > 0.5 ? dark : light;
return hsl[2] > 0.5 ? dark||'#000' : light||'#FFF';
}

function initFarbtastic(colorPicker, elem) {
var val = elem.val();

function _colorize(bgColor) {
var fgColor = getFgColor(bgColor);
elem.val(bgColor).css({
"background-color": bgColor,
"color": fgColor
});
}

if (val) {
_colorize(val);
}

return $.farbtastic(colorPicker).linkTo(_colorize);
}

$(function() {
// create a colorpicker if it isn't there already
var colorpicker = $("#colorpicker");
if (colorpicker.length == 0) {
colorpicker = $('<div class="ui-component-content ui-widget-content ui-hidden ui-helper-hidden" id="colorpicker"></div>').appendTo("body");
// create a color picker if it isn't there already
var colorPicker = $("#colorpicker");
if (colorPicker.length === 0) {
colorPicker = $('<div class="ui-component-content ui-widget-content ui-hidden ui-helper-hidden" id="colorpicker"></div>').appendTo("body");
}
$(".jqFarbtastic:not(.jqInitedFarbtastic)").livequery(function() {
var $this = $(this);
$this.addClass("jqInitedFarbtastic");
var fb = $.farbtastic(colorpicker).linkTo(this);
var $this = $(this),
opts = $.extend({}, defaults, $this.data(), $this.metadata()),
fb;

// read element options
var opts = $.extend({}, defaults, $this.metadata());
$this.addClass("jqInitedFarbtastic");
fb = initFarbtastic(colorPicker, $this);

// click
$this.click(function() {
// set up the connection
fb = $.farbtastic(colorpicker).linkTo(this);

// compute position
var pos = $this.offset();
if (opts.position == 'left')
pos.left += $this.outerWidth();
if (opts.position == 'bottom')
pos.top += $this.outerHeight();
colorpicker.css({top:pos.top, left:pos.left});
var colorPickerPos, computePosInterval;

// link again
fb = initFarbtastic(colorPicker, $this);

// compute color picker position repeatedly in case of a scroll event
function computePos() {
var pos;

if ($this.length === 0 && computePosInterval) {
window.clearInterval(computePosInterval);
return;
}

pos = $this.offset();

if (opts.position === 'left') {
pos.left += $this.outerWidth();
}
if (opts.position === 'bottom') {
pos.top += $this.outerHeight();
}

if (!colorPickerPos || colorPickerPos.top !== pos.top || colorPickerPos.left !== pos.left) {
colorPickerPos = pos;
colorPicker.css({top:pos.top, left:pos.left});
}
}

computePos();
computePosInterval = window.setInterval(computePos, 500);

// show
var fb = colorpicker.farbtastic();
fb.debug();
fb.fadeIn(opts.fade);
}).

// blur
blur(function() {
colorpicker.farbtastic().hide();

colorPicker.farbtastic().fadeIn(opts.fade);

}).blur(function() {
colorPicker.farbtastic().hide();

// call our own callback
if (typeof(opts.callback) == 'function') {
opts.callback.call(fb, fb.color);
Expand All @@ -106,14 +142,15 @@
dark: '#000',
light: '#fff'
};

$(".jqFarbtasticFG:not(.jqInitedFarbtasticFG)").livequery(function() {
var $this = $(this);
var opts = $.extend({}, defaults, $this.metadata());
$this.addClass("jqInitedFarbtastic");
var bgColor = $this.css('background-color');
var fgColor = getFgColor(bgColor, opts.dark, opts.light);
$this.css({'color': fgColor });
var $this = $(this),
opts = $.extend({}, defaults, $this.data(), $this.metadata()),
bgColor = $this.css('background-color'),
fgColor = getFgColor(bgColor, opts.dark, opts.light);

$this.addClass("jqInitedFarbtastic").css({'color': fgColor });
});
});

})(jQuery);

0 comments on commit 9742085

Please sign in to comment.