Fix for farbtastic in IE9, I had to recreate the file because the original commit was so messy

pull/122/merge
John McLear 2011-08-21 18:48:11 +01:00 committed by Peter 'Pita' Martischka
parent 0b18e46bc3
commit 1df9d04e04
1 changed files with 21 additions and 28 deletions

View File

@ -1,8 +1,7 @@
// Farbtastic 2.0 alpha // Farbtastic 2.0 alpha
(function ($) { (function ($) {
var __debug = false; var __debug = true;
var __factor = 0.5; var __factor = 0.5;
$.fn.farbtastic = function (options) { $.fn.farbtastic = function (options) {
@ -75,14 +74,23 @@ $._farbtastic = function (container, options) {
convertedHSL[1] = hsl[1]*__factor+((1-__factor)/2); convertedHSL[1] = hsl[1]*__factor+((1-__factor)/2);
convertedHSL[2] = hsl[2]*__factor+((1-__factor)/2); convertedHSL[2] = hsl[2]*__factor+((1-__factor)/2);
fb.rgb = fb.HSLToRGB(convertedHSL); fb.rgb = fb.HSLToRGB(hsl);
fb.color = fb.pack(fb.rgb); fb.color = fb.pack(fb.rgb);
fb.updateDisplay(); fb.updateDisplay();
return this; return this;
} }
///////////////////////////////////////////////////// /////////////////////////////////////////////////////
//excanvas-compatible building of canvases
fb._makeCanvas = function(className){
var c = document.createElement('canvas');
if (!c.getContext) { // excanvas hack
c = window.G_vmlCanvasManager.initElement(c);
c.getContext(); //this creates the excanvas children
}
$(c).addClass(className);
return c;
}
/** /**
* Initialize the color picker widget. * Initialize the color picker widget.
@ -98,27 +106,15 @@ $._farbtastic = function (container, options) {
.html( .html(
'<div class="farbtastic" style="position: relative">' + '<div class="farbtastic" style="position: relative">' +
'<div class="farbtastic-solid"></div>' + '<div class="farbtastic-solid"></div>' +
'<canvas class="farbtastic-mask"></canvas>' +
'<canvas class="farbtastic-overlay"></canvas>' +
'</div>' '</div>'
) )
.children('.farbtastic')
.append(fb._makeCanvas('farbtastic-mask'))
.append(fb._makeCanvas('farbtastic-overlay'))
.end()
.find('*').attr(dim).css(dim).end() .find('*').attr(dim).css(dim).end()
.find('div>*').css('position', 'absolute'); .find('div>*').css('position', 'absolute');
// IE Fix: Recreate canvas elements with doc.createElement and excanvas.
$.browser.msie && $('canvas', container).each(function () {
// Fetch info.
var attr = { 'class': $(this).attr('class'), style: this.getAttribute('style') },
e = document.createElement('canvas');
// Replace element.
$(this).before($(e).attr(attr)).remove();
// Init with explorerCanvas.
G_vmlCanvasManager && G_vmlCanvasManager.initElement(e);
// Set explorerCanvas elements dimensions and absolute positioning.
$(e).attr(dim).css(dim).css('position', 'absolute')
.find('*').attr(dim).css(dim);
});
// Determine layout // Determine layout
fb.radius = (options.width - options.wheelWidth) / 2 - 1; fb.radius = (options.width - options.wheelWidth) / 2 - 1;
fb.square = Math.floor((fb.radius - options.wheelWidth / 2) * 0.7) - 1; fb.square = Math.floor((fb.radius - options.wheelWidth / 2) * 0.7) - 1;
@ -223,7 +219,6 @@ $._farbtastic = function (container, options) {
var size = fb.square * 2, sq = fb.square; var size = fb.square * 2, sq = fb.square;
function calculateMask(sizex, sizey, outputPixel) { function calculateMask(sizex, sizey, outputPixel) {
var isx = 1 / sizex, isy = 1 / sizey; var isx = 1 / sizex, isy = 1 / sizey;
for (var y = 0; y <= sizey; ++y) { for (var y = 0; y <= sizey; ++y) {
var l = 1 - y * isy; var l = 1 - y * isy;
for (var x = 0; x <= sizex; ++x) { for (var x = 0; x <= sizex; ++x) {
@ -317,7 +312,6 @@ $._farbtastic = function (container, options) {
y2 = 2 * fb.square * (.5 - fb.hsl[2]), y2 = 2 * fb.square * (.5 - fb.hsl[2]),
c1 = fb.invert ? '#fff' : '#000', c1 = fb.invert ? '#fff' : '#000',
c2 = fb.invert ? '#000' : '#fff'; c2 = fb.invert ? '#000' : '#fff';
var circles = [ var circles = [
{ x: x1, y: y1, r: r, c: '#000', lw: lw + 1 }, { x: x1, y: y1, r: r, c: '#000', lw: lw + 1 },
{ x: x1, y: y1, r: fb.markerSize, c: '#fff', lw: lw }, { x: x1, y: y1, r: fb.markerSize, c: '#fff', lw: lw },
@ -417,7 +411,6 @@ $._farbtastic = function (container, options) {
else { else {
var sat = Math.max(0, Math.min(1, -(pos.x / fb.square / 2) + .5)); var sat = Math.max(0, Math.min(1, -(pos.x / fb.square / 2) + .5));
var lum = Math.max(0, Math.min(1, -(pos.y / fb.square / 2) + .5)); var lum = Math.max(0, Math.min(1, -(pos.y / fb.square / 2) + .5));
fb.setHSL([fb.hsl[0], sat, lum]); fb.setHSL([fb.hsl[0], sat, lum]);
} }
return false; return false;