JavaScript DHTML/Mochkit/Color — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Текущая версия на 07:25, 26 мая 2010
Содержание
- 1 Color.fromName: Convert static string to color: aqua, transparent
- 2 Color.fromRGBString("rgba( 0, 50%)").asRGB().a
- 3 Color.fromString: Covnert static string to color
- 4 Color.fromString("hsl(120,100%,75%)").toHexString()
- 5 Color.fromString("rgb(190,222,173)").toHexString()
- 6 Color to HSL value
- 7 Color.toRGBString()
- 8 Compare two colors
- 9 Convert color from HSL value
- 10 Convert color from RGB value
- 11 Convert color to HSL string
- 12 Convert color value to HSV
- 13 Convert Hex string to color
- 14 Convert HSL value to color and convert from RGB
- 15 Convert HSV value to color
- 16 Convert RGB string to color
- 17 Convert string(2005-2-3) to iso Date
- 18 Convert string to color
- 19 Default colors are interned
- 20 Demo of MochiKit.Color
- 21 Get color from tag style
- 22 Reference components from a HSL color
- 23 Reference components from HSL value
- 24 Reference components from HSV value
- 25 Static color methods in Color class
- 26 Transparent color
Color.fromName: Convert static string to color: aqua, transparent
<!--
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 -->
<html>
<head>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Base.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Iter.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DOM.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Style.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Logging.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Color.js"></script>
</head>
<body>
<div style="position:absolute; top: 0px; left:0px; width:0px; height:0px">
<span style="color: red" id="c_direct"></span>
<span class="redtext" id="c_indirect"></span>
</div>
<pre id="test">
<script type="text/javascript">
alert( Color.fromName("aqua").toHexString());
alert( Color.fromName("transparent"));
</script>
</pre>
</body>
</html>
Color.fromRGBString("rgba( 0, 50%)").asRGB().a
<!--
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 -->
<html>
<head>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Base.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Iter.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DOM.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Style.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Logging.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Color.js"></script>
</head>
<body>
<div style="position:absolute; top: 0px; left:0px; width:0px; height:0px">
<span style="color: red" id="c_direct"></span>
<span class="redtext" id="c_indirect"></span>
</div>
<pre id="test">
<script type="text/javascript">
alert( Color.fromRGBString("rgba( 0, 255, 255, 50%)").asRGB().a);
alert( Color.fromRGBString("rgba( 0, 255, 255, 50%)").toRGBString());
alert( Color.fromRGBString("rgba( 0, 255, 255, 1)").toHexString());
alert( Color.fromRGBString("rgb( 0, 255, 255)").toHexString());
alert( Color.fromRGBString("rgb( 0, 100%, 255)").toHexString());
</script>
</pre>
</body>
</html>
Color.fromString: Covnert static string to 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 -->
<html>
<head>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Base.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Iter.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DOM.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Style.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Logging.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Color.js"></script>
</head>
<body>
<div style="position:absolute; top: 0px; left:0px; width:0px; height:0px">
<span style="color: red" id="c_direct"></span>
<span class="redtext" id="c_indirect"></span>
</div>
<pre id="test">
<script type="text/javascript">
alert( Color.fromString("aqua").toHexString());
alert( Color.fromString("transparent"));
</script>
</pre>
</body>
</html>
Color.fromString("hsl(120,100%,75%)").toHexString()
<!--
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 -->
<html>
<head>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Base.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Iter.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DOM.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Style.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Logging.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Color.js"></script>
</head>
<body>
<div style="position:absolute; top: 0px; left:0px; width:0px; height:0px">
<span style="color: red" id="c_direct"></span>
<span class="redtext" id="c_indirect"></span>
</div>
<pre id="test">
<script type="text/javascript">
alert(Color.fromString("hsl(120,100%,75%)").toHexString());
</script>
</pre>
</body>
</html>
Color.fromString("rgb(190,222,173)").toHexString()
<!--
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 -->
<html>
<head>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Base.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Iter.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DOM.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Style.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Logging.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Color.js"></script>
</head>
<body>
<div style="position:absolute; top: 0px; left:0px; width:0px; height:0px">
<span style="color: red" id="c_direct"></span>
<span class="redtext" id="c_indirect"></span>
</div>
<pre id="test">
<script type="text/javascript">
alert(Color.fromString("rgb(190,222,173)").toHexString());
</script>
</pre>
</body>
</html>
Color to HSL value
<!--
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 -->
<html>
<head>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Base.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Iter.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DOM.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Style.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Logging.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Color.js"></script>
</head>
<body>
<div style="position:absolute; top: 0px; left:0px; width:0px; height:0px">
<span style="color: red" id="c_direct"></span>
<span class="redtext" id="c_indirect"></span>
</div>
<pre id="test">
<script type="text/javascript">
var approx = function (a, b, msg) {
return alert(msg+":"+(a.toPrecision(4) == b.toPrecision(4)));
};
var hsl = Color.redColor().asHSL();
approx( hsl.h, 0.0, "red hsl.h" );
approx( hsl.s, 1.0, "red hsl.s" );
approx( hsl.l, 0.5, "red hsl.l" );
hsl = Color.fromRGB(0, 0, 0.5).asHSL();
approx( hsl.h, 2/3, "darkblue hsl.h" );
approx( hsl.s, 1.0, "darkblue hsl.s" );
approx( hsl.l, 0.25, "darkblue hsl.l" );
hsl = Color.fromString("#4169E1").asHSL();
approx( hsl.h, (5/8), "4169e1 h");
approx( hsl.s, (8/11), "4169e1 s");
approx( hsl.l, (29/51), "4169e1 l");
hsl = Color.fromString("#555544").asHSL();
approx( hsl.h, (1/6), "555544 h" );
approx( hsl.s, (1/9), "555544 s" );
approx( hsl.l, (3/10), "555544 l" );
hsl = Color.fromRGB(0.5, 1, 0.5).asHSL();
approx( hsl.h, 1/3, "aqua hsl.h" );
approx( hsl.s, 1.0, "aqua hsl.s" );
approx( hsl.l, 0.75, "aqua hsl.l" );
</script>
</pre>
</body>
</html>
Color.toRGBString()
<!--
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 -->
<html>
<head>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Base.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Iter.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DOM.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Style.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Logging.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Color.js"></script>
</head>
<body>
<div style="position:absolute; top: 0px; left:0px; width:0px; height:0px">
<span style="color: red" id="c_direct"></span>
<span class="redtext" id="c_indirect"></span>
</div>
<pre id="test">
<script type="text/javascript">
alert(Color.whiteColor().toRGBString());
</script>
</pre>
</body>
</html>
Compare two colors
<!--
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 -->
<html>
<head>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Base.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Iter.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DOM.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Style.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Logging.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Color.js"></script>
</head>
<body>
<div style="position:absolute; top: 0px; left:0px; width:0px; height:0px">
<span style="color: red" id="c_direct"></span>
<span class="redtext" id="c_indirect"></span>
</div>
<pre id="test">
<script type="text/javascript">
alert(compare(Color.whiteColor(), Color.whiteColor()));
</script>
</pre>
</body>
</html>
Convert color from HSL value
<!--
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 -->
<html>
<head>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Base.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Iter.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DOM.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Style.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Logging.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Color.js"></script>
</head>
<body>
<div style="position:absolute; top: 0px; left:0px; width:0px; height:0px">
<span style="color: red" id="c_direct"></span>
<span class="redtext" id="c_indirect"></span>
</div>
<pre id="test">
<script type="text/javascript">
alert(Color.fromHSL(0, 0, 0).toHexString());
</script>
</pre>
</body>
</html>
Convert color from RGB value
<!--
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 -->
<html>
<head>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Base.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Iter.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DOM.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Style.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Logging.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Color.js"></script>
</head>
<body>
<div style="position:absolute; top: 0px; left:0px; width:0px; height:0px">
<span style="color: red" id="c_direct"></span>
<span class="redtext" id="c_indirect"></span>
</div>
<pre id="test">
<script type="text/javascript">
alert(Color.fromRGB(190/255, 222/255, 173/255).toHexString());
alert(Color.fromRGB(226/255, 15.9/255, 182/255).toHexString());
alert(Color.fromRGB({r:190/255,g:222/255,b:173/255}).toHexString());
</script>
</pre>
</body>
</html>
Convert color to HSL string
<!--
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 -->
<html>
<head>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Base.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Iter.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DOM.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Style.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Logging.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Color.js"></script>
</head>
<body>
<div style="position:absolute; top: 0px; left:0px; width:0px; height:0px">
<span style="color: red" id="c_direct"></span>
<span class="redtext" id="c_indirect"></span>
</div>
<pre id="test">
<script type="text/javascript">
alert(Color.fromRGB(0.5, 1, 0.5).toHSLString());
</script>
</pre>
</body>
</html>
Convert color value to HSV
<!--
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 -->
<html>
<head>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Base.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Iter.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DOM.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Style.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Logging.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Color.js"></script>
</head>
<body>
<div style="position:absolute; top: 0px; left:0px; width:0px; height:0px">
<span style="color: red" id="c_direct"></span>
<span class="redtext" id="c_indirect"></span>
</div>
<pre id="test">
<script type="text/javascript">
var hsv = Color.redColor().asHSV();
alert( hsv.h+ ":red hsv.h" );
alert( hsv.s+ ":red hsv.s" );
alert( hsv.v+ ":red hsv.v" );
</script>
</pre>
</body>
</html>
Convert Hex string to 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 -->
<html>
<head>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Base.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Iter.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DOM.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Style.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Logging.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Color.js"></script>
</head>
<body>
<div style="position:absolute; top: 0px; left:0px; width:0px; height:0px">
<span style="color: red" id="c_direct"></span>
<span class="redtext" id="c_indirect"></span>
</div>
<pre id="test">
<script type="text/javascript">
alert(Color.fromHexString("#bedead").toHexString());
</script>
</pre>
</body>
</html>
Convert HSL value to color and convert from RGB
<!--
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 -->
<html>
<head>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Base.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Iter.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DOM.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Style.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Logging.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Color.js"></script>
</head>
<body>
<div style="position:absolute; top: 0px; left:0px; width:0px; height:0px">
<span style="color: red" id="c_direct"></span>
<span class="redtext" id="c_indirect"></span>
</div>
<pre id="test">
<script type="text/javascript">
var hsl = Color.fromRGB(0.5, 1, 0.5).asHSL();
alert(Color.fromHSL(hsl).toHexString());
alert(Color.fromRGB(0.5, 1, 0.5).toHexString());
</script>
</pre>
</body>
</html>
Convert HSV value to 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 -->
<html>
<head>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Base.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Iter.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DOM.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Style.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Logging.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Color.js"></script>
</head>
<body>
<div style="position:absolute; top: 0px; left:0px; width:0px; height:0px">
<span style="color: red" id="c_direct"></span>
<span class="redtext" id="c_indirect"></span>
</div>
<pre id="test">
<script type="text/javascript">
var hsv = Color.redColor().asHSV();
alert( Color.fromHSV(hsv).toHexString()+":"+Color.redColor().toHexString()+ " red hexstring" );
</script>
</pre>
</body>
</html>
Convert RGB string to 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 -->
<html>
<head>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Base.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Iter.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DOM.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Style.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Logging.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Color.js"></script>
</head>
<body>
<div style="position:absolute; top: 0px; left:0px; width:0px; height:0px">
<span style="color: red" id="c_direct"></span>
<span class="redtext" id="c_indirect"></span>
</div>
<pre id="test">
<script type="text/javascript">
alert(Color.fromRGBString("rgb(190,222,173)").toHexString());
</script>
</pre>
</body>
</html>
Convert string(2005-2-3) to iso Date
<!--
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 -->
<html>
<head>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Base.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Iter.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DOM.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Style.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Logging.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DateTime.js"></script>
</head>
<body>
<pre id="test">
<script type="text/javascript">
var testDate = isoDate("2005-2-3");
alert(testDate.getFullYear()+ " isoDate year ok");
alert(testDate.getDate() + " isoDate day ok");
alert(testDate.getMonth() + " isoDate month ok");
alert(toISODate(testDate));
</script>
</pre>
</body>
</html>
Convert string to 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 -->
<html>
<head>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Base.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Iter.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DOM.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Style.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Logging.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Color.js"></script>
</head>
<body>
<div style="position:absolute; top: 0px; left:0px; width:0px; height:0px">
<span style="color: red" id="c_direct"></span>
<span class="redtext" id="c_indirect"></span>
</div>
<pre id="test">
<script type="text/javascript">
alert(Color.fromString("#bedead").toHexString());
</script>
</pre>
</body>
</html>
Default colors are interned
<!--
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 -->
<html>
<head>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Base.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Iter.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DOM.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Style.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Logging.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Color.js"></script>
</head>
<body>
<div style="position:absolute; top: 0px; left:0px; width:0px; height:0px">
<span style="color: red" id="c_direct"></span>
<span class="redtext" id="c_indirect"></span>
</div>
<pre id="test">
<script type="text/javascript">
alert(Color.whiteColor() == Color.whiteColor());
</script>
</pre>
</body>
</html>
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.ru/">MochiKit</a>"s
</div>
<div id="color_wheel_container">
<div id="color_wheel" />
</div>
</body>
</html>
Get color from tag style
<!--
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 -->
<html>
<head>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Base.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Iter.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DOM.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Style.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Logging.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Color.js"></script>
</head>
<body>
<div style="position:absolute; top: 0px; left:0px; width:0px; height:0px">
<span style="color: red" id="c_direct"></span>
<span class="redtext" id="c_indirect"></span>
</div>
<pre id="test">
<script type="text/javascript">
alert(Color.fromText("c_direct").toHexString());
alert(Color.fromName("red").toHexString() +" fromText direct style");
alert(Color.fromText("c_indirect").toHexString());
alert(Color.fromName("red").toHexString() + " fromText indirect style");
alert(Color.fromComputedStyle("c_direct", "color").toHexString());
alert(Color.fromName("red").toHexString() + " fromComputedStyle direct style");
alert(Color.fromComputedStyle("c_indirect", "color").toHexString());
alert(Color.fromName("red").toHexString() + " fromComputedStyle indirect style");
alert(Color.fromBackground((SPAN(null, "test"))).toHexString());
alert(Color.fromName("white").toHexString() +" fromBackground with DOM");
</script>
</pre>
</body>
</html>
Reference components from a HSL 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 -->
<html>
<head>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Base.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Iter.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DOM.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Style.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Logging.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Color.js"></script>
</head>
<body>
<div style="position:absolute; top: 0px; left:0px; width:0px; height:0px">
<span style="color: red" id="c_direct"></span>
<span class="redtext" id="c_indirect"></span>
</div>
<pre id="test">
<script type="text/javascript">
var hsl = Color.blackColor().asHSL();
alert( hsl.h);
alert( hsl.s);
alert( hsl.l);
</script>
</pre>
</body>
</html>
Reference components from HSL value
<!--
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 -->
<html>
<head>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Base.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Iter.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DOM.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Style.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Logging.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Color.js"></script>
</head>
<body>
<div style="position:absolute; top: 0px; left:0px; width:0px; height:0px">
<span style="color: red" id="c_direct"></span>
<span class="redtext" id="c_indirect"></span>
</div>
<pre id="test">
<script type="text/javascript">
var hsl = Color.fromRGB(0.5, 1, 0.5).asHSL();
alert(Color.fromHSL(hsl.h, hsl.s, hsl.l).toHexString());
alert(Color.fromRGB(0.5, 1, 0.5).toHexString());
</script>
</pre>
</body>
</html>
Reference components from HSV value
<!--
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 -->
<html>
<head>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Base.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Iter.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DOM.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Style.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Logging.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Color.js"></script>
</head>
<body>
<div style="position:absolute; top: 0px; left:0px; width:0px; height:0px">
<span style="color: red" id="c_direct"></span>
<span class="redtext" id="c_indirect"></span>
</div>
<pre id="test">
<script type="text/javascript">
var hsv = Color.fromRGB(0, 0, 0.5).asHSV();
alert( hsv.h+ " darkblue hsv.h" );
alert( hsv.s+ " darkblue hsv.s" );
alert( hsv.v+ " darkblue hsv.v" );
</script>
</pre>
</body>
</html>
Static color methods in Color class
<!--
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 -->
<html>
<head>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Base.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Iter.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DOM.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Style.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Logging.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Color.js"></script>
</head>
<body>
<div style="position:absolute; top: 0px; left:0px; width:0px; height:0px">
<span style="color: red" id="c_direct"></span>
<span class="redtext" id="c_indirect"></span>
</div>
<pre id="test">
<script type="text/javascript">
alert(Color.whiteColor().toHexString());
alert(Color.blackColor().toHexString());
alert(Color.blueColor().toHexString());
alert(Color.redColor().toHexString());
alert(Color.greenColor().toHexString());
</script>
</pre>
</body>
</html>
Transparent 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 -->
<html>
<head>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Base.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Iter.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DOM.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Style.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Logging.js"></script>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Color.js"></script>
</head>
<body>
<div style="position:absolute; top: 0px; left:0px; width:0px; height:0px">
<span style="color: red" id="c_direct"></span>
<span class="redtext" id="c_indirect"></span>
</div>
<pre id="test">
<script type="text/javascript">
alert( Color.transparentColor());
</script>
</pre>
</body>
</html>