lsd_rails 0.1

data/Packages/mootools-more/Tests/Interactive/Interface/Scroller.html

@@ -0,0 +1,40 @@
+<p>
+	Move your mouse to the edge of the element. Scroller shouldn't hiccup on entering/exiting DOM elements inside of scroller element.
+</p>
+
+<button id="start">Start</button>
+<button id="stop">Stop</button>
+
+<div id="scrollExample" style="height: 300px; overflow: auto; width: 300px;">
+
+	<ul style="width: 500px;">
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+	</ul>
+
+</div>
+
+<script src="/depender/build?require=More/Drag.Move,More/Scroller"></script>
+<script>
+
+var scr = new Scroller('scrollExample', {
+	area: 50
+});
+$('start').addEvent('click', scr.start.bind(scr));
+$('stop').addEvent('click', scr.stop.bind(scr));
+
+</script>

data/Packages/mootools-more/Tests/Interactive/Interface/Scroller.yml

@@ -0,0 +1,2 @@
+js-references:
+  - "More/Scroller"

data/Packages/mootools-more/Tests/Interactive/Interface/Scroller_(With_Drag).html

@@ -0,0 +1,45 @@
+<style>
+#dragAndScroll {
+	padding-left: 30px;
+	border: 2px solid #aaa;
+	list-style: decimal;
+	overflow: auto;
+	height: 200px;
+	width: 300px;
+}
+</style>
+
+<p>
+	Start dragging the element that says "drag me up!" The scroller should start working despite your mouse already being in the "scroll area" defined by Scroller.
+</p>
+
+<ol id="dragAndScroll">
+</ol>
+
+
+<script src="/depender/build?require=More/Drag.Move,More/Scroller,More/Fx.Scroll,More/Sortables"></script>
+
+<script>
+
+var dragAndScroll = $('dragAndScroll');
+
+for (var i = 0; i < 100; i++){
+	new Element('li', {id: 'li' + i, text: 'Moo'}).inject(dragAndScroll);
+}
+
+new Fx.Scroll(dragAndScroll).toElement('li19');
+$('li20').set('html', 'drag me up!');
+
+var scroller;
+new Sortables('dragAndScroll', {
+	clone: true,
+	opacity: 0.5,
+	onStart: function(){
+		scroller = new Scroller(dragAndScroll, {area: 50}).start();
+	},
+	onComplete: function(){
+		scroller.stop();
+	}
+});
+
+</script>

data/Packages/mootools-more/Tests/Interactive/Interface/Scroller_(With_Drag).yml

@@ -0,0 +1,3 @@
+js-references:
+  - "More/Scroller"
+  - "More/Drag"

data/Packages/mootools-more/Tests/Interactive/Interface/Spinner.html

@@ -0,0 +1,125 @@
+<style>
+
+#foo, #foo2 {
+	width: 350px;
+	min-height: 100px;
+	border: 1px solid black;
+	background-color: #aaa;
+	margin-bottom: 10px;
+}
+
+#foo3 {
+	width: 350px;
+	height: 200px;
+	overflow: auto;
+	border: 1px solid black;
+	background-color:	 #aaa;
+	margin-bottom: 10px;
+}
+
+#foo3_content {
+	height: 600px;
+}
+
+input, select, embed {
+	margin: 10px;
+	clear:both;
+}
+#actions {
+	float: right;
+}
+
+</style>
+
+<link rel="stylesheet" type="text/css" media="screen" name="no name" charset="utf-8" href="/asset/more/spinner.css">
+
+<div id="foo">
+	<input type="text" value="this is a text input">
+
+	<select>
+		<option>one</option>
+		<option>two</option>
+		<option>three</option>
+		<option>four</option>
+	</select>
+
+	<object width="320" height="220">
+		<param name="movie" value="UserTests/Interface/mediaplayer.swf">
+		<param name="wmode" value="transparent">
+		<embed id="mediaplayer" width="320" height="220" flashvars="width=320&height=220&file=/asset/more/video.flv" allowfullscreen="true" quality="high" name="mediaplayer" style="" src="/asset/more/mediaplayer.swf" type="application/x-shockwave-flash" wmode="transparent"/>
+		</embed>
+	</object>
+</div>
+
+<div id="foo2">
+	This content will be replaced w/ ajax
+</div>
+<div id="foo3">
+	<div id="foo3_content">spinner positioned on a container with overflow:auto and scrollbar offsets</div>
+</div>
+
+<script src="/depender/build?require=Core/Request.HTML,More/Spinner,Core/Element.Event"></script>
+
+<script>
+
+makeActions([
+	{
+		title: "Test Spinner",
+		description: "Creates a semi-transparent layer that obscures an element and has a 'spinning' icon and message ovelaid upon that.",
+		fn: function(){
+			$('foo').spin({message: 'testing....'});
+		}
+	}, {
+		title: "Tests Spinner start and stop",
+		description: "Shows and Hides a Spinner",
+		fn: function(){
+			var w = $('foo').get('spinner');
+			w.hide();
+			w.show();
+			w.hide.delay(2000, w);
+		}
+	}, {
+		title: "Toggle a Spinner",
+		description: "Toggles the Spinner's visibility",
+		fn: function(){
+			var w = $('foo').get('spinner');
+			w.hide();
+			w.toggle();
+			w.toggle.delay(2000, w);
+		}
+	}, {
+		title: "Spinner with Request",
+		description: "Retrieves content via ajax and automatically applies the Spinner to it.",
+		fn: function(){
+			var req = new Request.HTML({
+				url: '/ajax_html_echo/?html=<p>This+was+fetched+via+AJAX</p>',
+				spinnerOptions: {
+					message: 'testing....'
+				},
+				method: 'get',
+				useSpinner: true,
+				update: $('foo2')
+			});
+			req.send();
+		}
+	}, {
+		title: "Spinner with Request (Element.load)",
+		description: "Retrieves content via ajax and automatically applies the Spinner to it.",
+		fn: function(){
+			$('foo2').set('html', 'This content will be replaced w/ ajax').set('load', {
+				url: '/ajax_html_echo/?html=<p>This+was+fetched+via+AJAX</p>',
+				method: 'get',
+				useSpinner: true
+			}).load();
+		}
+	}, {
+		title: "Spinner with Scroll Offsets",
+		description: "Positions Spinner correctly based on scroll offsets",
+		fn: function(){
+			$('foo3').scrollTo(0,300);
+			$('foo3').spin({message: 'testing....'});
+		}
+	}
+]);
+
+</script>

data/Packages/mootools-more/Tests/Interactive/Interface/Spinner.yml

@@ -0,0 +1,3 @@
+js-references:
+  - "More/Mask"
+  - "More/Spinner"

data/Packages/mootools-more/Tests/Interactive/Interface/Tips.html

@@ -0,0 +1,156 @@
+<style>
+.tip {
+	color: #fff;
+	width: 172px;
+	z-index: 13000;
+}
+
+.tip-title {
+	font-weight: bold;
+	font-size: 11px;
+	margin: 0;
+	padding: 8px 8px 4px;
+	background: #777;
+}
+
+.tip-text {
+	font-size: 11px;
+	padding: 4px 8px 8px;
+	background: #777;
+}
+img {
+	background: #444;
+	padding: 4px;
+}
+.toolTipElement3 {
+	padding: 20px;
+	border: 1px solid #000;
+	float: left;
+}
+h1 {
+	font-size: 16px;
+	font-weight: bold;
+	margin: 8px 0px;
+}
+.tips-text {
+	width: 300px;
+}
+</style>
+
+<h1>These links should let you enable and disable the tips</h1>
+<div id="togglers"><a id="enable">attach tips</a> | <a id="disable">detach tips</a></div>
+
+<h1>Mouseover this image to have a tip that follows your mouse</h1>
+<img border="0" alt="MooTools" src="/asset/more/mootools.png" title="MooTools" rel="The best damn JS framework on Earth." class="toolTipElement" />
+
+<h1>Mouseover this image to show a tip that is in a fixed location</h1>
+<img border="0" alt="MooTools" src="/asset/more/mootools.png" title="MooTools" rel="The best damn JS framework on Earth." class="toolTipElement2" />
+
+
+<h1>Tips with showDelay and a delay when fading out</h1>
+
+<p>
+	This test has a showDelay of 1000 ms and a delay of 600 ms before fading out.
+	When you move with your mouse quickly from the first to the second link, the
+	content of the tip should not already change.
+</p>
+
+<p class="tips-text">
+After a demanding trek in wintry conditions, slide your feet into the
+<a data-tipbody="the north face<br/>is rather cool" class="toolTipElement4" href="#">NSE Tent Mule</a>
+and treat them to well-deserved comfort beneath the 450 fill down insulation. Bring these water-resistant,
+low-profile mules along on any cold-weather excursion to kick-around the campfire, or to wear inside the
+refuge of your tent for greater protection in freezing conditions; pure luxury for your feet at the end of
+a long <a data-tipbody="mootools FTW!" class="toolTipElement4" href="#">alpine</a> day.
+</p>
+
+<h1>The tips on these elements are different for the container and the child</h1>
+<div class="toolTipElement3" alt="Container Tip">
+	<img border="0" alt="MooTools" src="/asset/more/mootools.png" title="MooTools" class="toolTipElement3" />
+</div>
+<h1 style="clear:both">Tips with content updating</h1>
+<p>When you mouse over <a class="toolTipElement5" title="current time">this link</a> the body of the tip should reflect the current time, updating every second.</p>
+
+<script src="/depender/build?require=More/Tips,Core/Fx.Morph"></script>
+<script>
+
+var elements = [
+	$$('.toolTipElement'),
+	$$('.toolTipElement2'),
+	$$('.toolTipElement3'),
+	$$('.toolTipElement4'),
+	$$('.toolTipElement5')
+];
+
+elements[2].store('tip:text', 'The best damn JS framework on earth.<br /><img src="/asset/more/cow.png" />');
+
+var instances = [
+
+	new Tips(elements[0]),
+
+	new Tips(elements[1], {
+		fixed: true,
+		offset: {
+			x: 10,
+			y: 70
+		}
+	}),
+
+	new Tips(elements[2], {
+		offset: {
+			x: 10,
+			y: 70
+		}
+	}),
+
+	new Tips(elements[3], {
+		text: function(el){
+			return el.get('data-tipbody');
+		},
+		fixed: true,
+		showDelay: 1000,
+		onHide: function(tip, el){
+			tip.morph.delay(600, tip, {
+				marginTop: [0, 40],
+				opacity: [1, 0]
+			});
+		},
+		onShow: function(tip, el){
+			tip.setStyles({
+				display: 'block',
+				opacity: 0
+			}).morph({
+				marginTop: [40, 0],
+				opacity: [0, 1]
+			});
+		}
+	}),
+
+	new Tips(elements[4], {
+		onShow: function(tip, el){
+			this.setText(new Date().toString());
+			this.tip.setStyle('display', 'block');
+			this._timer = (function(){
+				this.setText(new Date().toString());
+			}).periodical(500, this);
+		},
+		onHide: function(){
+			this.tip.setStyle('display', 'none');
+			clearInterval(this._timer);
+		}
+	})
+
+];
+
+document.id('enable').addEvent('click', function(){
+	instances.each(function(tips, index){
+		tips.attach(elements[index]);
+	});
+});
+document.id('disable').addEvent('click', function(){
+	instances.each(function(tips, index){
+		tips.detach(elements[index]);
+	});
+});
+
+</script>

data/Packages/mootools-more/Tests/Interactive/Interface/Tips.yml

@@ -0,0 +1,2 @@
+js-references:
+  - "More/Tips"

data/Packages/mootools-more/Tests/Interactive/Interface/Tips_(offset).html

@@ -0,0 +1,64 @@
+<style>
+#sixteen {
+	width: 33px;
+	height: 33px;
+	background-color: #000000;
+	z-index: -1;
+	opacity: 0.5;
+	filter: alpha(opacity=50);
+	position: absolute;
+}
+.attachToMe {
+	width: 100px;
+	height: 100px;
+	border: 1px solid #ff0000;
+	background-color: #ffdddd;
+	opacity: 0.5;
+	filter: alpha(opacity=50);
+	-webkit-border-radius: 50px;
+	-moz-border-radius: 50px;
+	-o-border-radius: 50px;
+	border-radius: 50px;
+	z-index: 1;
+	position: absolute;
+	bottom: 106px;
+	right: 106px;
+}
+.tip-wrap {
+	height: 130px;
+	width: 130px;
+	border: 1px solid #0000ff;
+	background-color: #ddddff;
+	font-family: sans-serif;
+	font-size: 12px;
+}
+</style>
+
+<p>In the lower right corner you should see a semi-transparent red circle (or square). Moving your cursor around in there should make a tooltip appear at the corners of the black square following your pointer.</p>
+
+<div id="sixteen"></div>
+<div class="attachToMe"></div>
+
+<script src="/depender/build?require=More/Tips"></script>
+<script>
+window.addEvent('load', function(){
+
+	$(document.body).setStyle('height', window.getHeight());
+
+	var attachTo = $$('.attachToMe').inject(document.body);
+
+	var tips = this.tips = new Tips(attachTo, {
+		offset: {x: 16, y: 16},
+		windowPadding: {x: 10, y: 10}
+	});
+
+	var sixteen = document.id('sixteen').inject(document.body);
+	$(document.body).addEvent('mousemove', function(event){
+		sixteen.setStyles({
+			top: event.page.y - 16,
+			left: event.page.x - 16
+		});
+	});
+
+});
+</script>

data/Packages/mootools-more/Tests/Interactive/Interface/Tips_(offset).yml

@@ -0,0 +1,3 @@
+js-references:
+  - "More/Mask"
+  - "More/Spinner"

data/Packages/mootools-more/Tests/Interactive/README.md

@@ -0,0 +1,3 @@
+These tests require the MooTools Test Runner, which can be found here:
+
+[http://github.com/anutron/mootools-test-runner](http://github.com/anutron/mootools-test-runner)

data/Packages/mootools-more/Tests/Interactive/Request/Request.JSONP.html

@@ -0,0 +1,22 @@
+<a id="fetch">Make a jsonp request.</a>
+<hr/>
+<div id="loading"></div>
+<div id="response"></div>
+
+<script src="/depender/build?require=More/Request.JSONP,Core/Element.Event"></script>
+<script>
+$('fetch').addEvent('click', function(){
+	new Request.JSONP({
+		log: true,
+		url: '/echo/jsonp',
+		onComplete: function(data){
+			$('response').set('text', 'success!');
+			$('loading').set('text', '');
+		},
+		onRequest: function(){
+			$('loading').set('text', 'Loading...');
+		}
+	}).send();
+});
+
+</script>

data/Packages/mootools-more/Tests/Interactive/Request/Request.JSONP.yml

@@ -0,0 +1,2 @@
+js-references:
+  - "More/Request.JSONP"

data/Packages/mootools-more/Tests/Interactive/Request/Request.JSONP_(async).html

@@ -0,0 +1,33 @@
+<p>
+	One second request, though requested second, should return before the 3 second request.<br />
+	<small>(Might not work in Opera because they do not support the async attribute at the moment)</small>
+</p>
+
+<button id="fetch">fetch!</button>
+<hr/>
+<pre id="returned"></pre>
+
+<script src="/depender/build?require=More/Request.JSONP,Core/Element.Event"></script>
+<script>
+
+var returned = document.id('returned');
+
+$('fetch').addEvent('click', function(){
+	new Request.JSONP({
+		url: '/echo/jsonp/',
+		data: {delay: 3},
+		onComplete: function(){
+			returned.appendText('Three second request returned.\n');
+		}
+	}).send();
+
+	new Request.JSONP({
+		url: '/echo/jsonp/',
+		data: {delay: 1},
+		onComplete: function(data){
+			returned.appendText('One second request returned.\n');
+		}
+	}).send();
+});
+
+</script>

data/Packages/mootools-more/Tests/Interactive/Request/Request.JSONP_(async).yml

@@ -0,0 +1,2 @@
+js-references:
+  - "More/Request.JSONP"

data/Packages/mootools-more/Tests/Interactive/Request/Request.JSONP_(timeout).html

@@ -0,0 +1,46 @@
+<style>
+#imgs img {
+	display: inline;
+	margin: 10px;
+}
+</style>
+
+<p>
+	When fetching, the failure alert should only fire on script timeout. Also, onSuccess should not fire on timeout.
+</p>
+
+<button id="a">1000 ms timeout</button>
+<button id="b">5000 ms timeout</button>
+
+<hr/>
+
+<div id="imgs"></div>
+
+
+<script src="/depender/build?require=More/Request.JSONP,Core/Element.Event"></script>
+<script>
+
+$('a').addEvent('click', request.bind(this,1000));
+$('b').addEvent('click', request.bind(this,5000));
+
+function request(timeout){
+	new Request.JSONP({
+		log: true,
+		data: {
+			delay: 1
+		},
+		timeout: timeout,
+		url: '/echo/jsonp',
+		onFailure: function(){
+			alert("this request failed");
+		},
+		onTimeout: function(){
+			alert("this request timedout");
+		},
+		onSuccess: function(data){
+			alert('this request completed successfully');
+		}
+	}).send();
+}
+
+</script>

data/Packages/mootools-more/Tests/Interactive/Request/Request.JSONP_(timeout).yml

@@ -0,0 +1,2 @@
+js-references:
+  - "More/Request.JSONP"

data/Packages/mootools-more/Tests/Interactive/Request/Request.Periodical.html

@@ -0,0 +1,38 @@
+<p>
+	You should see the log below fill up with requests to get HTML from the server for roughly 12 seconds.
+</p>
+<ul id="log"></ul>
+
+<script src="/depender/build?require=More/Request.Periodical,Core/Element"></script>
+<script>
+
+var i = 0;
+var r = new Request({
+	url: '/ajax_html_echo/?html=<p>This+was+fetched+via+AJAX</p>',
+	method: 'get',
+	initialDelay: 100,
+	delay: 100,
+	limit: 15000,
+	onRequest: function(){
+		$('log').adopt(new Element('li', {
+			html: 'attempt: ' + (i++)
+		}));
+	},
+	onSuccess: function(r){
+		$('log').adopt(new Element('li', {
+			html: 'success: ' + r
+		}));
+	}
+}).startTimer({
+	sleep: 2
+});
+
+
+(function(){
+	r.stopTimer();
+	$('log').adopt(new Element('li', {
+		html: 'test complete.'
+	}));
+}).delay(12000);
+
+</script>

data/Packages/mootools-more/Tests/Interactive/Request/Request.Periodical.yml

@@ -0,0 +1,2 @@
+js-references:
+  - "More/Request.Periodical"

data/Packages/mootools-more/Tests/Interactive/Request/Request.Queue.html

@@ -0,0 +1,42 @@
+
+<p>
+	You should see request responses log below in order from 1 through 5.
+</p>
+
+<ul id="responses"></ul>
+<script src="/depender/build?require=More/Request.Queue,Core/Element"></script>
+
+<script>
+
+	var events = {};
+	['onSuccess', 'onFailure', 'onException'].each(function(evt){
+		events[evt] = function(a){
+			$('responses').adopt(new Element('li', {
+					html: evt + ': ' + a
+				})
+			);
+		};
+	});
+
+	var q = new Request.Queue();
+	var reqs = [];
+	var sleep = 4;
+
+	(5).times(function(num){
+
+		var r = new Request({
+			url: '/ajax_html_echo/?html=<p>Success for request ' + (num + 1) + '</p>',
+			method: 'get'
+		});
+
+		sleep = sleep - 1;
+		reqs.push(r);
+		r.addEvents(events);
+		q.addRequest(num.toString(), r);
+	});
+
+	reqs.each(function(r){
+		r.send();
+	});
+
+</script>

data/Packages/mootools-more/Tests/Interactive/Request/Request.Queue.yml

@@ -0,0 +1,2 @@
+js-references:
+  - "More/Request.Queue"