Peter Kimanzi

├── README.md ├── index.html ├── js ├── Stats.min.js ├── main.min.js └── dat.gui.min.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Awesome-color-animations 2 | 3 | Awesome color animations using JavaScript libraries 4 | 5 | 6 | ## Live link 7 | 8 | https://peter-kimanzi.github.io/Awesome-color-animations/ 9 | 10 | ## Screenshots 11 | ![colo](https://github.com/peter-kimanzi/Awesome-color-animations/assets/71552773/efced2d3-1e7a-405a-9de4-8ff120c49489) 12 | 13 | ![color](https://github.com/peter-kimanzi/Awesome-color-animations/assets/71552773/139983d8-36a5-4ef8-8f4b-4d9159fc476b) 14 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Peter Kimanzi 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

19 | 20 |

21 |

22 |

23 |

24 | 25 | 26 |

27 | 28 |

29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /js/Stats.min.js: -------------------------------------------------------------------------------- 1 | var Stats = function() { 2 | var e = Date.now() 3 | , t = e 4 | , n = 0 5 | , i = 1 / 0 6 | , a = 0 7 | , d = 0 8 | , l = 1 / 0 9 | , o = 0 10 | , s = 0 11 | , r = 0 12 | , c = document.createElement("div"); 13 | c.id = "stats", 14 | c.addEventListener("mousedown", function(e) { 15 | e.preventDefault(), 16 | g(++r % 2) 17 | }, !1), 18 | c.style.cssText = "width:80px;opacity:0.9;cursor:pointer"; 19 | var p = document.createElement("div"); 20 | p.id = "fps", 21 | p.style.cssText = "padding:0 0 3px 3px;text-align:left;background-color:#002", 22 | c.appendChild(p); 23 | var h = document.createElement("div"); 24 | h.id = "fpsText", 25 | h.style.cssText = "color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px", 26 | h.innerHTML = "FPS", 27 | p.appendChild(h); 28 | var f = document.createElement("div"); 29 | for (f.id = "fpsGraph", 30 | f.style.cssText = "position:relative;width:74px;height:30px;background-color:#0ff", 31 | p.appendChild(f); f.children.length < 74; ) { 32 | var x = document.createElement("span"); 33 | x.style.cssText = "width:1px;height:30px;float:left;background-color:#113", 34 | f.appendChild(x) 35 | } 36 | var m = document.createElement("div"); 37 | m.id = "ms", 38 | m.style.cssText = "padding:0 0 3px 3px;text-align:left;background-color:#020;display:none", 39 | c.appendChild(m); 40 | var u = document.createElement("div"); 41 | u.id = "msText", 42 | u.style.cssText = "color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px", 43 | u.innerHTML = "MS", 44 | m.appendChild(u); 45 | var v = document.createElement("div"); 46 | for (v.id = "msGraph", 47 | v.style.cssText = "position:relative;width:74px;height:30px;background-color:#0f0", 48 | m.appendChild(v); v.children.length < 74; ) { 49 | var x = document.createElement("span"); 50 | x.style.cssText = "width:1px;height:30px;float:left;background-color:#131", 51 | v.appendChild(x) 52 | } 53 | var g = function(e) { 54 | switch (r = e) { 55 | case 0: 56 | p.style.display = "block", 57 | m.style.display = "none"; 58 | break; 59 | case 1: 60 | p.style.display = "none", 61 | m.style.display = "block" 62 | } 63 | } 64 | , y = function(e, t) { 65 | var n = e.appendChild(e.firstChild); 66 | n.style.height = t + "px" 67 | }; 68 | return { 69 | REVISION: 11, 70 | domElement: c, 71 | setMode: g, 72 | begin: function() { 73 | e = Date.now() 74 | }, 75 | end: function() { 76 | var r = Date.now(); 77 | return n = r - e, 78 | i = Math.min(i, n), 79 | a = Math.max(a, n), 80 | u.textContent = n + " MS (" + i + "-" + a + ")", 81 | y(v, Math.min(30, 30 - n / 200 * 30)), 82 | s++, 83 | r > t + 1e3 && (d = Math.round(1e3 * s / (r - t)), 84 | l = Math.min(l, d), 85 | o = Math.max(o, d), 86 | h.textContent = d + " FPS (" + l + "-" + o + ")", 87 | y(f, Math.min(30, 30 - d / 100 * 30)), 88 | t = r, 89 | s = 0), 90 | r 91 | }, 92 | update: function() { 93 | e = this.end() 94 | } 95 | } 96 | }; 97 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | -webkit-box-sizing: border-box; 5 | -moz-box-sizing: border-box; 6 | -ms-box-sizing: border-box; 7 | -o-box-sizing: border-box; 8 | box-sizing: border-box; 9 | } 10 | html, body { 11 | margin: 0; 12 | padding: 0; 13 | font: 16px/1.4 'Lato', sans-serif; 14 | color: #fefeff; 15 | -webkit-font-smoothing: antialiased; 16 | font-smoothing: antialiased; 17 | } 18 | body { 19 | background: rgb(8,5,16); 20 | -webkit-touch-callout: none; 21 | -webkit-user-select: none; 22 | -khtml-user-select: none; 23 | -moz-user-select: none; 24 | -ms-user-select: none; 25 | user-select: none; 26 | } 27 | 28 | h1 { 29 | font: 2.75em 'Cinzel', serif; 30 | font-weight: 400; 31 | letter-spacing: 0.35em; 32 | text-shadow: 0 0 25px rgba(254,254,255,0.85); 33 | } 34 | h2 { 35 | font: 1.45em 'Cinzel', serif; 36 | font-weight: 400; 37 | letter-spacing: 0.5em; 38 | text-shadow: 0 0 25px rgba(254,254,255,0.85); 39 | text-transform: lowercase; 40 | } 41 | 42 | [class^="letter"] { 43 | -webkit-transition: opacity 3s ease; 44 | -moz-transition: opacity 3s ease; 45 | transition: opacity 3s ease; 46 | } 47 | .letter-0 { transition-delay: 0.2s; } 48 | .letter-1 { transition-delay: 0.4s; } 49 | .letter-2 { transition-delay: 0.6s; } 50 | .letter-3 { transition-delay: 0.8s; } 51 | .letter-4 { transition-delay: 1.0s; } 52 | .letter-5 { transition-delay: 1.2s; } 53 | .letter-6 { transition-delay: 1.4s; } 54 | .letter-7 { transition-delay: 1.6s; } 55 | .letter-8 { transition-delay: 1.8s; } 56 | .letter-9 { transition-delay: 2.0s; } 57 | .letter-10 { transition-delay: 2.2s; } 58 | .letter-11 { transition-delay: 2.4s; } 59 | .letter-12 { transition-delay: 2.6s; } 60 | .letter-13 { transition-delay: 2.8s; } 61 | .letter-14 { transition-delay: 3.0s; } 62 | 63 | h1, h2 { 64 | visibility: hidden; 65 | -webkit-transform: translate3d(0, 0, 0); 66 | -moz-transform: translate3d(0, 0, 0); 67 | transform: translate3d(0, 0, 0); 68 | } 69 | h1.transition-in, 70 | h2.transition-in { 71 | visibility: visible; 72 | } 73 | h1 [class^="letter"], 74 | h2 [class^="letter"] { 75 | opacity: 0; 76 | } 77 | h1.transition-in [class^="letter"], 78 | h2.transition-in [class^="letter"] { 79 | opacity: 1; 80 | } 81 | 82 | #container { 83 | display: table; 84 | position: absolute; 85 | z-index: 20; 86 | width: 100%; 87 | height: 100%; 88 | text-align: center; 89 | cursor: none; 90 | } 91 | #container > div { 92 | display: table-cell; 93 | vertical-align: middle; 94 | } 95 | #container p { 96 | position: absolute; 97 | width: 100%; 98 | left: 0; 99 | bottom: 25px; 100 | font-size: 0.8em; 101 | letter-spacing: 0.1em; 102 | font-weight: 300; 103 | color: #76747a; 104 | -webkit-font-smoothing: subpixel-antialiased; 105 | font-smoothing: subpixel-antialiased; 106 | } 107 | #container p strong { 108 | color: #b3abc5; 109 | } 110 | #container p span { 111 | font-size: 0.75em; 112 | padding: 0 2px; 113 | } 114 | 115 | #canvas { 116 | position: absolute; 117 | z-index: 10; 118 | top: 0; 119 | left: 0; 120 | width: 100%; 121 | height: 100%; 122 | cursor: none; 123 | } 124 | 125 | #stats { 126 | position: absolute; 127 | z-index: 10; 128 | left: 10px; 129 | top: 10px; 130 | } 131 | 132 | .dg.ac { 133 | z-index: 100 !important; 134 | } 135 | -------------------------------------------------------------------------------- /js/main.min.js: -------------------------------------------------------------------------------- 1 | !function(t) { 2 | function e(t) { 3 | this.init(t || {}) 4 | } 5 | function n(t) { 6 | this.init(t || {}) 7 | } 8 | function i(t) { 9 | document.removeEventListener("mousemove", i), 10 | document.removeEventListener("touchstart", i), 11 | document.addEventListener("mousemove", d), 12 | document.addEventListener("touchmove", d), 13 | document.addEventListener("touchstart", u), 14 | d(t), 15 | a(), 16 | o() 17 | } 18 | function a() { 19 | w = []; 20 | for (var t = 0; t < E.trails; t++) 21 | w.push(new n({ 22 | spring: .45 + .025 * (t / E.trails) 23 | })) 24 | } 25 | function o() { 26 | if (f.running) { 27 | f.globalCompositeOperation = "source-over", 28 | f.fillStyle = "rgba(8,5,16,0.4)", 29 | f.fillRect(0, 0, f.canvas.width, f.canvas.height), 30 | f.globalCompositeOperation = "lighter", 31 | f.strokeStyle = "hsla(" + Math.round(l.update()) + ",90%,50%,0.25)", 32 | f.lineWidth = 1, 33 | f.frame % 60 == 0 && console.log(l.update(), Math.round(l.update()), l.phase, l.offset, l.frequency, l.amplitude); 34 | for (var t, e = 0; e < E.trails; e++) 35 | t = w[e], 36 | t.update(), 37 | t.draw(); 38 | f.frame++, 39 | f.stats.update(), 40 | requestAnimFrame(o) 41 | } 42 | } 43 | function s() { 44 | f.canvas.width = t.innerWidth, 45 | f.canvas.height = t.innerHeight 46 | } 47 | function r() { 48 | f.running || (f.running = !0, 49 | o()) 50 | } 51 | function h() { 52 | f.running = !1 53 | } 54 | function d(t) { 55 | t.touches ? (x.x = t.touches[0].pageX, 56 | x.y = t.touches[0].pageY) : (x.x = t.clientX, 57 | x.y = t.clientY), 58 | t.preventDefault() 59 | } 60 | function u(t) { 61 | 1 == t.touches.length && (x.x = t.touches[0].pageX, 62 | x.y = t.touches[0].pageY) 63 | } 64 | function c(t) { 65 | switch (t.keyCode) { 66 | case 32: 67 | p() 68 | } 69 | } 70 | function m(t) { 71 | for (var e, n = document.getElementById(t), i = n.innerHTML.replace("&", "&").split(""), a = "", o = 0, s = i.length; s > o; o++) 72 | e = i[o].replace("&", "&"), 73 | a += e.trim() ? '' + e + "" : " "; 74 | n.innerHTML = a, 75 | setTimeout(function() { 76 | n.className = "transition-in" 77 | }, 500 * Math.random() + 500) 78 | } 79 | function p() { 80 | y || (y = document.createElement("canvas"), 81 | y.width = screen.availWidth, 82 | y.height = screen.availHeight, 83 | y.ctx = y.getContext("2d"), 84 | g = document.createElement("form"), 85 | g.method = "post", 86 | g.input = document.createElement("input"), 87 | g.input.type = "hidden", 88 | g.input.name = "data", 89 | g.appendChild(g.input), 90 | document.body.appendChild(g)), 91 | y.ctx.fillStyle = "rgba(8,5,16)", 92 | y.ctx.fillRect(0, 0, y.width, y.height), 93 | y.ctx.drawImage(canvas, Math.round(y.width / 2 - canvas.width / 2), Math.round(y.height / 2 - canvas.height / 2)), 94 | y.ctx.drawImage(v, Math.round(y.width / 2 - v.width / 4), Math.round(y.height / 2 - v.height / 4), v.width / 2, v.height / 2), 95 | t.open(y.toDataURL(), "wallpaper", "top=0,left=0,width=" + y.width + ",height=" + y.height) 96 | } 97 | var f, l, v, g, y, x = {}, w = [], E = {}; 98 | E.debug = !1, 99 | E.friction = .5, 100 | E.trails = 20, 101 | E.size = 50, 102 | E.dampening = .25, 103 | E.tension = .98, 104 | Math.TWO_PI = 2 * Math.PI, 105 | e.prototype = function() { 106 | var t = 0; 107 | return { 108 | init: function(t) { 109 | this.phase = t.phase || 0, 110 | this.offset = t.offset || 0, 111 | this.frequency = t.frequency || .001, 112 | this.amplitude = t.amplitude || 1 113 | }, 114 | update: function() { 115 | return this.phase += this.frequency, 116 | t = this.offset + Math.sin(this.phase) * this.amplitude 117 | }, 118 | value: function() { 119 | return t 120 | } 121 | } 122 | }(), 123 | n.prototype = function() { 124 | function t() { 125 | this.x = 0, 126 | this.y = 0, 127 | this.vy = 0, 128 | this.vx = 0 129 | } 130 | return { 131 | init: function(e) { 132 | this.spring = e.spring + .1 * Math.random() - .05, 133 | this.friction = E.friction + .01 * Math.random() - .005, 134 | this.nodes = []; 135 | for (var n, i = 0; i < E.size; i++) 136 | n = new t, 137 | n.x = x.x, 138 | n.y = x.y, 139 | this.nodes.push(n) 140 | }, 141 | update: function() { 142 | var t = this.spring 143 | , e = this.nodes[0]; 144 | e.vx += (x.x - e.x) * t, 145 | e.vy += (x.y - e.y) * t; 146 | for (var n, i = 0, a = this.nodes.length; a > i; i++) 147 | e = this.nodes[i], 148 | i > 0 && (n = this.nodes[i - 1], 149 | e.vx += (n.x - e.x) * t, 150 | e.vy += (n.y - e.y) * t, 151 | e.vx += n.vx * E.dampening, 152 | e.vy += n.vy * E.dampening), 153 | e.vx *= this.friction, 154 | e.vy *= this.friction, 155 | e.x += e.vx, 156 | e.y += e.vy, 157 | t *= E.tension 158 | }, 159 | draw: function() { 160 | var t, e, n = this.nodes[0].x, i = this.nodes[0].y; 161 | f.beginPath(), 162 | f.moveTo(n, i); 163 | for (var a = 1, o = this.nodes.length - 2; o > a; a++) 164 | t = this.nodes[a], 165 | e = this.nodes[a + 1], 166 | n = .5 * (t.x + e.x), 167 | i = .5 * (t.y + e.y), 168 | f.quadraticCurveTo(t.x, t.y, n, i); 169 | t = this.nodes[a], 170 | e = this.nodes[a + 1], 171 | f.quadraticCurveTo(t.x, t.y, e.x, e.y), 172 | f.stroke(), 173 | f.closePath() 174 | } 175 | } 176 | }(), 177 | t.requestAnimFrame = function() { 178 | return t.requestAnimationFrame || t.webkitRequestAnimationFrame || t.mozRequestAnimationFrame || function(e) { 179 | t.setTimeout(e, 1e3 / 60) 180 | } 181 | }(), 182 | t.onload = function() { 183 | if (f = document.getElementById("canvas").getContext("2d"), 184 | f.stats = new Stats, 185 | f.running = !0, 186 | f.frame = 1, 187 | v = new Image, 188 | v.src = "images/logo.png", 189 | l = new e({ 190 | phase: Math.random() * Math.TWO_PI, 191 | amplitude: 85, 192 | frequency: .0015, 193 | offset: 285 194 | }), 195 | m("h1"), 196 | m("h2"), 197 | document.addEventListener("mousemove", i), 198 | document.addEventListener("touchstart", i), 199 | document.body.addEventListener("orientationchange", s), 200 | t.addEventListener("resize", s), 201 | t.addEventListener("keyup", c), 202 | t.addEventListener("focus", r), 203 | t.addEventListener("blur", h), 204 | s(), 205 | t.DEBUG) { 206 | var n = new dat.GUI; 207 | n.add(E, "trails", 1, 30).onChange(a), 208 | n.add(E, "size", 25, 75).onFinishChange(a), 209 | n.add(E, "friction", .45, .55).onFinishChange(a), 210 | n.add(E, "dampening", .01, .4).onFinishChange(a), 211 | n.add(E, "tension", .95, .999).onFinishChange(a), 212 | document.body.appendChild(f.stats.domElement) 213 | } 214 | } 215 | }(window); 216 | -------------------------------------------------------------------------------- /js/dat.gui.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * dat-gui JavaScript Controller Library 3 | * http://code.google.com/p/dat-gui 4 | * 5 | * Copyright 2011 Data Arts Team, Google Creative Lab 6 | * 7 | * Licensed under the Apache License, Version 2.0 (the "License"); 8 | * you may not use this file except in compliance with the License. 9 | * You may obtain a copy of the License at 10 | * 11 | * http://www.apache.org/licenses/LICENSE-2.0 12 | */ 13 | var dat = dat || {}; 14 | dat.gui = dat.gui || {}; 15 | dat.utils = dat.utils || {}; 16 | dat.controllers = dat.controllers || {}; 17 | dat.dom = dat.dom || {}; 18 | dat.color = dat.color || {}; 19 | dat.utils.css = (function () { 20 | return { 21 | load: function (e, a) { 22 | var a = a || document, 23 | c = a.createElement("link"); 24 | c.type = "text/css"; 25 | c.rel = "stylesheet"; 26 | c.href = e; 27 | a.getElementsByTagName("head")[0].appendChild(c); 28 | }, 29 | inject: function (e, a) { 30 | var a = a || document, 31 | c = document.createElement("style"); 32 | c.type = "text/css"; 33 | c.innerHTML = e; 34 | a.getElementsByTagName("head")[0].appendChild(c); 35 | }, 36 | }; 37 | })(); 38 | dat.utils.common = (function () { 39 | var e = Array.prototype.forEach, 40 | a = Array.prototype.slice; 41 | return { 42 | BREAK: {}, 43 | extend: function (c) { 44 | this.each( 45 | a.call(arguments, 1), 46 | function (a) { 47 | for (var f in a) this.isUndefined(a[f]) || (c[f] = a[f]); 48 | }, 49 | this 50 | ); 51 | return c; 52 | }, 53 | defaults: function (c) { 54 | this.each( 55 | a.call(arguments, 1), 56 | function (a) { 57 | for (var f in a) this.isUndefined(c[f]) && (c[f] = a[f]); 58 | }, 59 | this 60 | ); 61 | return c; 62 | }, 63 | compose: function () { 64 | var c = a.call(arguments); 65 | return function () { 66 | for (var d = a.call(arguments), f = c.length - 1; f >= 0; f--) 67 | d = [c[f].apply(this, d)]; 68 | return d[0]; 69 | }; 70 | }, 71 | each: function (a, d, f) { 72 | if (e && a.forEach === e) a.forEach(d, f); 73 | else if (a.length === a.length + 0) 74 | for (var b = 0, n = a.length; b < n; b++) { 75 | if (b in a && d.call(f, a[b], b) === this.BREAK) break; 76 | } 77 | else for (b in a) if (d.call(f, a[b], b) === this.BREAK) break; 78 | }, 79 | defer: function (a) { 80 | setTimeout(a, 0); 81 | }, 82 | toArray: function (c) { 83 | return c.toArray ? c.toArray() : a.call(c); 84 | }, 85 | isUndefined: function (a) { 86 | return a === void 0; 87 | }, 88 | isNull: function (a) { 89 | return a === null; 90 | }, 91 | isNaN: function (a) { 92 | return a !== a; 93 | }, 94 | isArray: 95 | Array.isArray || 96 | function (a) { 97 | return a.constructor === Array; 98 | }, 99 | isObject: function (a) { 100 | return a === Object(a); 101 | }, 102 | isNumber: function (a) { 103 | return a === a + 0; 104 | }, 105 | isString: function (a) { 106 | return a === a + ""; 107 | }, 108 | isBoolean: function (a) { 109 | return a === false || a === true; 110 | }, 111 | isFunction: function (a) { 112 | return Object.prototype.toString.call(a) === "[object Function]"; 113 | }, 114 | }; 115 | })(); 116 | dat.controllers.Controller = (function (e) { 117 | var a = function (a, d) { 118 | this.initialValue = a[d]; 119 | this.domElement = document.createElement("div"); 120 | this.object = a; 121 | this.property = d; 122 | this.__onFinishChange = this.__onChange = void 0; 123 | }; 124 | e.extend(a.prototype, { 125 | onChange: function (a) { 126 | this.__onChange = a; 127 | return this; 128 | }, 129 | onFinishChange: function (a) { 130 | this.__onFinishChange = a; 131 | return this; 132 | }, 133 | setValue: function (a) { 134 | this.object[this.property] = a; 135 | this.__onChange && this.__onChange.call(this, a); 136 | this.updateDisplay(); 137 | return this; 138 | }, 139 | getValue: function () { 140 | return this.object[this.property]; 141 | }, 142 | updateDisplay: function () { 143 | return this; 144 | }, 145 | isModified: function () { 146 | return this.initialValue !== this.getValue(); 147 | }, 148 | }); 149 | return a; 150 | })(dat.utils.common); 151 | dat.dom.dom = (function (e) { 152 | function a(b) { 153 | if (b === "0" || e.isUndefined(b)) return 0; 154 | b = b.match(d); 155 | return !e.isNull(b) ? parseFloat(b[1]) : 0; 156 | } 157 | var c = {}; 158 | e.each( 159 | { 160 | HTMLEvents: ["change"], 161 | MouseEvents: ["click", "mousemove", "mousedown", "mouseup", "mouseover"], 162 | KeyboardEvents: ["keydown"], 163 | }, 164 | function (b, a) { 165 | e.each(b, function (b) { 166 | c[b] = a; 167 | }); 168 | } 169 | ); 170 | var d = /(\d+(\.\d+)?)px/, 171 | f = { 172 | makeSelectable: function (b, a) { 173 | if (!(b === void 0 || b.style === void 0)) 174 | (b.onselectstart = a 175 | ? function () { 176 | return false; 177 | } 178 | : function () {}), 179 | (b.style.MozUserSelect = a ? "auto" : "none"), 180 | (b.style.KhtmlUserSelect = a ? "auto" : "none"), 181 | (b.unselectable = a ? "on" : "off"); 182 | }, 183 | makeFullscreen: function (b, a, d) { 184 | e.isUndefined(a) && (a = true); 185 | e.isUndefined(d) && (d = true); 186 | b.style.position = "absolute"; 187 | if (a) (b.style.left = 0), (b.style.right = 0); 188 | if (d) (b.style.top = 0), (b.style.bottom = 0); 189 | }, 190 | fakeEvent: function (b, a, d, f) { 191 | var d = d || {}, 192 | m = c[a]; 193 | if (!m) throw Error("Event type " + a + " not supported."); 194 | var l = document.createEvent(m); 195 | switch (m) { 196 | case "MouseEvents": 197 | l.initMouseEvent( 198 | a, 199 | d.bubbles || false, 200 | d.cancelable || true, 201 | window, 202 | d.clickCount || 1, 203 | 0, 204 | 0, 205 | d.x || d.clientX || 0, 206 | d.y || d.clientY || 0, 207 | false, 208 | false, 209 | false, 210 | false, 211 | 0, 212 | null 213 | ); 214 | break; 215 | case "KeyboardEvents": 216 | m = l.initKeyboardEvent || l.initKeyEvent; 217 | e.defaults(d, { 218 | cancelable: true, 219 | ctrlKey: false, 220 | altKey: false, 221 | shiftKey: false, 222 | metaKey: false, 223 | keyCode: void 0, 224 | charCode: void 0, 225 | }); 226 | m( 227 | a, 228 | d.bubbles || false, 229 | d.cancelable, 230 | window, 231 | d.ctrlKey, 232 | d.altKey, 233 | d.shiftKey, 234 | d.metaKey, 235 | d.keyCode, 236 | d.charCode 237 | ); 238 | break; 239 | default: 240 | l.initEvent(a, d.bubbles || false, d.cancelable || true); 241 | } 242 | e.defaults(l, f); 243 | b.dispatchEvent(l); 244 | }, 245 | bind: function (b, a, d, c) { 246 | b.addEventListener 247 | ? b.addEventListener(a, d, c || false) 248 | : b.attachEvent && b.attachEvent("on" + a, d); 249 | return f; 250 | }, 251 | unbind: function (b, a, d, c) { 252 | b.removeEventListener 253 | ? b.removeEventListener(a, d, c || false) 254 | : b.detachEvent && b.detachEvent("on" + a, d); 255 | return f; 256 | }, 257 | addClass: function (b, a) { 258 | if (b.className === void 0) b.className = a; 259 | else if (b.className !== a) { 260 | var d = b.className.split(/ +/); 261 | if (d.indexOf(a) == -1) 262 | d.push(a), 263 | (b.className = d 264 | .join(" ") 265 | .replace(/^\s+/, "") 266 | .replace(/\s+$/, "")); 267 | } 268 | return f; 269 | }, 270 | removeClass: function (b, a) { 271 | if (a) { 272 | if (b.className !== void 0) 273 | if (b.className === a) b.removeAttribute("class"); 274 | else { 275 | var d = b.className.split(/ +/), 276 | c = d.indexOf(a); 277 | if (c != -1) d.splice(c, 1), (b.className = d.join(" ")); 278 | } 279 | } else b.className = void 0; 280 | return f; 281 | }, 282 | hasClass: function (a, d) { 283 | return ( 284 | RegExp("(?:^|\\s+)" + d + "(?:\\s+|$)").test(a.className) || false 285 | ); 286 | }, 287 | getWidth: function (b) { 288 | b = getComputedStyle(b); 289 | return ( 290 | a(b["border-left-width"]) + 291 | a(b["border-right-width"]) + 292 | a(b["padding-left"]) + 293 | a(b["padding-right"]) + 294 | a(b.width) 295 | ); 296 | }, 297 | getHeight: function (b) { 298 | b = getComputedStyle(b); 299 | return ( 300 | a(b["border-top-width"]) + 301 | a(b["border-bottom-width"]) + 302 | a(b["padding-top"]) + 303 | a(b["padding-bottom"]) + 304 | a(b.height) 305 | ); 306 | }, 307 | getOffset: function (a) { 308 | var d = { left: 0, top: 0 }; 309 | if (a.offsetParent) { 310 | do (d.left += a.offsetLeft), (d.top += a.offsetTop); 311 | while ((a = a.offsetParent)); 312 | } 313 | return d; 314 | }, 315 | isActive: function (a) { 316 | return a === document.activeElement && (a.type || a.href); 317 | }, 318 | }; 319 | return f; 320 | })(dat.utils.common); 321 | dat.controllers.OptionController = (function (e, a, c) { 322 | var d = function (f, b, e) { 323 | d.superclass.call(this, f, b); 324 | var h = this; 325 | this.__select = document.createElement("select"); 326 | if (c.isArray(e)) { 327 | var j = {}; 328 | c.each(e, function (a) { 329 | j[a] = a; 330 | }); 331 | e = j; 332 | } 333 | c.each(e, function (a, b) { 334 | var d = document.createElement("option"); 335 | d.innerHTML = b; 336 | d.setAttribute("value", a); 337 | h.__select.appendChild(d); 338 | }); 339 | this.updateDisplay(); 340 | a.bind(this.__select, "change", function () { 341 | h.setValue(this.options[this.selectedIndex].value); 342 | }); 343 | this.domElement.appendChild(this.__select); 344 | }; 345 | d.superclass = e; 346 | c.extend(d.prototype, e.prototype, { 347 | setValue: function (a) { 348 | a = d.superclass.prototype.setValue.call(this, a); 349 | this.__onFinishChange && 350 | this.__onFinishChange.call(this, this.getValue()); 351 | return a; 352 | }, 353 | updateDisplay: function () { 354 | this.__select.value = this.getValue(); 355 | return d.superclass.prototype.updateDisplay.call(this); 356 | }, 357 | }); 358 | return d; 359 | })(dat.controllers.Controller, dat.dom.dom, dat.utils.common); 360 | dat.controllers.NumberController = (function (e, a) { 361 | var c = function (d, f, b) { 362 | c.superclass.call(this, d, f); 363 | b = b || {}; 364 | this.__min = b.min; 365 | this.__max = b.max; 366 | this.__step = b.step; 367 | d = this.__impliedStep = a.isUndefined(this.__step) 368 | ? this.initialValue == 0 369 | ? 1 370 | : Math.pow(10, Math.floor(Math.log(this.initialValue) / Math.LN10)) / 10 371 | : this.__step; 372 | d = d.toString(); 373 | this.__precision = d.indexOf(".") > -1 ? d.length - d.indexOf(".") - 1 : 0; 374 | }; 375 | c.superclass = e; 376 | a.extend(c.prototype, e.prototype, { 377 | setValue: function (a) { 378 | if (this.__min !== void 0 && a < this.__min) a = this.__min; 379 | else if (this.__max !== void 0 && a > this.__max) a = this.__max; 380 | this.__step !== void 0 && 381 | a % this.__step != 0 && 382 | (a = Math.round(a / this.__step) * this.__step); 383 | return c.superclass.prototype.setValue.call(this, a); 384 | }, 385 | min: function (a) { 386 | this.__min = a; 387 | return this; 388 | }, 389 | max: function (a) { 390 | this.__max = a; 391 | return this; 392 | }, 393 | step: function (a) { 394 | this.__step = a; 395 | return this; 396 | }, 397 | }); 398 | return c; 399 | })(dat.controllers.Controller, dat.utils.common); 400 | dat.controllers.NumberControllerBox = (function (e, a, c) { 401 | var d = function (f, b, e) { 402 | function h() { 403 | var a = parseFloat(l.__input.value); 404 | c.isNaN(a) || l.setValue(a); 405 | } 406 | function j(a) { 407 | var b = o - a.clientY; 408 | l.setValue(l.getValue() + b * l.__impliedStep); 409 | o = a.clientY; 410 | } 411 | function m() { 412 | a.unbind(window, "mousemove", j); 413 | a.unbind(window, "mouseup", m); 414 | } 415 | this.__truncationSuspended = false; 416 | d.superclass.call(this, f, b, e); 417 | var l = this, 418 | o; 419 | this.__input = document.createElement("input"); 420 | this.__input.setAttribute("type", "text"); 421 | a.bind(this.__input, "change", h); 422 | a.bind(this.__input, "blur", function () { 423 | h(); 424 | l.__onFinishChange && l.__onFinishChange.call(l, l.getValue()); 425 | }); 426 | a.bind(this.__input, "mousedown", function (b) { 427 | a.bind(window, "mousemove", j); 428 | a.bind(window, "mouseup", m); 429 | o = b.clientY; 430 | }); 431 | a.bind(this.__input, "keydown", function (a) { 432 | if (a.keyCode === 13) 433 | (l.__truncationSuspended = true), 434 | this.blur(), 435 | (l.__truncationSuspended = false); 436 | }); 437 | this.updateDisplay(); 438 | this.domElement.appendChild(this.__input); 439 | }; 440 | d.superclass = e; 441 | c.extend(d.prototype, e.prototype, { 442 | updateDisplay: function () { 443 | var a = this.__input, 444 | b; 445 | if (this.__truncationSuspended) b = this.getValue(); 446 | else { 447 | b = this.getValue(); 448 | var c = Math.pow(10, this.__precision); 449 | b = Math.round(b * c) / c; 450 | } 451 | a.value = b; 452 | return d.superclass.prototype.updateDisplay.call(this); 453 | }, 454 | }); 455 | return d; 456 | })(dat.controllers.NumberController, dat.dom.dom, dat.utils.common); 457 | dat.controllers.NumberControllerSlider = (function (e, a, c, d, f) { 458 | var b = function (d, c, f, e, l) { 459 | function o(b) { 460 | b.preventDefault(); 461 | var d = a.getOffset(g.__background), 462 | c = a.getWidth(g.__background); 463 | g.setValue( 464 | g.__min + 465 | (g.__max - g.__min) * ((b.clientX - d.left) / (d.left + c - d.left)) 466 | ); 467 | return false; 468 | } 469 | function y() { 470 | a.unbind(window, "mousemove", o); 471 | a.unbind(window, "mouseup", y); 472 | g.__onFinishChange && g.__onFinishChange.call(g, g.getValue()); 473 | } 474 | b.superclass.call(this, d, c, { min: f, max: e, step: l }); 475 | var g = this; 476 | this.__background = document.createElement("div"); 477 | this.__foreground = document.createElement("div"); 478 | a.bind(this.__background, "mousedown", function (b) { 479 | a.bind(window, "mousemove", o); 480 | a.bind(window, "mouseup", y); 481 | o(b); 482 | }); 483 | a.addClass(this.__background, "slider"); 484 | a.addClass(this.__foreground, "slider-fg"); 485 | this.updateDisplay(); 486 | this.__background.appendChild(this.__foreground); 487 | this.domElement.appendChild(this.__background); 488 | }; 489 | b.superclass = e; 490 | b.useDefaultStyles = function () { 491 | c.inject(f); 492 | }; 493 | d.extend(b.prototype, e.prototype, { 494 | updateDisplay: function () { 495 | this.__foreground.style.width = 496 | ((this.getValue() - this.__min) / (this.__max - this.__min)) * 100 + 497 | "%"; 498 | return b.superclass.prototype.updateDisplay.call(this); 499 | }, 500 | }); 501 | return b; 502 | })( 503 | dat.controllers.NumberController, 504 | dat.dom.dom, 505 | dat.utils.css, 506 | dat.utils.common, 507 | ".slider {\n box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);\n height: 1em;\n border-radius: 1em;\n background-color: #eee;\n padding: 0 0.5em;\n overflow: hidden;\n}\n\n.slider-fg {\n padding: 1px 0 2px 0;\n background-color: #aaa;\n height: 1em;\n margin-left: -0.5em;\n padding-right: 0.5em;\n border-radius: 1em 0 0 1em;\n}\n\n.slider-fg:after {\n display: inline-block;\n border-radius: 1em;\n background-color: #fff;\n border: 1px solid #aaa;\n content: '';\n float: right;\n margin-right: -1em;\n margin-top: -1px;\n height: 0.9em;\n width: 0.9em;\n}" 508 | ); 509 | dat.controllers.FunctionController = (function (e, a, c) { 510 | var d = function (c, b, e) { 511 | d.superclass.call(this, c, b); 512 | var h = this; 513 | this.__button = document.createElement("div"); 514 | this.__button.innerHTML = e === void 0 ? "Fire" : e; 515 | a.bind(this.__button, "click", function (a) { 516 | a.preventDefault(); 517 | h.fire(); 518 | return false; 519 | }); 520 | a.addClass(this.__button, "button"); 521 | this.domElement.appendChild(this.__button); 522 | }; 523 | d.superclass = e; 524 | c.extend(d.prototype, e.prototype, { 525 | fire: function () { 526 | this.__onChange && this.__onChange.call(this); 527 | this.__onFinishChange && 528 | this.__onFinishChange.call(this, this.getValue()); 529 | this.getValue().call(this.object); 530 | }, 531 | }); 532 | return d; 533 | })(dat.controllers.Controller, dat.dom.dom, dat.utils.common); 534 | dat.controllers.BooleanController = (function (e, a, c) { 535 | var d = function (c, b) { 536 | d.superclass.call(this, c, b); 537 | var e = this; 538 | this.__prev = this.getValue(); 539 | this.__checkbox = document.createElement("input"); 540 | this.__checkbox.setAttribute("type", "checkbox"); 541 | a.bind( 542 | this.__checkbox, 543 | "change", 544 | function () { 545 | e.setValue(!e.__prev); 546 | }, 547 | false 548 | ); 549 | this.domElement.appendChild(this.__checkbox); 550 | this.updateDisplay(); 551 | }; 552 | d.superclass = e; 553 | c.extend(d.prototype, e.prototype, { 554 | setValue: function (a) { 555 | a = d.superclass.prototype.setValue.call(this, a); 556 | this.__onFinishChange && 557 | this.__onFinishChange.call(this, this.getValue()); 558 | this.__prev = this.getValue(); 559 | return a; 560 | }, 561 | updateDisplay: function () { 562 | this.getValue() === true 563 | ? (this.__checkbox.setAttribute("checked", "checked"), 564 | (this.__checkbox.checked = true)) 565 | : (this.__checkbox.checked = false); 566 | return d.superclass.prototype.updateDisplay.call(this); 567 | }, 568 | }); 569 | return d; 570 | })(dat.controllers.Controller, dat.dom.dom, dat.utils.common); 571 | dat.color.toString = (function (e) { 572 | return function (a) { 573 | if (a.a == 1 || e.isUndefined(a.a)) { 574 | for (a = a.hex.toString(16); a.length < 6; ) a = "0" + a; 575 | return "#" + a; 576 | } else 577 | return ( 578 | "rgba(" + 579 | Math.round(a.r) + 580 | "," + 581 | Math.round(a.g) + 582 | "," + 583 | Math.round(a.b) + 584 | "," + 585 | a.a + 586 | ")" 587 | ); 588 | }; 589 | })(dat.utils.common); 590 | dat.color.interpret = (function (e, a) { 591 | var c, 592 | d, 593 | f = [ 594 | { 595 | litmus: a.isString, 596 | conversions: { 597 | THREE_CHAR_HEX: { 598 | read: function (a) { 599 | a = a.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i); 600 | return a === null 601 | ? false 602 | : { 603 | space: "HEX", 604 | hex: parseInt( 605 | "0x" + 606 | a[1].toString() + 607 | a[1].toString() + 608 | a[2].toString() + 609 | a[2].toString() + 610 | a[3].toString() + 611 | a[3].toString() 612 | ), 613 | }; 614 | }, 615 | write: e, 616 | }, 617 | SIX_CHAR_HEX: { 618 | read: function (a) { 619 | a = a.match(/^#([A-F0-9]{6})$/i); 620 | return a === null 621 | ? false 622 | : { space: "HEX", hex: parseInt("0x" + a[1].toString()) }; 623 | }, 624 | write: e, 625 | }, 626 | CSS_RGB: { 627 | read: function (a) { 628 | a = a.match(/^rgb$\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*$/); 629 | return a === null 630 | ? false 631 | : { 632 | space: "RGB", 633 | r: parseFloat(a[1]), 634 | g: parseFloat(a[2]), 635 | b: parseFloat(a[3]), 636 | }; 637 | }, 638 | write: e, 639 | }, 640 | CSS_RGBA: { 641 | read: function (a) { 642 | a = a.match( 643 | /^rgba$\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\,\s*(.+)\s*$/ 644 | ); 645 | return a === null 646 | ? false 647 | : { 648 | space: "RGB", 649 | r: parseFloat(a[1]), 650 | g: parseFloat(a[2]), 651 | b: parseFloat(a[3]), 652 | a: parseFloat(a[4]), 653 | }; 654 | }, 655 | write: e, 656 | }, 657 | }, 658 | }, 659 | { 660 | litmus: a.isNumber, 661 | conversions: { 662 | HEX: { 663 | read: function (a) { 664 | return { space: "HEX", hex: a, conversionName: "HEX" }; 665 | }, 666 | write: function (a) { 667 | return a.hex; 668 | }, 669 | }, 670 | }, 671 | }, 672 | { 673 | litmus: a.isArray, 674 | conversions: { 675 | RGB_ARRAY: { 676 | read: function (a) { 677 | return a.length != 3 678 | ? false 679 | : { space: "RGB", r: a[0], g: a[1], b: a[2] }; 680 | }, 681 | write: function (a) { 682 | return [a.r, a.g, a.b]; 683 | }, 684 | }, 685 | RGBA_ARRAY: { 686 | read: function (a) { 687 | return a.length != 4 688 | ? false 689 | : { space: "RGB", r: a[0], g: a[1], b: a[2], a: a[3] }; 690 | }, 691 | write: function (a) { 692 | return [a.r, a.g, a.b, a.a]; 693 | }, 694 | }, 695 | }, 696 | }, 697 | { 698 | litmus: a.isObject, 699 | conversions: { 700 | RGBA_OBJ: { 701 | read: function (b) { 702 | return a.isNumber(b.r) && 703 | a.isNumber(b.g) && 704 | a.isNumber(b.b) && 705 | a.isNumber(b.a) 706 | ? { space: "RGB", r: b.r, g: b.g, b: b.b, a: b.a } 707 | : false; 708 | }, 709 | write: function (a) { 710 | return { r: a.r, g: a.g, b: a.b, a: a.a }; 711 | }, 712 | }, 713 | RGB_OBJ: { 714 | read: function (b) { 715 | return a.isNumber(b.r) && a.isNumber(b.g) && a.isNumber(b.b) 716 | ? { space: "RGB", r: b.r, g: b.g, b: b.b } 717 | : false; 718 | }, 719 | write: function (a) { 720 | return { r: a.r, g: a.g, b: a.b }; 721 | }, 722 | }, 723 | HSVA_OBJ: { 724 | read: function (b) { 725 | return a.isNumber(b.h) && 726 | a.isNumber(b.s) && 727 | a.isNumber(b.v) && 728 | a.isNumber(b.a) 729 | ? { space: "HSV", h: b.h, s: b.s, v: b.v, a: b.a } 730 | : false; 731 | }, 732 | write: function (a) { 733 | return { h: a.h, s: a.s, v: a.v, a: a.a }; 734 | }, 735 | }, 736 | HSV_OBJ: { 737 | read: function (b) { 738 | return a.isNumber(b.h) && a.isNumber(b.s) && a.isNumber(b.v) 739 | ? { space: "HSV", h: b.h, s: b.s, v: b.v } 740 | : false; 741 | }, 742 | write: function (a) { 743 | return { h: a.h, s: a.s, v: a.v }; 744 | }, 745 | }, 746 | }, 747 | }, 748 | ]; 749 | return function () { 750 | d = false; 751 | var b = arguments.length > 1 ? a.toArray(arguments) : arguments[0]; 752 | a.each(f, function (e) { 753 | if (e.litmus(b)) 754 | return ( 755 | a.each(e.conversions, function (e, f) { 756 | c = e.read(b); 757 | if (d === false && c !== false) 758 | return ( 759 | (d = c), (c.conversionName = f), (c.conversion = e), a.BREAK 760 | ); 761 | }), 762 | a.BREAK 763 | ); 764 | }); 765 | return d; 766 | }; 767 | })(dat.color.toString, dat.utils.common); 768 | dat.GUI = dat.gui.GUI = (function ( 769 | e, 770 | a, 771 | c, 772 | d, 773 | f, 774 | b, 775 | n, 776 | h, 777 | j, 778 | m, 779 | l, 780 | o, 781 | y, 782 | g, 783 | i 784 | ) { 785 | function q(a, b, r, c) { 786 | if (b[r] === void 0) 787 | throw Error("Object " + b + ' has no property "' + r + '"'); 788 | c.color 789 | ? (b = new l(b, r)) 790 | : ((b = [b, r].concat(c.factoryArgs)), (b = d.apply(a, b))); 791 | if (c.before instanceof f) c.before = c.before.__li; 792 | t(a, b); 793 | g.addClass(b.domElement, "c"); 794 | r = document.createElement("span"); 795 | g.addClass(r, "property-name"); 796 | r.innerHTML = b.property; 797 | var e = document.createElement("div"); 798 | e.appendChild(r); 799 | e.appendChild(b.domElement); 800 | c = s(a, e, c.before); 801 | g.addClass(c, k.CLASS_CONTROLLER_ROW); 802 | g.addClass(c, typeof b.getValue()); 803 | p(a, c, b); 804 | a.__controllers.push(b); 805 | return b; 806 | } 807 | function s(a, b, d) { 808 | var c = document.createElement("li"); 809 | b && c.appendChild(b); 810 | d ? a.__ul.insertBefore(c, params.before) : a.__ul.appendChild(c); 811 | a.onResize(); 812 | return c; 813 | } 814 | function p(a, d, c) { 815 | c.__li = d; 816 | c.__gui = a; 817 | i.extend(c, { 818 | options: function (b) { 819 | if (arguments.length > 1) 820 | return ( 821 | c.remove(), 822 | q(a, c.object, c.property, { 823 | before: c.__li.nextElementSibling, 824 | factoryArgs: [i.toArray(arguments)], 825 | }) 826 | ); 827 | if (i.isArray(b) || i.isObject(b)) 828 | return ( 829 | c.remove(), 830 | q(a, c.object, c.property, { 831 | before: c.__li.nextElementSibling, 832 | factoryArgs: [b], 833 | }) 834 | ); 835 | }, 836 | name: function (a) { 837 | c.__li.firstElementChild.firstElementChild.innerHTML = a; 838 | return c; 839 | }, 840 | listen: function () { 841 | c.__gui.listen(c); 842 | return c; 843 | }, 844 | remove: function () { 845 | c.__gui.remove(c); 846 | return c; 847 | }, 848 | }); 849 | if (c instanceof j) { 850 | var e = new h(c.object, c.property, { 851 | min: c.__min, 852 | max: c.__max, 853 | step: c.__step, 854 | }); 855 | i.each(["updateDisplay", "onChange", "onFinishChange"], function (a) { 856 | var b = c[a], 857 | H = e[a]; 858 | c[a] = e[a] = function () { 859 | var a = Array.prototype.slice.call(arguments); 860 | b.apply(c, a); 861 | return H.apply(e, a); 862 | }; 863 | }); 864 | g.addClass(d, "has-slider"); 865 | c.domElement.insertBefore(e.domElement, c.domElement.firstElementChild); 866 | } else if (c instanceof h) { 867 | var f = function (b) { 868 | return i.isNumber(c.__min) && i.isNumber(c.__max) 869 | ? (c.remove(), 870 | q(a, c.object, c.property, { 871 | before: c.__li.nextElementSibling, 872 | factoryArgs: [c.__min, c.__max, c.__step], 873 | })) 874 | : b; 875 | }; 876 | c.min = i.compose(f, c.min); 877 | c.max = i.compose(f, c.max); 878 | } else if (c instanceof b) 879 | g.bind(d, "click", function () { 880 | g.fakeEvent(c.__checkbox, "click"); 881 | }), 882 | g.bind(c.__checkbox, "click", function (a) { 883 | a.stopPropagation(); 884 | }); 885 | else if (c instanceof n) 886 | g.bind(d, "click", function () { 887 | g.fakeEvent(c.__button, "click"); 888 | }), 889 | g.bind(d, "mouseover", function () { 890 | g.addClass(c.__button, "hover"); 891 | }), 892 | g.bind(d, "mouseout", function () { 893 | g.removeClass(c.__button, "hover"); 894 | }); 895 | else if (c instanceof l) 896 | g.addClass(d, "color"), 897 | (c.updateDisplay = i.compose(function (a) { 898 | d.style.borderLeftColor = c.__color.toString(); 899 | return a; 900 | }, c.updateDisplay)), 901 | c.updateDisplay(); 902 | c.setValue = i.compose(function (b) { 903 | a.getRoot().__preset_select && c.isModified() && B(a.getRoot(), true); 904 | return b; 905 | }, c.setValue); 906 | } 907 | function t(a, b) { 908 | var c = a.getRoot(), 909 | d = c.__rememberedObjects.indexOf(b.object); 910 | if (d != -1) { 911 | var e = c.__rememberedObjectIndecesToControllers[d]; 912 | e === void 0 && 913 | ((e = {}), (c.__rememberedObjectIndecesToControllers[d] = e)); 914 | e[b.property] = b; 915 | if (c.load && c.load.remembered) { 916 | c = c.load.remembered; 917 | if (c[a.preset]) c = c[a.preset]; 918 | else if (c[w]) c = c[w]; 919 | else return; 920 | if (c[d] && c[d][b.property] !== void 0) 921 | (d = c[d][b.property]), (b.initialValue = d), b.setValue(d); 922 | } 923 | } 924 | } 925 | function I(a) { 926 | var b = (a.__save_row = document.createElement("li")); 927 | g.addClass(a.domElement, "has-save"); 928 | a.__ul.insertBefore(b, a.__ul.firstChild); 929 | g.addClass(b, "save-row"); 930 | var c = document.createElement("span"); 931 | c.innerHTML = " "; 932 | g.addClass(c, "button gears"); 933 | var d = document.createElement("span"); 934 | d.innerHTML = "Save"; 935 | g.addClass(d, "button"); 936 | g.addClass(d, "save"); 937 | var e = document.createElement("span"); 938 | e.innerHTML = "New"; 939 | g.addClass(e, "button"); 940 | g.addClass(e, "save-as"); 941 | var f = document.createElement("span"); 942 | f.innerHTML = "Revert"; 943 | g.addClass(f, "button"); 944 | g.addClass(f, "revert"); 945 | var m = (a.__preset_select = document.createElement("select")); 946 | a.load && a.load.remembered 947 | ? i.each(a.load.remembered, function (b, c) { 948 | C(a, c, c == a.preset); 949 | }) 950 | : C(a, w, false); 951 | g.bind(m, "change", function () { 952 | for (var b = 0; b < a.__preset_select.length; b++) 953 | a.__preset_select[b].innerHTML = a.__preset_select[b].value; 954 | a.preset = this.value; 955 | }); 956 | b.appendChild(m); 957 | b.appendChild(c); 958 | b.appendChild(d); 959 | b.appendChild(e); 960 | b.appendChild(f); 961 | if (u) { 962 | var b = document.getElementById("dg-save-locally"), 963 | l = document.getElementById("dg-local-explain"); 964 | b.style.display = "block"; 965 | b = document.getElementById("dg-local-storage"); 966 | localStorage.getItem(document.location.href + ".isLocal") === "true" && 967 | b.setAttribute("checked", "checked"); 968 | var o = function () { 969 | l.style.display = a.useLocalStorage ? "block" : "none"; 970 | }; 971 | o(); 972 | g.bind(b, "change", function () { 973 | a.useLocalStorage = !a.useLocalStorage; 974 | o(); 975 | }); 976 | } 977 | var h = document.getElementById("dg-new-constructor"); 978 | g.bind(h, "keydown", function (a) { 979 | a.metaKey && (a.which === 67 || a.keyCode == 67) && x.hide(); 980 | }); 981 | g.bind(c, "click", function () { 982 | h.innerHTML = JSON.stringify(a.getSaveObject(), void 0, 2); 983 | x.show(); 984 | h.focus(); 985 | h.select(); 986 | }); 987 | g.bind(d, "click", function () { 988 | a.save(); 989 | }); 990 | g.bind(e, "click", function () { 991 | var b = prompt("Enter a new preset name."); 992 | b && a.saveAs(b); 993 | }); 994 | g.bind(f, "click", function () { 995 | a.revert(); 996 | }); 997 | } 998 | function J(a) { 999 | function b(f) { 1000 | f.preventDefault(); 1001 | e = f.clientX; 1002 | g.addClass(a.__closeButton, k.CLASS_DRAG); 1003 | g.bind(window, "mousemove", c); 1004 | g.bind(window, "mouseup", d); 1005 | return false; 1006 | } 1007 | function c(b) { 1008 | b.preventDefault(); 1009 | a.width += e - b.clientX; 1010 | a.onResize(); 1011 | e = b.clientX; 1012 | return false; 1013 | } 1014 | function d() { 1015 | g.removeClass(a.__closeButton, k.CLASS_DRAG); 1016 | g.unbind(window, "mousemove", c); 1017 | g.unbind(window, "mouseup", d); 1018 | } 1019 | a.__resize_handle = document.createElement("div"); 1020 | i.extend(a.__resize_handle.style, { 1021 | width: "6px", 1022 | marginLeft: "-3px", 1023 | height: "200px", 1024 | cursor: "ew-resize", 1025 | position: "absolute", 1026 | }); 1027 | var e; 1028 | g.bind(a.__resize_handle, "mousedown", b); 1029 | g.bind(a.__closeButton, "mousedown", b); 1030 | a.domElement.insertBefore( 1031 | a.__resize_handle, 1032 | a.domElement.firstElementChild 1033 | ); 1034 | } 1035 | function D(a, b) { 1036 | a.domElement.style.width = b + "px"; 1037 | if (a.__save_row && a.autoPlace) a.__save_row.style.width = b + "px"; 1038 | if (a.__closeButton) a.__closeButton.style.width = b + "px"; 1039 | } 1040 | function z(a, b) { 1041 | var c = {}; 1042 | i.each(a.__rememberedObjects, function (d, e) { 1043 | var f = {}; 1044 | i.each(a.__rememberedObjectIndecesToControllers[e], function (a, c) { 1045 | f[c] = b ? a.initialValue : a.getValue(); 1046 | }); 1047 | c[e] = f; 1048 | }); 1049 | return c; 1050 | } 1051 | function C(a, b, c) { 1052 | var d = document.createElement("option"); 1053 | d.innerHTML = b; 1054 | d.value = b; 1055 | a.__preset_select.appendChild(d); 1056 | if (c) a.__preset_select.selectedIndex = a.__preset_select.length - 1; 1057 | } 1058 | function B(a, b) { 1059 | var c = a.__preset_select[a.__preset_select.selectedIndex]; 1060 | c.innerHTML = b ? c.value + "*" : c.value; 1061 | } 1062 | function E(a) { 1063 | a.length != 0 && 1064 | o(function () { 1065 | E(a); 1066 | }); 1067 | i.each(a, function (a) { 1068 | a.updateDisplay(); 1069 | }); 1070 | } 1071 | e.inject(c); 1072 | var w = "Default", 1073 | u; 1074 | try { 1075 | u = "localStorage" in window && window.localStorage !== null; 1076 | } catch (K) { 1077 | u = false; 1078 | } 1079 | var x, 1080 | F = true, 1081 | v, 1082 | A = false, 1083 | G = [], 1084 | k = function (a) { 1085 | function b() { 1086 | localStorage.setItem( 1087 | document.location.href + ".gui", 1088 | JSON.stringify(d.getSaveObject()) 1089 | ); 1090 | } 1091 | function c() { 1092 | var a = d.getRoot(); 1093 | a.width += 1; 1094 | i.defer(function () { 1095 | a.width -= 1; 1096 | }); 1097 | } 1098 | var d = this; 1099 | this.domElement = document.createElement("div"); 1100 | this.__ul = document.createElement("ul"); 1101 | this.domElement.appendChild(this.__ul); 1102 | g.addClass(this.domElement, "dg"); 1103 | this.__folders = {}; 1104 | this.__controllers = []; 1105 | this.__rememberedObjects = []; 1106 | this.__rememberedObjectIndecesToControllers = []; 1107 | this.__listening = []; 1108 | a = a || {}; 1109 | a = i.defaults(a, { autoPlace: true, width: k.DEFAULT_WIDTH }); 1110 | a = i.defaults(a, { resizable: a.autoPlace, hideable: a.autoPlace }); 1111 | if (i.isUndefined(a.load)) a.load = { preset: w }; 1112 | else if (a.preset) a.load.preset = a.preset; 1113 | i.isUndefined(a.parent) && a.hideable && G.push(this); 1114 | a.resizable = i.isUndefined(a.parent) && a.resizable; 1115 | if (a.autoPlace && i.isUndefined(a.scrollable)) a.scrollable = true; 1116 | var e = 1117 | u && 1118 | localStorage.getItem(document.location.href + ".isLocal") === "true"; 1119 | Object.defineProperties(this, { 1120 | parent: { 1121 | get: function () { 1122 | return a.parent; 1123 | }, 1124 | }, 1125 | scrollable: { 1126 | get: function () { 1127 | return a.scrollable; 1128 | }, 1129 | }, 1130 | autoPlace: { 1131 | get: function () { 1132 | return a.autoPlace; 1133 | }, 1134 | }, 1135 | preset: { 1136 | get: function () { 1137 | return d.parent ? d.getRoot().preset : a.load.preset; 1138 | }, 1139 | set: function (b) { 1140 | d.parent ? (d.getRoot().preset = b) : (a.load.preset = b); 1141 | for (b = 0; b < this.__preset_select.length; b++) 1142 | if (this.__preset_select[b].value == this.preset) 1143 | this.__preset_select.selectedIndex = b; 1144 | d.revert(); 1145 | }, 1146 | }, 1147 | width: { 1148 | get: function () { 1149 | return a.width; 1150 | }, 1151 | set: function (b) { 1152 | a.width = b; 1153 | D(d, b); 1154 | }, 1155 | }, 1156 | name: { 1157 | get: function () { 1158 | return a.name; 1159 | }, 1160 | set: function (b) { 1161 | a.name = b; 1162 | if (m) m.innerHTML = a.name; 1163 | }, 1164 | }, 1165 | closed: { 1166 | get: function () { 1167 | return a.closed; 1168 | }, 1169 | set: function (b) { 1170 | a.closed = b; 1171 | a.closed 1172 | ? g.addClass(d.__ul, k.CLASS_CLOSED) 1173 | : g.removeClass(d.__ul, k.CLASS_CLOSED); 1174 | this.onResize(); 1175 | if (d.__closeButton) 1176 | d.__closeButton.innerHTML = b ? k.TEXT_OPEN : k.TEXT_CLOSED; 1177 | }, 1178 | }, 1179 | load: { 1180 | get: function () { 1181 | return a.load; 1182 | }, 1183 | }, 1184 | useLocalStorage: { 1185 | get: function () { 1186 | return e; 1187 | }, 1188 | set: function (a) { 1189 | u && 1190 | ((e = a) 1191 | ? g.bind(window, "unload", b) 1192 | : g.unbind(window, "unload", b), 1193 | localStorage.setItem(document.location.href + ".isLocal", a)); 1194 | }, 1195 | }, 1196 | }); 1197 | if (i.isUndefined(a.parent)) { 1198 | a.closed = false; 1199 | g.addClass(this.domElement, k.CLASS_MAIN); 1200 | g.makeSelectable(this.domElement, false); 1201 | if (u && e) { 1202 | d.useLocalStorage = true; 1203 | var f = localStorage.getItem(document.location.href + ".gui"); 1204 | if (f) a.load = JSON.parse(f); 1205 | } 1206 | this.__closeButton = document.createElement("div"); 1207 | this.__closeButton.innerHTML = k.TEXT_CLOSED; 1208 | g.addClass(this.__closeButton, k.CLASS_CLOSE_BUTTON); 1209 | this.domElement.appendChild(this.__closeButton); 1210 | g.bind(this.__closeButton, "click", function () { 1211 | d.closed = !d.closed; 1212 | }); 1213 | } else { 1214 | if (a.closed === void 0) a.closed = true; 1215 | var m = document.createTextNode(a.name); 1216 | g.addClass(m, "controller-name"); 1217 | f = s(d, m); 1218 | g.addClass(this.__ul, k.CLASS_CLOSED); 1219 | g.addClass(f, "title"); 1220 | g.bind(f, "click", function (a) { 1221 | a.preventDefault(); 1222 | d.closed = !d.closed; 1223 | return false; 1224 | }); 1225 | if (!a.closed) this.closed = false; 1226 | } 1227 | a.autoPlace && 1228 | (i.isUndefined(a.parent) && 1229 | (F && 1230 | ((v = document.createElement("div")), 1231 | g.addClass(v, "dg"), 1232 | g.addClass(v, k.CLASS_AUTO_PLACE_CONTAINER), 1233 | document.body.appendChild(v), 1234 | (F = false)), 1235 | v.appendChild(this.domElement), 1236 | g.addClass(this.domElement, k.CLASS_AUTO_PLACE)), 1237 | this.parent || D(d, a.width)); 1238 | g.bind(window, "resize", function () { 1239 | d.onResize(); 1240 | }); 1241 | g.bind(this.__ul, "webkitTransitionEnd", function () { 1242 | d.onResize(); 1243 | }); 1244 | g.bind(this.__ul, "transitionend", function () { 1245 | d.onResize(); 1246 | }); 1247 | g.bind(this.__ul, "oTransitionEnd", function () { 1248 | d.onResize(); 1249 | }); 1250 | this.onResize(); 1251 | a.resizable && J(this); 1252 | d.getRoot(); 1253 | a.parent || c(); 1254 | }; 1255 | k.toggleHide = function () { 1256 | A = !A; 1257 | i.each(G, function (a) { 1258 | a.domElement.style.zIndex = A ? -999 : 999; 1259 | a.domElement.style.opacity = A ? 0 : 1; 1260 | }); 1261 | }; 1262 | k.CLASS_AUTO_PLACE = "a"; 1263 | k.CLASS_AUTO_PLACE_CONTAINER = "ac"; 1264 | k.CLASS_MAIN = "main"; 1265 | k.CLASS_CONTROLLER_ROW = "cr"; 1266 | k.CLASS_TOO_TALL = "taller-than-window"; 1267 | k.CLASS_CLOSED = "closed"; 1268 | k.CLASS_CLOSE_BUTTON = "close-button"; 1269 | k.CLASS_DRAG = "drag"; 1270 | k.DEFAULT_WIDTH = 245; 1271 | k.TEXT_CLOSED = "Close Controls"; 1272 | k.TEXT_OPEN = "Open Controls"; 1273 | g.bind( 1274 | window, 1275 | "keydown", 1276 | function (a) { 1277 | document.activeElement.type !== "text" && 1278 | (a.which === 72 || a.keyCode == 72) && 1279 | k.toggleHide(); 1280 | }, 1281 | false 1282 | ); 1283 | i.extend(k.prototype, { 1284 | add: function (a, b) { 1285 | return q(this, a, b, { 1286 | factoryArgs: Array.prototype.slice.call(arguments, 2), 1287 | }); 1288 | }, 1289 | addColor: function (a, b) { 1290 | return q(this, a, b, { color: true }); 1291 | }, 1292 | remove: function (a) { 1293 | this.__ul.removeChild(a.__li); 1294 | this.__controllers.slice(this.__controllers.indexOf(a), 1); 1295 | var b = this; 1296 | i.defer(function () { 1297 | b.onResize(); 1298 | }); 1299 | }, 1300 | destroy: function () { 1301 | this.autoPlace && v.removeChild(this.domElement); 1302 | }, 1303 | addFolder: function (a) { 1304 | if (this.__folders[a] !== void 0) 1305 | throw Error( 1306 | 'You already have a folder in this GUI by the name "' + a + '"' 1307 | ); 1308 | var b = { name: a, parent: this }; 1309 | b.autoPlace = this.autoPlace; 1310 | if (this.load && this.load.folders && this.load.folders[a]) 1311 | (b.closed = this.load.folders[a].closed), 1312 | (b.load = this.load.folders[a]); 1313 | b = new k(b); 1314 | this.__folders[a] = b; 1315 | a = s(this, b.domElement); 1316 | g.addClass(a, "folder"); 1317 | return b; 1318 | }, 1319 | open: function () { 1320 | this.closed = false; 1321 | }, 1322 | close: function () { 1323 | this.closed = true; 1324 | }, 1325 | onResize: function () { 1326 | var a = this.getRoot(); 1327 | if (a.scrollable) { 1328 | var b = g.getOffset(a.__ul).top, 1329 | c = 0; 1330 | i.each(a.__ul.childNodes, function (b) { 1331 | (a.autoPlace && b === a.__save_row) || (c += g.getHeight(b)); 1332 | }); 1333 | window.innerHeight - b - 20 < c 1334 | ? (g.addClass(a.domElement, k.CLASS_TOO_TALL), 1335 | (a.__ul.style.height = window.innerHeight - b - 20 + "px")) 1336 | : (g.removeClass(a.domElement, k.CLASS_TOO_TALL), 1337 | (a.__ul.style.height = "auto")); 1338 | } 1339 | a.__resize_handle && 1340 | i.defer(function () { 1341 | a.__resize_handle.style.height = a.__ul.offsetHeight + "px"; 1342 | }); 1343 | if (a.__closeButton) a.__closeButton.style.width = a.width + "px"; 1344 | }, 1345 | remember: function () { 1346 | if (i.isUndefined(x)) (x = new y()), (x.domElement.innerHTML = a); 1347 | if (this.parent) 1348 | throw Error("You can only call remember on a top level GUI."); 1349 | var b = this; 1350 | i.each(Array.prototype.slice.call(arguments), function (a) { 1351 | b.__rememberedObjects.length == 0 && I(b); 1352 | b.__rememberedObjects.indexOf(a) == -1 && b.__rememberedObjects.push(a); 1353 | }); 1354 | this.autoPlace && D(this, this.width); 1355 | }, 1356 | getRoot: function () { 1357 | for (var a = this; a.parent; ) a = a.parent; 1358 | return a; 1359 | }, 1360 | getSaveObject: function () { 1361 | var a = this.load; 1362 | a.closed = this.closed; 1363 | if (this.__rememberedObjects.length > 0) { 1364 | a.preset = this.preset; 1365 | if (!a.remembered) a.remembered = {}; 1366 | a.remembered[this.preset] = z(this); 1367 | } 1368 | a.folders = {}; 1369 | i.each(this.__folders, function (b, c) { 1370 | a.folders[c] = b.getSaveObject(); 1371 | }); 1372 | return a; 1373 | }, 1374 | save: function () { 1375 | if (!this.load.remembered) this.load.remembered = {}; 1376 | this.load.remembered[this.preset] = z(this); 1377 | B(this, false); 1378 | }, 1379 | saveAs: function (a) { 1380 | if (!this.load.remembered) 1381 | (this.load.remembered = {}), (this.load.remembered[w] = z(this, true)); 1382 | this.load.remembered[a] = z(this); 1383 | this.preset = a; 1384 | C(this, a, true); 1385 | }, 1386 | revert: function (a) { 1387 | i.each( 1388 | this.__controllers, 1389 | function (b) { 1390 | this.getRoot().load.remembered 1391 | ? t(a || this.getRoot(), b) 1392 | : b.setValue(b.initialValue); 1393 | }, 1394 | this 1395 | ); 1396 | i.each(this.__folders, function (a) { 1397 | a.revert(a); 1398 | }); 1399 | a || B(this.getRoot(), false); 1400 | }, 1401 | listen: function (a) { 1402 | var b = this.__listening.length == 0; 1403 | this.__listening.push(a); 1404 | b && E(this.__listening); 1405 | }, 1406 | }); 1407 | return k; 1408 | })( 1409 | dat.utils.css, 1410 | '

\n\n Here\'s the new load parameter for your GUI\'s constructor:\n\n \n\n

\n\n Automatically save\n values to localStorage on exit.\n\n

The values saved to localStorage will\n override those passed to dat.GUI\'s constructor. This makes it\n easier to work incrementally, but localStorage is fragile,\n and your friends may not see the same values you do.\n \n

\n \n

\n\n

', 1411 | ".dg ul{list-style:none;margin:0;padding:0;width:100%;clear:both}.dg.ac{position:fixed;top:0;left:0;right:0;height:0;z-index:0}.dg:not(.ac) .main{overflow:hidden}.dg.main{-webkit-transition:opacity 0.1s linear;-o-transition:opacity 0.1s linear;-moz-transition:opacity 0.1s linear;transition:opacity 0.1s linear}.dg.main.taller-than-window{overflow-y:auto}.dg.main.taller-than-window .close-button{opacity:1;margin-top:-1px;border-top:1px solid #2c2c2c}.dg.main ul.closed .close-button{opacity:1 !important}.dg.main:hover .close-button,.dg.main .close-button.drag{opacity:1}.dg.main .close-button{-webkit-transition:opacity 0.1s linear;-o-transition:opacity 0.1s linear;-moz-transition:opacity 0.1s linear;transition:opacity 0.1s linear;border:0;position:absolute;line-height:19px;height:20px;cursor:pointer;text-align:center;background-color:#000}.dg.main .close-button:hover{background-color:#111}.dg.a{float:right;margin-right:15px;overflow-x:hidden}.dg.a.has-save ul{margin-top:27px}.dg.a.has-save ul.closed{margin-top:0}.dg.a .save-row{position:fixed;top:0;z-index:1002}.dg li{-webkit-transition:height 0.1s ease-out;-o-transition:height 0.1s ease-out;-moz-transition:height 0.1s ease-out;transition:height 0.1s ease-out}.dg li:not(.folder){cursor:auto;height:27px;line-height:27px;overflow:hidden;padding:0 4px 0 5px}.dg li.folder{padding:0;border-left:4px solid rgba(0,0,0,0)}.dg li.title{cursor:pointer;margin-left:-4px}.dg .closed li:not(.title),.dg .closed ul li,.dg .closed ul li > *{height:0;overflow:hidden;border:0}.dg .cr{clear:both;padding-left:3px;height:27px}.dg .property-name{cursor:default;float:left;clear:left;width:40%;overflow:hidden;text-overflow:ellipsis}.dg .c{float:left;width:60%}.dg .c input[type=text]{border:0;margin-top:4px;padding:3px;width:100%;float:right}.dg .has-slider input[type=text]{width:30%;margin-left:0}.dg .slider{float:left;width:66%;margin-left:-5px;margin-right:0;height:19px;margin-top:4px}.dg .slider-fg{height:100%}.dg .c input[type=checkbox]{margin-top:9px}.dg .c select{margin-top:5px}.dg .cr.function,.dg .cr.function .property-name,.dg .cr.function *,.dg .cr.boolean,.dg .cr.boolean *{cursor:pointer}.dg .selector{display:none;position:absolute;margin-left:-9px;margin-top:23px;z-index:10}.dg .c:hover .selector,.dg .selector.drag{display:block}.dg li.save-row{padding:0}.dg li.save-row .button{display:inline-block;padding:0px 6px}.dg.dialogue{background-color:#222;width:460px;padding:15px;font-size:13px;line-height:15px}#dg-new-constructor{padding:10px;color:#222;font-family:Monaco, monospace;font-size:10px;border:0;resize:none;box-shadow:inset 1px 1px 1px #888;word-wrap:break-word;margin:12px 0;display:block;width:440px;overflow-y:scroll;height:100px;position:relative}#dg-local-explain{display:none;font-size:11px;line-height:17px;border-radius:3px;background-color:#333;padding:8px;margin-top:10px}#dg-local-explain code{font-size:10px}#dat-gui-save-locally{display:none}.dg{color:#eee;font:11px 'Lucida Grande', sans-serif;text-shadow:0 -1px 0 #111}.dg.main::-webkit-scrollbar{width:5px;background:#1a1a1a}.dg.main::-webkit-scrollbar-corner{height:0;display:none}.dg.main::-webkit-scrollbar-thumb{border-radius:5px;background:#676767}.dg li:not(.folder){background:#1a1a1a;border-bottom:1px solid #2c2c2c}.dg li.save-row{line-height:25px;background:#dad5cb;border:0}.dg li.save-row select{margin-left:5px;width:108px}.dg li.save-row .button{margin-left:5px;margin-top:1px;border-radius:2px;font-size:9px;line-height:7px;padding:4px 4px 5px 4px;background:#c5bdad;color:#fff;text-shadow:0 1px 0 #b0a58f;box-shadow:0 -1px 0 #b0a58f;cursor:pointer}.dg li.save-row .button.gears{background:#c5bdad url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat;height:7px;width:8px}.dg li.save-row .button:hover{background-color:#bab19e;box-shadow:0 -1px 0 #b0a58f}.dg li.folder{border-bottom:0}.dg li.title{padding-left:16px;background:#000 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.2)}.dg .closed li.title{background-image:url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==)}.dg .cr.boolean{border-left:3px solid #806787}.dg .cr.function{border-left:3px solid #e61d5f}.dg .cr.number{border-left:3px solid #2fa1d6}.dg .cr.number input[type=text]{color:#2fa1d6}.dg .cr.string{border-left:3px solid #1ed36f}.dg .cr.string input[type=text]{color:#1ed36f}.dg .cr.function:hover,.dg .cr.boolean:hover{background:#111}.dg .c input[type=text]{background:#303030;outline:none}.dg .c input[type=text]:hover{background:#3c3c3c}.dg .c input[type=text]:focus{background:#494949;color:#fff}.dg .c .slider{background:#303030;cursor:ew-resize}.dg .c .slider-fg{background:#2fa1d6}.dg .c .slider:hover{background:#3c3c3c}.dg .c .slider:hover .slider-fg{background:#44abda}\n", 1412 | (dat.controllers.factory = (function (e, a, c, d, f, b, n) { 1413 | return function (h, j, m, l) { 1414 | var o = h[j]; 1415 | if (n.isArray(m) || n.isObject(m)) return new e(h, j, m); 1416 | if (n.isNumber(o)) 1417 | return n.isNumber(m) && n.isNumber(l) 1418 | ? new c(h, j, m, l) 1419 | : new a(h, j, { min: m, max: l }); 1420 | if (n.isString(o)) return new d(h, j); 1421 | if (n.isFunction(o)) return new f(h, j, ""); 1422 | if (n.isBoolean(o)) return new b(h, j); 1423 | }; 1424 | })( 1425 | dat.controllers.OptionController, 1426 | dat.controllers.NumberControllerBox, 1427 | dat.controllers.NumberControllerSlider, 1428 | (dat.controllers.StringController = (function (e, a, c) { 1429 | var d = function (c, b) { 1430 | function e() { 1431 | h.setValue(h.__input.value); 1432 | } 1433 | d.superclass.call(this, c, b); 1434 | var h = this; 1435 | this.__input = document.createElement("input"); 1436 | this.__input.setAttribute("type", "text"); 1437 | a.bind(this.__input, "keyup", e); 1438 | a.bind(this.__input, "change", e); 1439 | a.bind(this.__input, "blur", function () { 1440 | h.__onFinishChange && h.__onFinishChange.call(h, h.getValue()); 1441 | }); 1442 | a.bind(this.__input, "keydown", function (a) { 1443 | a.keyCode === 13 && this.blur(); 1444 | }); 1445 | this.updateDisplay(); 1446 | this.domElement.appendChild(this.__input); 1447 | }; 1448 | d.superclass = e; 1449 | c.extend(d.prototype, e.prototype, { 1450 | updateDisplay: function () { 1451 | if (!a.isActive(this.__input)) this.__input.value = this.getValue(); 1452 | return d.superclass.prototype.updateDisplay.call(this); 1453 | }, 1454 | }); 1455 | return d; 1456 | })(dat.controllers.Controller, dat.dom.dom, dat.utils.common)), 1457 | dat.controllers.FunctionController, 1458 | dat.controllers.BooleanController, 1459 | dat.utils.common 1460 | )), 1461 | dat.controllers.Controller, 1462 | dat.controllers.BooleanController, 1463 | dat.controllers.FunctionController, 1464 | dat.controllers.NumberControllerBox, 1465 | dat.controllers.NumberControllerSlider, 1466 | dat.controllers.OptionController, 1467 | (dat.controllers.ColorController = (function (e, a, c, d, f) { 1468 | function b(a, b, c, d) { 1469 | a.style.background = ""; 1470 | f.each(j, function (e) { 1471 | a.style.cssText += 1472 | "background: " + 1473 | e + 1474 | "linear-gradient(" + 1475 | b + 1476 | ", " + 1477 | c + 1478 | " 0%, " + 1479 | d + 1480 | " 100%); "; 1481 | }); 1482 | } 1483 | function n(a) { 1484 | a.style.background = ""; 1485 | a.style.cssText += 1486 | "background: -moz-linear-gradient(top, #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);"; 1487 | a.style.cssText += 1488 | "background: -webkit-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);"; 1489 | a.style.cssText += 1490 | "background: -o-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);"; 1491 | a.style.cssText += 1492 | "background: -ms-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);"; 1493 | a.style.cssText += 1494 | "background: linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);"; 1495 | } 1496 | var h = function (e, l) { 1497 | function o(b) { 1498 | q(b); 1499 | a.bind(window, "mousemove", q); 1500 | a.bind(window, "mouseup", j); 1501 | } 1502 | function j() { 1503 | a.unbind(window, "mousemove", q); 1504 | a.unbind(window, "mouseup", j); 1505 | } 1506 | function g() { 1507 | var a = d(this.value); 1508 | a !== false 1509 | ? ((p.__color.__state = a), p.setValue(p.__color.toOriginal())) 1510 | : (this.value = p.__color.toString()); 1511 | } 1512 | function i() { 1513 | a.unbind(window, "mousemove", s); 1514 | a.unbind(window, "mouseup", i); 1515 | } 1516 | function q(b) { 1517 | b.preventDefault(); 1518 | var c = a.getWidth(p.__saturation_field), 1519 | d = a.getOffset(p.__saturation_field), 1520 | e = (b.clientX - d.left + document.body.scrollLeft) / c, 1521 | b = 1 - (b.clientY - d.top + document.body.scrollTop) / c; 1522 | b > 1 ? (b = 1) : b < 0 && (b = 0); 1523 | e > 1 ? (e = 1) : e < 0 && (e = 0); 1524 | p.__color.v = b; 1525 | p.__color.s = e; 1526 | p.setValue(p.__color.toOriginal()); 1527 | return false; 1528 | } 1529 | function s(b) { 1530 | b.preventDefault(); 1531 | var c = a.getHeight(p.__hue_field), 1532 | d = a.getOffset(p.__hue_field), 1533 | b = 1 - (b.clientY - d.top + document.body.scrollTop) / c; 1534 | b > 1 ? (b = 1) : b < 0 && (b = 0); 1535 | p.__color.h = b * 360; 1536 | p.setValue(p.__color.toOriginal()); 1537 | return false; 1538 | } 1539 | h.superclass.call(this, e, l); 1540 | this.__color = new c(this.getValue()); 1541 | this.__temp = new c(0); 1542 | var p = this; 1543 | this.domElement = document.createElement("div"); 1544 | a.makeSelectable(this.domElement, false); 1545 | this.__selector = document.createElement("div"); 1546 | this.__selector.className = "selector"; 1547 | this.__saturation_field = document.createElement("div"); 1548 | this.__saturation_field.className = "saturation-field"; 1549 | this.__field_knob = document.createElement("div"); 1550 | this.__field_knob.className = "field-knob"; 1551 | this.__field_knob_border = "2px solid "; 1552 | this.__hue_knob = document.createElement("div"); 1553 | this.__hue_knob.className = "hue-knob"; 1554 | this.__hue_field = document.createElement("div"); 1555 | this.__hue_field.className = "hue-field"; 1556 | this.__input = document.createElement("input"); 1557 | this.__input.type = "text"; 1558 | this.__input_textShadow = "0 1px 1px "; 1559 | a.bind(this.__input, "keydown", function (a) { 1560 | a.keyCode === 13 && g.call(this); 1561 | }); 1562 | a.bind(this.__input, "blur", g); 1563 | a.bind(this.__selector, "mousedown", function () { 1564 | a.addClass(this, "drag").bind(window, "mouseup", function () { 1565 | a.removeClass(p.__selector, "drag"); 1566 | }); 1567 | }); 1568 | var t = document.createElement("div"); 1569 | f.extend(this.__selector.style, { 1570 | width: "122px", 1571 | height: "102px", 1572 | padding: "3px", 1573 | backgroundColor: "#222", 1574 | boxShadow: "0px 1px 3px rgba(0,0,0,0.3)", 1575 | }); 1576 | f.extend(this.__field_knob.style, { 1577 | position: "absolute", 1578 | width: "12px", 1579 | height: "12px", 1580 | border: 1581 | this.__field_knob_border + (this.__color.v < 0.5 ? "#fff" : "#000"), 1582 | boxShadow: "0px 1px 3px rgba(0,0,0,0.5)", 1583 | borderRadius: "12px", 1584 | zIndex: 1, 1585 | }); 1586 | f.extend(this.__hue_knob.style, { 1587 | position: "absolute", 1588 | width: "15px", 1589 | height: "2px", 1590 | borderRight: "4px solid #fff", 1591 | zIndex: 1, 1592 | }); 1593 | f.extend(this.__saturation_field.style, { 1594 | width: "100px", 1595 | height: "100px", 1596 | border: "1px solid #555", 1597 | marginRight: "3px", 1598 | display: "inline-block", 1599 | cursor: "pointer", 1600 | }); 1601 | f.extend(t.style, { width: "100%", height: "100%", background: "none" }); 1602 | b(t, "top", "rgba(0,0,0,0)", "#000"); 1603 | f.extend(this.__hue_field.style, { 1604 | width: "15px", 1605 | height: "100px", 1606 | display: "inline-block", 1607 | border: "1px solid #555", 1608 | cursor: "ns-resize", 1609 | }); 1610 | n(this.__hue_field); 1611 | f.extend(this.__input.style, { 1612 | outline: "none", 1613 | textAlign: "center", 1614 | color: "#fff", 1615 | border: 0, 1616 | fontWeight: "bold", 1617 | textShadow: this.__input_textShadow + "rgba(0,0,0,0.7)", 1618 | }); 1619 | a.bind(this.__saturation_field, "mousedown", o); 1620 | a.bind(this.__field_knob, "mousedown", o); 1621 | a.bind(this.__hue_field, "mousedown", function (b) { 1622 | s(b); 1623 | a.bind(window, "mousemove", s); 1624 | a.bind(window, "mouseup", i); 1625 | }); 1626 | this.__saturation_field.appendChild(t); 1627 | this.__selector.appendChild(this.__field_knob); 1628 | this.__selector.appendChild(this.__saturation_field); 1629 | this.__selector.appendChild(this.__hue_field); 1630 | this.__hue_field.appendChild(this.__hue_knob); 1631 | this.domElement.appendChild(this.__input); 1632 | this.domElement.appendChild(this.__selector); 1633 | this.updateDisplay(); 1634 | }; 1635 | h.superclass = e; 1636 | f.extend(h.prototype, e.prototype, { 1637 | updateDisplay: function () { 1638 | var a = d(this.getValue()); 1639 | if (a !== false) { 1640 | var e = false; 1641 | f.each( 1642 | c.COMPONENTS, 1643 | function (b) { 1644 | if ( 1645 | !f.isUndefined(a[b]) && 1646 | !f.isUndefined(this.__color.__state[b]) && 1647 | a[b] !== this.__color.__state[b] 1648 | ) 1649 | return (e = true), {}; 1650 | }, 1651 | this 1652 | ); 1653 | e && f.extend(this.__color.__state, a); 1654 | } 1655 | f.extend(this.__temp.__state, this.__color.__state); 1656 | this.__temp.a = 1; 1657 | var h = this.__color.v < 0.5 || this.__color.s > 0.5 ? 255 : 0, 1658 | j = 255 - h; 1659 | f.extend(this.__field_knob.style, { 1660 | marginLeft: 100 * this.__color.s - 7 + "px", 1661 | marginTop: 100 * (1 - this.__color.v) - 7 + "px", 1662 | backgroundColor: this.__temp.toString(), 1663 | border: 1664 | this.__field_knob_border + "rgb(" + h + "," + h + "," + h + ")", 1665 | }); 1666 | this.__hue_knob.style.marginTop = 1667 | (1 - this.__color.h / 360) * 100 + "px"; 1668 | this.__temp.s = 1; 1669 | this.__temp.v = 1; 1670 | b(this.__saturation_field, "left", "#fff", this.__temp.toString()); 1671 | f.extend(this.__input.style, { 1672 | backgroundColor: (this.__input.value = this.__color.toString()), 1673 | color: "rgb(" + h + "," + h + "," + h + ")", 1674 | textShadow: 1675 | this.__input_textShadow + "rgba(" + j + "," + j + "," + j + ",.7)", 1676 | }); 1677 | }, 1678 | }); 1679 | var j = ["-moz-", "-o-", "-webkit-", "-ms-", ""]; 1680 | return h; 1681 | })( 1682 | dat.controllers.Controller, 1683 | dat.dom.dom, 1684 | (dat.color.Color = (function (e, a, c, d) { 1685 | function f(a, b, c) { 1686 | Object.defineProperty(a, b, { 1687 | get: function () { 1688 | if (this.__state.space === "RGB") return this.__state[b]; 1689 | n(this, b, c); 1690 | return this.__state[b]; 1691 | }, 1692 | set: function (a) { 1693 | if (this.__state.space !== "RGB") 1694 | n(this, b, c), (this.__state.space = "RGB"); 1695 | this.__state[b] = a; 1696 | }, 1697 | }); 1698 | } 1699 | function b(a, b) { 1700 | Object.defineProperty(a, b, { 1701 | get: function () { 1702 | if (this.__state.space === "HSV") return this.__state[b]; 1703 | h(this); 1704 | return this.__state[b]; 1705 | }, 1706 | set: function (a) { 1707 | if (this.__state.space !== "HSV") 1708 | h(this), (this.__state.space = "HSV"); 1709 | this.__state[b] = a; 1710 | }, 1711 | }); 1712 | } 1713 | function n(b, c, e) { 1714 | if (b.__state.space === "HEX") 1715 | b.__state[c] = a.component_from_hex(b.__state.hex, e); 1716 | else if (b.__state.space === "HSV") 1717 | d.extend( 1718 | b.__state, 1719 | a.hsv_to_rgb(b.__state.h, b.__state.s, b.__state.v) 1720 | ); 1721 | else throw "Corrupted color state"; 1722 | } 1723 | function h(b) { 1724 | var c = a.rgb_to_hsv(b.r, b.g, b.b); 1725 | d.extend(b.__state, { s: c.s, v: c.v }); 1726 | if (d.isNaN(c.h)) { 1727 | if (d.isUndefined(b.__state.h)) b.__state.h = 0; 1728 | } else b.__state.h = c.h; 1729 | } 1730 | var j = function () { 1731 | this.__state = e.apply(this, arguments); 1732 | if (this.__state === false) throw "Failed to interpret color arguments"; 1733 | this.__state.a = this.__state.a || 1; 1734 | }; 1735 | j.COMPONENTS = "r,g,b,h,s,v,hex,a".split(","); 1736 | d.extend(j.prototype, { 1737 | toString: function () { 1738 | return c(this); 1739 | }, 1740 | toOriginal: function () { 1741 | return this.__state.conversion.write(this); 1742 | }, 1743 | }); 1744 | f(j.prototype, "r", 2); 1745 | f(j.prototype, "g", 1); 1746 | f(j.prototype, "b", 0); 1747 | b(j.prototype, "h"); 1748 | b(j.prototype, "s"); 1749 | b(j.prototype, "v"); 1750 | Object.defineProperty(j.prototype, "a", { 1751 | get: function () { 1752 | return this.__state.a; 1753 | }, 1754 | set: function (a) { 1755 | this.__state.a = a; 1756 | }, 1757 | }); 1758 | Object.defineProperty(j.prototype, "hex", { 1759 | get: function () { 1760 | if (!this.__state.space !== "HEX") 1761 | this.__state.hex = a.rgb_to_hex(this.r, this.g, this.b); 1762 | return this.__state.hex; 1763 | }, 1764 | set: function (a) { 1765 | this.__state.space = "HEX"; 1766 | this.__state.hex = a; 1767 | }, 1768 | }); 1769 | return j; 1770 | })( 1771 | dat.color.interpret, 1772 | (dat.color.math = (function () { 1773 | var e; 1774 | return { 1775 | hsv_to_rgb: function (a, c, d) { 1776 | var e = a / 60 - Math.floor(a / 60), 1777 | b = d * (1 - c), 1778 | n = d * (1 - e * c), 1779 | c = d * (1 - (1 - e) * c), 1780 | a = [ 1781 | [d, c, b], 1782 | [n, d, b], 1783 | [b, d, c], 1784 | [b, n, d], 1785 | [c, b, d], 1786 | [d, b, n], 1787 | ][Math.floor(a / 60) % 6]; 1788 | return { r: a[0] * 255, g: a[1] * 255, b: a[2] * 255 }; 1789 | }, 1790 | rgb_to_hsv: function (a, c, d) { 1791 | var e = Math.min(a, c, d), 1792 | b = Math.max(a, c, d), 1793 | e = b - e; 1794 | if (b == 0) return { h: NaN, s: 0, v: 0 }; 1795 | a = 1796 | a == b ? (c - d) / e : c == b ? 2 + (d - a) / e : 4 + (a - c) / e; 1797 | a /= 6; 1798 | a < 0 && (a += 1); 1799 | return { h: a * 360, s: e / b, v: b / 255 }; 1800 | }, 1801 | rgb_to_hex: function (a, c, d) { 1802 | a = this.hex_with_component(0, 2, a); 1803 | a = this.hex_with_component(a, 1, c); 1804 | return (a = this.hex_with_component(a, 0, d)); 1805 | }, 1806 | component_from_hex: function (a, c) { 1807 | return (a >> (c * 8)) & 255; 1808 | }, 1809 | hex_with_component: function (a, c, d) { 1810 | return (d << (e = c * 8)) | (a & ~(255 << e)); 1811 | }, 1812 | }; 1813 | })()), 1814 | dat.color.toString, 1815 | dat.utils.common 1816 | )), 1817 | dat.color.interpret, 1818 | dat.utils.common 1819 | )), 1820 | (dat.utils.requestAnimationFrame = (function () { 1821 | return ( 1822 | window.webkitRequestAnimationFrame || 1823 | window.mozRequestAnimationFrame || 1824 | window.oRequestAnimationFrame || 1825 | window.msRequestAnimationFrame || 1826 | function (e) { 1827 | window.setTimeout(e, 1e3 / 60); 1828 | } 1829 | ); 1830 | })()), 1831 | (dat.dom.CenteredDiv = (function (e, a) { 1832 | var c = function () { 1833 | this.backgroundElement = document.createElement("div"); 1834 | a.extend(this.backgroundElement.style, { 1835 | backgroundColor: "rgba(0,0,0,0.8)", 1836 | top: 0, 1837 | left: 0, 1838 | display: "none", 1839 | zIndex: "1000", 1840 | opacity: 0, 1841 | WebkitTransition: "opacity 0.2s linear", 1842 | }); 1843 | e.makeFullscreen(this.backgroundElement); 1844 | this.backgroundElement.style.position = "fixed"; 1845 | this.domElement = document.createElement("div"); 1846 | a.extend(this.domElement.style, { 1847 | position: "fixed", 1848 | display: "none", 1849 | zIndex: "1001", 1850 | opacity: 0, 1851 | WebkitTransition: 1852 | "-webkit-transform 0.2s ease-out, opacity 0.2s linear", 1853 | }); 1854 | document.body.appendChild(this.backgroundElement); 1855 | document.body.appendChild(this.domElement); 1856 | var c = this; 1857 | e.bind(this.backgroundElement, "click", function () { 1858 | c.hide(); 1859 | }); 1860 | }; 1861 | c.prototype.show = function () { 1862 | var c = this; 1863 | this.backgroundElement.style.display = "block"; 1864 | this.domElement.style.display = "block"; 1865 | this.domElement.style.opacity = 0; 1866 | this.domElement.style.webkitTransform = "scale(1.1)"; 1867 | this.layout(); 1868 | a.defer(function () { 1869 | c.backgroundElement.style.opacity = 1; 1870 | c.domElement.style.opacity = 1; 1871 | c.domElement.style.webkitTransform = "scale(1)"; 1872 | }); 1873 | }; 1874 | c.prototype.hide = function () { 1875 | var a = this, 1876 | c = function () { 1877 | a.domElement.style.display = "none"; 1878 | a.backgroundElement.style.display = "none"; 1879 | e.unbind(a.domElement, "webkitTransitionEnd", c); 1880 | e.unbind(a.domElement, "transitionend", c); 1881 | e.unbind(a.domElement, "oTransitionEnd", c); 1882 | }; 1883 | e.bind(this.domElement, "webkitTransitionEnd", c); 1884 | e.bind(this.domElement, "transitionend", c); 1885 | e.bind(this.domElement, "oTransitionEnd", c); 1886 | this.backgroundElement.style.opacity = 0; 1887 | this.domElement.style.opacity = 0; 1888 | this.domElement.style.webkitTransform = "scale(1.1)"; 1889 | }; 1890 | c.prototype.layout = function () { 1891 | this.domElement.style.left = 1892 | window.innerWidth / 2 - e.getWidth(this.domElement) / 2 + "px"; 1893 | this.domElement.style.top = 1894 | window.innerHeight / 2 - e.getHeight(this.domElement) / 2 + "px"; 1895 | }; 1896 | return c; 1897 | })(dat.dom.dom, dat.utils.common)), 1898 | dat.dom.dom, 1899 | dat.utils.common 1900 | ); 1901 | --------------------------------------------------------------------------------