Zach's git repos / prosongsa
Backend for songs.zachdecook.com
* chords: Allow clicking on tab to cycle alternate versions
Browse Source
Zach DeCook 2018-04-15
parent d9fe293 · commit 4a514b2
Diffstat
-rwxr-xr-xindex.php4
-rw-r--r--jsonly.js19
2 files changed, 21 insertions, 2 deletions
diff --git a/index.php b/index.php
index c415408..1df2c64 100755
--- a/index.php
+++ b/index.php
@@ -55,8 +55,8 @@ Author: Zach DeCook
<div class = "col-xs-6 col-xs-offset-0 ">
<div id="chordarea">
- <canvas id='guitarregion' width="100" height="100"></canvas>
- <canvas id='ukuleleregion' width="100" height="100"></canvas>
+ <canvas id='guitarregion' width="100" height="100" onclick="cycle(guitarObj);"></canvas>
+ <canvas id='ukuleleregion' width="100" height="100" onclick="cycle(ukeObj);"></canvas>
</div>
<i>Experimental: Click on a chord to view guitar tablature</i>
<div id="messages"></div>
diff --git a/jsonly.js b/jsonly.js
index 4d68c42..ae1ceb1 100644
--- a/jsonly.js
+++ b/jsonly.js
@@ -10,11 +10,17 @@ var guitarObj = {
name: 'guitar',
dict: chordsDict,
region: 'guitarregion',
+ chord: '',
+ chordd: '',
+ number: 0,
}
var ukeObj = {
name: 'ukulele',
dict: ukulelechordsDict,
region: 'ukuleleregion',
+ chord: '',
+ chordd: '',
+ number: 0,
}
function do_transpose()
@@ -122,6 +128,9 @@ function plotChord(chord, chordd, obj){
try{
tab = obj.dict[chordd][0];
ChordCharter.drawChord( obj.region, 30, 25, chord, tab );
+ obj.chord = chord;
+ obj.chordd = chordd;
+ obj.number = 0;
}
catch(target){
$("#messages").prepend("No "+obj.name+" tab for '" + chord + "'. ");
@@ -134,3 +143,13 @@ function plotChord(chord, chordd, obj){
}
}
+
+function cycle(obj){
+ var canvas = $("#"+obj.region)[0];
+ var context = canvas.getContext('2d');
+ context.clearRect(0, 0, canvas.width, canvas.height);
+
+ obj.number = (obj.number + 1) % obj.dict[obj.chordd].length
+ tab = obj.dict[obj.chordd][obj.number]
+ ChordCharter.drawChord( obj.region, 30, 25, obj.chord +"("+obj.number + ")", tab );
+}