abcjs-rails 2.3 → 3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 92eedfe222f72fee3b313a63bd3c2965c198dfd2
-  data.tar.gz: 0a2092fb7c1c2b99bf67a628d310be52ac376816
+  metadata.gz: 2c266341445b98625e0ab4b98abcb6cdf4af18ae
+  data.tar.gz: c24e3d239349217bb149896dc3ff3221a949117e
 SHA512:
-  metadata.gz: e9368ee3727320885cb1a5acede442e1256d3e8c2158d3a7ad7219e73adaddbf92a2c885d49dc57090f5f831e15e25d848cf2f332dff52818caee10b04d72484
-  data.tar.gz: c1c82feb61cac98aa0ff32b75f02095c04278651682e21f2de515ae2bb6b067da31ca0d5c92cf66cb71248dee6930c05eba8e538b406ee4b48569b73432f9960
+  metadata.gz: 3ef48f03107fe57ba9c878decadacaf0c311a53db60f3a8f789b7387cd8d9304b5cdffcbf88e10db17a67794e83c34c380303078367d6995b5ea9dbfae121f94
+  data.tar.gz: e6fe7d8d56bc43083acb6b37f72a966b7803b546ebb84cb3b0f0da8e8caf8f1d1f4dd2ba5b513c8a8312a5aec76ce6513aa2cebca140669e7252e902d2d5d9d3

data/app/assets/javascripts/abcjs/api/abc_animation.js

@@ -39,6 +39,28 @@ if (!window.ABCJS)
 		return ret;
 	}
 
+	// This finds the place in the stylesheets that contain the rule that matches the selector.
+	// If that selector is not found, then it creates the rule.
+	// We are doing this so that we can use a transition for animating the scrolling.
+	function getCssRule(selector) {
+		var rule;
+		for (var i = 0; i < document.styleSheets.length && rule === undefined; i++) {
+			var css = document.styleSheets[i];
+			var rules = css.rules;
+			if (rules) {
+				for (var j = 0; j < rules.length && rule === undefined; j++) {
+					if (rules[j].selectorText && rules[j].selectorText === selector)
+						rule = rules[j];
+				}
+			}
+		}
+		if (!rule) {
+			document.styleSheets[0].insertRule(selector + " { }", 1);
+			return getCssRule(selector);
+		}
+		return rule;
+	}
+
 	function getBeatsPerMinute(tune, options) {
 		// We either want to run the timer once per measure or once per beat. If we run it once per beat we need a multiplier for the measures.
 		// So, first we figure out the beats per minute and the beats per measure, then depending on the type of animation, we can
@@ -55,6 +77,13 @@ if (!window.ABCJS)
 		return bpm;
 	}
 
+	var scrollTimer;
+	var animateTimer;
+	var cssRule;
+	var currentMargin;
+	var animationTarget;
+	var shouldResetOverflow;
+
 	// This is a way to manipulate the written music on a timer. Their are two ways to manipulate the music: turn off each measure as it goes by,
 	// and put a vertical cursor before the next note to play. The timer works at the speed of the original tempo of the music unless it is overwritten
 	// in the options parameter.
@@ -66,8 +95,20 @@ if (!window.ABCJS)
 	//    hideFinishedMeasures: true or false [ false is the default ]
 	//    showCursor: true or false [ false is the default ]
 	//    bpm: number of beats per minute [ the default is whatever is in the Q: field ]
+	//    scrollHorizontal: true or false [ false is the default ]
+	//    scrollVertical: true or false [ false is the default ]
+	//    scrollHint: true or false [ false is the default ]
+	//
+	// If scrollHorizontal is present, then we expect that the music was rendered with the viewportHorizontal parameter so there is a viewport wrapping the music div. (Note that this only works when there is a single line of music and there are no repeats, signo, or codas.)
+	// If scrollVertical or scrollHint is present, then we expect that the music was rendered with the viewportVertical parameter so there is a viewport wrapping the music div.
+	// If the music is larger than the viewport, then it scrolls as the music is being played.
 	var stopNextTime = false;
 	var cursor;
+
+	function setMargin(margin) {
+		cssRule.style.marginTop = -margin + "px";
+		currentMargin = margin;
+	}
 	ABCJS.startAnimation = function(paper, tune, options) {
 		if (paper.getElementsByClassName === undefined) {
 			console.error("ABCJS.startAnimation: The first parameter must be a regular DOM element. (Did you pass a jQuery object or an ID?)");
@@ -77,6 +118,25 @@ if (!window.ABCJS)
 			console.error("ABCJS.startAnimation: The second parameter must be a single tune. (Did you pass the entire array of tunes?)");
 			return;
 		}
+		if (options.scrollHorizontal || options.scrollVertical || options.scrollHint) {
+			// We assume that there is an extra div in this case, so adjust the paper if needed.
+			// This can be called either with the outer div or the inner div.
+			if (!hasClass(paper, 'abcjs-inner')) {
+				// Must be the outer div; hide the scrollbar and move in.
+				paper.scrollTop = 0; // In case the user has repositioned the scrollbar.
+				paper.style.overflow = "hidden";
+				paper = paper.children[0];
+			}
+			if (!hasClass(paper, 'abcjs-inner')) {
+				console.error("ABCJS.startAnimation: When using scrollHorizontal/scrollVertical/scrollHint, the music must have been rendered using viewportHorizontal/viewportVertical.");
+				return;
+			}
+		}
+		// Can only have one animation at a time, so make sure that it has been stopped.
+		ABCJS.stopAnimation();
+		animationTarget = paper;
+		shouldResetOverflow = options.scrollVertical || options.scrollHint;
+
 		if (options.showCursor) {
 			cursor = $('<div class="cursor" style="position: absolute;"></div>');
 			$(paper).append(cursor);
@@ -87,9 +147,40 @@ if (!window.ABCJS)
 		var beatsPerMinute = getBeatsPerMinute(tune, options);
 		var beatsPerMillisecond = beatsPerMinute / 60000;
 		var beatLength = tune.getBeatLength(); // This is the same units as the duration is stored in.
+		var totalBeats = 0;
+
+		var millisecondsPerHalfMeasure;
+		if (options.scrollVertical) {
+			var millisecondsPerBeat = 1/beatsPerMillisecond;
+			var beatsPerMeasure = 1/beatLength;
+			var millisecondsPerMeasure = millisecondsPerBeat * beatsPerMeasure;
+			millisecondsPerHalfMeasure = millisecondsPerMeasure / 2;
+			cssRule = getCssRule(".abcjs-inner");
+		}
 
 		var startTime;
 
+		var initialWait = 2700;
+		var interval = 11;
+		var distance = 1;
+		var outer = paper.parentNode;
+		function scrolling() {
+			var currentPosition = paper.style.marginLeft;
+			if (currentPosition === "")
+				currentPosition = 0;
+			else
+				currentPosition = parseInt(currentPosition);
+			currentPosition -= distance;
+			paper.style.marginLeft = currentPosition + "px";
+			if (currentPosition > outer.offsetWidth -  paper.scrollWidth)
+				scrollTimer = setTimeout(scrolling, interval);
+		}
+
+		if (options.scrollHorizontal) {
+			paper.style.marginLeft = "0px";
+			scrollTimer = setTimeout(scrolling, initialWait);
+		}
+
 		function processMeasureHider(lineNum, measureNum) {
 			var els = getAllElementsByClasses(paper, "l"+lineNum, "m"+measureNum);
 
@@ -102,6 +193,29 @@ if (!window.ABCJS)
 			}
 		}
 
+		function addVerticalInfo(timingEvents) {
+			// Add vertical info to the bar events: put the next event's top, and the event after the next measure's top.
+			var lastBarTop;
+			var lastBarBottom;
+			var lastEventTop;
+			var lastEventBottom;
+			for (var e = timingEvents.length-1; e >= 0; e--) {
+				var ev = timingEvents[e];
+				if (ev.type === 'bar') {
+					ev.top = lastEventTop;
+					ev.nextTop = lastBarTop;
+					lastBarTop = lastEventTop;
+
+					ev.bottom = lastEventBottom;
+					ev.nextBottom = lastBarBottom;
+					lastBarBottom = lastEventBottom;
+				} else if (ev.type === 'event') {
+					lastEventTop = ev.top;
+					lastEventBottom = ev.top +ev.height;
+				}
+			}
+		}
+
 		function makeSortedArray(hash) {
 			var arr = [];
 			for (var k in hash) {
@@ -144,6 +258,8 @@ if (!window.ABCJS)
 					var elements = voices[v].children;
 					for (var elem=0; elem<elements.length; elem++) {
 						var element = elements[elem];
+						if (element.hint)
+								break;
 						if (element.duration > 0) {
 							// There are 3 possibilities here: the note could stand on its own, the note could be tied to the next,
 							// the note could be tied to the previous, and the note could be tied on both sides.
@@ -191,9 +307,32 @@ if (!window.ABCJS)
 			}
 			// now we have all the events, but if there are multiple voices then there may be events out of order or duplicated, so normalize it.
 			timingEvents = makeSortedArray(eventHash);
+			totalBeats = timingEvents[timingEvents.length-1].time / beatLength;
+			if (options.scrollVertical) {
+				addVerticalInfo(timingEvents);
+			}
 		}
 		setupEvents(tune.engraver);
 
+		function isEndOfLine(currentNote) {
+			return currentNote.top !== currentNote.nextTop && currentNote.nextTop !== undefined;
+		}
+
+		function shouldScroll(outer, scrollPos, currentNote) {
+			var height = parseInt(outer.clientHeight, 10);
+			var isVisible = currentNote.nextBottom - scrollPos < height;
+			//console.log("SCROLL: ", height, scrollPos, currentNote.nextTop, currentNote.nextBottom, isVisible);
+			return !isVisible;
+		}
+
+		var lastTop = -1;
+		var inner = $(outer).find(".abcjs-inner");
+		currentMargin = 0;
+
+		if (options.scrollVertical) {
+			setMargin(0); // In case we are calling this a second time.
+		}
+
 		function processShowCursor() {
 			var currentNote = timingEvents.shift();
 			if (!currentNote) {
@@ -201,14 +340,31 @@ if (!window.ABCJS)
 				return 0;
 			}
 			if (currentNote.type === "bar") {
+				if (options.scrollVertical) {
+					if (isEndOfLine(currentNote) && shouldScroll(outer, currentMargin, currentNote)) {
+						setTimeout(function() {
+							setMargin(currentNote.nextTop);
+						}, millisecondsPerHalfMeasure);
+					}
+				}
 				if (options.hideFinishedMeasures)
 					processMeasureHider(currentNote.lineNum, currentNote.measureNum);
 				if (timingEvents.length > 0)
 					return timingEvents[0].time / beatLength;
 				return 0;
 			}
-			if (options.showCursor)
-				cursor.css({ left: currentNote.left + "px", top: currentNote.top + "px", width: currentNote.width + "px", height: currentNote.height + "px" });
+			if (options.scrollHint && lastTop !== currentNote.top) {
+				lastTop = currentNote.top;
+				setMargin(lastTop);
+			}
+			if (options.showCursor) {
+				cursor.css({
+					left: currentNote.left + "px",
+					top: currentNote.top + "px",
+					width: currentNote.width + "px",
+					height: currentNote.height + "px"
+				});
+			}
 			if (timingEvents.length > 0)
 				return timingEvents[0].time / beatLength;
 			stopNextTime = true;
@@ -228,7 +384,7 @@ if (!window.ABCJS)
 			if (interval <= 0)
 				processNext();
 			else
-				setTimeout(processNext, interval);
+				animateTimer = setTimeout(processNext, interval);
 		}
 		startTime = new Date();
 		startTime = startTime.getTime();
@@ -236,10 +392,16 @@ if (!window.ABCJS)
 	};
 
 	ABCJS.stopAnimation = function() {
-		stopNextTime = true;
+		clearTimeout(animateTimer);
+		clearTimeout(scrollTimer);
 		if (cursor) {
 			cursor.remove();
 			cursor = null;
 		}
+		if (shouldResetOverflow) {
+			if (animationTarget && animationTarget.parentNode) // If the music was redrawn or otherwise disappeared before the animation was finished, this might be null.
+				animationTarget.parentNode.style.overflowY = "auto";
+			setMargin(0);
+		}
 	};
 })();

data/app/assets/javascripts/abcjs/api/abc_tunebook.js

@@ -21,6 +21,8 @@ if (!window.ABCJS)
 	window.ABCJS = {};
 
 (function() {
+	"use strict";
+
 	ABCJS.numberOfTunes = function(abc) {
 		var tunes = abc.split("\nX:");
 		var num = tunes.length;
@@ -125,7 +127,7 @@ if (!window.ABCJS)
 					abcParser.parse(book.tunes[currentTune].abc, parserParams);
 					var tune = abcParser.getTune();
 					ret.push(tune);
-					callback(div, tune);
+					callback(div, tune, i);
 				}
 			}
 			currentTune++;
@@ -133,6 +135,132 @@ if (!window.ABCJS)
 		return ret;
 	}
 
+	var resizeDivs = {};
+	function resizeOuter() {
+		var width = window.innerWidth;
+		for (var id in resizeDivs) {
+			if (resizeDivs.hasOwnProperty(id)) {
+				var outer = resizeDivs[id];
+				var ofs = outer.offsetLeft;
+				width -= ofs * 2;
+				outer.style.width = width + "px";
+			}
+		}
+	}
+
+	window.addEventListener("resize", resizeOuter);
+	window.addEventListener("orientationChange", resizeOuter);
+
+	function renderOne(div, tune, renderParams, engraverParams) {
+		var width = renderParams.width ? renderParams.width : 800;
+		if (renderParams.viewportHorizontal) {
+			// Create an inner div that holds the music, so that the passed in div will be the viewport.
+			div.innerHTML = '<div class="abcjs-inner"></div>';
+			if (renderParams.scrollHorizontal) {
+				div.style.overflowX = "auto";
+				div.style.overflowY = "hidden";
+			} else
+				div.style.overflow = "hidden";
+			resizeDivs[div.id] = div; // We use a hash on the element's id so that multiple calls won't keep adding to the list.
+			div = div.children[0]; // The music should be rendered in the inner div.
+		}
+		else if (renderParams.viewportVertical) {
+			// Create an inner div that holds the music, so that the passed in div will be the viewport.
+			div.innerHTML = '<div class="abcjs-inner scroll-amount"></div>';
+			div.style.overflowX = "hidden";
+			div.style.overflowY = "auto";
+			div = div.children[0]; // The music should be rendered in the inner div.
+		}
+		/* jshint -W064 */ var paper = Raphael(div, width, 400); /* jshint +W064 */
+		if (engraverParams === undefined)
+			engraverParams = {};
+		var engraver_controller = new ABCJS.write.EngraverController(paper, engraverParams);
+		engraver_controller.engraveABC(tune);
+		tune.engraver = engraver_controller;
+		if (renderParams.viewportVertical || renderParams.viewportHorizontal) {
+			// If we added a wrapper around the div, then we need to size the wrapper, too.
+			var parent = div.parentNode;
+			parent.style.width = div.style.width;
+		}
+	}
+
+	function renderEachLineSeparately(div, tune, renderParams, engraverParams) {
+		function initializeTuneLine(tune) {
+			return {
+				formatting: tune.formatting,
+				media: tune.media,
+				version: tune.version,
+				metaText: {},
+				lines: []
+			};
+		}
+
+		// Before rendering, chop up the returned tune into an array where each element is a line.
+		// The first element of the array gets the title and other items that go on top, the last element
+		// of the array gets the extra text that goes on bottom. Each element gets any non-music info that comes before it.
+		var tunes = [];
+		var tuneLine;
+		for (var i = 0; i < tune.lines.length; i++) {
+			var line = tune.lines[i];
+			if (!tuneLine)
+				tuneLine = initializeTuneLine(tune);
+
+			if (i === 0) {
+				// These items go on top of the music
+				tuneLine.metaText.tempo = tune.metaText.tempo;
+				tuneLine.metaText.title = tune.metaText.title;
+				tuneLine.metaText.header = tune.metaText.header;
+				tuneLine.metaText.rhythm = tune.metaText.rhythm;
+				tuneLine.metaText.origin = tune.metaText.origin;
+				tuneLine.metaText.composer = tune.metaText.composer;
+				tuneLine.metaText.author = tune.metaText.author;
+				tuneLine.metaText.partOrder = tune.metaText.partOrder;
+			}
+
+			// push the lines until we get to a music line
+			tuneLine.lines.push(line);
+			if (line.staff) {
+				tunes.push(tuneLine);
+				tuneLine = undefined;
+			}
+		}
+		// Add any extra stuff to the last line.
+		if (tuneLine) {
+			var lastLine = tunes[tunes.length-1];
+			for (var j = 0; j < tuneLine.lines.length; j++)
+				lastLine.lines.push(tuneLine.lines[j]);
+		}
+
+		// These items go below the music
+		tuneLine = tunes[tunes.length-1];
+		tuneLine.metaText.unalignedWords = tune.metaText.unalignedWords;
+		tuneLine.metaText.book = tune.metaText.book;
+		tuneLine.metaText.source = tune.metaText.source;
+		tuneLine.metaText.discography = tune.metaText.discography;
+		tuneLine.metaText.notes = tune.metaText.notes;
+		tuneLine.metaText.transcription = tune.metaText.transcription;
+		tuneLine.metaText.history = tune.metaText.history;
+		tuneLine.metaText['abc-copyright'] = tune.metaText['abc-copyright'];
+		tuneLine.metaText['abc-creator'] = tune.metaText['abc-creator'];
+		tuneLine.metaText['abc-edited-by'] = tune.metaText['abc-edited-by'];
+		tuneLine.metaText.footer = tune.metaText.footer;
+
+		// Now create sub-divs and render each line
+		var eParamsFirst = JSON.parse(JSON.stringify(engraverParams));
+		var eParamsMid = JSON.parse(JSON.stringify(engraverParams));
+		var eParamsLast = JSON.parse(JSON.stringify(engraverParams));
+		eParamsFirst.paddingbottom = -20;
+		eParamsMid.paddingbottom = -20;
+		eParamsMid.paddingtop = 10;
+		eParamsLast.paddingtop = 10;
+		for (var k = 0; k < tunes.length; k++) {
+			var lineEl = document.createElement("div");
+			div.appendChild(lineEl);
+			var ep = (k === 0) ? eParamsFirst : (k === tunes.length-1) ? eParamsLast : eParamsMid;
+			renderOne(lineEl, tunes[k], renderParams, ep);
+		}
+	}
+
 	// A quick way to render a tune from javascript when interactivity is not required.
 	// This is used when a javascript routine has some abc text that it wants to render
 	// in a div or collection of divs. One tune or many can be rendered.
@@ -151,14 +279,13 @@ if (!window.ABCJS)
 	//				(If this element is not present, then rendering starts at zero.)
 	//			width: 800 by default. The width in pixels of the output paper
 	ABCJS.renderAbc = function(output, abc, parserParams, engraverParams, renderParams) {
+		if (renderParams === undefined)
+			renderParams = {};
 		function callback(div, tune) {
-			var width = renderParams ? renderParams.width ? renderParams.width : 800 : 800;
-			/* jshint -W064 */ var paper = Raphael(div, width, 400); /* jshint +W064 */
-			if (engraverParams === undefined)
-				engraverParams = {};
-			var engraver_controller = new ABCJS.write.EngraverController(paper, engraverParams);
-			engraver_controller.engraveABC(tune);
-			tune.engraver = engraver_controller;
+			if (!renderParams.oneSvgPerLine || tune.lines.length < 2)
+				renderOne(div, tune, renderParams, engraverParams);
+			else
+				renderEachLineSeparately(div, tune, renderParams, engraverParams);
 		}
 
 		return renderEngine(callback, output, abc, parserParams, renderParams);
@@ -181,14 +308,42 @@ if (!window.ABCJS)
 	//			startingTune: an index, starting at zero, representing which tune to start rendering at.
 	//				(If this element is not present, then rendering starts at zero.)
 	ABCJS.renderMidi = function(output, abc, parserParams, midiParams, renderParams) {
-		function callback(div, tune) {
-			if (midiParams === undefined)
-				midiParams = {};
+		if (midiParams === undefined)
+			midiParams = {};
+		if (midiParams.generateInline === undefined) // default is to generate inline controls.
+			midiParams.generateInline = true;
+		if (midiParams.inlineControls)
+			midiParams.inlineControls.selectionToggle = false; // Override the selection option because there is no selection in the Basic call.
+
+		function callback(div, tune, index) {
+			var html = "";
 			var midi = window.ABCJS.midi.create(tune, midiParams);
-			var title = tune.metaText.title;
-			if (title)
-				title = title.toLowerCase().replace(/\W/g, '_');
-			div.innerHTML = '<a download="' + title + '.midi" href="' + midi + '">download midi</a>';
+			if (midiParams.generateInline) {
+				var inlineMidi = midi.inline ? midi.inline : midi;
+				html += window.ABCJS.midi.generateMidiControls(tune, midiParams, inlineMidi, index);
+			}
+			if (midiParams.generateDownload) {
+				var downloadMidi = midi.download ? midi.download : midi;
+				html += window.ABCJS.midi.generateMidiDownloadLink(tune, midiParams, downloadMidi, index);
+			}
+			div.innerHTML = html;
+			var find = function(element, cls) {
+				var els = element.getElementsByClassName(cls);
+				if (els.length === 0)
+					return null;
+				return els[0];
+			};
+			if (midiParams.generateInline && (midiParams.animate || midiParams.listener)) {
+				var parent = find(div, "abcjs-inline-midi");
+				parent.abcjsTune = tune;
+				parent.abcjsListener = midiParams.listener;
+				parent.abcjsAnimate = midiParams.animate;
+			}
+			if (midiParams.generateInline && midiParams.inlineControls && midiParams.inlineControls.startPlaying) {
+				var startButton = find(div, "abcjs-midi-start");
+				window.ABCJS.midi.startPlaying(startButton);
+			}
+
 		}
 
 		return renderEngine(callback, output, abc, parserParams, renderParams);