From b73b0bcb982ca6255cbb523e50a2072e000b1e34 Mon Sep 17 00:00:00 2001 From: Richard Hansen Date: Tue, 26 Jan 2021 04:06:34 -0500 Subject: [PATCH] farbtastic: Minimize diff to upstream This should make it easier to upgrade to the latest version. --- src/static/js/farbtastic.js | 101 +++++++++++++++++++++++------------- 1 file changed, 64 insertions(+), 37 deletions(-) diff --git a/src/static/js/farbtastic.js b/src/static/js/farbtastic.js index 0d323b640..78edcd094 100644 --- a/src/static/js/farbtastic.js +++ b/src/static/js/farbtastic.js @@ -1,5 +1,3 @@ -'use strict'; - // Farbtastic 2.0 alpha // Original can be found at: // https://github.com/mattfarina/farbtastic/blob/71ca15f4a09c8e5a08a1b0d1cf37ef028adf22f0/src/farbtastic.js @@ -7,7 +5,7 @@ // https://github.com/mattfarina/farbtastic/blob/71ca15f4a09c8e5a08a1b0d1cf37ef028adf22f0/LICENSE.txt // edited by Sebastian Castro on 2020-04-06 (function ($) { - + var __debug = false; var __factor = 0.8; @@ -23,7 +21,7 @@ $.farbtastic = function (container, options) { $._farbtastic = function (container, options) { var fb = this; - + ///////////////////////////////////////////////////// /** @@ -87,11 +85,7 @@ $._farbtastic = function (container, options) { return this; } - fb._makeCanvas = function(className){ - var c = document.createElement('canvas'); - $(c).addClass(className); - return c; - } + ///////////////////////////////////////////////////// /** * Initialize the color picker widget. @@ -107,15 +101,27 @@ $._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; @@ -135,7 +141,7 @@ $._farbtastic = function (container, options) { fb.ctxOverlay = fb.cnvOverlay[0].getContext('2d'); fb.ctxMask.translate(fb.mid, fb.mid); fb.ctxOverlay.translate(fb.mid, fb.mid); - + // Draw widget base layers. fb.drawCircle(); fb.drawMask(); @@ -158,12 +164,12 @@ $._farbtastic = function (container, options) { m.lineWidth = w / r; m.scale(r, r); // Each segment goes from angle1 to angle2. - for (let i = 0; i <= n; ++i) { + for (var i = 0; i <= n; ++i) { var d2 = i / n, angle2 = d2 * Math.PI * 2, // Endpoints x1 = Math.sin(angle1), y1 = -Math.cos(angle1); - const x2 = Math.sin(angle2), y2 = -Math.cos(angle2), + x2 = Math.sin(angle2), y2 = -Math.cos(angle2), // Midpoint chosen so that the endpoints are tangent to the circle. am = (angle1 + angle2) / 2, tan = 1 / Math.cos((angle2 - angle1) / 2), @@ -171,16 +177,37 @@ $._farbtastic = function (container, options) { // New color color2 = fb.pack(fb.HSLToRGB([d2, 1, 0.5])); if (i > 0) { - // Create gradient fill between the endpoints. - var grad = m.createLinearGradient(x1, y1, x2, y2); - grad.addColorStop(0, color1); - grad.addColorStop(1, color2); - m.strokeStyle = grad; - // Draw quadratic curve segment. - m.beginPath(); - m.moveTo(x1, y1); - m.quadraticCurveTo(xm, ym, x2, y2); - m.stroke(); + if (browser.msie) { + // IE's gradient calculations mess up the colors. Correct along the diagonals. + var corr = (1 + Math.min(Math.abs(Math.tan(angle1)), Math.abs(Math.tan(Math.PI / 2 - angle1)))) / n; + color1 = fb.pack(fb.HSLToRGB([d1 - 0.15 * corr, 1, 0.5])); + color2 = fb.pack(fb.HSLToRGB([d2 + 0.15 * corr, 1, 0.5])); + // Create gradient fill between the endpoints. + var grad = m.createLinearGradient(x1, y1, x2, y2); + grad.addColorStop(0, color1); + grad.addColorStop(1, color2); + m.fillStyle = grad; + // Draw quadratic curve segment as a fill. + var r1 = (r + w / 2) / r, r2 = (r - w / 2) / r; // inner/outer radius. + m.beginPath(); + m.moveTo(x1 * r1, y1 * r1); + m.quadraticCurveTo(xm * r1, ym * r1, x2 * r1, y2 * r1); + m.lineTo(x2 * r2, y2 * r2); + m.quadraticCurveTo(xm * r2, ym * r2, x1 * r2, y1 * r2); + m.fill(); + } + else { + // Create gradient fill between the endpoints. + var grad = m.createLinearGradient(x1, y1, x2, y2); + grad.addColorStop(0, color1); + grad.addColorStop(1, color2); + m.strokeStyle = grad; + // Draw quadratic curve segment. + m.beginPath(); + m.moveTo(x1, y1); + m.quadraticCurveTo(xm, ym, x2, y2); + m.stroke(); + } } // Prevent seams where curves join. angle1 = angle2 - nudge; color1 = color2; d1 = d2; @@ -188,7 +215,7 @@ $._farbtastic = function (container, options) { m.restore(); __debug && $('body').append('
drawCircle '+ (+(new Date()) - tm) +'ms'); }; - + /** * Draw the saturation/luminance mask. */ @@ -212,9 +239,9 @@ $._farbtastic = function (container, options) { outputPixel(x, y, c, a); } - } + } } - + // Method #1: direct pixel access (new Canvas). if (fb.ctxMask.getImageData) { // Create half-resolution buffer. @@ -224,7 +251,7 @@ $._farbtastic = function (container, options) { var ctx = buffer.getContext('2d'); var frame = ctx.getImageData(0, 0, sz + 1, sz + 1); - let i = 0; + var i = 0; calculateMask(sz, sz, function (x, y, c, a) { frame.data[i++] = frame.data[i++] = frame.data[i++] = c * 255; frame.data[i++] = a * 255; @@ -275,7 +302,7 @@ $._farbtastic = function (container, options) { } cache.push([c, a]); }); - } + } __debug && $('body').append('
drawMask '+ (+(new Date()) - tm) +'ms'); } @@ -299,7 +326,7 @@ $._farbtastic = function (container, options) { // Update the overlay canvas. fb.ctxOverlay.clearRect(-fb.mid, -fb.mid, sz, sz); - for (let i in circles) { + for (i in circles) { var c = circles[i]; fb.ctxOverlay.lineWidth = c.lw; fb.ctxOverlay.strokeStyle = c.c; @@ -321,7 +348,7 @@ $._farbtastic = function (container, options) { // Draw markers fb.drawMarkers(); - + // Linked elements or callback if (typeof fb.callback == 'object') { // Set background/foreground color @@ -341,15 +368,15 @@ $._farbtastic = function (container, options) { fb.callback.call(fb, fb.color); } } - + /** * Helper for returning coordinates relative to the center. */ fb.widgetCoords = function (event) { return { - x: event.pageX - fb.offset.left - fb.mid, + x: event.pageX - fb.offset.left - fb.mid, y: event.pageY - fb.offset.top - fb.mid - }; + }; } /** @@ -412,7 +439,7 @@ $._farbtastic = function (container, options) { fb.packDX = function (c, a) { return '#' + fb.dec2hex(a) + fb.dec2hex(c) + fb.dec2hex(c) + fb.dec2hex(c); }; - + fb.pack = function (rgb) { var r = Math.round(rgb[0] * 255); var g = Math.round(rgb[1] * 255);