farbtastic: Minimize diff to upstream

This should make it easier to upgrade to the latest version.

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
@@ -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(
         '<div class="farbtastic" style="position: relative">' +
           '<div class="farbtastic-solid"></div>' +
+          '<canvas class="farbtastic-mask"></canvas>' +
+          '<canvas class="farbtastic-overlay"></canvas>' +
         '</div>'
       )
-      .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;
@@ -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,6 +177,26 @@ $._farbtastic = function (container, options) {
           // New color
           color2 = fb.pack(fb.HSLToRGB([d2, 1, 0.5]));
       if (i > 0) {
+        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);
@@ -182,6 +208,7 @@ $._farbtastic = function (container, options) {
           m.quadraticCurveTo(xm, ym, x2, y2);
           m.stroke();
         }
+      }
       // Prevent seams where curves join.
       angle1 = angle2 - nudge; color1 = color2; d1 = d2;
     }
@@ -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;
@@ -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;