diff --git a/static/js/farbtastic.js b/static/js/farbtastic.js index 7bc99487a..de2a43d19 100644 --- a/static/js/farbtastic.js +++ b/static/js/farbtastic.js @@ -1,8 +1,7 @@ // Farbtastic 2.0 alpha (function ($) { -var __debug = false; - +var __debug = true; var __factor = 0.5; $.fn.farbtastic = function (options) { @@ -68,21 +67,30 @@ $._farbtastic = function (container, options) { /** * Change color with HSL triplet [0..1, 0..1, 0..1] */ - fb.setHSL = function (hsl) { + fb.setHSL = function (hsl) { fb.hsl = hsl; - + var convertedHSL = [hsl[0]] convertedHSL[1] = hsl[1]*__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.updateDisplay(); - 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. @@ -98,27 +106,15 @@ $._farbtastic = function (container, options) { .html( '
' + '
' + - '' + - '' + '
' ) + .children('.farbtastic') + .append(fb._makeCanvas('farbtastic-mask')) + .append(fb._makeCanvas('farbtastic-overlay')) + .end() .find('*').attr(dim).css(dim).end() .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 fb.radius = (options.width - options.wheelWidth) / 2 - 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; function calculateMask(sizex, sizey, outputPixel) { var isx = 1 / sizex, isy = 1 / sizey; - for (var y = 0; y <= sizey; ++y) { var l = 1 - y * isy; for (var x = 0; x <= sizex; ++x) { @@ -231,10 +226,10 @@ $._farbtastic = function (container, options) { // From sat/lum to alpha and color (grayscale) var a = 1 - 2 * Math.min(l * s, (1 - l) * s); var c = (a > 0) ? ((2 * l - 1 + a) * .5 / a) : 0; - + a = a*__factor+(1-__factor)/2; c = c*__factor+(1-__factor)/2; - + outputPixel(x, y, c, a); } } @@ -317,7 +312,6 @@ $._farbtastic = function (container, options) { y2 = 2 * fb.square * (.5 - fb.hsl[2]), c1 = fb.invert ? '#fff' : '#000', c2 = fb.invert ? '#000' : '#fff'; - var circles = [ { x: x1, y: y1, r: r, c: '#000', lw: lw + 1 }, { x: x1, y: y1, r: fb.markerSize, c: '#fff', lw: lw }, @@ -417,7 +411,6 @@ $._farbtastic = function (container, options) { else { 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)); - fb.setHSL([fb.hsl[0], sat, lum]); } return false;