| 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 | }); |