tests/jquery.type-char-animation.js.adhoc-test.html

<!DOCTYPE html>
<html lang="en">
<head> 
	<meta charset="utf-8" /> 
	<title>jQuery Type Char Adhoc test</title> 
	
	<style type="text/css">
		#main {
			
		}
		
		#textarea {
			width: 45%;
			height: 400px;
			font-family: monospace;
		}
		
		#div {
			width: 45%;
			height: 400px;
			float: right;
			border: 1px solid black;
			overflow: auto;
		}
		
		#btn-div, #btn-stop-div {
			float: right;
		}
		
		fieldset {
			margin-top: 1em;
		}
	</style>
	
	<script>
		(function (w, doc,co) {
			// http://stackoverflow.com/questions/901115/get-query-string-values-in-javascript
			var u = {},
				e,
				a = /\+/g,  // Regex for replacing addition symbol with a space
				r = /([^&=]+)=?([^&]*)/g,
				d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
				q = w.location.search.substring(1),
				v = '2.1.1';

			while (e = r.exec(q)) {
				u[d(e[1])] = d(e[2]);
			}
			
			if (!!u.jquery) {
				v = u.jquery;
			}	

			doc.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/'+v+'/jquery.min.js">' + "<" + '/' + 'script>');
			co.log('\nLoading jQuery v' + v + '\n');
		})(window, document, console);
	</script>
</head>
<body>
	<h1>jQuery Type Char</h1>

	<div id="main">
		
		<textarea id="textarea"></textarea>
		
		<div id="div"></div>
		
		<button id="btn-textarea">Animate text area</button>
		<button id="btn-stop-textarea">Stop</button>
		<button id="btn-div">Animate div</button>
		<button id="btn-stop-div">Stop</button>
		<br />
		<button id="btn-stop">Stop All</button>
		
		<fieldset>
			<legend>Options</legend>
			<label>
				<input id="chk-reverse" type="checkbox" />
				Reverse animation
			</label>
			<label>
				<input id="chk-block" type="checkbox" />
				Block user input
			</label>
			<label>
				<input id="chk-matrix" type="checkbox" />
				Matrix effect
			</label>
		</fieldset>
	</div>

	<script src="../src/jquery.type-char-animation.js"></script>
	
	<script>
	(function ($) {
		
		'use strict';
		
		var win = $(window);
		
		var textarea = $('#textarea');
		var div = $('#div');
		
		var btnText = $('#btn-textarea');
		var btnDiv = $('#btn-div');
		
		var chkReverse = $('#chk-reverse');
		var chkBlock = $('#chk-block');
		var chkMatrix = $('#chk-matrix');
		
		var string = 'Bacon ipsum dolor sit amet chuck turkey salami, brisket prosciutto ham cow. Shank sausage boudin frankfurter pastrami beef shoulder. Pork loin pork chop pastrami jerky, drumstick ham hock turkey brisket biltong boudin t-bone ham hamburger bacon. Pork loin beef ribs venison pancetta meatball shank tongue sausage tail leberkas shoulder. Shank jowl sirloin pork chop tenderloin, corned beef beef kielbasa pig pastrami rump beef ribs.';
		
		var isOn = function (chk) {
			return !!chk.prop('checked');
		};
		
		var step = function (char, tPos) {
			console.log('step #' + tPos + ' ' + char);
		};
		
		var complete = function () {
			console.log('complete');
		};
		
		var stop = function (target) {
			return function _stop(e) {
				target.typeCharAnimation('stop', {end: true});
			};
		};
		
		var btnTextAnim = function (e) {
			textarea.typeCharAnimation({
				initialText: 'Textarea ',
				text: string,
				reverse: isOn(chkReverse),
				blockUserInput: isOn(chkBlock),
				matrixEffect: isOn(chkMatrix) ? 3 : 0,
				passes: isOn(chkMatrix) ? 2 : 0,
				complete: complete,
				step: step
			});
		};
		
		var btnDivAnim = function (e) {
			div.typeCharAnimation({
				initialText: 'Div ',
				text: string,
				reverse: isOn(chkReverse),
				blockUserInput: isOn(chkBlock),
				matrixEffect: isOn(chkMatrix) ? 3 : 0,
				complete: complete,
				step: step
			});
		};
		
		var init = function () {
			btnText.click(btnTextAnim);
			btnDiv.click(btnDivAnim);
			$('#btn-stop-textarea').click(stop(textarea));
			$('#btn-stop-div').click(stop(div));
			$('#btn-stop').click(stop(textarea.add(div)));
		};
		
		$(init);
		
	})(jQuery);
	</script>
</body>
</html>