From 5d18cc7380a076a0b02dff6ef47c85685d317d7e Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 11 Sep 2016 15:42:42 -0400 Subject: touch events --- env.js | 25 +++++++++++++++++++------ index.html | 24 ++++++++++++++++-------- js/vendor/util.js | 2 +- 3 files changed, 36 insertions(+), 15 deletions(-) diff --git a/env.js b/env.js index 30d3dfa..04fb6fb 100644 --- a/env.js +++ b/env.js @@ -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 } diff --git a/index.html b/index.html index 335b063..fcec2b2 100644 --- a/index.html +++ b/index.html @@ -2,12 +2,15 @@ harp + @@ -21,21 +24,26 @@ input[type=text] { width: 30px } - + - + - + - + - - + + + - + - + +
+ + +
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) } } -- cgit v1.2.3-70-g09d2