* Front-end: Add javascript

6 files changed, 295 insertions, 1 deletions

diff --git a/laravel/public/js/ccharter b/laravel/public/js/ccharter
new file mode 120000
index 0000000..895021d
--- /dev/null
+++ b/laravel/public/js/ccharter
@@ -0,0 +1 @@
+../../../ccharter/scripts/
\ No newline at end of file
diff --git a/laravel/public/js/chordsdata b/laravel/public/js/chordsdata
new file mode 120000
index 0000000..95a4eaa
--- /dev/null
+++ b/laravel/public/js/chordsdata
@@ -0,0 +1 @@
+../../../chordsdata/
\ No newline at end of file
diff --git a/laravel/public/js/jsonly.js b/laravel/public/js/jsonly.js
new file mode 100644
index 0000000..ae1ceb1
--- /dev/null
+++ b/laravel/public/js/jsonly.js
@@ -0,0 +1,155 @@
+/**
+ * @brief jsonly.js contains the functions that are only called in js,
+ * not translated from server-side code.
+ */
+
+$('#transp').change( do_transpose );
+var lastTransp = parseInt($('#transp').val());
+
+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()
+{
+	var transp = parseInt($('#transp').val());
+	var neww = transp;
+
+	$(".tabs").each(function(){
+		// Since we only store text that is displayed, transpose relative to 
+		// previous transposition.
+		// Requires the class to be "tabs chordXX";
+		var old = parseInt($(this).attr('class').substring(10));
+		if ( isNaN(old) )
+		{
+			old = $(this).attr('class').substring(10);
+			neww = transpadd(old, transp - lastTransp);
+		}
+		$(this).text( zj_transpose2( $(this).text(), transp - lastTransp ) );
+		$(this).removeClass("chord"+old);
+		$(this).addClass("chord"+neww);
+	});
+	$(".btn[data-key]").each(function(){
+		console.log($(this));
+		var oldKey = $(this).attr('data-key');
+		var newKey = transpadd(oldKey, transp - lastTransp);
+		if ( typeof newKey !== 'undefined' )
+		{
+			$(this).removeClass('btn-'+oldKey);
+			$(this).addClass('btn-'+newKey);
+			$(this).attr('data-key', newKey);
+			$(this).text( $(this).attr('data-words') + newKey );
+		}
+		var tt = parseInt($(this).attr('href').match(/transp=(.+)/)[1]);
+		tt = ( transp - lastTransp + 24 + tt)%12;
+		var newhref = $(this).attr('href').match(/(.*?&transp=).+/)[1] + tt;
+		$(this).attr('href', newhref);
+	})
+	lastTransp = transp;
+}
+
+$(".tabs").click(function(e) {
+    s = window.getSelection();
+    var range = s.getRangeAt(0);
+    var node = s.anchorNode;
+    while (range.toString().indexOf(' ') != 0 ) {
+		if (range.startOffset == 0)
+			break;
+        range.setStart(node, (range.startOffset - 1));
+    }
+    range.setStart(node, Math.max(0,range.startOffset));
+	while (range.toString().lastIndexOf(' ') != range.toString().length - 1
+		|| range.toString().length <= 1 )
+	{
+		range.setEnd(node, range.endOffset+1);
+		if ( range.endOffset == node.length)
+			break;
+    }
+	//range.setEnd(Math.min(range.endOffset+1,node.length);
+    var str = range.toString().trim();
+	if( str != "" )
+		show_tab(str);
+});
+
+function show_tab( chord )
+{
+	var canvas = $("#guitarregion")[0];
+	var context = canvas.getContext('2d');
+	context.clearRect(0, 0, canvas.width, canvas.height);
+	var canvas = $("#ukuleleregion")[0];
+	var context = canvas.getContext('2d');
+	context.clearRect(0, 0, canvas.width, canvas.height);
+
+	getChordFrets(chord);
+}
+
+function getChordFrets(chord)
+{
+	$("#messages").html("");
+	chord = chord.replace("(", "");
+	chord = chord.replace(")", "");
+	chord = chord.replace("sus", "s");
+	chord = chord.replace("s4", "s");
+	chord = chord.replace("s", "sus");
+	chord = chord.replace("7sus", "sus7");
+	chord = chord.replace("mj7", "maj7");
+	var chordd = chord;
+	chordd = chordd.replace("/A","/a");
+	chordd = chordd.replace("/B","/b");
+	chordd = chordd.replace("/C","/c");
+	chordd = chordd.replace("/D","/d");
+	chordd = chordd.replace("/E","/e");
+	chordd = chordd.replace("/F","/f");
+	chordd = chordd.replace("/G","/g");
+	chordd = chordd.replace("Db", "C#");
+	chordd = chordd.replace("Eb", "D#");
+	chordd = chordd.replace("Gb", "F#");
+	chordd = chordd.replace("Ab", "G#");
+	chordd = chordd.replace("Bb", "A#");
+
+	plotChord(chord,chordd,guitarObj)
+	plotChord(chord,chordd,ukeObj)
+}
+
+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 + "'. ");
+
+		// Try it without the base note.
+		if( chordd.replace(/\/.*/,"") != chordd)
+		{
+			plotChord( chord.replace(/\/.*/,""), chordd.replace(/\/.*/,""), 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 );
+}
diff --git a/laravel/public/js/page.js b/laravel/public/js/page.js
new file mode 100644
index 0000000..b7a89f7
--- /dev/null
+++ b/laravel/public/js/page.js
@@ -0,0 +1,112 @@
+/**
+ * @brief page.js tries to improve pageload speeds
+ * by processing client-side.
+ * @author Zach DeCook (zjd7calvin)
+ * @date 12, February 2017
+ * requires jQuery
+ */
+
+/**
+ * @brief zj_transpose2 transposes a line
+ */
+function zj_transpose2( line, transp )
+{
+	var newchords = zj_transparray( transp );
+	var newline = '';
+	var space = 0; ///@< Spaces that need to be added or removed.
+	for(var i = 0; i < line.length; i++)
+	{
+		var chari = line[i];
+		var nchar = line[i+1];
+		var upchar = line[i].toUpperCase();
+		var cval = upchar.charCodeAt(0);
+		// A-G
+		if( cval <= 71 && cval >=65 )
+		{
+			// Exception for Cmaj7
+			if( upchar == 'A' && nchar == 'j' )
+			{
+				newline += chari;
+			}
+			else if( nchar == 'b' || nchar =='#')
+			{
+				i++; //We have read an extra character now.
+				var newchord = newchords[upchar + nchar];
+				if( newchord.length == 1 )
+				{
+					// Need to insert an extra space.
+					space += 1;
+				}
+				newline += newchord;
+			}
+			else
+			{
+				var newchord = newchords[upchar];
+				if( newchord.length == 2 )
+				{
+					// Need to remove an extra space.
+					space -= 1;
+				}
+				newline += newchord;
+			}
+		}
+		else if ( chari == ' ' )
+		{
+			if( space >= 0)
+			{
+				for (var j = 0; j <= space; j++)
+				{
+					newline += ' ';
+				}
+				space = 0;
+			}
+			else
+			{
+				// Only balance negative spaces if one will be left remaining
+				if( nchar == ' ' )
+				{
+					i++;
+					space += 1;
+				}
+				newline += ' ';
+			}
+		}
+		else
+		{
+			newline += chari;
+		}
+	}
+	return newline;
+}
+
+function zj_transparray( transp )
+{
+	var chords = 
+		["C","C#","D","D#","E","F","F#","G","G#","A","Bb","B" ];
+	var newchords = [];
+	// Create array to map old chords to new ones
+	for (var i=0; i < 12; i++)
+	{ 
+		newchords[chords[i]] = chords[(i+transp+12)%12];
+	}
+	newchords["Db"] = newchords["C#"];
+	newchords["Eb"] = newchords["D#"];
+	newchords["Gb"] = newchords["F#"];
+	newchords["Ab"] = newchords["G#"];
+	newchords["A#"] = newchords["Bb"];
+	return newchords;
+}
+
+function transpadd( fromkey, integer )
+{
+	var chords = {C:0, Db:1, D:2, Eb:3, E:4, F:5, Gb:6, G:7, Ab:8, A:9, Bb:10, B:11};
+	chords["C#"] = chords["Db"];
+	chords["D#"] = chords["Eb"];
+	chords["F#"] = chords["Gb"];
+	chords["G#"] = chords["Ab"];
+	chords["A#"] = chords["Bb"];
+	var ochords = [ "C","Db","D","Eb","E","F","Gb","G","Ab","A","Bb","B" ];
+
+	var val = ochords[(parseInt(chords[fromkey]) + integer + 24)%12];
+	return val;
+}
diff --git a/laravel/resources/views/layouts/app.blade.php b/laravel/resources/views/layouts/app.blade.php
index a020e18..055df6f 100644
--- a/laravel/resources/views/layouts/app.blade.php
+++ b/laravel/resources/views/layouts/app.blade.php
@@ -10,7 +10,7 @@
     <title> @yield('title') </title>
 
     <!-- Scripts -->
-    <script src="{{ asset('js/app.js') }}" defer></script>
+    <script src="{{ asset('js/app.js') }}"></script>
 
     <!-- Fonts -->
     <link rel="dns-prefetch" href="//fonts.gstatic.com">
diff --git a/laravel/resources/views/song.blade.php b/laravel/resources/views/song.blade.php
index c166862..e3b2f78 100644
--- a/laravel/resources/views/song.blade.php
+++ b/laravel/resources/views/song.blade.php
@@ -1,10 +1,35 @@
 @extends('layouts.app')
 @section('title', $song['title'])
+
 @section('content')
+
 <div class='container'>
     <h2>{{$song['title']}}</h2>
     <pre>
     {{$song['text']}}
     </pre>
 </div>
+
+<script src='/js/chordsdata/chords.js'></script>
+<script src='/js/chordsdata/ukulelechords.js'></script>
+<script src='/js/page.js'></script>
+<!--<script src='/js/app.js'></script>-->
+<script src='/js/jsonly.js'></script>
+<script src='/js/ccharter/ccharter.js'></script>
+<!--<script src="https://api.reftagger.com/v2/RefTagger.js"></script>
+<script>
+	var refTagger = {
+		settings: {
+			bibleVersion: "NET",
+			socialSharing:[],
+			noSearchClassNames:["tabs"],
+		}
+	};
+	(function(d, t) {
+		var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
+		g.src = "//api.reftagger.com/v2/RefTagger.js";
+		s.parentNode.insertBefore(g, s);
+	}(document, "script"));
+</script>-->
+
 @endsection