├── LICENSE
├── README.md
├── css
    └── cmcontrol.css
├── index.html
└── js
    ├── Wave.js
    └── libs
        ├── CMControl.min.js
        └── signals.min.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Jongmin Kim
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # wave
 2 | Javascript Wave animation
 3 | 
 4 | 
 5 | [![alt text](https://cmiscm.github.io/wave/screenshot/wave.jpg)](http://cmiscm.github.com/wave/)
 6 | 
 7 |  
 8 | ### Example
 9 | [http://cmiscm.github.com/wave/](http://cmiscm.github.com/wave/)
10 | 
11 | 
12 | ### Questions
13 | If you have any questions, please feel free to ask on [my blog](http://blog.cmiscm.com/?p=5452)
14 | 
15 | 
16 | ### License
17 | Copyright (c) 2017 Jongmin Kim (http://cmiscm.com) 
18 | 
19 | Licensed under the MIT license.
20 | 
21 |  - http://www.opensource.org/licenses/mit-license.php
22 | 


--------------------------------------------------------------------------------
/css/cmcontrol.css:
--------------------------------------------------------------------------------
  1 | .sidebar {
  2 |     position: absolute;
  3 |     left: 20px;
  4 |     top: 20px;
  5 |     width: 200px;
  6 |     background-color: rgba(0,0,0,0.8);
  7 |     overflow: auto;
  8 |     padding: 12px 15px;
  9 |     border-radius: 6px;
 10 |     overflow: hidden;
 11 | }
 12 | .sidebar .container {
 13 | 
 14 | }
 15 | .sidebar .detail {
 16 |     clear: both;
 17 | }
 18 | 
 19 | .title-bar {
 20 |     position: relative;
 21 |     width: 200px;
 22 |     cursor: move;
 23 | }
 24 | .title {
 25 |     position: relative;
 26 |     font-family: 'Helvetica', sans-serif;
 27 |     font-size: 12px;
 28 |     font-weight: 400;
 29 |     color: #fff;
 30 |     margin: 2px 0 1px 0;
 31 | }
 32 | .title-s {
 33 |     position: relative;
 34 |     font-family: 'Helvetica', sans-serif;
 35 |     font-size: 8px;
 36 |     font-weight: 400;
 37 |     color: rgba(255,255,255,0.5);
 38 | }
 39 | 
 40 | .my-over {
 41 |     background-color: #555;
 42 |     color: #aaa;
 43 |     cursor: pointer;
 44 | }
 45 | .my-over:hover {
 46 |     background-color: #fb2600;
 47 |     color: #fff;
 48 | }
 49 | .my-bt {
 50 |     background-color: #444;
 51 |     padding: 5px 0;
 52 |     width: 80px;
 53 |     text-align: center;
 54 |     font-family: 'Helvetica', sans-serif;
 55 |     font-size: 9px;
 56 |     font-weight: 400;
 57 |     position: relative;
 58 |     border-radius: 2px;
 59 |     display: inline-block;
 60 |     margin: 0 10px 0 0;
 61 | }
 62 | 
 63 | .label {
 64 |     height: 15px;
 65 |     position: relative;
 66 |     font-family: 'Helvetica', sans-serif;
 67 |     font-size: 10px;
 68 |     font-weight: 400;
 69 |     color: rgba(255,255,255,0.6);
 70 |     padding: 16px 0 0 0;
 71 | }
 72 | 
 73 | .link {
 74 |     cursor: pointer;
 75 |     height: 15px;
 76 |     position: relative;
 77 |     font-family: 'Helvetica', sans-serif;
 78 |     font-size: 10px;
 79 |     font-weight: 400;
 80 |     padding: 16px 0 0 0;
 81 | }
 82 | .link > a {
 83 |     color: rgba(255,255,255,0.4);
 84 |     text-decoration: none;
 85 | }
 86 | .link > a:hover {
 87 |     color: #fb2600;
 88 | }
 89 | 
 90 | .slide {
 91 |     background-color: #222;
 92 |     width: 200px;
 93 |     height: 6px;
 94 |     position: relative;
 95 |     margin: 2px 0 7px 0;
 96 | }
 97 | .slide .handle {
 98 |     width: 16px;
 99 |     height:10px;
100 |     position: absolute;
101 |     left: 0;
102 |     top: -2px;
103 |     cursor: col-resize;
104 |     border-radius: 2px;
105 | }
106 | 
107 | 
108 | 
109 | .label-gap {
110 |     padding-bottom: 10px;
111 | }
112 | 
113 | .label-s {
114 |     position: relative;
115 |     clear: both;
116 | }
117 | 
118 | .label-s-txt {
119 |     width: 45px;
120 |     position: relative;
121 |     float: left;
122 |     font-family: 'Helvetica', sans-serif;
123 |     font-size: 9px;
124 |     font-weight: 400;
125 |     color: #555;
126 |     height: 100%;
127 |     margin-top: 2px;
128 | }
129 | 
130 | .label-s-num {
131 |     width: 45px;
132 |     position: relative;
133 |     font-family: 'Helvetica', sans-serif;
134 |     font-size: 10px;
135 |     font-weight: 400;
136 |     margin-bottom: 6px;
137 |     color: #888;
138 | }
139 | .name-input {
140 |     width: 100px;
141 |     height: 18px;
142 |     font-family: 'Helvetica', sans-serif;
143 |     font-size: 10px;
144 |     font-weight: 400;
145 |     color: #777;
146 |     position: relative;
147 |     display: block;
148 |     float: left;
149 |     margin: -4px 0 10px 0;
150 |     padding: 0 0 0 5px;
151 |     border: 1px #454545 solid;
152 |     background: #1c1c1c;
153 | }
154 | 
155 | 
156 | 
157 | 
158 | .check {
159 |     display: inline-block;
160 |     position: relative;
161 | }
162 | .check .check-box {
163 |     display: inline-block;
164 |     margin-right: 4px;
165 |     vertical-align: middle;
166 | }
167 | .check .check-text {
168 |     font-family: 'Helvetica', sans-serif;
169 |     font-size: 10px;
170 |     font-weight: 400;
171 |     color: rgba(255,255,255,0.4);
172 |     display: inline-block;
173 |     vertical-align: middle;
174 |     margin: 0 12px 0 0;
175 | }
176 | .check-title-s {
177 |     margin-top: 1px;
178 | }
179 | 
180 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head xmlns="http://www.w3.org/1999/html">
 3 |     <meta charset="utf-8">
 4 |     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 5 |     <title>Wave</title>
 6 | 
 7 |     <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenLite.min.js"></script>
 8 |     <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/easing/EasePack.min.js"></script>
 9 |     <link href="css/cmcontrol.css" media="screen" rel="stylesheet" />
10 |     <style>
11 |         * {
12 |             outline:0;
13 |             margin: 0;
14 |             padding: 0;
15 |         }
16 |         html, body, canvas {
17 |             width:100%;
18 |             height:100%;
19 |             overflow: hidden;
20 |             background-color: #fff;
21 |             cursor: ns-resize;
22 |         }
23 |     </style>
24 | 
25 | </head>
26 | 
27 | <body>
28 |     <canvas></canvas>
29 | 
30 |     <script type="text/javascript" src="js/libs/signals.min.js"></script>
31 |     <script type="text/javascript" src="js/libs/CMControl.min.js"></script>
32 |     <script type="text/javascript" src="js/Wave.js"></script>
33 |     <script>
34 |         window.onload = Wave.init;
35 |     </script>
36 | </body>
37 | </html>


--------------------------------------------------------------------------------
/js/Wave.js:
--------------------------------------------------------------------------------
  1 | var Wave = Wave || ( function () {
  2 | 
  3 |         var $canvas, _ctx,
  4 |             _stageWidth, _stageHeight, _stageWidthHalf, _stageHeightHalf,
  5 |             _maxWidth, _widthGap,
  6 |             _isDown = 0, _mouseX = 0, _mouseY = 0,
  7 |             _points = [], _isShowPoint = 0,
  8 |             _isColor = 0,
  9 | 
 10 |             FRICTION = 0.96,
 11 |             TOTAL_WAVE = 3,
 12 |             TOTAL_POINTS = 8,
 13 |             COLORS = [
 14 |                 [
 15 |                     {h:189, s:100, l:46},
 16 |                     {h:196, s:100, l:39},
 17 |                     {h:207, s:100, l:31}
 18 |                 ],
 19 |                 [
 20 |                     {h:0, s:100, l:50},
 21 |                     {h:60, s:100, l:50},
 22 |                     {h:180, s:100, l:50}
 23 |                 ]],
 24 |             SPRING = [
 25 |                 .04,
 26 |                 .06,
 27 |                 .03
 28 |             ],
 29 |             _raf;
 30 | 
 31 |         function init() {
 32 |             $canvas = document.getElementsByTagName('canvas')[0];
 33 | 
 34 |             window.addEventListener('resize', onResize, true);
 35 |             onResize();
 36 | 
 37 |             start();
 38 |         }
 39 | 
 40 |         function onResize() {
 41 |             _stageWidth = window.innerWidth;
 42 |             _stageHeight = window.innerHeight;
 43 | 
 44 |             _stageWidthHalf = _stageWidth >> 1;
 45 |             _stageHeightHalf = _stageHeight >> 1;
 46 | 
 47 |             _widthGap = _stageWidth / TOTAL_POINTS >> 1;
 48 |             _maxWidth = _stageWidth + (_widthGap * 2);
 49 | 
 50 |             $canvas.width = _stageWidth;
 51 |             $canvas.height = _stageHeight;
 52 |             _ctx = $canvas.getContext('2d');
 53 | 
 54 |             build();
 55 |         }
 56 | 
 57 |         function build() {
 58 |             var i, k, point;
 59 |             for (i=0; i<TOTAL_WAVE; i++) {
 60 |                 _points[i] = [];
 61 | 
 62 |                 for (k=0; k<TOTAL_POINTS; k++) {
 63 |                     point = {x: _maxWidth / (TOTAL_POINTS - 1) * k - _widthGap, y:_stageHeightHalf + (Math.random() * 50), vy:0};
 64 |                     _points[i][k] = point;
 65 |                 }
 66 |             }
 67 |         }
 68 | 
 69 |         function start() {
 70 |             $canvas.addEventListener('mousedown', onDown, false);
 71 |             $canvas.addEventListener('mouseup', onUp, false);
 72 |             $canvas.addEventListener('mousemove', onMove, false);
 73 | 
 74 |             if (!!('ontouchstart' in window)) {
 75 |                 $canvas.addEventListener('touchstart', touchStart, false);
 76 |                 $canvas.addEventListener('touchmove', touchMove, false);
 77 |                 $canvas.addEventListener('touchend', touchEnd, false);
 78 |             }
 79 | 
 80 |             initController();
 81 | 
 82 |             _raf = window.requestAnimationFrame(animate);
 83 |         }
 84 | 
 85 |         function initController() {
 86 |             var signalOpt = {
 87 |                 moveControl: new signals.Signal(),
 88 |                 pointsNumChanged: new signals.Signal()
 89 |             };
 90 | 
 91 |             var container = new CMControl.Panel();
 92 |             container.setClass('sidebar');
 93 | 
 94 |             var titleBar = new CMControl.TitleBar(container, signalOpt);
 95 |             titleBar.setClass('title-bar');
 96 |             container.add(titleBar);
 97 |             var item = new CMControl.Panel();
 98 |             item.setTextContent('WAVE ANIMATION');
 99 |             item.setClass('title');
100 |             titleBar.add(item);
101 |             item = new CMControl.Panel();
102 |             item.setTextContent('VERSION 1.0 - JONGMIN KIM');
103 |             item.setClass('title-s');
104 |             titleBar.add(item);
105 | 
106 |             // points num
107 |             var pointsCon = new CMControl.Panel();
108 |             container.add(pointsCon);
109 |             var pointsItem = new CMControl.Panel();
110 |             pointsItem.setTextContent('POINTS NUM : 8');
111 |             pointsItem.setClass('label');
112 |             pointsCon.add(pointsItem);
113 |             var slidePoints = new CMControl.Slide(CMControl.getCurrent(8, 3, 16, 0, 1));
114 |             slidePoints.onChange(function (value) {
115 |                 signalOpt.pointsNumChanged.dispatch({num: value});
116 |             });
117 |             pointsCon.add(slidePoints);
118 |             signalOpt.pointsNumChanged.add(function(object) {
119 |                 var num = CMControl.getCurrent(object.num, 0, 1, 3, 16) | 0;
120 |                 TOTAL_POINTS = num;
121 |                 pointsItem.setTextContent('POINTS NUM : ' + TOTAL_POINTS);
122 |                 onResize();
123 |             });
124 | 
125 |             // points show/hide
126 |             var checkCon = new CMControl.Panel();
127 |             checkCon.setClass('check');
128 |             container.add(checkCon);
129 |             var checkItem = new CMControl.Panel();
130 |             checkItem.setTextContent('SHOW POINTS');
131 |             checkItem.setClass('label');
132 |             checkCon.add(checkItem);
133 |             var checkBack = new CMControl.Radio(true);
134 |             checkBack.setClass('check-box');
135 |             checkBack.onChange(function() {
136 |                 if (!_isShowPoint) return;
137 |                 _isShowPoint = 0;
138 |                 checkFront.setValue(0);
139 |             });
140 |             checkCon.add(checkBack);
141 |             item = new CMControl.Panel();
142 |             item.setTextContent('HIDE');
143 |             item.setClass('check-text');
144 |             checkCon.add(item);
145 | 
146 |             container.add(checkCon);
147 |             var checkFront = new CMControl.Radio(false);
148 |             checkFront.setClass('check-box');
149 |             checkFront.onChange(function() {
150 |                 if (_isShowPoint) return;
151 |                 _isShowPoint = 1;
152 |                 checkBack.setValue(0);
153 |             });
154 |             checkCon.add(checkFront);
155 |             item = new CMControl.Panel();
156 |             item.setTextContent('SHOW');
157 |             item.setClass('check-text');
158 |             checkCon.add(item);
159 | 
160 |             // color
161 |             var colorCon = new CMControl.Panel();
162 |             colorCon.setClass('check');
163 |             container.add(colorCon);
164 |             var colorItem = new CMControl.Panel();
165 |             colorItem.setTextContent('COLOR');
166 |             colorItem.setClass('label');
167 |             colorCon.add(colorItem);
168 |             var colorBack = new CMControl.Radio(true);
169 |             colorBack.setClass('check-box');
170 |             colorBack.onChange(function() {
171 |                 if (!_isColor) return;
172 |                 _isColor = 0;
173 |                 colorFront.setValue(0);
174 |             });
175 |             colorCon.add(colorBack);
176 |             item = new CMControl.Panel();
177 |             item.setTextContent('BLUE');
178 |             item.setClass('check-text');
179 |             colorCon.add(item);
180 | 
181 |             var colorFront = new CMControl.Radio(false);
182 |             colorFront.setClass('check-box');
183 |             colorFront.onChange(function() {
184 |                 if (_isColor) return;
185 |                 _isColor = 1;
186 |                 colorBack.setValue(0);
187 |             });
188 |             colorCon.add(colorFront);
189 |             item = new CMControl.Panel();
190 |             item.setTextContent('COLORFUL');
191 |             item.setClass('check-text');
192 |             colorCon.add(item);
193 | 
194 |             // label
195 |             var labelCon = new CMControl.Panel();
196 |             container.add(labelCon);
197 |             item = new CMControl.Panel();
198 |             item.setHTMLContent('<a href="http://blog.cmiscm.com/?p=5452" target="_blank">BLOG.CMISCM.COM</a>');
199 |             item.setClass('link');
200 |             labelCon.add(item);
201 | 
202 |             signalOpt.moveControl.add(function(object) {
203 |                 var tx = object.x;
204 |                 slidePoints.setGap(tx);
205 |             });
206 | 
207 |             document.body.appendChild(container.dom);
208 |         }
209 | 
210 |         function animate(timestamp) {
211 |             _raf = window.requestAnimationFrame(animate);
212 |             loop();
213 |         }
214 | 
215 |         function loop() {
216 |             _ctx.clearRect(0, 0, _stageWidth, _stageHeight);
217 | 
218 |             var i, arr = [0, 5, -5];
219 |             for (i=0; i<TOTAL_WAVE; i++) {
220 |                 draw(_points[i], COLORS[_isColor][i], SPRING[i], arr[i]);
221 |             }
222 | 
223 |             if (_isShowPoint) {
224 |                 drawPoints(_points[0], '#ff0000');
225 |             }
226 |         }
227 | 
228 |         function draw(point, color, spring, gap) {
229 |             _ctx.beginPath();
230 |             _ctx.fillStyle = 'hsla(' + color.h + ', ' + color.s + '%, ' + color.l + '%, 0.4)';
231 | 
232 |             var prevx = point[0].x, prevy = point[0].y,
233 |                 i, dx, dy, dist, my, cx, cy;
234 | 
235 |             _ctx.moveTo(prevx, prevy);
236 | 
237 |             for (i=0; i<TOTAL_POINTS; i++) {
238 |                 dx = _mouseX - point[i].x;
239 |                 dy = (_mouseY - _stageHeight) / 2;
240 |                 dist = Math.sqrt(dx * dx + dy * dy) * 0.01;
241 |                 my = (_mouseY / dist) + _stageHeightHalf;
242 | 
243 |                 point[i].vy += (my - point[i].y + gap) * spring;
244 |                 point[i].vy *= FRICTION;
245 |                 point[i].y += point[i].vy;
246 | 
247 |                 cx = (prevx + point[i].x) * .5;
248 |                 cy = (prevy + point[i].y) * .5;
249 |                 _ctx.bezierCurveTo(prevx, prevy, cx, cy, cx, cy, point[i].x, point[i].y);
250 | 
251 |                 prevx = point[i].x;
252 |                 prevy = point[i].y;
253 |             }
254 | 
255 |             _ctx.lineTo(prevx, prevy);
256 |             _ctx.lineTo(_maxWidth, _stageHeight);
257 |             _ctx.lineTo(point[0].x, _stageHeight);
258 |             _ctx.fill();
259 |             _ctx.closePath();
260 |         }
261 | 
262 | 
263 |         function drawPoints(point, color) {
264 |             _ctx.beginPath();
265 |             _ctx.fillStyle = color;
266 |             var i, cx, cy;
267 |             for (i=0; i<TOTAL_POINTS; i++) {
268 |                 cx = point[i].x;
269 |                 cy = point[i].y;
270 |                 _ctx.beginPath();
271 |                 _ctx.arc(cx, cy, 4, 0, 2 * Math.PI);
272 |                 _ctx.fill();
273 |             }
274 |         }
275 | 
276 |         function touchStart(e) {
277 |             var touch = e.touches[0];
278 |             downFn(touch.pageX, touch.pageY);
279 |         }
280 |         function touchMove(e) {
281 |             e.preventDefault();
282 |             var touch = e.touches[0];
283 |             moveFn(touch.pageX, touch.pageY);
284 |         }
285 |         function touchEnd(e) {
286 |             upFn();
287 |         }
288 | 
289 |         function onDown(e) {
290 |             downFn(e.pageX, e.pageY);
291 |         }
292 |         function onMove(e) {
293 |             moveFn(e.pageX, e.pageY);
294 |         }
295 |         function onUp(e) {
296 |             upFn();
297 |         }
298 | 
299 |         function downFn(mx, my) {
300 |             _isDown = 1;
301 |             _mouseX = mx;
302 |             _mouseY = my;
303 |         }
304 |         function moveFn(mx, my) {
305 |             if (!_isDown) return;
306 |             _mouseX = mx;
307 |             _mouseY = my;
308 |         }
309 |         function upFn() {
310 |             _isDown = 0;
311 |             _mouseX = 0;
312 |             _mouseY = 0;
313 |         }
314 | 
315 |         return {
316 |             init: init
317 |         }
318 |     } )();
319 | 
320 | 
321 | 


--------------------------------------------------------------------------------
/js/libs/CMControl.min.js:
--------------------------------------------------------------------------------
1 | /*
2 |  CM Controller
3 |  Author: Jongmin Kim
4 |  Version: 0.1.0 Beta
5 |  */
6 | var CMControl={};CMControl.isTouch=!!("ontouchstart"in window),CMControl.getCurrent=function(a,b,c,d,e){var f=(e-d)/(c-b)*(a-b)+d;return d<e?f<d?f=d:f>e&&(f=e):f>d?f=d:f<e&&(f=e),f},CMControl.Element=function(){},CMControl.Element.prototype={setClass:function(a){return this.dom.className=a,this},setStyle:function(a,b){for(var c=0;c<b.length;c++)this.dom.style[a]=b[c]},setTextContent:function(a){return this.dom.textContent=a,this},setHTMLContent:function(a){return this.dom.innerHTML=a,this}};var properties=["position","left","top","right","bottom","width","height","border","borderLeft","borderTop","borderRight","borderBottom","margin","marginLeft","marginTop","marginRight","marginBottom","padding","paddingLeft","paddingTop","paddingRight","paddingBottom","color","backgroundColor","fontSize","fontWeight","display","overflow","cursor"];properties.forEach(function(a){var b="set"+a.substr(0,1).toUpperCase()+a.substr(1,a.length);CMControl.Element.prototype[b]=function(){return this.setStyle(a,arguments),this}});var events=["MouseOver","MouseOut","Click"];events.forEach(function(a){var b="on"+a;CMControl.Element.prototype[b]=function(b){return this.dom.addEventListener(a.toLowerCase(),b,!1),this}}),CMControl.Panel=function(){CMControl.Element.call(this);var a=document.createElement("div");return a.style.userSelect="none",a.style.WebkitUserSelect="none",a.style.MozUserSelect="none",this.dom=a,this},CMControl.Panel.prototype=Object.create(CMControl.Element.prototype),CMControl.Panel.prototype.add=function(){for(var a=0;a<arguments.length;a++)this.dom.appendChild(arguments[a].dom);return this},CMControl.TitleBar=function(a,b){CMControl.Element.call(this);var c=document.createElement("div");c.style.userSelect="none",c.style.WebkitUserSelect="none",c.style.MozUserSelect="none";var d=0,e=0,f=function(a){a.preventDefault(),l(a.pageX,a.pageY),document.addEventListener("mousemove",h,!1),document.addEventListener("mouseup",i,!1)},g=function(a){a.preventDefault();var b=a.touches[0];l(b.pageX,b.pageY),document.addEventListener("touchmove",j,!1),document.addEventListener("touchend",k,!1)},h=function(a){m(a.pageX,a.pageY)},i=function(a){document.removeEventListener("mousemove",h,!1),document.removeEventListener("mouseup",i,!1)},j=function(a){var b=a.touches[0];m(b.pageX,b.pageY)},k=function(a){document.removeEventListener("touchmove",j,!1),document.removeEventListener("touchend",k,!1)},l=function(b,c){d=b-a.dom.offsetLeft,e=c-a.dom.offsetTop},m=function(c,f){var g=c-d,h=f-e;a.dom.style.left=g+"px",a.dom.style.top=h+"px",b.moveControl.dispatch({x:g,y:h})};return c.addEventListener("mousedown",f,!1),CMControl.isTouch&&c.addEventListener("touchstart",g,!1),this.dom=c,this},CMControl.TitleBar.prototype=Object.create(CMControl.Element.prototype),CMControl.TitleBar.prototype.add=function(){for(var a=0;a<arguments.length;a++)this.dom.appendChild(arguments[a].dom);return this},CMControl.Text=function(a){CMControl.Element.call(this);var b=document.createElement("span");return b.className="Text",b.style.cursor="default",b.style.display="inline-block",b.style.verticalAlign="top",this.dom=b,this.setValue(a),this},CMControl.Text.prototype=Object.create(CMControl.Element.prototype),CMControl.Text.prototype.setValue=function(a){return void 0!==a&&(this.dom.textContent=a),this},CMControl.File=function(){CMControl.Element.call(this);var a=this,b=document.createElement("input");return b.type="file",b.id="file-field",this.dom=b,this.onChangeCallback=null,this.dom.addEventListener("change",function(b){a.onChangeCallback&&a.onChangeCallback()},!1),this},CMControl.File.prototype=Object.create(CMControl.Element.prototype),CMControl.File.prototype.onChange=function(a){return this.onChangeCallback=a,this},CMControl.Input=function(){CMControl.Element.call(this);var a=this,b=document.createElement("input");return this.dom=b,this.onChangeCallback=null,this.dom.addEventListener("change",function(b){a.onChangeCallback&&a.onChangeCallback()},!1),this},CMControl.Input.prototype=Object.create(CMControl.Element.prototype),CMControl.Input.prototype.getValue=function(){return this.dom.value},CMControl.Input.prototype.setValue=function(a){return this.dom.value=a,this},CMControl.Input.prototype.onChange=function(a){return this.onChangeCallback=a,this},CMControl.TextArea=function(){CMControl.Element.call(this);var a=this,b=document.createElement("textarea");return b.className="TextArea",b.style.padding="2px",b.style.marginTop="-2px",b.style.marginLeft="-2px",b.style.border="1px solid #ccc",this.dom=b,this.onChangeCallback=null,this.dom.addEventListener("change",function(b){a.onChangeCallback&&a.onChangeCallback()},!1),this},CMControl.TextArea.prototype=Object.create(CMControl.Element.prototype),CMControl.TextArea.prototype.getValue=function(){return this.dom.value},CMControl.TextArea.prototype.setValue=function(a){return this.dom.value=a,this},CMControl.TextArea.prototype.onChange=function(a){return this.onChangeCallback=a,this},CMControl.Select=function(){CMControl.Element.call(this);var a=this,b=document.createElement("select");return b.className="Select",b.style.width="80px",b.style.height="16px",b.style.border="0px",b.style.padding="0px",this.dom=b,this.onChangeCallback=null,this.dom.addEventListener("change",function(b){a.onChangeCallback&&a.onChangeCallback()},!1),this},CMControl.Select.prototype=Object.create(CMControl.Element.prototype),CMControl.Select.prototype.setMultiple=function(a){return this.dom.multiple=a,this},CMControl.Select.prototype.setOptions=function(a){for(;this.dom.children.length>0;)this.dom.removeChild(this.dom.firstChild);for(var b in a){var c=document.createElement("option");c.value=b,c.innerHTML=a[b],this.dom.appendChild(c)}return this},CMControl.Select.prototype.getValue=function(){return this.dom.value},CMControl.Select.prototype.setValue=function(a){return this.dom.value=a,this},CMControl.Select.prototype.onChange=function(a){return this.onChangeCallback=a,this},CMControl.FancySelect=function(){CMControl.Element.call(this);var b=document.createElement("div");return b.className="FancySelect",b.style.background="#fff",b.style.border="1px solid #ccc",b.style.padding="0",b.style.cursor="default",b.style.overflow="auto",this.dom=b,this.onChangeCallback=null,this.options=[],this.selectedValue=null,this},CMControl.FancySelect.prototype=Object.create(CMControl.Element.prototype),CMControl.FancySelect.prototype.setOptions=function(a){for(var b=this;b.dom.children.length>0;)b.dom.removeChild(b.dom.firstChild);b.options=[];var c=function(a,c){return function(d){for(var e=0;e<b.options.length;e++)b.options[e].style.backgroundColor="#f0f0f0";a.style.backgroundColor="#f0f0f0",b.selectedValue=c,b.onChangeCallback&&b.onChangeCallback()}};for(var d in a){var e=document.createElement("div");e.style.padding="4px",e.style.whiteSpace="nowrap",e.innerHTML=a[d],e.value=d,b.dom.appendChild(e),b.options.push(e),e.addEventListener("click",c(e,d),!1)}return b},CMControl.FancySelect.prototype.getValue=function(){return this.selectedValue},CMControl.FancySelect.prototype.setValue=function(a){for(var b=a?a.toString():a,c=0;c<this.options.length;c++){var d=this.options[c];d.value===b?d.style.backgroundColor="#f0f0f0":d.style.backgroundColor=""}return this.selectedValue=a,this},CMControl.FancySelect.prototype.onChange=function(a){return this.onChangeCallback=a,this},CMControl.Checkbox=function(a){CMControl.Element.call(this);var b=this,c=document.createElement("input");return c.className="Checkbox",c.type="checkbox",this.dom=c,this.setValue(a),this.onChangeCallback=null,this.dom.addEventListener("change",function(a){b.onChangeCallback&&b.onChangeCallback()},!1),this},CMControl.Checkbox.prototype=Object.create(CMControl.Element.prototype),CMControl.Checkbox.prototype.getValue=function(){return this.dom.checked},CMControl.Checkbox.prototype.setValue=function(a){return void 0!==a&&(this.dom.checked=a),this},CMControl.Checkbox.prototype.onChange=function(a){return this.onChangeCallback=a,this},CMControl.Radio=function(a){CMControl.Element.call(this);var b=this,c=document.createElement("input");return c.className="Radio",c.type="radio",this.dom=c,this.setValue(a),this.onChangeCallback=null,this.dom.addEventListener("change",function(a){b.onChangeCallback&&b.onChangeCallback()},!1),this},CMControl.Radio.prototype=Object.create(CMControl.Element.prototype),CMControl.Radio.prototype.getValue=function(){return this.dom.checked},CMControl.Radio.prototype.setValue=function(a){return void 0!==a&&(this.dom.checked=a),this},CMControl.Radio.prototype.onChange=function(a){return this.onChangeCallback=a,this},CMControl.Color=function(){CMControl.Element.call(this);var a=this,b=document.createElement("input");return b.className="Color",b.style.width="64px",b.style.height="16px",b.style.border="0px",b.style.padding="0px",b.style.backgroundColor="transparent",b.type="color",this.dom=b,this.onChangeCallback=null,this.dom.addEventListener("change",function(b){a.onChangeCallback&&a.onChangeCallback()},!1),this},CMControl.Color.prototype=Object.create(CMControl.Element.prototype),CMControl.Color.prototype.getValue=function(){return this.dom.value},CMControl.Color.prototype.getHexValue=function(){return parseInt(this.dom.value.substr(1),16)},CMControl.Color.prototype.setValue=function(a){return this.dom.value=a,this},CMControl.Color.prototype.setHexValue=function(a){return this.dom.value="#"+("000000"+a.toString(16)).slice(-6),this},CMControl.Color.prototype.onChange=function(a){return this.onChangeCallback=a,this},CMControl.Number=function(a){CMControl.Element.call(this);var b=this,c=document.createElement("input");c.className="Number",c.style.backgroundColor="transparent",c.style.border="1px solid transparent",c.style.marginTop="-2px",c.style.marginLegt="-2px",c.style.padding="2px",c.style.cursor="col-resize",c.value="0.00",this.dom=c,this.setValue(a),this.min=-(1/0),this.max=1/0,this.precision=2,this.step=1,this.onChangeCallback=null;var d=0,e=0,f=function(a){a.preventDefault(),d=0,e=parseFloat(c.value),document.addEventListener("mousemove",g,!1),document.addEventListener("mouseup",h,!1)},g=function(a){var f=a.movementX||a.webkitMovementX||a.mozMovementX||0,g=a.movementY||a.webkitMovementY||a.mozMovementY||0;d+=f-g;var h=e+d/(a.shiftKey?10:100)*b.step;c.value=Math.min(b.max,Math.max(b.min,h)).toFixed(b.precision),b.onChangeCallback&&b.onChangeCallback()},h=function(a){document.removeEventListener("mousemove",g,!1),document.removeEventListener("mouseup",h,!1),Math.abs(d)<2&&(c.focus(),c.select())},i=function(a){var d=parseFloat(c.value);isNaN(d)===!1&&(c.value=d,b.onChangeCallback&&b.onChangeCallback())},j=function(a){c.style.backgroundColor="",c.style.borderColor="#ccc",c.style.cursor=""},k=function(a){c.style.backgroundColor="transparent",c.style.borderColor="transparent",c.style.cursor="col-resize"};return c.addEventListener("mousedown",f,!1),c.addEventListener("change",i,!1),c.addEventListener("focus",j,!1),c.addEventListener("blur",k,!1),this},CMControl.Number.prototype=Object.create(CMControl.Element.prototype),CMControl.Number.prototype.getValue=function(){return parseFloat(this.dom.value)},CMControl.Number.prototype.setValue=function(a){return void 0!==a&&(this.dom.value=a.toFixed(this.precision)),this},CMControl.Number.prototype.setRange=function(a,b){return this.min=a,this.max=b,this},CMControl.Number.prototype.setPrecision=function(a){return this.precision=a,a>2&&(this.step=Math.pow(10,-(a-1))),this},CMControl.Number.prototype.onChange=function(a){return this.onChangeCallback=a,this},CMControl.Break=function(){CMControl.Element.call(this);var a=document.createElement("br");return a.className="Break",this.dom=a,this},CMControl.Break.prototype=Object.create(CMControl.Element.prototype),CMControl.HorizontalRule=function(){CMControl.Element.call(this);var a=document.createElement("hr");return a.className="HorizontalRule",this.dom=a,this},CMControl.HorizontalRule.prototype=Object.create(CMControl.Element.prototype),CMControl.Button=function(){CMControl.Element.call(this);var a=this,b=document.createElement("button");return b.className="Button",this.dom=b,this.onClickCallback=null,this.dom.addEventListener("click",function(b){a.onClickCallback()},!1),this},CMControl.Button.prototype=Object.create(CMControl.Element.prototype),CMControl.Button.prototype.setLabel=function(a){return this.dom.textContent=a,this},CMControl.Button.prototype.onClick=function(a){return this.onClickCallback=a,this},CMControl.Slide=function(a){CMControl.Element.call(this);var b=document.createElement("div");b.className="slide",b.style.userSelect="none",b.style.WebkitUserSelect="none",b.style.MozUserSelect="none",this.dom=b;var c=document.createElement("div");c.className="handle my-over",b.appendChild(c);var e,f,d=this,g=0,h=a,i=this;this.max=0,this.handle=c,this.gap=40,setTimeout(function(){g=c.offsetWidth,i.max=b.offsetWidth-g;var a=0|CMControl.getCurrent(h,0,1,0,i.max);c.style.left=a+"px",c.style.display="none",setTimeout(function(){c.style.display="block"},0)},0);var j=function(a){a.preventDefault(),e=0,f=parseFloat(b.value),document.addEventListener("touchmove",n,!1),document.addEventListener("touchend",o,!1)},k=function(a){a.preventDefault(),e=0,f=parseFloat(b.value),document.addEventListener("mousemove",l,!1),document.addEventListener("mouseup",m,!1)},l=function(a){p(a.pageX,a.pageY)},m=function(a){document.removeEventListener("mousemove",l,!1),document.removeEventListener("mouseup",m,!1)},n=function(a){var b=a.touches[0];p(b.pageX,b.pageY)},o=function(a){document.removeEventListener("touchmove",n,!1),document.removeEventListener("touchend",o,!1)},p=function(a,b){var e=a-i.gap;e<0?e=0:e>i.max&&(e=i.max),c.style.left=e+"px";var f=CMControl.getCurrent(e,0,i.max,0,1);d.onChangeCallback&&d.onChangeCallback(f)};return c.addEventListener("mousedown",k,!1),CMControl.isTouch&&c.addEventListener("touchstart",j,!1),this},CMControl.Slide.prototype=Object.create(CMControl.Element.prototype),CMControl.Slide.prototype.onChange=function(a){return this.onChangeCallback=a,this},CMControl.Slide.prototype.setGap=function(a){this.gap=a+20},CMControl.Slide.prototype.setHandlePos=function(a){var b=CMControl.getCurrent(a,0,1,0,this.max);this.handle.style.left=b+"px"};


--------------------------------------------------------------------------------
/js/libs/signals.min.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  JS Signals <http://millermedeiros.github.com/js-signals/>
 3 |  Released under the MIT license
 4 |  Author: Miller Medeiros
 5 |  Version: 1.0.0 - Build: 268 (2012/11/29 05:48 PM)
 6 | */
 7 | (function(i){function h(a,b,c,d,e){this._listener=b;this._isOnce=c;this.context=d;this._signal=a;this._priority=e||0}function g(a,b){if(typeof a!=="function")throw Error("listener is a required param of {fn}() and should be a Function.".replace("{fn}",b));}function e(){this._bindings=[];this._prevParams=null;var a=this;this.dispatch=function(){e.prototype.dispatch.apply(a,arguments)}}h.prototype={active:!0,params:null,execute:function(a){var b;this.active&&this._listener&&(a=this.params?this.params.concat(a):
 8 | a,b=this._listener.apply(this.context,a),this._isOnce&&this.detach());return b},detach:function(){return this.isBound()?this._signal.remove(this._listener,this.context):null},isBound:function(){return!!this._signal&&!!this._listener},isOnce:function(){return this._isOnce},getListener:function(){return this._listener},getSignal:function(){return this._signal},_destroy:function(){delete this._signal;delete this._listener;delete this.context},toString:function(){return"[SignalBinding isOnce:"+this._isOnce+
 9 | ", isBound:"+this.isBound()+", active:"+this.active+"]"}};e.prototype={VERSION:"1.0.0",memorize:!1,_shouldPropagate:!0,active:!0,_registerListener:function(a,b,c,d){var e=this._indexOfListener(a,c);if(e!==-1){if(a=this._bindings[e],a.isOnce()!==b)throw Error("You cannot add"+(b?"":"Once")+"() then add"+(!b?"":"Once")+"() the same listener without removing the relationship first.");}else a=new h(this,a,b,c,d),this._addBinding(a);this.memorize&&this._prevParams&&a.execute(this._prevParams);return a},
10 | _addBinding:function(a){var b=this._bindings.length;do--b;while(this._bindings[b]&&a._priority<=this._bindings[b]._priority);this._bindings.splice(b+1,0,a)},_indexOfListener:function(a,b){for(var c=this._bindings.length,d;c--;)if(d=this._bindings[c],d._listener===a&&d.context===b)return c;return-1},has:function(a,b){return this._indexOfListener(a,b)!==-1},add:function(a,b,c){g(a,"add");return this._registerListener(a,!1,b,c)},addOnce:function(a,b,c){g(a,"addOnce");return this._registerListener(a,
11 | !0,b,c)},remove:function(a,b){g(a,"remove");var c=this._indexOfListener(a,b);c!==-1&&(this._bindings[c]._destroy(),this._bindings.splice(c,1));return a},removeAll:function(){for(var a=this._bindings.length;a--;)this._bindings[a]._destroy();this._bindings.length=0},getNumListeners:function(){return this._bindings.length},halt:function(){this._shouldPropagate=!1},dispatch:function(a){if(this.active){var b=Array.prototype.slice.call(arguments),c=this._bindings.length,d;if(this.memorize)this._prevParams=
12 | b;if(c){d=this._bindings.slice();this._shouldPropagate=!0;do c--;while(d[c]&&this._shouldPropagate&&d[c].execute(b)!==!1)}}},forget:function(){this._prevParams=null},dispose:function(){this.removeAll();delete this._bindings;delete this._prevParams},toString:function(){return"[Signal active:"+this.active+" numListeners:"+this.getNumListeners()+"]"}};var f=e;f.Signal=e;typeof define==="function"&&define.amd?define(function(){return f}):typeof module!=="undefined"&&module.exports?module.exports=f:i.signals=
13 | f})(this);


--------------------------------------------------------------------------------