[elpa] master e58833f 120/271: Refactor and document.

[Jackson Ray Hamilton]

branch: master
commit e58833f9ceec874e657ebbc559487d4a13d982e2
Author: Jackson Ray Hamilton <address@hidden>
Commit: Jackson Ray Hamilton <address@hidden>

    Refactor and document.
---
 tools/color-schemer/color-schemer.js |   68 +++++++++++++++++++--------------
 1 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/tools/color-schemer/color-schemer.js 
b/tools/color-schemer/color-schemer.js
index c5cb510..0dcc038 100644
--- a/tools/color-schemer/color-schemer.js
+++ b/tools/color-schemer/color-schemer.js
@@ -4,6 +4,7 @@
 
     'use strict';
 
+    // Executes `fn' `n' times.
     function times(n, fn) {
         var i;
         for (i = 0; i < n; i += 1) {
@@ -11,10 +12,12 @@
         }
     }
 
+    // Bounds `hue' within the [0, 360) range.
     function boundHue(hue) {
         return (360 + (hue % 360)) % 360;
     }
 
+    // Converts parts of a hue to rgb parts.
     function hue2rgb(p, q, t) {
         if (t < 0) {
             t += 1;
@@ -34,6 +37,7 @@
         return p;
     }
 
+    // Converts hue/saturation/lightness to red/green/blue.
     function hslToRgb(h, s, l) {
         var r, g, b, q, p;
 
@@ -52,52 +56,54 @@
         return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
     }
 
+    // Converts `c' of width [1, 2] to a padded hexidecimal value.
     function componentToHex(c) {
         var hex = c.toString(16);
         return hex.length === 1 ? '0' + hex : hex;
     }
 
+    // Converts red/green/blue to a CSS hex code.
     function rgbToHexCss(r, g, b) {
-        return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
+        return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
     }
 
+    // Spreads the properties of an `hsl' object into an array.
     function spreadHsl(hsl) {
         return [hsl.hue, hsl.saturation, hsl.lightness];
     }
 
+    // App for designing "rainbow" color schemes centered around a point on the
+    // color wheel.
     angular.module('color-schemer', [])
 
-        .directive('csCell', [
-
-            function () {
-                return {
-                    scope: {
-                        hsl: '='
-                    },
-                    template: [
-                        '<div class="cs-cell">',
-                        '    <div class="cs-cell-color"></div>',
-                        '    <pre 
class="cs-cell-code">{{distance}}&deg;</pre>',
-                        '    <pre class="cs-cell-code">{{hexCss}}</pre>',
-                        '    <pre class="cs-cell-code cs-cell-code-light"',
-                        '         data-ng-style="{color: hexCss}">var a = 
0;</pre>',
-                        '    <pre class="cs-cell-code cs-cell-code-dark"',
-                        '         data-ng-style="{color: hexCss}">var a = 
0;</pre>',
-                        '</div>'
-                    ].join('\n'),
-                    link: function (scope, element, attributes) {
-                        /*jslint unparam: true */
-                        var color = 
angular.element(element[0].querySelector('.cs-cell-color'));
-                        scope.distance = scope.hsl.hue;
-                        scope.hexCss = rgbToHexCss.apply(null, 
hslToRgb.apply(null, spreadHsl(scope.hsl)));
-                        color.css('backgroundColor', scope.hexCss);
-                    }
-                };
-            }
-        ])
+        .directive('csCell', [function () {
+            // A cell of color with useful data inside.
+            return {
+                scope: {
+                    hsl: '='
+                },
+                template: [
+                    '<div class="cs-cell">',
+                    '    <div class="cs-cell-color"',
+                    '         data-ng-style="{\'background-color\': 
hexCss}"></div>',
+                    '    <pre class="cs-cell-code">{{distance}}&deg;</pre>',
+                    '    <pre class="cs-cell-code">{{hexCss}}</pre>',
+                    '    <pre class="cs-cell-code cs-cell-code-light"',
+                    '         data-ng-style="{color: hexCss}">var a = 
0;</pre>',
+                    '    <pre class="cs-cell-code cs-cell-code-dark"',
+                    '         data-ng-style="{color: hexCss}">var a = 
0;</pre>',
+                    '</div>'
+                ].join('\n'),
+                link: function (scope) {
+                    scope.distance = scope.hsl.hue;
+                    scope.hexCss = rgbToHexCss.apply(null, 
hslToRgb.apply(null, spreadHsl(scope.hsl)));
+                }
+            };
+        }])
 
         .controller('CellsController', ['$scope', function ($scope) {
 
+            // Updates the current set of colors according to $scope values.
             $scope.reload = function () {
                 var colors = [];
                 times($scope.numberOfColors, function (index) {
@@ -124,18 +130,22 @@
                         lightness: $scope.lightness
                     });
                 });
+                // We may have been pivoting but it is much easier to grasp the
+                // set of colors if they are sorted.
                 colors.sort(function (a, b) {
                     return a.hue - b.hue;
                 });
                 $scope.colors = colors;
             };
 
+            // Default values.
             $scope.numberOfColors = 6;
             $scope.distanceBetweenColors = 30;
             $scope.center = 0;
             $scope.saturation = 1;
             $scope.lightness = 0.5;
 
+            // Display initially.
             $scope.reload();
 
         }]);