"

* Adding a demo on how to extend the Native Objects so we can point users to it =) * Some minor style changes to better suit the new demo interface " git-svn-id: http://svn.mootools.net/trunk@1554 4db308c1-fb21-0410-9919-de62e267375e
mootools · Jun 9, 2008 · aace0cb · aace0cb
1 parent ef45874
commit aace0cb
Show file tree

Hide file tree

Showing 12 changed files with 164 additions and 22 deletions.
diff --git a/Demos/Accordion/demo.css b/Demos/Accordion/demo.css
@@ -3,17 +3,16 @@
 }
 
 h3.toggler {
-	color:#222;
-	padding:2px 5px;
-	cursor:pointer;
-	font-size:13px;
-	font-weight:normal;
-	background-color:#eee;
-	border:1px solid #f5f5f5;
-	border-right-color:#ddd;
-	border-bottom-color:#ddd;
-	font-family:'Andale Mono', sans-serif;
-	margin: 0;
+	cursor: pointer;
+	border: 1px solid #f5f5f5;
+	border-right-color: #ddd;
+	border-bottom-color: #ddd;
+	font-family: 'Andale Mono', sans-serif;
+	font-size: 12px;
+	background: #D2E0E6;
+	color: #528CE0;
+	margin: 0 0 4px 0;
+	padding: 3px 5px 1px;
 }
 
 div.element p, div.element h4 {

diff --git a/Demos/Accordion/demo.js b/Demos/Accordion/demo.js
@@ -4,10 +4,10 @@ window.addEvent('domready', function() {
 	var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', {
 		opacity: false,
 		onActive: function(toggler, element){
-			toggler.setStyle('color', '#f30');
+			toggler.setStyle('color', '#41464D');
 		},
 		onBackground: function(toggler, element){
-			toggler.setStyle('color', '#222');
+			toggler.setStyle('color', '#528CE0');
 		}
 	});
 

diff --git a/Demos/Element.Event/index.html b/Demos/Element.Event/index.html
@@ -5,7 +5,7 @@
 	<link rel="stylesheet" href="demo.css" type="text/css" />
 	<script type="text/javascript" src="../mootools.js"></script>
 	<script type="text/javascript" src="demo.js"></script>
-	<title>Elements Event</title>
+	<title>Elements Event Demo</title>
 </head>
 <body>
 	<h1>Events</h1>

diff --git a/Demos/Fx.Slide/demo.css b/Demos/Fx.Slide/demo.css
@@ -3,9 +3,14 @@ h3.section {
 }
 
 #vertical_slide, #horizontal_slide {
-	background: #222;
-	color: #fff;
+	background: #D0C8C8;
+	color: #8A7575;
 	padding: 10px;
-	margin: 20px;
-	border: 10px solid pink;
+	border: 5px solid #F3F1F1;
+	font-weight: bold;
+}
+
+div.marginbottom {
+	/* Since the Fx.Slide element resets margins, we set a margin on the above element */
+	margin-bottom: 10px;
 }
diff --git a/Demos/Fx.Slide/index.html b/Demos/Fx.Slide/index.html
@@ -14,7 +14,7 @@ <h2>Introduction</h2>
 		Here goes a nice introduction
 	</p>
 	<h3 class="section">Vertical</h3>
-	<div>
+	<div class="marginbottom">
 		<a id="v_slideout" href="#">slide out</a>
 		|
 		<a id="v_slidein" href="#">slide in</a>
@@ -30,7 +30,7 @@ <h3 class="section">Vertical</h3>
 		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 	</div>
 	<h3 class="section">Horizontal</h3>
-	<div>
+	<div class="marginbottom">
 		<a id="h_slideout" href="#">slide out</a>
 		|
 		<a id="h_slidein" href="#">slide in</a>

diff --git a/Demos/Mouseenter/index.html b/Demos/Mouseenter/index.html
@@ -5,7 +5,7 @@
 	<link rel="stylesheet" href="demo.css" type="text/css" />
 	<script type="text/javascript" src="../mootools.js"></script>
 	<script type="text/javascript" src="demo.js"></script>
-	<title>Slider Demo</title>
+	<title>Mouseenter Demo</title>
 </head>
 <body>
 	<h1>Mouseenter/Mouseleave</h1>

diff --git a/Demos/Native/demo.css b/Demos/Native/demo.css
@@ -0,0 +1,33 @@
+div.element {
+	width: 100px;
+	height: 50px;
+	border: 1px solid black;
+	background-color: #f9f9f9;
+	float: left;
+	margin: 5px;
+}
+
+div.otherElement {
+	height: 20px;
+}
+
+pre {
+	padding: 5px 7px;
+	margin: 5px 0;
+	background: #f5f5f5;
+	border: 1px solid #ddd;
+	color: #333;
+	overflow: auto;
+	font-size: 12px;
+}
+
+h3.code {
+	margin: 10px 0;
+	padding: 3px 5px 1px;
+	background: #D0C8C8;
+	color: #5d4f4f;
+}
+
+p.margin {
+	margin: 5px 0;
+}
diff --git a/Demos/Native/demo.js b/Demos/Native/demo.js
@@ -0,0 +1,36 @@
+// We add the "invoke"-Method to Arrays
+Array.implement({
+
+	invoke: function(fn, args){
+		var result = [];
+
+		for (var i = 0, l = this.length; i < l; i++){
+			if(this[i] && this[i][fn])
+				result.push(args ? this[i][fn].pass(args, this[i])() : this[i][fn]());
+		}
+		return result;
+	}
+
+});
+
+
+window.addEvent('domready', function(){
+
+	var els = $$('div.element');
+
+	var myArray = [
+		new Fx.Tween(els[0]),
+		new Fx.Tween(els[1]),
+		new Fx.Tween(els[2]),
+		new Fx.Tween(els[3]),
+	];
+
+	var i = false;
+
+	$('link').addEvent('click', function(e){
+		e.stop();
+
+		i = !i;
+		myArray.invoke('start', ['height', i ? '120px' : '50px']);
+	});
+});
diff --git a/Demos/Native/index.html b/Demos/Native/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<link rel="stylesheet" href="demo.css" type="text/css" />
+	<script type="text/javascript" src="../mootools.js"></script>
+	<script type="text/javascript" src="demo.js"></script>
+	<title>Extending Native Demo</title>
+</head>
+<body>
+	<h1>Exending the Native Objects</h1>
+	<h2>Introduction</h2>
+	<p>
+		There are times you may ask yourself "Why isn't <span style="font-style: italic;">that</span> part of MooTools?" and while
+		there are possibly a lot of answers to that it simply could be that it is something with only small usage.
+	</p>
+	<p class="margin">
+		For that reason MooTools made it easy for you to extend any native object like Arrays, Strings etc. to add the
+		functionality you want.
+	</p>
+	<p class="margin">
+		In this example you will learn how to extend the Array-Object with a custom function. For this we
+		create an Array with Fx.Tween instances and start the effect on all Array elements. You may need
+		to have a look at the source of this demo.
+	</p>
+
+	<a id="link" href="#">Execute Example</a>
+
+	<div class="element"></div>
+	<div class="element"></div>
+	<div class="element otherElement"></div>
+	<div class="element otherElement"></div>
+
+	<div style="clear: both;"></div>
+	<div class="help">
+		<strong>Why?</strong> Via the newly added method we do not have to loop through the Array with
+		Array.each to just start the same method with same arguments on all the elements in the
+		given Array. If you need that functionality more often it is better to just add another method
+		to the Native then creating pointless functions or writing the same code again and again.
+		You should get the idea!
+	</div>
+
+	<h3 class="code">Code:</h3>
+<pre>Array.implement({
+
+  invoke: function(fn, args){
+    var result = [];
+
+    for (var i = 0, l = this.length; i < l; i++){
+      if(this[i] && this[i][fn])
+        result.push(args ? this[i][fn].pass(args, this[i])() : this[i][fn]());
+    }
+    return result;
+  }
+
+});</pre>
+
+	<h3 class="code">Usage:</h3>
+	<pre>myArray.invoke('fn', args);</pre>
+</body>
+</html>
diff --git a/Demos/Sortables/demo.js b/Demos/Sortables/demo.js
@@ -20,6 +20,8 @@ window.addEvent('domready', function(){
 	// We just clone the list we created before
 	var uls = $$([ul.clone(), ul.clone()])
 
+	uls[1].getElements('li').setStyle('font-weight', 'bold');
+
 	uls.inject('anotherSortablesDemo').addClass('anotherList');
 
 	new Sortables(uls, {

diff --git a/Demos/Sortables/index.html b/Demos/Sortables/index.html
@@ -5,7 +5,7 @@
 	<link rel="stylesheet" href="demo.css" type="text/css" />
 	<script type="text/javascript" src="../mootools.js"></script>
 	<script type="text/javascript" src="demo.js"></script>
-	<title>Slider Demo</title>
+	<title>Sortables Demo</title>
 </head>
 <body>
 	<h1>Sortables</h1>

diff --git a/Demos/demos.json b/Demos/demos.json
@@ -1,4 +1,10 @@
 {
+	"Basics": {
+		"Native": {
+			"title": "Extending Natives"
+		}
+	},
+
 	"Events": {
 		"Element.Event": {
 			"title": "Events Basis"