diff options
| author | Jules Laplace <jules@okfoc.us> | 2014-04-16 12:16:10 -0400 |
|---|---|---|
| committer | Jules Laplace <jules@okfoc.us> | 2014-04-16 12:16:10 -0400 |
| commit | 76f8fa3c7ad8d625ed04305c24e7ccad408b7819 (patch) | |
| tree | a2b266fe0b35c58a888ef17214a6877a73bb576c | |
| parent | 92c2ad2227a4b184fe5bbcce54c02c2322f21e33 (diff) | |
gray color scheme
| -rw-r--r-- | assets/javascripts/rectangles/builder.js | 7 | ||||
| -rw-r--r-- | assets/javascripts/rectangles/wheel.js | 17 | ||||
| -rw-r--r-- | rectangles.html | 11 |
3 files changed, 23 insertions, 12 deletions
diff --git a/assets/javascripts/rectangles/builder.js b/assets/javascripts/rectangles/builder.js index ef0a28c..b25bd59 100644 --- a/assets/javascripts/rectangles/builder.js +++ b/assets/javascripts/rectangles/builder.js @@ -5,6 +5,12 @@ var builder = new function(){ var els = [] base.tube.on("clipper:update", rebuild) + base.wheel = new wheel({ + el: document.querySelector("#map"), + update: function(e, val, delta){ + console.log(e.clientX, e.clientY, delta) + } + }) function rebuild(){ clear() @@ -20,7 +26,6 @@ var builder = new function(){ }) } function clear (){ - console.log(els.length) els.forEach(function(el){ scene.remove(el) }) diff --git a/assets/javascripts/rectangles/wheel.js b/assets/javascripts/rectangles/wheel.js index 9773a8c..f7a9bc3 100644 --- a/assets/javascripts/rectangles/wheel.js +++ b/assets/javascripts/rectangles/wheel.js @@ -3,7 +3,7 @@ base.wheel = new wheel({ el: document.querySelector("#map"), - update: function(val, delta){ + update: function(e, val, delta){ // do something with val }, }) @@ -12,18 +12,20 @@ function wheel (opt) { opt = defaults(opt, { + el: document, + fn: function(e, val, delta){}, propagate: false, locked: false, + reversible: true, ratio: 0.02, val: 0, min: -Infinity, max: Infinity, - el: document, - fn: function(){} }) - el.addEventListener('mousewheel', onMouseWheel, false); - el.addEventListener('DOMMouseScroll', onMouseWheel, false); + opt.el.addEventListener('mousewheel', onMouseWheel, false); + opt.el.addEventListener('DOMMouseScroll', onMouseWheel, false); + function onMouseWheel (e) { if (opt.locked) { return @@ -51,9 +53,12 @@ function wheel (opt) { opt.val = clamp(opt.val + delta, opt.min, opt.max) - opt.update(opt.val, delta) + opt.update(e, opt.val, delta) } + opt.lock = function(){ opt.locked = true } + opt.unlock = function(){ opt.locked = false } + return opt } diff --git a/rectangles.html b/rectangles.html index d7971e2..3a1b8e2 100644 --- a/rectangles.html +++ b/rectangles.html @@ -3,7 +3,7 @@ <head> <link rel="stylesheet" type="text/css" href="assets/stylesheets/css.css"> <style type="text/css"> -body { background: black; } +body { background: #fff; } body > div { float: left; } @@ -18,10 +18,10 @@ body > div { .face { background-color: #fff; } -.front { background-color: #f00; } -.back { background-color: #800; } -.left { background-color: #00f; } -.right { background-color: #008; } +.front { background-color: #ddd; } +.back { background-color: #bbb; } +.left { background-color: #aaa; } +.right { background-color: #888; } </style> </head> <body> @@ -57,6 +57,7 @@ body > div { <script type="text/javascript" src="assets/javascripts/rectangles/vec2.js"></script> <script type="text/javascript" src="assets/javascripts/rectangles/draw.js"></script> <script type="text/javascript" src="assets/javascripts/rectangles/sort.js"></script> +<script type="text/javascript" src="assets/javascripts/rectangles/wheel.js"></script> <script type="text/javascript" src="assets/javascripts/rectangles/builder.js"></script> <script type="text/javascript" src="assets/javascripts/rectangles/clipper.js"></script> |