Commit | Line | Data |
---|---|---|
6a1aa64f DV |
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 | }); |