Issue #1684830 by nod_, tim.plunkett: JSHint color.

core/modules/color/color.js

@@ -9,7 +9,7 @@
 
 Drupal.behaviors.color = {
   attach: function (context, settings) {
-    var i, j, colors, field_name;
+    var i, j, colors;
     // This behavior attaches by ID, so is only valid once on a page.
     var form = $(context).find('#system-theme-settings .color-form').once('color');
     if (form.length === 0) {
@@ -27,7 +27,9 @@ Drupal.behaviors.color = {
     // Decode reference colors to HSL.
     var reference = settings.color.reference;
     for (i in reference) {
-      reference[i] = farb.RGBToHSL(farb.unpack(reference[i]));
+      if (reference.hasOwnProperty(i)) {
+        reference[i] = farb.RGBToHSL(farb.unpack(reference[i]));
+      }
     }
 
     // Build a preview.
@@ -35,18 +37,20 @@ Drupal.behaviors.color = {
     var width = [];
     // Loop through all defined gradients.
     for (i in settings.gradients) {
-      // Add element to display the gradient.
-      $('#preview').once('color').append('<div id="gradient-' + i + '"></div>');
-      var gradient = $('#preview #gradient-' + i);
-      // Add height of current gradient to the list (divided by 10).
-      height.push(parseInt(gradient.css('height'), 10) / 10);
-      // Add width of current gradient to the list (divided by 10).
-      width.push(parseInt(gradient.css('width'), 10) / 10);
-      // Add rows (or columns for horizontal gradients).
-      // Each gradient line should have a height (or width for horizontal
-      // gradients) of 10px (because we divided the height/width by 10 above).
-      for (j = 0; j < (settings.gradients[i]['direction'] === 'vertical' ? height[i] : width[i]); ++j) {
-        gradient.append('<div class="gradient-line"></div>');
+      if (settings.gradients.hasOwnProperty(i)) {
+        // Add element to display the gradient.
+        $('#preview').once('color').append('<div id="gradient-' + i + '"></div>');
+        var gradient = $('#preview #gradient-' + i);
+        // Add height of current gradient to the list (divided by 10).
+        height.push(parseInt(gradient.css('height'), 10) / 10);
+        // Add width of current gradient to the list (divided by 10).
+        width.push(parseInt(gradient.css('width'), 10) / 10);
+        // Add rows (or columns for horizontal gradients).
+        // Each gradient line should have a height (or width for horizontal
+        // gradients) of 10px (because we divided the height/width by 10 above).
+        for (j = 0; j < (settings.gradients[i].direction === 'vertical' ? height[i] : width[i]); ++j) {
+          gradient.append('<div class="gradient-line"></div>');
+        }
       }
     }
 
@@ -56,8 +60,10 @@ Drupal.behaviors.color = {
       if (colorScheme !== '' && schemes[colorScheme]) {
         // Get colors of active scheme.
         colors = schemes[colorScheme];
-        for (field_name in colors) {
-          callback($('#edit-palette-' + field_name), colors[field_name], false, true);
+        for (var fieldName in colors) {
+          if (colors.hasOwnProperty(fieldName)) {
+            callback($('#edit-palette-' + fieldName), colors[fieldName], false, true);
+          }
         }
         preview();
       }
@@ -80,6 +86,7 @@ Drupal.behaviors.color = {
      * shift_color(d, b, a) === c.
      */
     function shift_color(given, ref1, ref2) {
+      var d;
       // Convert to HSL.
       given = farb.RGBToHSL(farb.unpack(given));
 
@@ -91,7 +98,7 @@ Drupal.behaviors.color = {
         given[1] = ref2[1];
       }
       else {
-        var d = ref1[1] / ref2[1];
+        d = ref1[1] / ref2[1];
         if (d > 1) {
           given[1] /= d;
         }
@@ -105,7 +112,7 @@ Drupal.behaviors.color = {
         given[2] = ref2[2];
       }
       else {
-        var d = ref1[2] / ref2[2];
+        d = ref1[2] / ref2[2];
         if (d > 1) {
           given[2] /= d;
         }
@@ -136,12 +143,16 @@ Drupal.behaviors.color = {
         if (propagate) {
           i = input.i;
           for (j = i + 1; ; ++j) {
-            if (!locks[j - 1] || $(locks[j - 1]).is('.unlocked')) break;
+            if (!locks[j - 1] || $(locks[j - 1]).is('.unlocked')) {
+              break;
+            }
             matched = shift_color(color, reference[input.key], reference[inputs[j].key]);
             callback(inputs[j], matched, false);
           }
           for (j = i - 1; ; --j) {
-            if (!locks[j] || $(locks[j]).is('.unlocked')) break;
+            if (!locks[j] || $(locks[j]).is('.unlocked')) {
+              break;
+            }
             matched = shift_color(color, reference[input.key], reference[inputs[j].key]);
             callback(inputs[j], matched, false);
           }
@@ -169,17 +180,19 @@ Drupal.behaviors.color = {
     /**
      * Focuses Farbtastic on a particular field.
      */
-    function focus() {
-      var input = this;
+    function focus(e) {
+      var input = e.target;
       // Remove old bindings.
-      focused && $(focused).unbind('keyup', farb.updateValue)
+      if (focused) {
+        $(focused).unbind('keyup', farb.updateValue)
           .unbind('keyup', preview).unbind('keyup', resetScheme)
           .parent().removeClass('item-selected');
+      }
 
       // Add new bindings.
-      focused = this;
+      focused = input;
       farb.linkTo(function (color) { callback(input, color, true, false); });
-      farb.setColor(this.value);
+      farb.setColor(input.value);
       $(focused).keyup(farb.updateValue).keyup(preview).keyup(resetScheme)
         .parent().addClass('item-selected');
     }
@@ -218,7 +231,7 @@ Drupal.behaviors.color = {
         );
         $(this).after(lock);
         locks.push(lock);
-      };
+      }
 
       // Add hook.
       var hook = $('<div class="hook"></div>');
@@ -234,7 +247,7 @@ Drupal.behaviors.color = {
     form.find('#palette label');
 
     // Focus first color.
-    focus.call(inputs[0]);
+    inputs[0].focus();
 
     // Render preview.
     preview();

core/modules/color/preview.js

@@ -16,24 +16,32 @@
       form.find('#text').css('color', form.find('#palette input[name="palette[text]"]').val());
       form.find('#text a, #text h2').css('color', form.find('#palette input[name="palette[link]"]').val());
 
+      function gradientLineColor(i, element) {
+        for (var k in accum) {
+          if (accum.hasOwnProperty(k)) {
+            accum[k] += delta[k];
+          }
+        }
+        element.style.backgroundColor = farb.pack(accum);
+      }
+
       // Set up gradients if there are some.
       var color_start, color_end;
       for (var i in settings.gradients) {
-        color_start = farb.unpack(form.find('#palette input[name="palette[' + settings.gradients[i]['colors'][0] + ']"]').val());
-        color_end = farb.unpack(form.find('#palette input[name="palette[' + settings.gradients[i]['colors'][1] + ']"]').val());
-        if (color_start && color_end) {
-          var delta = [];
-          for (var j in color_start) {
-            delta[j] = (color_end[j] - color_start[j]) / (settings.gradients[i]['vertical'] ? height[i] : width[i]);
-          }
-          var accum = color_start;
-          // Render gradient lines.
-          form.find('#gradient-' + i + ' > div').each(function () {
-            for (j in accum) {
-              accum[j] += delta[j];
+        if (settings.gradients.hasOwnProperty(i)) {
+          color_start = farb.unpack(form.find('#palette input[name="palette[' + settings.gradients[i].colors[0] + ']"]').val());
+          color_end = farb.unpack(form.find('#palette input[name="palette[' + settings.gradients[i].colors[1] + ']"]').val());
+          if (color_start && color_end) {
+            var delta = [];
+            for (var j in color_start) {
+              if (color_start.hasOwnProperty(j)) {
+                delta[j] = (color_end[j] - color_start[j]) / (settings.gradients[i].vertical ? height[i] : width[i]);
+              }
             }
-            this.style.backgroundColor = farb.pack(accum);
-          });
+            var accum = color_start;
+            // Render gradient lines.
+            form.find('#gradient-' + i + ' > div').each(gradientLineColor);
+          }
         }
       }
     }