Browse Source
* commit 'd5d472ea6ec237fc051b5299cac856965744aab9': merge BI-41321 refactor: farbtastic去jqueryes6
windy
6 years ago
25 changed files with 1428 additions and 2126 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,37 +1,279 @@ |
|||||||
/** |
BI.Farbtastic = BI.inherit(BI.BasicButton, { |
||||||
* 选色控件 |
|
||||||
* |
constants: { |
||||||
* Created by GUY on 2015/11/16. |
RADIUS: 84, |
||||||
* @class BI.Farbtastic |
SQUARE: 100, |
||||||
* @extends BI.Widget |
WIDTH: 194 |
||||||
*/ |
}, |
||||||
BI.Farbtastic = BI.inherit(BI.Widget, { |
|
||||||
|
props: { |
||||||
_defaultConfig: function () { |
|
||||||
return BI.extend(BI.Farbtastic.superclass._defaultConfig.apply(this, arguments), { |
|
||||||
baseCls: "bi-farbtastic", |
baseCls: "bi-farbtastic", |
||||||
width: 195, |
width: 195, |
||||||
height: 195 |
height: 195, |
||||||
}); |
stopPropagation: true, |
||||||
|
value: "#000000" |
||||||
}, |
}, |
||||||
|
|
||||||
_init: function () { |
render: function () { |
||||||
BI.Farbtastic.superclass._init.apply(this, arguments); |
var self = this; |
||||||
|
return { |
||||||
|
type: "bi.absolute", |
||||||
|
items: [{ |
||||||
|
el: { |
||||||
|
type: "bi.layout", |
||||||
|
cls: "", |
||||||
|
ref: function (_ref) { |
||||||
|
self.colorWrapper = _ref; |
||||||
|
} |
||||||
|
}, |
||||||
|
top: 47, |
||||||
|
left: 47, |
||||||
|
width: 101, |
||||||
|
height: 101 |
||||||
|
}, { |
||||||
|
el: { |
||||||
|
type: "bi.layout", |
||||||
|
cls: "wheel", |
||||||
|
ref: function (_ref) { |
||||||
|
self.wheel = _ref; |
||||||
|
} |
||||||
|
}, |
||||||
|
left: 0, |
||||||
|
right: 0, |
||||||
|
top: 0, |
||||||
|
bottom: 0 |
||||||
|
}, { |
||||||
|
el: { |
||||||
|
type: "bi.layout", |
||||||
|
cls: "overlay", |
||||||
|
ref: function (_ref) { |
||||||
|
self.overlay = _ref; |
||||||
|
} |
||||||
|
}, |
||||||
|
top: 47, |
||||||
|
left: 47, |
||||||
|
width: 101, |
||||||
|
height: 101 |
||||||
|
}, { |
||||||
|
el: { |
||||||
|
type: "bi.layout", |
||||||
|
cls: "marker", |
||||||
|
ref: function (_ref) { |
||||||
|
self.hMarker = _ref; |
||||||
|
}, |
||||||
|
scrollable: false, |
||||||
|
width: 17, |
||||||
|
height: 17 |
||||||
|
} |
||||||
|
}, { |
||||||
|
el: { |
||||||
|
type: "bi.layout", |
||||||
|
cls: "marker", |
||||||
|
ref: function (_ref) { |
||||||
|
self.slMarker = _ref; |
||||||
|
}, |
||||||
|
scrollable: false, |
||||||
|
width: 17, |
||||||
|
height: 17 |
||||||
|
} |
||||||
|
}] |
||||||
|
}; |
||||||
}, |
}, |
||||||
|
|
||||||
mounted: function () { |
mounted: function () { |
||||||
var self = this; |
var o = this.options; |
||||||
this.farbtastic = $.farbtastic(this.element, function (v) { |
if (BI.isKey(o.value)) { |
||||||
self.fireEvent(BI.Farbtastic.EVENT_CHANGE, self.getValue(), self); |
this.setValue(o.value); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_unpack: function (color) { |
||||||
|
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) { |
||||||
|
return [parseInt("0x" + color.substring(1, 2)) / 15, |
||||||
|
parseInt("0x" + color.substring(2, 3)) / 15, |
||||||
|
parseInt("0x" + color.substring(3, 4)) / 15]; |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_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); |
||||||
|
}, |
||||||
|
|
||||||
|
_setColor: function (color) { |
||||||
|
var unpack = this._unpack(color); |
||||||
|
if (this.value !== color && unpack) { |
||||||
|
this.value = color; |
||||||
|
this.rgb = unpack; |
||||||
|
this.hsl = this._RGBToHSL(this.rgb); |
||||||
|
this._updateDisplay(); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_setHSL: function (hsl) { |
||||||
|
this.hsl = hsl; |
||||||
|
this.rgb = this._HSLToRGB(hsl); |
||||||
|
this.value = this._pack(this.rgb); |
||||||
|
this._updateDisplay(); |
||||||
|
return this; |
||||||
|
}, |
||||||
|
|
||||||
|
_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)]; |
||||||
|
}, |
||||||
|
|
||||||
|
_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; |
||||||
|
}, |
||||||
|
|
||||||
|
_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]; |
||||||
|
}, |
||||||
|
|
||||||
|
_updateDisplay: function () { |
||||||
|
var angle = this.hsl[0] * 6.28; |
||||||
|
this.hMarker.element.css({ |
||||||
|
left: Math.round(Math.sin(angle) * this.constants.RADIUS + this.constants.WIDTH / 2) + "px", |
||||||
|
top: Math.round(-Math.cos(angle) * this.constants.RADIUS + this.constants.WIDTH / 2) + "px" |
||||||
|
}); |
||||||
|
|
||||||
|
this.slMarker.element.css({ |
||||||
|
left: Math.round(this.constants.SQUARE * (.5 - this.hsl[1]) + this.constants.WIDTH / 2) + "px", |
||||||
|
top: Math.round(this.constants.SQUARE * (.5 - this.hsl[2]) + this.constants.WIDTH / 2) + "px" |
||||||
}); |
}); |
||||||
|
|
||||||
|
// Saturation/Luminance gradient
|
||||||
|
this.colorWrapper.element.css("backgroundColor", this._pack(this._HSLToRGB([this.hsl[0], 1, 0.5]))); |
||||||
|
|
||||||
|
this.fireEvent(BI.Farbtastic.EVENT_CHANGE, this.getValue(), this); |
||||||
|
}, |
||||||
|
|
||||||
|
_absolutePosition: function (el) { |
||||||
|
var r = {x: el.offsetLeft, y: el.offsetTop}; |
||||||
|
// Resolve relative to offsetParent
|
||||||
|
if (el.offsetParent) { |
||||||
|
var tmp = this._absolutePosition(el.offsetParent); |
||||||
|
r.x += tmp.x; |
||||||
|
r.y += tmp.y; |
||||||
|
} |
||||||
|
return r; |
||||||
|
}, |
||||||
|
|
||||||
|
_widgetCoords: function (event) { |
||||||
|
var x, y; |
||||||
|
var el = event.target || event.srcElement; |
||||||
|
var reference = this.wheel.element[0]; |
||||||
|
|
||||||
|
if (typeof event.offsetX !== "undefined") { |
||||||
|
// Use offset coordinates and find common offsetParent
|
||||||
|
var pos = {x: event.offsetX, y: event.offsetY}; |
||||||
|
|
||||||
|
// Send the coordinates upwards through the offsetParent chain.
|
||||||
|
var e = el; |
||||||
|
while (e) { |
||||||
|
e.mouseX = pos.x; |
||||||
|
e.mouseY = pos.y; |
||||||
|
pos.x += e.offsetLeft; |
||||||
|
pos.y += e.offsetTop; |
||||||
|
e = e.offsetParent; |
||||||
|
} |
||||||
|
|
||||||
|
// Look for the coordinates starting from the wheel widget.
|
||||||
|
var e = reference; |
||||||
|
var offset = {x: 0, y: 0}; |
||||||
|
while (e) { |
||||||
|
if (typeof e.mouseX !== "undefined") { |
||||||
|
x = e.mouseX - offset.x; |
||||||
|
y = e.mouseY - offset.y; |
||||||
|
break; |
||||||
|
} |
||||||
|
offset.x += e.offsetLeft; |
||||||
|
offset.y += e.offsetTop; |
||||||
|
e = e.offsetParent; |
||||||
|
} |
||||||
|
|
||||||
|
// Reset stored coordinates
|
||||||
|
e = el; |
||||||
|
while (e) { |
||||||
|
e.mouseX = undefined; |
||||||
|
e.mouseY = undefined; |
||||||
|
e = e.offsetParent; |
||||||
|
} |
||||||
|
} else { |
||||||
|
// Use absolute coordinates
|
||||||
|
var pos = this._absolutePosition(reference); |
||||||
|
x = (event.pageX || 0) - pos.x; |
||||||
|
y = (event.pageY || 0) - pos.y; |
||||||
|
} |
||||||
|
// Subtract distance to middle
|
||||||
|
return {x: x - this.constants.WIDTH / 2, y: y - this.constants.WIDTH / 2}; |
||||||
|
}, |
||||||
|
|
||||||
|
_doMouseMove: function (event) { |
||||||
|
var pos = this._widgetCoords(event); |
||||||
|
|
||||||
|
// Set new HSL parameters
|
||||||
|
if (this.circleDrag) { |
||||||
|
var hue = Math.atan2(pos.x, -pos.y) / 6.28; |
||||||
|
if (hue < 0) hue += 1; |
||||||
|
this._setHSL([hue, this.hsl[1], this.hsl[2]]); |
||||||
|
} else { |
||||||
|
var sat = Math.max(0, Math.min(1, -(pos.x / this.constants.SQUARE) + .5)); |
||||||
|
var lum = Math.max(0, Math.min(1, -(pos.y / this.constants.SQUARE) + .5)); |
||||||
|
this._setHSL([this.hsl[0], sat, lum]); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
doClick: function (event) { |
||||||
|
var pos = this._widgetCoords(event); |
||||||
|
this.circleDrag = Math.max(Math.abs(pos.x), Math.abs(pos.y)) * 2 > this.constants.SQUARE; |
||||||
|
|
||||||
|
// Process
|
||||||
|
this._doMouseMove(event); |
||||||
|
return false; |
||||||
}, |
}, |
||||||
|
|
||||||
setValue: function (color) { |
setValue: function (color) { |
||||||
this.farbtastic.setColor(color); |
this._setColor(color); |
||||||
}, |
}, |
||||||
|
|
||||||
getValue: function () { |
getValue: function () { |
||||||
return this.farbtastic.color; |
return this.value; |
||||||
} |
} |
||||||
}); |
}); |
||||||
BI.Farbtastic.EVENT_CHANGE = "Farbtastic.EVENT_CHANGE"; |
BI.Farbtastic.EVENT_CHANGE = "Farbtastic.EVENT_CHANGE"; |
||||||
|
|||||||
@ -1,340 +0,0 @@ |
|||||||
/** |
|
||||||
* 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 |
|
||||||
*/ |
|
||||||
|
|
||||||
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\"><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>"); |
|
||||||
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 && this.value != fb.color) { |
|
||||||
fb.setColor(this.value); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
/** |
|
||||||
* Change color with HTML syntax #123456 |
|
||||||
*/ |
|
||||||
fb.setColor = function (color) { |
|
||||||
var unpack = fb.unpack(color); |
|
||||||
if (fb.color != color && unpack) { |
|
||||||
fb.color = color; |
|
||||||
fb.rgb = unpack; |
|
||||||
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 x, y; |
|
||||||
var el = event.target || event.srcElement; |
|
||||||
var reference = fb.wheel; |
|
||||||
|
|
||||||
if (typeof event.offsetX !== "undefined") { |
|
||||||
// Use offset coordinates and find common offsetParent
|
|
||||||
var pos = { x: event.offsetX, y: event.offsetY }; |
|
||||||
|
|
||||||
// Send the coordinates upwards through the offsetParent chain.
|
|
||||||
var e = el; |
|
||||||
while (e) { |
|
||||||
e.mouseX = pos.x; |
|
||||||
e.mouseY = pos.y; |
|
||||||
pos.x += e.offsetLeft; |
|
||||||
pos.y += e.offsetTop; |
|
||||||
e = e.offsetParent; |
|
||||||
} |
|
||||||
|
|
||||||
// Look for the coordinates starting from the wheel widget.
|
|
||||||
var e = reference; |
|
||||||
var offset = { x: 0, y: 0 }; |
|
||||||
while (e) { |
|
||||||
if (typeof e.mouseX !== "undefined") { |
|
||||||
x = e.mouseX - offset.x; |
|
||||||
y = e.mouseY - offset.y; |
|
||||||
break; |
|
||||||
} |
|
||||||
offset.x += e.offsetLeft; |
|
||||||
offset.y += e.offsetTop; |
|
||||||
e = e.offsetParent; |
|
||||||
} |
|
||||||
|
|
||||||
// Reset stored coordinates
|
|
||||||
e = el; |
|
||||||
while (e) { |
|
||||||
e.mouseX = undefined; |
|
||||||
e.mouseY = undefined; |
|
||||||
e = e.offsetParent; |
|
||||||
} |
|
||||||
} else { |
|
||||||
// Use absolute coordinates
|
|
||||||
var pos = fb.absolutePosition(reference); |
|
||||||
x = (event.pageX || 0 * (event.clientX + $("html").get(0).scrollLeft)) - pos.x; |
|
||||||
y = (event.pageY || 0 * (event.clientY + $("html").get(0).scrollTop)) - pos.y; |
|
||||||
} |
|
||||||
// Subtract distance to middle
|
|
||||||
return { x: x - fb.width / 2, y: y - fb.width / 2 }; |
|
||||||
}; |
|
||||||
|
|
||||||
/** |
|
||||||
* Mousedown handler |
|
||||||
*/ |
|
||||||
fb.click = 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.value && this.value != fb.color) { |
|
||||||
this.value = fb.color; |
|
||||||
} |
|
||||||
}); |
|
||||||
} else if (typeof fb.callback === "function") { |
|
||||||
fb.callback.call(fb, fb.color); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
/** |
|
||||||
* Get absolute position of element |
|
||||||
*/ |
|
||||||
fb.absolutePosition = function (el) { |
|
||||||
var r = { x: el.offsetLeft, y: el.offsetTop }; |
|
||||||
// Resolve relative to offsetParent
|
|
||||||
if (el.offsetParent) { |
|
||||||
var tmp = fb.absolutePosition(el.offsetParent); |
|
||||||
r.x += tmp.x; |
|
||||||
r.y += tmp.y; |
|
||||||
} |
|
||||||
return r; |
|
||||||
}; |
|
||||||
|
|
||||||
/* 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.unpack = function (color) { |
|
||||||
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) { |
|
||||||
return [parseInt("0x" + color.substring(1, 2)) / 15, |
|
||||||
parseInt("0x" + color.substring(2, 3)) / 15, |
|
||||||
parseInt("0x" + color.substring(3, 4)) / 15]; |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
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).click(fb.click); |
|
||||||
|
|
||||||
// Init color
|
|
||||||
fb.setColor("#000000"); |
|
||||||
|
|
||||||
// Set linked elements/callback
|
|
||||||
if (callback) { |
|
||||||
fb.linkTo(callback); |
|
||||||
} |
|
||||||
}; |
|
||||||
@ -1,29 +1,6 @@ |
|||||||
.farbtastic { |
.bi-farbtastic * { |
||||||
position: relative; |
|
||||||
} |
|
||||||
.farbtastic * { |
|
||||||
position: absolute; |
|
||||||
cursor: crosshair; |
cursor: crosshair; |
||||||
} |
} |
||||||
.farbtastic, |
.bi-farbtastic .marker { |
||||||
.farbtastic .wheel { |
|
||||||
width: 195px; |
|
||||||
height: 195px; |
|
||||||
} |
|
||||||
.farbtastic .color, |
|
||||||
.farbtastic .overlay { |
|
||||||
top: 47px; |
|
||||||
left: 47px; |
|
||||||
width: 101px; |
|
||||||
height: 101px; |
|
||||||
} |
|
||||||
.farbtastic .wheel { |
|
||||||
width: 195px; |
|
||||||
height: 195px; |
|
||||||
} |
|
||||||
.farbtastic .marker { |
|
||||||
width: 17px; |
|
||||||
height: 17px; |
|
||||||
margin: -8px 0 0 -8px; |
margin: -8px 0 0 -8px; |
||||||
overflow: hidden; |
|
||||||
} |
} |
||||||
|
|||||||
Loading…
Reference in new issue