RubyGems - javascriptmvc - Versions diffs - 3.0.0.pre15 - Mend

javascriptmvc 3.0.0.pre15

Files changed (550) hide show

data/lib/javascriptmvc/funcunit/synthetic/demo.html ADDED

@@ -0,0 +1,150 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+            "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en">
+	<head>
+		<title>Demo Page</title>
+		<link type="text/css" href="../../phui/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
+		<link type="text/css" href="../../phui/resizable/resizable.css" rel="stylesheet" />
+        <style type='text/css'>
+            body {font-family: verdana}
+            .error {border: solid 1px red;}
+            .error_text { color: red; font-size: 10px;}
+            td {padding: 3px;}
+			#first {
+				border: solid 1px;
+				height: 200px;width: 200px;
+			}
+			.ui-widget {
+				font-size: 1em;
+			}
+			.ui-tabs .ui-tabs-nav li a {
+				padding: 0.1em 0.2em
+			}
+			.ui-tabs .ui-tabs-panel {
+				padding: 0.5em
+			}
+			#uitabs a:focus {
+				outline: dashed;
+			}
+			#submitform {
+				border-left: dotted 1px gray;
+				padding: 10px;
+				margin-left: 10px;
+			}
+        </style>
+	</head>
+	<body>
+		<div class='tabarea'>
+		    <ul id="uitabs">
+		        <li><a href="javascript://"><span>Instructions</span></a></li>
+		        <li><a href="javascript://"><span>Drag Drop</span></a></li>
+		        <li><a href="javascript://"><span>Typing</span></a></li>
+				<li><a href="javascript://"><span>Form</span></a></li>
+		    </ul>
+		    <div>
+		        <p>Welcome to the Syn demo!</p>
+				<p>Click, drag, and type in this page.
+				   Your actions will be recorded as a syn-script.
+				   You can playback this script by pressing "Replay" below.
+				</p>
+				<p>Try clicking and tabbing between tab-buttons.</p>
+				<div>
+                    <ul id='uitabs2'>
+    		            <li><a href="javascript://">Alpha</a></li>
+                        <li><a href="javascript://">Beta</a></li>
+                        <li><a href="javascript://">Gamma</a></li>
+    		        </ul>
+                    <div>Content Alpha</div>
+                    <div>Content Beta</div>
+                    <div>Content Gamma</div>
+                </div>
+		    </div>
+		    <div>
+		    	<p>Drag the gray dot.</p>
+		       <div class='wrap' id='first'>Here is some swell content</div>
+		    </div>
+		    <div>
+		    	<p>Test the numeric field.  It only accepts numbers.
+				</p>
+                <p><input type='text' id='numeric' /></p>
+				<p>You can copy and paste if you select text with the keyboard like:
+				 [shift][left][shift-up][ctrl]c[ctrl-up][right][ctrl]v[ctrl-up].  It's
+				 possible to make mouse text selection work, but not with this recording demo.</p>
+		    </div>
+			<div>
+				&lt;form>
+				<form action='' id='submitform'>
+					<p id='indicator'>I turn green when this form is submitted.
+					</p>
+					<p id='changeIndicator'>I turn green when an element is changed.</p>
+					<div>
+						<label>Type enter to submit the form: </label>
+						<input type='text' id='clearme'/>
+					</div>
+					<div>
+						<label>Click to submit: </label>
+						<input type='submit'/>
+					</div>
+					<div>
+						<label>Click to toggle: </label>
+						<input type='checkbox' />
+					</div>
+					<div>
+						<label>Click to toggle: </label>
+						<input type='radio' name='radio' value='1'/>
+						<input type='radio' name='radio' value='2'/>
+						<input type='radio' name='radio' value='3'/>
+					</div>
+					<div>
+						<label>Click to change: </label>
+						<select>
+							<option>1</option><option>2</option><option>3</option>
+						</select>
+					</div>
+				</form>
+				&lt;/form>
+			</div>
+		</div>
+		<script type='text/javascript' src='../../steal/steal.js'></script>
+		<script type='text/javascript'>
+			steal.plugins('phui/tabs','phui/resizable','phui/key_validator').start();
+		</script>
+		<script type='text/javascript'>
+			$("#first").phui_resizable();
+			$("#uitabs, #uitabs2").phui_ui_tabs();
+			$(window).bind('load', function(){
+				$("select")[0].selectedIndex = 0;
+				$("#numeric").phui_key_validator({test: /^[-+]?[0-9]*\.?[0-9]*$/}).val("")
+			})
+			$("#submitform").submit(function(ev){
+				ev.preventDefault();
+				$("#indicator").css("backgroundColor","#00ff00")
+				setTimeout(function(){
+					$("#indicator").css("backgroundColor","")
+				},300)
+			}).change(function(ev){
+				$("#changeIndicator").css("backgroundColor","#00ff00")
+				setTimeout(function(){
+					$("#changeIndicator").css("backgroundColor","")
+				},300)
+			})
+			//this is to handle all click events in the form
+		</script>
+	</body>
+</html>

data/lib/javascriptmvc/funcunit/synthetic/demo/record.js ADDED

@@ -0,0 +1,254 @@
+//Safari doesn't send mouse/click on option
+$(function(){
+	Syn.autoDelay = true;
+	REPLAY = false;
+	ADD = true;
+	Recorder ={
+		cb: function( i ) {
+			return function(){
+				$("#code div:nth("+(i)+")").css("color","black").css("font-weight","")
+				$("#code div:nth("+(i+1)+")").css("color","orange").css("font-weight","bold")
+				if(i == commands.length - 1){
+					Recorder.done();
+				}
+			}
+		},
+		done: function() {
+			ADD = true;
+			$("#code div").css("color","black")
+		}
+	}
+	var commands =[],
+		downKeys = [],
+		keytarget = null,
+		current = [],
+		mousedown,
+		mousemove,
+		mouseup,
+		h ={
+			commandsText: function( func ) {
+				var text = [],
+					command,
+					prev,
+					args;
+				for(var i=0; i < commands.length; i++){
+					command = commands[i];
+					args = [];
+					command.options && args.push(command.options);
+					(!prev || prev.selector !== command.selector) && args.push("$('"+command.selector+"')");
+					func && args.push("Recorder.cb("+i+")");
+					text.push(func ? "":"<div>",
+					  i > 0 ? "   ." : "Syn.",
+					  command.type,
+					  "(",
+					  args.join(", "),
+					  ")\n",
+					  func ? "":"</div>"
+					)
+					prev = command;
+				}
+				return text.join("")
+			},
+			addCode: function( type, options, target ) {
+				if(!ADD){
+					return;
+				}
+				var selector = h.selector(target),
+					last = commands[commands.length - 1] || {};
+				if(last.type == type && type == 'type' && last.selector == selector){
+					//change options
+					last.options = options
+				}else if(last.type == 'type'
+					&& type == 'click'
+					&& last.options.lastIndexOf("\\r") == last.options.length -3
+					&& last.selector == selector){
+				}
+				else{
+					commands.push({
+						type : type,
+						options: options,
+						selector: selector
+					})
+				}
+				$("#code").html(h.commandsText())
+			},
+			getKey: function( code ) {
+				for(var key in Syn.keycodes){
+					if(Syn.keycodes[key] == code){
+						return key
+					}
+				}
+			},
+			addKey: function( key ) {
+			},
+			showChar: function( character, target ) {
+				var convert = {
+					"\r" : "\\r",
+					"\t" :"\\t",
+					"\b" : "\\b"
+				}
+				if(convert[character]){
+					character = convert[character]
+				}else if(character == "[" || character.length > 1){
+					character = "["+character+"]"
+				}
+				current.push(character);
+				h.addCode("type",'"'+current.join("")+'"', target)
+			},
+			keydown: function( ev ) {
+				var key = h.getKey(ev.keyCode);
+				if(keytarget != ev.target){
+					current = [];
+					keytarget = ev.target;
+				}
+				if($.inArray(key, downKeys) == -1){
+					downKeys.push(key);
+					h.showChar(key, ev.target);
+				}
+			},
+			keyup: function( ev ) {
+				var key = h.getKey(ev.keyCode);
+				if(Syn.key.isSpecial(ev.keyCode)){
+					h.showChar(key+"-up", ev.target);
+				}
+				var location = $.inArray(key, downKeys);
+				downKeys.splice(location,1);
+				justKey = true;
+				setTimeout(function(){
+					justKey = false;
+				},20)
+			},
+			// returns a selector
+			selector: function( target ) {
+				var selector = target.nodeName.toLowerCase();
+				if(target.id){
+					return "#"+target.id
+				}else{
+					var parent = target.parentNode;
+					while(parent){
+						if(parent.id){
+							selector = "#"+parent.id+" "+selector;
+							break;
+						}else{
+							parent = parent.parentNode
+						}
+					}
+				}
+				if(target.className){
+					selector += "."+target.className.split(" ")[0]
+				}
+				var others = jQuery(selector, Syn.helpers.getWindow(target).document)
+				if(others.length > 1){
+					return selector+":eq("+others.index(target)+")";
+				}else{
+					return selector;
+				}
+			}
+		},
+		lastX,
+		lastY,
+		justKey = false,
+		mousedownH = function(ev){
+			mousedown = ev.target;
+			mousemove = 0
+			lastX = ev.pageX
+			lastY = ev.pageY;
+		},
+		mouseupH = function(ev){
+			if(/option/i.test(ev.target.nodeName)){
+			}else if(!mousemove || (lastX == ev.pageX && lastY == ev.pageY)){
+				h.addCode("click",undefined,ev.target)
+			}else if(mousemove > 2 && mousedown){
+				h.addCode("drag","'"+ev.clientX+"X"+ev.clientY+"'",mousedown)
+			}
+			mousedown = null;
+			mousemove = 0;
+			lastY = lastX = null;
+		},
+		mousemoveH = function(ev){
+			mousemove++;
+		},
+		changeH = function(ev){
+			//if we changed without a previous keypress
+			if(!justKey && ev.target.nodeName.toLowerCase() == "select"){
+				var el = $("option:eq("+ev.target.selectedIndex+")", ev.target);
+				h.addCode("click",undefined, el[0])
+			}
+		};
+	$("<iframe src='demo.html'></iframe>").load(function(){
+		//cant uses handled b/c it doesn't bubble
+		var iframe = $('iframe');
+		//iframe.phui_filler({parent: $("#fill")});
+		var frameWindow = iframe[0].contentWindow;
+		var oldHandle = frameWindow.jQuery.event.handle;
+		frameWindow.jQuery.event.handle = function(ev){
+			if(! ev[ frameWindow.jQuery.expando ]){
+				//add
+				//if(code[ev.type]){
+				//	code[ev.type].call(ev.target||ev.srcElement, ev)
+				//}
+			}
+			oldHandle.apply(this,arguments);
+		}
+		keytarget = null;
+		$(frameWindow.document).keydown(h.keydown).keyup(h.keyup)
+			.mousedown(mousedownH).mousemove(mousemoveH).mouseup(mouseupH)
+			.change(changeH)
+			.click(function(ev){
+				//if(ev.target.nodeName.toLowerCase() == 'option'){
+				//	h.addCode("click",undefined,ev.target)
+				//}
+			})
+		if(REPLAY){
+			REPLAY = false;
+			setTimeout(function(){
+				var text = h.commandsText(true)
+				ADD = false;
+				$("#code div:first").css("color","red")
+				eval("with(frameWindow){"+ text +"}" );
+			},500)
+		}
+	}).appendTo($("#app"))
+	$(function(){
+		$("#code, #clearme").val("");
+	})
+	$('#app').phui_filler({parent: document.body});
+	$("#run").click(function(){
+		REPLAY = true;
+		$('iframe')[0].contentWindow.location.reload(true);
+		$("#code div").css("color","gray")
+	})
+});

data/lib/javascriptmvc/funcunit/synthetic/drag/drag.html ADDED

@@ -0,0 +1,41 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+            "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en">
+    <head>
+        <title>Synthetic Typing Test</title>
+        <style type='text/css'>
+            body {font-family: verdana}
+			td {text-align: right}
+            td:nth-child(even) {background: #CCd}
+			#key th:nth-child(even) {background: #CCf}
+			#who th:nth-child(even) {background: #fCb}
+			.hover {background-color: blue}
+        </style>
+    </head>
+    <body>
+	<p id='start'>start</p>
+	<div class='over'>Move over me</div>
+	<div class='over'>Move over me</div>
+	<p id='end'>end</p>
+<script type='text/javascript' src='../../../steal/steal.js'></script>
+<script type='text/javascript'>
+	steal.plugins('funcunit/synthetic', 'funcunit/synthetic/drag','jquery').start();
+</script>
+<script type='text/javascript' id="demo-source">
+	setTimeout(function(){
+		Syn("move",{
+			from: "#start",
+			to: "#end",
+			duration: 1000
+		},"start")
+	},1000)
+	$(".over").bind('mouseover',function(){
+		$(this).addClass('hover')
+	}).bind('mouseout',function(){
+		$(this).removeClass('hover')
+	})
+</script>
+    </body>
+</html>

data/lib/javascriptmvc/funcunit/synthetic/drag/drag.js ADDED

@@ -0,0 +1,268 @@
+steal.then(function(){
+	// document body has to exists for this test
+	(function(){
+		if (!document.body) {
+			setTimeout(arguments.callee, 1)
+			return;
+		}
+		var div = document.createElement('div')
+		document.body.appendChild(div);
+		Syn.helpers.extend(div.style, {
+			width: "100px",
+			height: "10000px",
+			backgroundColor: "blue",
+			position: "absolute",
+			top: "10px",
+			left: "0px",
+			zIndex: 19999
+		});
+		document.body.scrollTop = 11;
+		if(!document.elementFromPoint){
+			return;
+		}
+		var el = document.elementFromPoint(3, 1)
+		if (el == div) {
+			Syn.support.elementFromClient = true;
+		}
+		else {
+			Syn.support.elementFromPage = true;
+		}
+		document.body.removeChild(div);
+		document.body.scrollTop = 0;
+	})();
+	//gets an element from a point
+	var elementFromPoint = function(point, element){
+		var clientX = point.clientX, clientY = point.clientY, win = Syn.helpers.getWindow(element)
+		if (Syn.support.elementFromPage) {
+			var off = Syn.helpers.scrollOffset(win);
+			clientX = clientX + off.left; //convert to pageX
+			clientY = clientY + off.top; //convert to pageY
+		}
+		return win.document.elementFromPoint ? win.document.elementFromPoint(clientX, clientY) : element;
+	}, //creates an event at a certain point
+	createEventAtPoint = function(event, point, element){
+		var el = elementFromPoint(point, element)
+		Syn.trigger(event, point, el || element)
+		return el;
+	}, // creates a mousemove event, but first triggering mouseout / mouseover if appropriate
+	mouseMove = function(point, element, last){
+		var el = elementFromPoint(point, element)
+		if (last != el && el && last) {
+			var options = Syn.helpers.extend({},point);
+			options.relatedTarget = el;
+			Syn.trigger("mouseout", options, last);
+			options.relatedTarget = last;
+			Syn.trigger("mouseover", options, el);
+		}
+		Syn.trigger("mousemove", point, el || element)
+		return el;
+	}, // start and end are in clientX, clientY
+	startMove = function(start, end, duration, element, callback){
+		var startTime = new Date(),
+			distX = end.clientX - start.clientX,
+			distY = end.clientY - start.clientY,
+			win = Syn.helpers.getWindow(element),
+			current = elementFromPoint(start, element),
+			cursor = win.document.createElement('div'),
+			calls = 0;
+		move = function(){
+			//get what fraction we are at
+			var now = new Date(),
+				scrollOffset = Syn.helpers.scrollOffset(win),
+				fraction = ( calls == 0 ? 0 : now - startTime) / duration,
+				options = {
+					clientX: distX * fraction + start.clientX,
+					clientY: distY * fraction + start.clientY
+				};
+			calls++;
+			if (fraction < 1) {
+				Syn.helpers.extend(cursor.style, {
+					left: (options.clientX + scrollOffset.left + 2) + "px",
+					top: (options.clientY + scrollOffset.top + 2) + "px"
+				})
+				current = mouseMove(options, element, current)
+				setTimeout(arguments.callee, 15)
+			}
+			else {
+				current = mouseMove(end, element, current);
+				win.document.body.removeChild(cursor)
+				callback();
+			}
+		}
+		Syn.helpers.extend(cursor.style, {
+			height: "5px",
+			width: "5px",
+			backgroundColor: "red",
+			position: "absolute",
+			zIndex: 19999,
+			fontSize: "1px"
+		})
+		win.document.body.appendChild(cursor)
+		move();
+	},
+	startDrag = function(start, end, duration, element, callback){
+		createEventAtPoint("mousedown", start, element);
+		startMove(start, end, duration, element, function(){
+			createEventAtPoint("mouseup", end, element);
+			callback();
+		})
+	},
+	center = function(el){
+		var j = Syn.jquery()(el),
+		o = j.offset();
+		return{
+			pageX: o.left + (j.width() / 2),
+			pageY: o.top + (j.height() / 2)
+		}
+	},
+	convertOption = function(option, win, from){
+		var page = /(\d+)[x ](\d+)/,
+			client = /(\d+)X(\d+)/,
+			relative = /([+-]\d+)[xX ]([+-]\d+)/
+		//check relative "+22x-44"
+		if (typeof option == 'string' && relative.test(option) && from) {
+			var cent = center(from),
+				parts = option.match(relative);
+			option = {
+				pageX: cent.pageX + parseInt(parts[1]),
+				pageY: cent.pageY +parseInt(parts[2])
+			}
+		}
+		if (typeof option == 'string' && page.test(option)) {
+			var parts = option.match(page)
+			option = {
+				pageX: parseInt(parts[1]),
+				pageY: parseInt(parts[2])
+			}
+		}
+		if (typeof option == 'string' && client.test(option)) {
+			var parts = option.match(client)
+			option = {
+				clientX: parseInt(parts[1]),
+				clientY: parseInt(parts[2])
+			}
+		}
+		if (typeof option == 'string') {
+			option = Syn.jquery()(option, win.document)[0];
+		}
+		if (option.nodeName) {
+			option = center(option)
+		}
+		if (option.pageX) {
+			var off = Syn.helpers.scrollOffset(win);
+			option = {
+				clientX: option.pageX - off.left,
+				clientY: option.pageY - off.top
+			}
+		}
+		return option;
+	}
+/**
+ * @add Syn prototype
+ */
+Syn.helpers.extend(Syn.init.prototype,{
+	/**
+	 * @function move
+	 * Moves the cursor from one point to another.
+	 * <h3>Quick Example</h3>
+	 * The following moves the cursor from (0,0) in
+	 * the window to (100,100) in 1 second.
+	 * @codestart
+	 * Syn.move(
+	 *      {
+	 *        from: {clientX: 0, clientY: 0},
+	 *        to: {clientX: 100, clientY: 100},
+	 *        duration: 1000
+	 *      },
+	 *      document.document)
+	 * @codeend
+	 * <h2>Options</h2>
+	 * There are many ways to configure the endpoints of the move.
+	 *
+	 * <h3>PageX and PageY</h3>
+	 * If you pass pageX or pageY, these will get converted
+	 * to client coordinates.
+	 * @codestart
+	 * Syn.move(
+	 *      {
+	 *        from: {pageX: 0, pageY: 0},
+	 *        to: {pageX: 100, pageY: 100}
+	 *      },
+	 *      document.document)
+	 * @codeend
+	 * <h3>String Coordinates</h3>
+	 * You can set the pageX and pageY as strings like:
+	 * @codestart
+	 * Syn.move(
+	 *      {
+	 *        from: "0x0",
+	 *        to: "100x100"
+	 *      },
+	 *      document.document)
+	 * @codeend
+	 * <h3>Element Coordinates</h3>
+	 * If jQuery is present, you can pass an element as the from or to option
+	 * and the coordinate will be set as the center of the element.
+	 * @codestart
+	 * Syn.move(
+	 *      {
+	 *        from: $(".recipe")[0],
+	 *        to: $("#trash")[0]
+	 *      },
+	 *      document.document)
+	 * @codeend
+	 * <h3>Query Strings</h3>
+	 * If jQuery is present, you can pass a query string as the from or to option.
+	 * @codestart
+	 * Syn.move(
+	 *      {
+	 *        from: ".recipe",
+	 *        to: "#trash"
+	 *      },
+	 *      document.document)
+	 * @codeend
+	 * <h3>No From</h3>
+	 * If you don't provide a from, the element argument passed to Syn is used.
+	 * @codestart
+	 * Syn.move(
+	 *      { to: "#trash" },
+	 *      'myrecipe')
+	 * @codeend
+	 * @param {Object} options
+	 * @param {HTMLElement} from
+	 * @param {Function} callback
+	 */
+	_move: function( options, from, callback ) {
+		//need to convert if elements
+		var win = Syn.helpers.getWindow(from),
+			fro = convertOption(options.from || from, win),
+			to = convertOption(options.to || options, win);
+		startMove(fro, to, options.duration || 500, from, callback);
+	},
+	/**
+	 * @function drag
+	 * Creates a mousedown and drags from one point to another.
+	 * Check out [Syn.prototype.move move] for API details.
+	 *
+	 * @param {Object} options
+	 * @param {Object} from
+	 * @param {Object} callback
+	 */
+	_drag: function( options, from, callback ) {
+		//need to convert if elements
+		var win = Syn.helpers.getWindow(from),
+			fro = convertOption(options.from || from, win, from),
+			to = convertOption(options.to || options, win, from);
+		startDrag(fro, to, options.duration || 500, from, callback);
+	}
+})
+})