Demo of MochiKit.Color : Color « Mochkit « JavaScript DHTML





Demo of MochiKit.Color

 
<!--
MochiKit is dual-licensed software.  It is available under the terms of the
MIT License, or the Academic Free License version 2.1.  The full text of
each license is included below.
-->

<!-- Code revised from MochiKit demo code -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Demo of MochiKit.Color</title>
        <style type="text/css">
h1 { text-align: center; }
#docs { text-align: center; }
#source { text-align: center; }
#color_wheel_container { position:absolute; left: 50%; top: 50% }
        
        </style>
        <script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/MochiKit.js"></script>
        <script type="text/javascript">
var radius = 225;
var twoPI = Math.PI * 2;
var amplification = 10;

var calcAlpha = function (target, lightness) {
    return Math.max(1.0 - (Math.abs(lightness - target) * amplification), 0);
};

var makeColorDiv = function (name) {
    var c = Color.fromName(name);
    var hsl = c.asHSL();
    var r = hsl.s * radius;
    var e = DIV({"style": {
            "color": Color.fromHSL(hsl).toString(),
            "width": "100px",
            "height": "30px",
            "position": "absolute",
            "verticalAlign": "middle",
            "textAlign": "center",
            "left": Math.floor((Math.cos(hsl.h * twoPI) * r) - 50) + "px",
            "top": Math.floor((Math.sin(hsl.h * twoPI) * r)) + "px"
        }},
        name 
    );
    // hsl.a = 0;
    return [c, e];
};

var colorWheelOnLoad = function () {
    var seenColors = {};
    var colors = Color.namedColors();
    var colorDivs = [];
    for (var k in colors) {
        var val = colors[k];
        if (val in seenColors) {
            continue;
        }
        colorDivs.push(makeColorDiv(k));
    }
    swapDOM(
        "color_wheel",
        DIV(null, map(itemgetter(1), colorDivs))
    );
    var colorCanary = DIV({"style":{"color": "blue"}}, "");
    try {
        colorCanary.style.color = "rgba(100,100,100,0.5)";
    } catch (e) {
        // IE passtastic
    }
    var colorFunc;
    // Check for CSS3 HSL support
    if (colorCanary.style.color == "blue") { 
        var bgColor = Color.fromBackground();
        colorFunc  = function (color, alpha) {
            return bgColor.blendedColor(color, alpha).toHexString();
        };
    } else {
        colorFunc = function (color, alpha) {
            return color.colorWithAlpha(alpha).toRGBString();
        }
    }
    // Per-frame animation
    var intervalFunc = function (cycle, timeout) {
        var target = 0.5 + (0.5 * Math.sin(Math.PI * (cycle / 180)));
        for (var i = 0; i < colorDivs.length; i++) {
            var cd = colorDivs[i];
            var color = cd[0];
            var alpha = calcAlpha(target, color.asHSL().l);
            var style = cd[1].style;
            if (alpha == 0) {
                style.display = "none";
            } else {
                style.display ="";
                style.color = colorFunc(color, alpha);
            }
        }
        callLater(timeout, arguments.callee, cycle + 2, timeout);
    };
    // < 5 fps
    intervalFunc(0, 1/5);
};

addLoadEvent(colorWheelOnLoad);

// rewrite the view-source links
addLoadEvent(function () {
    var elems = getElementsByTagAndClassName("A", "view-source");
    var page = "color_wheel/";
    for (var i = 0; i < elems.length; i++) {
        var elem = elems[i];
        var href = elem.href.split(/\//).pop();
        elem.target = "_blank";
        elem.href = "../view-source/view-source.html#" + page + href;
    }
});

        </script>
    </head>
    <body>
        <h1>Color Wheel</h1>
        <div id="docs">
            Animated visualization of all the CSS3 colors by:
            hue (angle), saturation (distance), luminance (time/alpha).
            <br />
            Uses <a href="http://mochikit.com/">MochiKit</a>'s 
 
        </div>
        <div id="color_wheel_container">
            <div id="color_wheel" /> 
        </div>
    </body>
</html>

   
  










Related examples in the same category

1.Color.toRGBString()
2.Convert color from RGB value
3.Convert Hex string to color
4.Convert string to color
5.Convert RGB string to color
6.Color.fromString("rgb(190,222,173)").toHexString()
7.Color to HSL value
8.Color.fromString("hsl(120,100%,75%)").toHexString()
9.Convert color to HSL string
10.Convert color from HSL value
11.Reference components from HSL value
12.Convert HSL value to color and convert from RGB
13.Reference components from a HSL color
14.Color.fromName: Convert static string to color: aqua, transparent
15.Transparent color
16.Color.fromString: Covnert static string to color
17.Color.fromRGBString("rgba( 0, 255, 255, 50%)").asRGB().a
18.Convert color value to HSV
19.Convert HSV value to color
20.Reference components from HSV value
21.Get color from tag style
22.Convert string(2005-2-3) to iso Date
23.Compare two colors
24.Static color methods in Color class
25.Default colors are interned