mochikit_v14/examples/color_wheel/color_wheel.js

   1 var radius = 225;
   2 var twoPI = Math.PI * 2;
   3 var amplification = 10;
   4
   5 var calcAlpha = function (target, lightness) {
   6     return Math.max(1.0 - (Math.abs(lightness - target) * amplification), 0);
   7 };
   8
   9 var makeColorDiv = function (name) {
  10     var c = Color.fromName(name);
  11     var hsl = c.asHSL();
  12     var r = hsl.s * radius;
  13     var e = DIV({"style": {
  14             "color": Color.fromHSL(hsl).toString(),
  15             "width": "100px",
  16             "height": "30px",
  17             "position": "absolute",
  18             "verticalAlign": "middle",
  19             "textAlign": "center",
  20             "left": Math.floor((Math.cos(hsl.h * twoPI) * r) - 50) + "px",
  21             "top": Math.floor((Math.sin(hsl.h * twoPI) * r)) + "px"
  22         }},
  23         name
  24     );
  25     // hsl.a = 0;
  26     return [c, e];
  27 };
  28
  29 var colorWheelOnLoad = function () {
  30     var seenColors = {};
  31     var colors = Color.namedColors();
  32     var colorDivs = [];
  33     for (var k in colors) {
  34         var val = colors[k];
  35         if (val in seenColors) {
  36             continue;
  37         }
  38         colorDivs.push(makeColorDiv(k));
  39     }
  40     swapDOM(
  41         "color_wheel",
  42         DIV(null, map(itemgetter(1), colorDivs))
  43     );
  44     var colorCanary = DIV({"style":{"color": "blue"}}, "");
  45     try {
  46         colorCanary.style.color = "rgba(100,100,100,0.5)";
  47     } catch (e) {
  48         // IE passtastic
  49     }
  50     var colorFunc;
  51     // Check for CSS3 HSL support
  52     if (colorCanary.style.color == "blue") {
  53         var bgColor = Color.fromBackground();
  54         colorFunc  = function (color, alpha) {
  55             return bgColor.blendedColor(color, alpha).toHexString();
  56         };
  57     } else {
  58         colorFunc = function (color, alpha) {
  59             return color.colorWithAlpha(alpha).toRGBString();
  60         }
  61     }
  62     // Per-frame animation
  63     var intervalFunc = function (cycle, timeout) {
  64         var target = 0.5 + (0.5 * Math.sin(Math.PI * (cycle / 180)));
  65         for (var i = 0; i < colorDivs.length; i++) {
  66             var cd = colorDivs[i];
  67             var color = cd[0];
  68             var alpha = calcAlpha(target, color.asHSL().l);
  69             var style = cd[1].style;
  70             if (alpha == 0) {
  71                 style.display = "none";
  72             } else {
  73                 style.display ="";
  74                 style.color = colorFunc(color, alpha);
  75             }
  76         }
  77         callLater(timeout, arguments.callee, cycle + 2, timeout);
  78     };
  79     // < 5 fps
  80     intervalFunc(0, 1/5);
  81 };
  82
  83 addLoadEvent(colorWheelOnLoad);
  84
  85 // rewrite the view-source links
  86 addLoadEvent(function () {
  87     var elems = getElementsByTagAndClassName("A", "view-source");
  88     var page = "color_wheel/";
  89     for (var i = 0; i < elems.length; i++) {
  90         var elem = elems[i];
  91         var href = elem.href.split(/\//).pop();
  92         elem.target = "_blank";
  93         elem.href = "../view-source/view-source.html#" + page + href;
  94     }
  95 });