Fix several demos

Source/mootools-core-1.3-full.js

@@ -167,7 +167,7 @@ var Type = this.Type = function(name, object){
 			object.prototype.$family = (function(){
 				return lower;
 			}).hide();
-			
+
 		}
 	}
 
@@ -203,7 +203,7 @@ var implement = function(name, method){
 		if (typeOf(hook) == 'type') implement.call(hook, name, method);
 		else hook.call(this, name, method);
 	}
-	
+
 	var previous = this.prototype[name];
 	if (previous == null || !previous.$protected) this.prototype[name] = method;
 
@@ -746,14 +746,14 @@ Function.implement({
 		try {
 			return this.apply(bind, Array.from(args));
 		} catch (e){}
-		
+
 		return null;
 	},
 
 	bind: function(bind){
 		var self = this,
 			args = (arguments.length > 1) ? Array.slice(arguments, 1) : null;
-		
+
 		return function(){
 			if (!args && !arguments.length) return self.call(bind);
 			if (args && arguments.length) return self.apply(bind, args.concat(Array.from(arguments)));
@@ -1404,7 +1404,7 @@ this.Events = new Class({
 	addEvent: function(type, fn, internal){
 		type = removeOn(type);
 
-		
+
 
 		this.$events[type] = (this.$events[type] || []).include(fn);
 		if (internal) fn.internal = true;
@@ -1427,7 +1427,7 @@ this.Events = new Class({
 		}, this);
 		return this;
 	},
-	
+
 	removeEvent: function(type, fn){
 		type = removeOn(type);
 		var events = this.$events[type];
@@ -1762,9 +1762,9 @@ local.setDocument = function(document){
 	} catch(e){};
 
 	if (this.isHTMLDocument){
-		
+
 		testNode.style.display = 'none';
-		
+
 		// IE returns comment nodes for getElementsByTagName('*') for some documents
 		testNode.appendChild(document.createComment(''));
 		starSelectsComments = (testNode.getElementsByTagName('*').length > 0);
@@ -1812,19 +1812,19 @@ local.setDocument = function(document){
 		} catch(e){};
 
 		this.brokenGEBCN = cachedGetElementsByClassName || brokenSecondClassNameGEBCN;
-		
+
 		// Webkit dont return selected options on querySelectorAll
 		try {
 			testNode.innerHTML = '<select><option selected="selected">a</option></select>';
 			this.brokenCheckedQSA = (testNode.querySelectorAll(':checked').length == 0);
 		} catch(e){};
-		
+
 		// IE returns incorrect results for attr[*^$]="" selectors on querySelectorAll
 		try {
 			testNode.innerHTML = '<a class=""></a>';
 			this.brokenEmptyAttributeQSA = (testNode.querySelectorAll('[class*=""]').length != 0);
 		} catch(e){};
-		
+
 	}
 
 	root.removeChild(testNode);
@@ -2158,7 +2158,7 @@ var combinators = {
 					for (i = 0; item = children[i++];) if (item.getAttributeNode('id').nodeValue == id){
 						this.push(item, tag, null, classes, attributes, pseudos);
 						break;
-					} 
+					}
 					return;
 				}
 				if (!item){
@@ -2367,7 +2367,7 @@ var pseudos = {
 	'root': function(node){
 		return (node === this.root);
 	},
-	
+
 	'selected': function(node){
 		return node.selected;
 	}
@@ -2699,7 +2699,7 @@ var IFrame = new Type('IFrame', function(){
 	var onLoad = function(){
 		onload.call(iframe.contentWindow);
 	};
-	
+
 	if (window.frames[props.id]) onLoad();
 	else iframe.addListener('load', onLoad);
 	return iframe;
@@ -3852,7 +3852,7 @@ Element.implement({
 			x: offset.x - scroll.x,
 			y: offset.y - scroll.y
 		};
-		
+
 		if (relative && (relative = document.id(relative))){
 			var relativePosition = relative.getPosition();
 			return {x: position.x - relativePosition.x - leftBorder(relative), y: position.y - relativePosition.y - topBorder(relative)};
@@ -4254,7 +4254,7 @@ Fx.CSS = new Class({
 					return m.toLowerCase();
 				}) : null;
 				if (!selectorText || !selectorText.test('^' + selector + '$')) return;
-				Element.Styles.each(function(value, style){
+				Object.each(Element.Styles, function(value, style){
 					if (!rule.style[style] || Element.ShortStyles[style]) return;
 					value = String(rule.style[style]);
 					to[style] = (value.test(/^rgb/)) ? value.rgbToHex() : value;
@@ -4675,7 +4675,7 @@ var Request = this.Request = new Class({
 		}.bind(this));
 		xhr.onreadystatechange = function(){};
 		clearTimeout(this.timer);
-		
+
 		this.response = {text: this.xhr.responseText || '', xml: this.xhr.responseXML};
 		if (this.options.isSuccess.call(this, this.status))
 			this.success(this.response.text, this.response.xml);
@@ -4712,15 +4712,15 @@ var Request = this.Request = new Class({
 	onFailure: function(){
 		this.fireEvent('complete').fireEvent('failure', this.xhr);
 	},
-	
+
 	loadstart: function(event){
 		this.fireEvent('loadstart', [event, this.xhr]);
 	},
-	
+
 	progress: function(event){
 		this.fireEvent('progress', [event, this.xhr]);
 	},
-	
+
 	timeout: function(){
 		this.fireEvent('timeout', this.xhr);
 	},
@@ -4744,7 +4744,7 @@ var Request = this.Request = new Class({
 		}
 		return false;
 	},
-	
+
 	send: function(options){
 		if (!this.check(options)) return this;
 
@@ -4780,7 +4780,7 @@ var Request = this.Request = new Class({
 		}
 
 		if (!url) url = document.location.pathname;
-		
+
 		var trimPosition = url.lastIndexOf('/');
 		if (trimPosition > -1 && (trimPosition = url.indexOf('#')) > -1) url = url.substr(0, trimPosition);
 
@@ -4800,7 +4800,7 @@ var Request = this.Request = new Class({
 
 		xhr.open(method.toUpperCase(), url, this.options.async, this.options.user, this.options.password);
 		if (this.options.user && 'withCredentials' in xhr) xhr.withCredentials = true;
-		
+
 		xhr.onreadystatechange = this.onStateChange.bind(this);
 
 		Object.each(this.headers, function(value, key){
@@ -5174,7 +5174,7 @@ var domready = function(){
 	if (ready) return;
 	Browser.loaded = ready = true;
 	document.removeListener('DOMContentLoaded', domready).removeListener('readystatechange', check);
-	
+
 	document.fireEvent('domready');
 	window.fireEvent('domready');
 };
@@ -5236,7 +5236,7 @@ Element.Events.load = {
 			domready();
 			delete Element.Events.load;
 		}
-		
+
 		return true;
 	}
 };

demos/Custom.Events/demo.js

@@ -5,34 +5,34 @@ Element.Events.keyenter = {
 		// We can basically put any logic here.
 		// In this example we return true, when the pressed key is the
 		// Enter-Button so the keyenter event gets fired.
-		return e.key=='enter';
+		return e.key == 'enter';
 	}
 };
 
 window.addEvent('domready', function(){
 	// First Example
-	
+
 	// Here we add the custom event to the input-element
 	$('myElement').addEvent('keyenter', function(e){
 		// We can do everything here: submitting a form, sending an AJAX-Request and so on
 		// because it only fires when the user presses the Enter-Button
 		e.stop();
 
 		// But instead we only change the text of an element.
-		$('myDivElement').set('text', 'You pressed enter').highlight(); 
+		$('myDivElement').set('text', 'You pressed enter').highlight();
 	});
-	
-	
+
+
 	// Second Example
 	var el = $('myScrollElement'),
 		color = new Color(el.getStyle('background-color')).hsb;
-	
+
 	el.addEvent('mousewheel', function(e){
 		e.stop(); // prevent the mousewheel from scrolling the page.
-		
+
 		// Again we just set the text of an element and highlight it
 		$('myOtherDivElement').set('text', 'Wheel ' + (e.wheel < 0 ? 'down' : 'up')).highlight();
-		
+
 		// But we add some nice logic to it to change the background-color
 		var hue = color[0];
 		if (e.wheel < 0){
@@ -42,9 +42,9 @@ window.addEvent('domready', function(){
 			hue += 5;
 			if (hue > 360) hue = 0;
 		}
-		
+
 		color[0] = hue;
-		
+
 		this.setStyle('background-color', color.hsbToRgb());
 	});
 });

demos/Effects/demo.js

@@ -1,79 +1,80 @@
+
 window.addEvent('domready', function() {
 	var el = $('myElement');
-	
+
 	// MooTools is able to handle effects without the use of a wrapper,
 	// so you are able to do effects with just one easy line.
-	
+
 	//FIRST EXAMPLE
-	
+
 	// There are different ways to add a fading opacity effect to an element click
-	
+
 	// Short version
-	$('fadeOpacity').addEvent('click', el.fade.bind(el, [0]));
-	
+	$('fadeOpacity').addEvent('click', el.fade.pass([0], el));
+
 	// Long version
 	$('tweenOpacity').addEvent('click', function(e) {
 		// You often will need to stop propagation of the event
 		e.stop();
 		el.fade(1);
 	});
-	
+
 	$('tweenOpacity1').addEvent('click', function(e) {
 		e.stop();
 		el.fade(0.3);
 	});
-	
-	
+
+
 	//SECOND EXAMPLE
 	var otherEl = $('myOtherElement');
-	
+
 	$('heightEffect').addEvent('click', function(){
 		otherEl.tween('height', 30);
 		return false; // alternative syntax to stop the event
 	});
-	
+
 	// We can also create an Fx.Tween instance and use a wrapper variable
-	
+
 	var myEffect = new Fx.Tween(otherEl);
 	$('colorEffect').addEvent('click', function(e) {
 		e.stop();
 		// We change the background-color of the element
 		myEffect.start('background-color', '#E6EFC2');
 	});
-	
+
 	$('borderEffect').addEvent('click', function(e) {
 		e.stop();
 		otherEl.tween('border', '10px dashed #C6D880');
 	});
-	
+
 	$('resetEffect').addEvent('click', function(e) {
 		e.stop();
 		otherEl.erase('style');
 	});
-	
-	
+
+
 	//THIRD EXAMPLE
-	
+
 	var anotherEl = $('anotherElement');
-	
+
 	// Again we are able to create a morph instance
 	var morph = new Fx.Morph('anotherElement');
-	
+
 	$('morphEffect').addEvent('click', function(e) {
 		e.stop();
 		morph.start({
 			width: '200px',
 			color: '#C6D880'
 		});
 	});
-	
+
 	// Or we just use Element.morph
 	$('CSSmorphEffect').addEvent('click', function(e) {
 		e.stop();
 		// Changes the element's style to .myClass defined in the CSS
 		anotherEl.morph('.myClass');
 	});
-	
+
 	$('resetEffect1').addEvent('click', function(e) {
 		e.stop();
 		// You need the same selector defined in the CSS-File

demos/Fx.Slide/demo.details

@@ -0,0 +1,20 @@
+/*
+---
+
+name: Fx.Slide
+
+description: Fx.Slide demo
+
+authors:
+  -
+
+keywords:
+  - Fx
+  - Fx.Slide
+
+requires: [Core/*]
+
+...
+*/
+
+<p>Slide elements in and out, or even toggle them!</p>