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

Home
JavaScript DHTML
1.Ajax Layer
2.Data Type
3.Date Time
4.Development
5.Document
6.Dojo toolkit
7.Event
8.Event onMethod
9.Ext JS
10.Form Control
11.GUI Components
12.HTML
13.Javascript Collections
14.Javascript Objects
15.Javascript Properties
16.jQuery
17.Language Basics
18.Mochkit
19.Mootools
20.Node Operation
21.Object Oriented
22.Page Components
23.Rico
24.Scriptaculous
25.Security
26.SmartClient
27.Style Layout
28.Table
29.Utilities
30.Window Browser
31.YUI Library
JavaScript DHTML » Mochkit » Color 
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* r50"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(01/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
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.