lsd_rails 0.1

data/Packages/mootools-more/Tests/Interactive/Fx/Fx.Slide.html

@@ -0,0 +1,63 @@
+<style>
+#sliderExampleWrapper {
+	width: 300px;
+	height: 200px;
+	border: 1px solid #000;
+	margin-left: 10px;
+}
+
+#sliderButton {
+	width: 100px;
+	margin: 30px;
+}
+
+#inner-box2{
+	background: #baeeb5;
+	height: 100px;
+	border: 1px solid #333;
+}
+
+#inner-box {
+	margin-top: 20px;
+	height: 10px;
+	background: red;
+	border: 1px solid #000;
+}
+</style>
+
+<p>In toggling, it should return the elements to the correct height.</p>
+
+<div id="sliderExampleWrapper">
+	<div id="sliderButton">
+		<div>
+			<div id="inner-box"></div>
+			<div id="inner-box2"></div>
+		</div>
+	</div>
+</div>
+<script src="/depender/build?require=More/Fx.Slide,Core/Element.Event"></script>
+
+<script>
+
+var fx = new Fx.Slide('sliderButton', {duration: 500});
+
+makeActions([
+	{
+		title: 'Show the element and slide out.',
+		fn: function(){
+			fx.show().slideOut();
+		}
+	}, {
+		title: 'Hide the element and slide in.',
+		fn: function(){
+			fx.hide().slideIn();
+		}
+	}, {
+		title: 'Toggle the state - sliding in or out.',
+		fn: function(){
+			fx.toggle();
+		}
+	}
+]);
+
+</script>

data/Packages/mootools-more/Tests/Interactive/Fx/Fx.Slide.yml

@@ -0,0 +1,2 @@
+js-references:
+  - "More/Fx.Slide"

data/Packages/mootools-more/Tests/Interactive/Fx/Fx.SmoothScroll.html

@@ -0,0 +1,77 @@
+<style>
+  #A, #B, #C, D {
+    margin-left:50px;
+  }
+  .content {
+    width:10000px;
+  }
+</style>
+<div class="content">
+	<p>All the links below should scroll smoothly to their sections. It has a offset of -20 pixels. It should only scroll the y axis.</p>
+
+	<a name="top" id="top"></a>
+
+	<a href="#A">A</a> |
+	<a href="#B">B</a> |
+	<a href="#C">C</a> |
+	<a href="#D">D</a> |
+	<a href="#E">E</a> |
+	<a href="#F">F</a> |
+	<a href="#G">G</a> |
+	<a href="#H">H</a>
+
+
+	<div style="height: 300px"></div>
+	<a name="A" id="A"></a>
+	A
+	<a href="#top">Back to top</a>
+
+	<div style="height: 300px"></div>
+	<a name="B" id="B"></a>
+	B
+	<a href="#top">Back to top</a>
+
+	<div style="height: 300px"></div>
+	<a name="C" id="C"></a>
+	C
+	<a href="#top">Back to top</a>
+
+	<div style="height: 300px"></div>
+	<a name="D" id="D"></a>
+	D
+	<a href="#top">Back to top</a>
+
+
+	<div style="height: 300px"></div>
+	<a name="E" id="E"></a>
+	E
+	<a href="#top">Back to top</a>
+
+	<div style="height: 300px"></div>
+	<a name="F" id="F"></a>
+	F
+	<a href="#top">Back to top</a>
+
+	<div style="height: 300px"></div>
+	<a name="G" id="G"></a>
+	G
+	<a href="#top">Back to top</a>
+
+	<div style="height: 300px"></div>
+	<a name="H" id="H"></a>
+	H
+	<a href="#top">Back to top</a>
+
+	<div style="height: 300px"></div>
+</div>
+
+<script src="/depender/build?require=More/Fx.SmoothScroll"></script>
+<script>
+new Fx.SmoothScroll({
+	offset: {
+		x: 0,
+		y: -20
+	},
+	axes: 'y'
+});
+</script>

data/Packages/mootools-more/Tests/Interactive/Fx/Fx.SmoothScroll.yml

@@ -0,0 +1,3 @@
+js-references:
+  - "More/Fx.Scroll"
+  - "More/Fx.SmoothScroll"

data/Packages/mootools-more/Tests/Interactive/Fx/Fx.Sort.html

@@ -0,0 +1,100 @@
+<style type="text/css">
+
+#sorter {
+	padding-left: 15px;
+}
+
+#sorter li {
+	border: 1px solid #666;
+	margin: 8px;
+	padding: 4px;
+}
+
+div.spanner {
+	float: left;
+	margin: 4px;
+	padding: 2px;
+	border: 1px solid #000;
+}
+
+</style>
+
+<ol id="sorter">
+  <li id="li0">(0) stuff</li>
+  <li id="li1">(1) more stuff<br />
+  really</li>
+
+  <li id="li2">(2) still more stuff</li>
+  <li id="li3">(3) loads o stuff</li>
+  <li id="li4">(4) blah<br />
+  blah<br />
+  blah</li>
+</ol>
+<div class="spanner">one</div>
+<div class="spanner">two</div>
+<div class="spanner">three</div>
+<div class="spanner">four</div>
+<div class="spanner">five</div>
+
+
+<script src="/depender/build?require=More/Fx.Sort,Core/Element.Event,Core/Fx.Transitions"></script>
+
+<script type="text/javascript">
+
+var vert = new Fx.Sort($$('#sorter li'), {
+	transition: Fx.Transitions.Back.easeInOut,
+	duration: 1000
+});
+
+var horz = new Fx.Sort($$('.spanner'), {
+	mode: "horizontal",
+	transition: Fx.Transitions.Back.easeInOut,
+	duration: 1000
+});
+
+makeActions([
+	{
+		title: "Reverses the order of the lists to 5,4,3,2,1",
+		fn: function(){
+			vert.backward();
+			(function(){horz.backward();}).delay(1000);
+		}
+	},
+	{
+		title: "Resets the order of the lists to 1,2,3,4,5",
+		fn: function(){
+			vert.forward();
+			(function(){horz.forward();}).delay(1000);
+		}
+	},
+	{
+		title: "Sets the order of the lists to 5,2,4,3,1",
+		fn: function(){
+			vert.sort([4,1,3,2,0]);
+			(function(){horz.sort([4,1,3,2,0]);}).delay(1000);
+		}
+	},
+	{
+		title: "Swaps the position of 1 and 5",
+		fn: function(){
+			vert.swap(0,4);
+			(function(){horz.swap(0,4);}).delay(1000);
+		}
+	},
+	{
+		title: "Reverses the order of the lists",
+		fn: function(){
+			vert.reverse();
+			(function(){horz.reverse();}).delay(1000);
+		}
+	},
+	{
+		title: "Reorders the DOM to match the current sort order.",
+		description: "(No visible effect; inspect in firebug.)",
+		fn: function(){
+			vert.rearrangeDOM();
+		}
+	}
+]);
+
+</script>

data/Packages/mootools-more/Tests/Interactive/Fx/Fx.Sort.yml

@@ -0,0 +1,2 @@
+js-references:
+  - "More/Fx.Sort"

data/Packages/mootools-more/Tests/Interactive/Interface/HtmlTable.Select.html

@@ -0,0 +1,109 @@
+<style>
+table {
+	width: 100%;
+	border: 1px solid #bbb;
+}
+table thead th {
+	text-align: left;
+	white-space: nowrap;
+	padding: 0px 6px;
+	border: 1px solid #b2b2b2;
+	border-width: 0px 1px 1px 0px;
+	height: 16px !important;
+	line-height: 16px !important;
+	font-size: 12px;
+	font-weight: normal;
+	overflow: hidden;
+}
+table th:last-child {
+	border-right: none;
+}
+table td {
+	white-space: nowrap;
+	padding: 0px 8px;
+	height: 20px;
+	line-height: 20px;
+	background: #fff;
+	border: none;
+}
+table tr.table-tr-odd td {
+	background: #f3f3f3;
+}
+table tr:nth-child(odd) td {
+	background: #f3f3f3;
+}
+table tr:hover > td, table tr.table-tr-hovered td {
+	background-color: #d4e7f8;
+	color: #000;
+	cursor: pointer;
+}
+table tr.selected td, table tr.table-tr-selected td, table tr.selected td a, table tr.table-tr-selected td a {
+	background-color: #3875d7;
+	color: #fff;
+}
+</style>
+<p>
+	You should be able to select rows in the table below. Holding down shift and clicking on numerous rows should behave as you would expect, selecting and deselecting multiple rows. Keyboard support should also allow you to move up and down and select rows with space or enter. Hitting shift + space or enter should select multiple rows.
+</p>
+<div id="table1"></div>
+<p>
+	The table below is not multi-selectable. You can hold shift and use the arrows or click, but it will only ever select one row.
+</p>
+<div id="table2"></div>
+<!-- no html -->
+<script src="/depender/build?require=More/HtmlTable.Select"></script>
+<script>
+var data = [
+	{"id":56,"timezone":"Europe/Amsterdam","name":"Amsterdam","geolat":52.3789,"geolong":4.90067},
+	{"id":46,"timezone":"America/New_York","name":"Atlanta","geolat":33.7525,"geolong":-84.3888},
+	{"id":42,"timezone":"America/Chicago","name":"Austin","geolat":30.2669,"geolong":-97.7428},
+	{"id":63,"timezone":"America/New_York","name":"Baltimore","geolat":39.294255,"geolong":-76.614275},
+	{"id":24,"timezone":"America/New_York","name":"Boston","geolat":42.3583,"geolong":-71.0603},
+	{"id":32,"timezone":"America/Chicago","name":"Chicago","geolat":41.8858,"geolong":-87.6181},
+	{"id":64,"timezone":"America/New_York","name":"Cleveland","geolat":41.499819,"geolong":-81.693716},
+	{"id":43,"timezone":"America/Chicago","name":"Dallas / Fort Worth","geolat":32.7887,"geolong":-96.7676},
+	{"id":25,"timezone":"America/Denver","name":"Denver","geolat":39.734,"geolong":-105.026},
+	{"id":47,"timezone":"America/New_York","name":"Detroit","geolat":42.3333,"geolong":-83.0484},
+	{"id":48,"timezone":"America/Chicago","name":"Houston","geolat":29.7594,"geolong":-95.3594},
+	{"id":66,"timezone":"America/New_York","name":"Indianapolis","geolat":39.767016,"geolong":-86.156255},
+	{"id":65,"timezone":"America/Chicago","name":"Kansas City","geolat":39.090431,"geolong":-94.583644},
+	{"id":49,"timezone":"America/Los_Angeles","name":"Las Vegas","geolat":36.1721,"geolong":-115.122}
+];
+var myArray = data.map(function(item){
+	return [item.id, item.name, item.timezone, item.geolat, item.geolong];
+});
+
+var myTable = new HtmlTable({
+	shiftForMultiSelect: true,
+	properties : {
+		border : 1,
+		cellspacing : 0,
+		cellpadding : 5
+	},
+	rows : myArray,
+	headers : ['ID', 'TimeZone', 'Name', 'GEO Latitude', 'GEO Longitude'],
+	sortable : true,
+	selectable: true,
+	parsers : ['number', 'string', 'string', 'float', 'float']
+
+});
+$(myTable).inject($('table1'));
+
+
+var myTable2 = new HtmlTable({
+	properties : {
+		border : 1,
+		cellspacing : 0,
+		cellpadding : 5
+	},
+	rows : myArray,
+	headers : ['ID', 'TimeZone', 'Name', 'GEO Latitude', 'GEO Longitude'],
+	sortable : true,
+	selectable: true,
+	allowMultiSelect: false,
+	parsers : ['number', 'string', 'string', 'float', 'float']
+
+});
+$(myTable2).inject($('table2'));
+
+</script>

data/Packages/mootools-more/Tests/Interactive/Interface/HtmlTable.Select.yml

@@ -0,0 +1,3 @@
+js-references:
+  - "More/HtmlTable"
+  - "More/HtmlTable.Select"

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

@@ -0,0 +1,46 @@
+<style>
+table.simple-table {
+	border: solid #777;
+	border-width: 0px 0px 1px 1px;
+	margin-top: 8px;
+}
+table.simple-table thead {
+	background: #777;
+	border-bottom: 1px solid #333;
+	color: #fff;
+}
+table.simple-table tfoot {
+	background: #ccc;
+	border-top: 1px solid #333;
+	color: #777;
+}
+table.simple-table td, table.simple-table th {
+	padding: 4px;
+	border-right: 1px solid #777;
+	border-top: 1px solid #777;
+}
+</style>
+<p>
+	You should see a simple html table below.
+</p>
+<!-- no html -->
+<script src="/depender/build?require=More/HtmlTable"></script>
+<script>
+var t = new HtmlTable({
+	properties: {
+		border: 1, cellspacing: 2, cellpadding: 3,
+		'class':'simple-table'
+	},
+	headers: ['fruit', 'colors'],
+	footers: ['fruit', 'colors']
+});
+t.inject(document.body);
+t.push(['apple', [new Element('span', {'html': 'red'}), new Element('span', {'html': '(green)'})]]);
+t.push(['lemon', 'yellow']);
+t.push([{
+		content: 'grapes',
+		properties: {rowspan: 2, valign: 'top'}
+},
+'purple']);
+t.push(['green']);
+</script>

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

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

data/Packages/mootools-more/Tests/Interactive/Interface/HtmlTable_(empty_and_refill).html

@@ -0,0 +1,46 @@
+<style>
+table.simple-table {
+	border: solid #777;
+	border-width: 0px 0px 1px 1px;
+	margin-top: 8px;
+}
+table.simple-table thead {
+	background: #777;
+	border-bottom: 1px solid #333;
+	color: #fff;
+}
+table.simple-table tfoot {
+	background: #ccc;
+	border-top: 1px solid #333;
+	color: #777;
+}
+table.simple-table td, table.simple-table th {
+	padding: 4px;
+	border-right: 1px solid #777;
+	border-top: 1px solid #777;
+}
+</style>
+<p>
+	You should see a table below with two columns and the words "I work" in it.
+</p>
+<!-- no html -->
+<script src="/depender/build?require=More/HtmlTable"></script>
+<script>
+// create blank table with no options
+var table = new HtmlTable({
+	properties: {
+		'class':'simple-table'
+	}
+});
+// set some headers
+table.setHeaders(['column1','column2']);
+// inject table into myElement
+table.inject(document.body);
+// push data to the table
+table.push(['hello','world']);
+// this is the trouble spot, it removes the tbody tag from the table
+table.empty();
+// at this stage if you call table.build(), the below push will work
+// if you try to push rows into the table now it wont work as the tbody tag is missing
+table.push(['I','work']);
+</script>

data/Packages/mootools-more/Tests/Interactive/Interface/HtmlTable_(empty_and_refill).yml

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

data/Packages/mootools-more/Tests/Interactive/Interface/HtmlTable_(id).html

@@ -0,0 +1,43 @@
+<style>
+table.simple-table {
+	border: solid #777;
+	border-width: 0px 0px 1px 1px;
+	margin-top: 8px;
+}
+table.simple-table thead {
+	background: #777;
+	border-bottom: 1px solid #333;
+	color: #fff;
+}
+table.simple-table tfoot {
+	background: #ccc;
+	border-top: 1px solid #333;
+	color: #777;
+}
+table.simple-table td, table.simple-table th {
+	padding: 4px;
+	border-right: 1px solid #777;
+	border-top: 1px solid #777;
+}
+</style>
+<p>
+	You should see a simple html table below.
+	<table id="table-id" class="simple-table"></table>
+</p>
+<!-- no html -->
+<script src="/depender/build?require=More/HtmlTable"></script>
+<script>
+var t = new HtmlTable('table-id', {
+	headers: ['fruit', 'colors'],
+	footers: ['fruit', 'colors']
+});
+t.inject(document.body);
+t.push(['apple', 'red']);
+t.push(['lemon', 'yellow']);
+t.push([{
+		content: 'grapes',
+		properties: {rowspan: 2, valign: 'top'}
+},
+'purple']);
+t.push(['green']);
+</script>

data/Packages/mootools-more/Tests/Interactive/Interface/HtmlTable_(id).yml

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