diff options
| author | Jules Laplace <jules@okfoc.us> | 2016-09-11 15:42:42 -0400 |
|---|---|---|
| committer | Jules Laplace <jules@okfoc.us> | 2016-09-11 15:42:42 -0400 |
| commit | 5d18cc7380a076a0b02dff6ef47c85685d317d7e (patch) | |
| tree | dc388a06c5ac65418712559e73963c2bad66c432 | |
| parent | d88f2d2d8234f38d7f7bab51bd0222143db187e4 (diff) | |
touch events
| -rw-r--r-- | env.js | 25 | ||||
| -rw-r--r-- | index.html | 24 | ||||
| -rw-r--r-- | js/vendor/util.js | 2 |
3 files changed, 36 insertions, 15 deletions
@@ -7,6 +7,7 @@ var environment = (function(){ var strided_wires = [], wires = [] var scale = [], root, tet, interval, duration var dot_color = "#333" + var drawing = true var palette = [ "#ff0000", @@ -87,7 +88,6 @@ var environment = (function(){ environment.bind = function(){ $(window).focus(environment.focus) $(window).blur(environment.blur) - $(window).mousemove(environment.mousemove) window.addEventListener("keydown", environment.keydown, true) $("#waveform").on("input", environment.setWaveform) $("#x").on("keydown", environment.stride) @@ -98,8 +98,17 @@ var environment = (function(){ $("#interval").on("input", environment.scale) $("#duration").on("input", environment.duration) $("#use_scale").on("change", environment.use_scale) - $(snap.node).on("mousedown", dot_grid.mousedown.bind(dot_grid)) - $(window).on("mouseup", dot_grid.mouseup.bind(dot_grid)) + if (is_mobile) { + snap.node.addEventListener("touchstart", getFirstTouch( dot_grid.mousedown.bind(dot_grid) )) + document.addEventListener("touchmove", getFirstTouch( environment.mousemove)) + document.addEventListener("touchend", dot_grid.mouseup.bind(dot_grid) ) + $("#draw").on("change", environment.check_drawing) + } + else { + $(snap.node).on("mousedown", dot_grid.mousedown.bind(dot_grid)) + $(window).mousemove(environment.mousemove) + $(window).on("mouseup", dot_grid.mouseup.bind(dot_grid)) + } } environment.blur = function(){ last_p = null @@ -109,6 +118,9 @@ var environment = (function(){ environment.use_scale = function(){ use_scale = $("#use_scale").get(0).checked } + environment.check_drawing = function(){ + drawing = $("#draw").get(0).checked + } environment.duration = function(){ duration = parseInt( $("#duration").val() ) || 1000 duration /= 1000 @@ -314,8 +326,9 @@ var environment = (function(){ } } } - DotGrid.prototype.mousedown = function(e){ - var p = environment.positionFromEvent(e) + DotGrid.prototype.mousedown = function(touch, e){ + if (! drawing) return + var p = environment.positionFromEvent(touch) var q = this.quantize(p) if (! this.active) { this.active = new Wire ({ @@ -326,7 +339,7 @@ var environment = (function(){ return } else if (this.active) { - e.preventDefault() + (e || touch).preventDefault() this.active.setTail(q) this.active = null } @@ -2,12 +2,15 @@ <html> <head> <title>harp</title> +<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> <link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,900italic,900,700italic,700,500italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="../css/css.css"> <style> html,body { font-size: 12px; font-weight: normal; background: black; color: white; } circle { cursor: pointer } input[type=text] { width: 30px } +#mobile_controls { display: none } +.mobile #mobile_controls { display: inline } </style> </head> <body class="loading"> @@ -21,21 +24,26 @@ input[type=text] { width: 30px } <option selected>sawtooth</option> <option>square</option> </select> - <label>x</label> + <label for="x">x</label> <input id="x" type="number" min="0" max="100" step="0.1" value="0.7"> - <label>y</label> + <label for="y">y</label> <input id="y" type="number" min="0" max="100" step="0.1" value="1"> - <label>randomize</label> + <label for="rand">randomize</label> <input id="rand" type="number" min="0" max="500" step="1" value="32"> - <label>tet</label> + <label for="tet">tet</label> <input id="tet" type="number" min="2" max="500" step="1" value="12"> - <label>root</label> <input id="root" type="number" min="20" max="20000" value="440"> - <label>interval</label> + <label for="root">root</label> + <input id="root" type="number" min="20" max="20000" value="440"> + <label for="interval">interval</label> <input id="interval" type="text" value="2/1"> - <label>duration</label> + <label for="duration">duration</label> <input id="duration" type="number" min="0" max="5000" step="50" value="1250"> - <label>use scale</label> + <label for="use_scale">use scale</label> <input id="use_scale" type="checkbox" checked> + <div id="mobile_controls"> + <label for="draw">draw</label> + <input id="draw" type="checkbox" checked> + </div> </div> </body> diff --git a/js/vendor/util.js b/js/vendor/util.js index b5ee7c7..b1b39e9 100644 --- a/js/vendor/util.js +++ b/js/vendor/util.js @@ -43,7 +43,7 @@ function getFirstTouch(fn){ return function(e){ e.preventDefault() var touch = e.touches[0] - fn(touch) + fn(touch, e) } } |