fc77ee76d6
The primary license of the project is changing to: AGPL-3.0-or-later WITH Web-Template-Output-Additional-Permission-3.0-or-later The Additional Permission is designed to permit publicly distributed Javascript code to be relicensed under LGPL-3.0-or-later, but not server-side Javascript code. As such, we've relicensed here static Javscript files under LGPL-3.0-or-later, and those that run as part of build and/or server side under AGPL-3.0-or-later. Note that in future, Javascript files may be updated to be stronger copyleft license with the Additional Permission, particularly if they adapted to run on server side and/or turned into templates. Of course, we'd seek public discussion with the contributor community about such changes. This commit is one of the many steps to relicense the entire codebase. Documentation granting permission for this relicensing (from all past contributors who hold copyrights) is on file with Software Freedom Conservancy, Inc.
517 lines
20 KiB
JavaScript
517 lines
20 KiB
JavaScript
// License: LGPL-3.0-or-later
|
|
/*
|
|
colpick Color Picker
|
|
Copyright 2013 Jose Vargas. Licensed under GPL license. Based on Stefan Petre's Color Picker www.eyecon.ro, dual licensed under the MIT and GPL licenses
|
|
|
|
For usage and examples: colpick.com/plugin
|
|
*/
|
|
|
|
var colpick = function () {
|
|
var
|
|
tpl = '<div class="colpick"><div class="colpick_color"><div class="colpick_color_overlay1"><div class="colpick_color_overlay2"><div class="colpick_selector_outer"><div class="colpick_selector_inner"></div></div></div></div></div><div class="colpick_hue"><div class="colpick_hue_arrs"><div class="colpick_hue_larr"></div><div class="colpick_hue_rarr"></div></div></div><div class="colpick_new_color"></div><div class="colpick_current_color"></div><div class="colpick_hex_field"><div class="colpick_field_letter">#</div><input type="text" maxlength="6" size="6" /></div><div class="colpick_rgb_r colpick_field"><div class="colpick_field_letter">R</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_rgb_g colpick_field"><div class="colpick_field_letter">G</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_rgb_b colpick_field"><div class="colpick_field_letter">B</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsb_h colpick_field"><div class="colpick_field_letter">H</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsb_s colpick_field"><div class="colpick_field_letter">S</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsb_b colpick_field"><div class="colpick_field_letter">B</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_submit"></div></div>',
|
|
defaults = {
|
|
showEvent: 'click',
|
|
onShow: function () {},
|
|
onBeforeShow: function(){},
|
|
onHide: function () {},
|
|
onChange: function () {},
|
|
onSubmit: function () {},
|
|
colorScheme: 'light',
|
|
color: '3289c7',
|
|
livePreview: true,
|
|
flat: false,
|
|
layout: 'full',
|
|
submit: 1,
|
|
submitText: 'OK',
|
|
height: 156
|
|
},
|
|
//Fill the inputs of the plugin
|
|
fillRGBFields = function (hsb, cal) {
|
|
var rgb = hsbToRgb(hsb);
|
|
$(cal).data('colpick').fields
|
|
.eq(1).val(rgb.r).end()
|
|
.eq(2).val(rgb.g).end()
|
|
.eq(3).val(rgb.b).end();
|
|
},
|
|
fillHSBFields = function (hsb, cal) {
|
|
$(cal).data('colpick').fields
|
|
.eq(4).val(Math.round(hsb.h)).end()
|
|
.eq(5).val(Math.round(hsb.s)).end()
|
|
.eq(6).val(Math.round(hsb.b)).end();
|
|
},
|
|
fillHexFields = function (hsb, cal) {
|
|
$(cal).data('colpick').fields.eq(0).val(hsbToHex(hsb));
|
|
},
|
|
//Set the round selector position
|
|
setSelector = function (hsb, cal) {
|
|
$(cal).data('colpick').selector.css('backgroundColor', '#' + hsbToHex({h: hsb.h, s: 100, b: 100}));
|
|
$(cal).data('colpick').selectorIndic.css({
|
|
left: parseInt($(cal).data('colpick').height * hsb.s/100, 10),
|
|
top: parseInt($(cal).data('colpick').height * (100-hsb.b)/100, 10)
|
|
});
|
|
},
|
|
//Set the hue selector position
|
|
setHue = function (hsb, cal) {
|
|
$(cal).data('colpick').hue.css('top', parseInt($(cal).data('colpick').height - $(cal).data('colpick').height * hsb.h/360, 10));
|
|
},
|
|
//Set current and new colors
|
|
setCurrentColor = function (hsb, cal) {
|
|
$(cal).data('colpick').currentColor.css('backgroundColor', '#' + hsbToHex(hsb));
|
|
},
|
|
setNewColor = function (hsb, cal) {
|
|
$(cal).data('colpick').newColor.css('backgroundColor', '#' + hsbToHex(hsb));
|
|
},
|
|
//Called when the new color is changed
|
|
change = function (ev) {
|
|
var cal = $(this).parent().parent(), col;
|
|
if (this.parentNode.className.indexOf('_hex') > 0) {
|
|
cal.data('colpick').color = col = hexToHsb(fixHex(this.value));
|
|
fillRGBFields(col, cal.get(0));
|
|
fillHSBFields(col, cal.get(0));
|
|
} else if (this.parentNode.className.indexOf('_hsb') > 0) {
|
|
cal.data('colpick').color = col = fixHSB({
|
|
h: parseInt(cal.data('colpick').fields.eq(4).val(), 10),
|
|
s: parseInt(cal.data('colpick').fields.eq(5).val(), 10),
|
|
b: parseInt(cal.data('colpick').fields.eq(6).val(), 10)
|
|
});
|
|
fillRGBFields(col, cal.get(0));
|
|
fillHexFields(col, cal.get(0));
|
|
} else {
|
|
cal.data('colpick').color = col = rgbToHsb(fixRGB({
|
|
r: parseInt(cal.data('colpick').fields.eq(1).val(), 10),
|
|
g: parseInt(cal.data('colpick').fields.eq(2).val(), 10),
|
|
b: parseInt(cal.data('colpick').fields.eq(3).val(), 10)
|
|
}));
|
|
fillHexFields(col, cal.get(0));
|
|
fillHSBFields(col, cal.get(0));
|
|
}
|
|
setSelector(col, cal.get(0));
|
|
setHue(col, cal.get(0));
|
|
setNewColor(col, cal.get(0));
|
|
cal.data('colpick').onChange.apply(cal.parent(), [col, hsbToHex(col), hsbToRgb(col), cal.data('colpick').el, 0]);
|
|
},
|
|
//Change style on blur and on focus of inputs
|
|
blur = function (ev) {
|
|
$(this).parent().removeClass('colpick_focus');
|
|
},
|
|
focus = function () {
|
|
$(this).parent().parent().data('colpick').fields.parent().removeClass('colpick_focus');
|
|
$(this).parent().addClass('colpick_focus');
|
|
},
|
|
//Increment/decrement arrows functions
|
|
downIncrement = function (ev) {
|
|
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
|
|
var field = $(this).parent().find('input').focus();
|
|
var current = {
|
|
el: $(this).parent().addClass('colpick_slider'),
|
|
max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255),
|
|
y: ev.pageY,
|
|
field: field,
|
|
val: parseInt(field.val(), 10),
|
|
preview: $(this).parent().parent().data('colpick').livePreview
|
|
};
|
|
$(document).mouseup(current, upIncrement);
|
|
$(document).mousemove(current, moveIncrement);
|
|
},
|
|
moveIncrement = function (ev) {
|
|
ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val - ev.pageY + ev.data.y, 10))));
|
|
if (ev.data.preview) {
|
|
change.apply(ev.data.field.get(0), [true]);
|
|
}
|
|
return false;
|
|
},
|
|
upIncrement = function (ev) {
|
|
change.apply(ev.data.field.get(0), [true]);
|
|
ev.data.el.removeClass('colpick_slider').find('input').focus();
|
|
$(document).off('mouseup', upIncrement);
|
|
$(document).off('mousemove', moveIncrement);
|
|
return false;
|
|
},
|
|
//Hue slider functions
|
|
downHue = function (ev) {
|
|
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
|
|
var current = {
|
|
cal: $(this).parent(),
|
|
y: $(this).offset().top
|
|
};
|
|
$(document).on('mouseup touchend',current,upHue);
|
|
$(document).on('mousemove touchmove',current,moveHue);
|
|
|
|
var pageY = ((ev.type == 'touchstart') ? ev.originalEvent.changedTouches[0].pageY : ev.pageY );
|
|
change.apply(
|
|
current.cal.data('colpick')
|
|
.fields.eq(4).val(parseInt(360*(current.cal.data('colpick').height - (pageY - current.y))/current.cal.data('colpick').height, 10))
|
|
.get(0),
|
|
[current.cal.data('colpick').livePreview]
|
|
);
|
|
return false;
|
|
},
|
|
moveHue = function (ev) {
|
|
var pageY = ((ev.type == 'touchmove') ? ev.originalEvent.changedTouches[0].pageY : ev.pageY );
|
|
change.apply(
|
|
ev.data.cal.data('colpick')
|
|
.fields.eq(4).val(parseInt(360*(ev.data.cal.data('colpick').height - Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageY - ev.data.y))))/ev.data.cal.data('colpick').height, 10))
|
|
.get(0),
|
|
[ev.data.preview]
|
|
);
|
|
return false;
|
|
},
|
|
upHue = function (ev) {
|
|
fillRGBFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
|
|
fillHexFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
|
|
$(document).off('mouseup touchend',upHue);
|
|
$(document).off('mousemove touchmove',moveHue);
|
|
return false;
|
|
},
|
|
//Color selector functions
|
|
downSelector = function (ev) {
|
|
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
|
|
var current = {
|
|
cal: $(this).parent(),
|
|
pos: $(this).offset()
|
|
};
|
|
current.preview = current.cal.data('colpick').livePreview;
|
|
|
|
$(document).on('mouseup touchend',current,upSelector);
|
|
$(document).on('mousemove touchmove',current,moveSelector);
|
|
|
|
if(ev.type == 'touchstart') {
|
|
var pageX = ev.originalEvent.changedTouches[0].pageX;
|
|
var pageY = ev.originalEvent.changedTouches[0].pageY;
|
|
} else {
|
|
var pageX = ev.pageX;
|
|
var pageY = ev.pageY;
|
|
}
|
|
|
|
change.apply(
|
|
current.cal.data('colpick').fields
|
|
.eq(6).val(parseInt(100*(current.cal.data('colpick').height - (pageY - current.pos.top))/current.cal.data('colpick').height, 10)).end()
|
|
.eq(5).val(parseInt(100*(pageX - current.pos.left)/current.cal.data('colpick').height, 10))
|
|
.get(0),
|
|
[current.preview]
|
|
);
|
|
return false;
|
|
},
|
|
moveSelector = function (ev) {
|
|
if(ev.type == 'touchmove') {
|
|
var pageX = ev.originalEvent.changedTouches[0].pageX;
|
|
var pageY = ev.originalEvent.changedTouches[0].pageY;
|
|
} else {
|
|
var pageX = ev.pageX;
|
|
var pageY = ev.pageY;
|
|
}
|
|
|
|
change.apply(
|
|
ev.data.cal.data('colpick').fields
|
|
.eq(6).val(parseInt(100*(ev.data.cal.data('colpick').height - Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageY - ev.data.pos.top))))/ev.data.cal.data('colpick').height, 10)).end()
|
|
.eq(5).val(parseInt(100*(Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageX - ev.data.pos.left))))/ev.data.cal.data('colpick').height, 10))
|
|
.get(0),
|
|
[ev.data.preview]
|
|
);
|
|
return false;
|
|
},
|
|
upSelector = function (ev) {
|
|
fillRGBFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
|
|
fillHexFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
|
|
$(document).off('mouseup touchend',upSelector);
|
|
$(document).off('mousemove touchmove',moveSelector);
|
|
return false;
|
|
},
|
|
//Submit button
|
|
clickSubmit = function (ev) {
|
|
var cal = $(this).parent();
|
|
var col = cal.data('colpick').color;
|
|
cal.data('colpick').origColor = col;
|
|
setCurrentColor(col, cal.get(0));
|
|
cal.data('colpick').onSubmit(col, hsbToHex(col), hsbToRgb(col), cal.data('colpick').el);
|
|
},
|
|
//Show/hide the color picker
|
|
show = function (ev) {
|
|
// Prevent the trigger of any direct parent
|
|
ev.stopPropagation();
|
|
var cal = $('#' + $(this).data('colpickId'));
|
|
cal.data('colpick').onBeforeShow.apply(this, [cal.get(0)]);
|
|
var pos = $(this).offset();
|
|
var top = pos.top + this.offsetHeight;
|
|
var left = pos.left;
|
|
var viewPort = getViewport();
|
|
var calW = cal.width();
|
|
if (left + calW > viewPort.l + viewPort.w) {
|
|
left -= calW;
|
|
}
|
|
cal.css({left: left + 'px', top: top + 'px'});
|
|
if (cal.data('colpick').onShow.apply(this, [cal.get(0)]) != false) {
|
|
cal.show();
|
|
}
|
|
//Hide when user clicks outside
|
|
$('html').mousedown({cal:cal}, hide);
|
|
cal.mousedown(function(ev){ev.stopPropagation();})
|
|
},
|
|
hide = function (ev) {
|
|
if (ev.data.cal.data('colpick').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
|
|
ev.data.cal.hide();
|
|
}
|
|
$('html').off('mousedown', hide);
|
|
},
|
|
getViewport = function () {
|
|
var m = document.compatMode == 'CSS1Compat';
|
|
return {
|
|
l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
|
|
w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth)
|
|
};
|
|
},
|
|
//Fix the values if the user enters a negative or high value
|
|
fixHSB = function (hsb) {
|
|
return {
|
|
h: Math.min(360, Math.max(0, hsb.h)),
|
|
s: Math.min(100, Math.max(0, hsb.s)),
|
|
b: Math.min(100, Math.max(0, hsb.b))
|
|
};
|
|
},
|
|
fixRGB = function (rgb) {
|
|
return {
|
|
r: Math.min(255, Math.max(0, rgb.r)),
|
|
g: Math.min(255, Math.max(0, rgb.g)),
|
|
b: Math.min(255, Math.max(0, rgb.b))
|
|
};
|
|
},
|
|
fixHex = function (hex) {
|
|
var len = 6 - hex.length;
|
|
if (len > 0) {
|
|
var o = [];
|
|
for (var i=0; i<len; i++) {
|
|
o.push('0');
|
|
}
|
|
o.push(hex);
|
|
hex = o.join('');
|
|
}
|
|
return hex;
|
|
},
|
|
restoreOriginal = function () {
|
|
var cal = $(this).parent();
|
|
var col = cal.data('colpick').origColor;
|
|
cal.data('colpick').color = col;
|
|
fillRGBFields(col, cal.get(0));
|
|
fillHexFields(col, cal.get(0));
|
|
fillHSBFields(col, cal.get(0));
|
|
setSelector(col, cal.get(0));
|
|
setHue(col, cal.get(0));
|
|
setNewColor(col, cal.get(0));
|
|
};
|
|
return {
|
|
init: function (opt) {
|
|
opt = $.extend({}, defaults, opt||{});
|
|
//Set color
|
|
if (typeof opt.color == 'string') {
|
|
opt.color = hexToHsb(opt.color);
|
|
} else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) {
|
|
opt.color = rgbToHsb(opt.color);
|
|
} else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) {
|
|
opt.color = fixHSB(opt.color);
|
|
} else {
|
|
return this;
|
|
}
|
|
|
|
//For each selected DOM element
|
|
return this.each(function () {
|
|
//If the element does not have an ID
|
|
if (!$(this).data('colpickId')) {
|
|
var options = $.extend({}, opt);
|
|
options.origColor = opt.color;
|
|
//Generate and assign a random ID
|
|
var id = 'collorpicker_' + parseInt(Math.random() * 1000);
|
|
$(this).data('colpickId', id);
|
|
//Set the tpl's ID and get the HTML
|
|
var cal = $(tpl).attr('id', id);
|
|
//Add class according to layout
|
|
cal.addClass('colpick_'+options.layout+(options.submit?'':' colpick_'+options.layout+'_ns'));
|
|
//Add class if the color scheme is not default
|
|
if(options.colorScheme != 'light') {
|
|
cal.addClass('colpick_'+options.colorScheme);
|
|
}
|
|
//Setup submit button
|
|
cal.find('div.colpick_submit').html(options.submitText).click(clickSubmit);
|
|
//Setup input fields
|
|
options.fields = cal.find('input').change(change).blur(blur).focus(focus);
|
|
cal.find('div.colpick_field_arrs').mousedown(downIncrement).end().find('div.colpick_current_color').click(restoreOriginal);
|
|
//Setup hue selector
|
|
options.selector = cal.find('div.colpick_color').on('mousedown touchstart',downSelector);
|
|
options.selectorIndic = options.selector.find('div.colpick_selector_outer');
|
|
//Store parts of the plugin
|
|
options.el = this;
|
|
options.hue = cal.find('div.colpick_hue_arrs');
|
|
var huebar = options.hue.parent();
|
|
//Paint the hue bar
|
|
var UA = navigator.userAgent.toLowerCase();
|
|
var isIE = navigator.appName === 'Microsoft Internet Explorer';
|
|
var IEver = isIE ? parseFloat( UA.match( /msie ([0-9]{1,}[\.0-9]{0,})/ )[1] ) : 0;
|
|
var ngIE = ( isIE && IEver < 10 );
|
|
var stops = ['#ff0000','#ff0080','#ff00ff','#8000ff','#0000ff','#0080ff','#00ffff','#00ff80','#00ff00','#80ff00','#ffff00','#ff8000','#ff0000'];
|
|
if(ngIE) {
|
|
var i, div;
|
|
for(i=0; i<=11; i++) {
|
|
div = $('<div></div>').attr('style','height:8.333333%; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='+stops[i]+', endColorstr='+stops[i+1]+'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='+stops[i]+', endColorstr='+stops[i+1]+')";');
|
|
huebar.append(div);
|
|
}
|
|
} else {
|
|
var stopList = stops.join(',');
|
|
huebar.attr('style','background:-webkit-linear-gradient(top,'+stopList+'); background: -o-linear-gradient(top,'+stopList+'); background: -ms-linear-gradient(top,'+stopList+'); background:-moz-linear-gradient(top,'+stopList+'); -webkit-linear-gradient(top,'+stopList+'); background:linear-gradient(to bottom,'+stopList+'); ');
|
|
}
|
|
cal.find('div.colpick_hue').on('mousedown touchstart',downHue);
|
|
options.newColor = cal.find('div.colpick_new_color');
|
|
options.currentColor = cal.find('div.colpick_current_color');
|
|
//Store options and fill with default color
|
|
cal.data('colpick', options);
|
|
fillRGBFields(options.color, cal.get(0));
|
|
fillHSBFields(options.color, cal.get(0));
|
|
fillHexFields(options.color, cal.get(0));
|
|
setHue(options.color, cal.get(0));
|
|
setSelector(options.color, cal.get(0));
|
|
setCurrentColor(options.color, cal.get(0));
|
|
setNewColor(options.color, cal.get(0));
|
|
//Append to body if flat=false, else show in place
|
|
if (options.flat) {
|
|
cal.appendTo(this).show();
|
|
cal.css({
|
|
position: 'relative',
|
|
display: 'block'
|
|
});
|
|
} else {
|
|
cal.appendTo(document.body);
|
|
$(this).on(options.showEvent, show);
|
|
cal.css({
|
|
position:'absolute'
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
//Shows the picker
|
|
showPicker: function() {
|
|
return this.each( function () {
|
|
if ($(this).data('colpickId')) {
|
|
show.apply(this);
|
|
}
|
|
});
|
|
},
|
|
//Hides the picker
|
|
hidePicker: function() {
|
|
return this.each( function () {
|
|
if ($(this).data('colpickId')) {
|
|
$('#' + $(this).data('colpickId')).hide();
|
|
}
|
|
});
|
|
},
|
|
//Sets a color as new and current (default)
|
|
setColor: function(col, setCurrent) {
|
|
setCurrent = (typeof setCurrent === "undefined") ? 1 : setCurrent;
|
|
if (typeof col == 'string') {
|
|
col = hexToHsb(col);
|
|
} else if (col.r != undefined && col.g != undefined && col.b != undefined) {
|
|
col = rgbToHsb(col);
|
|
} else if (col.h != undefined && col.s != undefined && col.b != undefined) {
|
|
col = fixHSB(col);
|
|
} else {
|
|
return this;
|
|
}
|
|
return this.each(function(){
|
|
if ($(this).data('colpickId')) {
|
|
var cal = $('#' + $(this).data('colpickId'));
|
|
cal.data('colpick').color = col;
|
|
cal.data('colpick').origColor = col;
|
|
fillRGBFields(col, cal.get(0));
|
|
fillHSBFields(col, cal.get(0));
|
|
fillHexFields(col, cal.get(0));
|
|
setHue(col, cal.get(0));
|
|
setSelector(col, cal.get(0));
|
|
|
|
setNewColor(col, cal.get(0));
|
|
cal.data('colpick').onChange.apply(cal.parent(), [col, hsbToHex(col), hsbToRgb(col), cal.data('colpick').el, 1]);
|
|
if(setCurrent) {
|
|
setCurrentColor(col, cal.get(0));
|
|
}
|
|
}
|
|
});
|
|
}
|
|
};
|
|
}();
|
|
//Color space convertions
|
|
var hexToRgb = function (hex) {
|
|
var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
|
|
return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
|
|
};
|
|
var hexToHsb = function (hex) {
|
|
return rgbToHsb(hexToRgb(hex));
|
|
};
|
|
var rgbToHsb = function (rgb) {
|
|
var hsb = {h: 0, s: 0, b: 0};
|
|
var min = Math.min(rgb.r, rgb.g, rgb.b);
|
|
var max = Math.max(rgb.r, rgb.g, rgb.b);
|
|
var delta = max - min;
|
|
hsb.b = max;
|
|
hsb.s = max != 0 ? 255 * delta / max : 0;
|
|
if (hsb.s != 0) {
|
|
if (rgb.r == max) hsb.h = (rgb.g - rgb.b) / delta;
|
|
else if (rgb.g == max) hsb.h = 2 + (rgb.b - rgb.r) / delta;
|
|
else hsb.h = 4 + (rgb.r - rgb.g) / delta;
|
|
} else hsb.h = -1;
|
|
hsb.h *= 60;
|
|
if (hsb.h < 0) hsb.h += 360;
|
|
hsb.s *= 100/255;
|
|
hsb.b *= 100/255;
|
|
return hsb;
|
|
};
|
|
var hsbToRgb = function (hsb) {
|
|
var rgb = {};
|
|
var h = hsb.h;
|
|
var s = hsb.s*255/100;
|
|
var v = hsb.b*255/100;
|
|
if(s == 0) {
|
|
rgb.r = rgb.g = rgb.b = v;
|
|
} else {
|
|
var t1 = v;
|
|
var t2 = (255-s)*v/255;
|
|
var t3 = (t1-t2)*(h%60)/60;
|
|
if(h==360) h = 0;
|
|
if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}
|
|
else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}
|
|
else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}
|
|
else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}
|
|
else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}
|
|
else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}
|
|
else {rgb.r=0; rgb.g=0; rgb.b=0}
|
|
}
|
|
return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
|
|
};
|
|
var rgbToHex = function (rgb) {
|
|
var hex = [
|
|
rgb.r.toString(16),
|
|
rgb.g.toString(16),
|
|
rgb.b.toString(16)
|
|
];
|
|
$.each(hex, function (nr, val) {
|
|
if (val.length == 1) {
|
|
hex[nr] = '0' + val;
|
|
}
|
|
});
|
|
return hex.join('');
|
|
};
|
|
var hsbToHex = function (hsb) {
|
|
return rgbToHex(hsbToRgb(hsb));
|
|
};
|
|
$.fn.extend({
|
|
colpick: colpick.init,
|
|
colpickHide: colpick.hidePicker,
|
|
colpickShow: colpick.showPicker,
|
|
colpickSetColor: colpick.setColor
|
|
});
|
|
$.extend({
|
|
colpick:{
|
|
rgbToHex: rgbToHex,
|
|
rgbToHsb: rgbToHsb,
|
|
hsbToHex: hsbToHex,
|
|
hsbToRgb: hsbToRgb,
|
|
hexToHsb: hexToHsb,
|
|
hexToRgb: hexToRgb
|
|
}
|
|
});
|