From 8c7e080e79e21bfd1ac0312c30361fc9f68f3d22 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= Date: Tue, 21 Feb 2017 10:45:10 +0100 Subject: [PATCH] dynamically create touches --- index.html | 39 ++++++--------------------------------- nanofun.css | 13 +++++++++++-- nanofun.js | 12 +++++++++--- 3 files changed, 26 insertions(+), 38 deletions(-) diff --git a/index.html b/index.html index 2f6e87b..71d13f2 100644 --- a/index.html +++ b/index.html @@ -8,44 +8,17 @@

+ + + + +

Source code at https://git.0d.be/?p=nanofun.git

diff --git a/nanofun.css b/nanofun.css index e4e97e3..e819244 100644 --- a/nanofun.css +++ b/nanofun.css @@ -27,7 +27,7 @@ div.nanotouch.loaded.playing { background: #6aff6a; } -div.nanotouch input { +div.nanotouch input[type=file] { position: absolute; top: 0; left: 0; @@ -38,13 +38,22 @@ div.nanotouch input { cursor: pointer; } +div.nanotouch input[type=range] { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + padding: 0; + margin: 0; +} + div.nanotouch span.name { position: absolute; } div.nanotouch span.duration { position: absolute; - bottom: 1ex; + bottom: 2ex; right: 1ex; } diff --git a/nanofun.js b/nanofun.js index 9cf7773..bb571a9 100644 --- a/nanofun.js +++ b/nanofun.js @@ -316,8 +316,14 @@ var nanofun = function() { self.initUI = function() { var $nanopad = $('#nanopad'); + var $nanotouch = $('.nanotouch'); + for (var i=1; i<16; i++) { + var $new_touch = $nanotouch.clone(); + $new_touch.attr('data-touch', i); + $new_touch.appendTo($nanopad); + } - $('.nanotouch input').on('change', function(ev) { + $('.nanotouch input[type=file]').on('change', function(ev) { var nanotouch = $(this).parent(); var sample_idx = $nanopad.children().index(nanotouch); var reader = new FileReader(); @@ -343,7 +349,7 @@ var nanofun = function() { if (control > 7 && control < 16) return; /* range between sliders and pots */ if (control > 23) return; /* after pots */ if (control >= 16) { control -= 8; } - $('.touch-gain[data-touch=' + control + ']').val(value).trigger('change'); + $('[data-touch=' + control + '] .touch-gain').val(value).trigger('change'); } $(document).keypress(function(ev) { @@ -360,7 +366,7 @@ var nanofun = function() { $('.touch-gain').on('change', function() { var fraction = parseInt(this.value) / parseInt(127); - var touchIdx = parseInt($(this).data('touch')); + var touchIdx = parseInt($(this).parent().data('touch')); self.touchGainNodes[touchIdx].gain.value = fraction * fraction; }); } -- 2.39.2