Merge branch 'gh-pages' of github.com:bitovi/jquerypp into gh-pages

Author: daffl

_includes/builder.html

@@ -23,7 +23,7 @@ <h4><a href="#dom_helpers">DOM HELPERS</a> - faster and easier DOM manipulation
 
   <label>
     <input type="checkbox" value="jquery/dom/form_params" name="plugins"/>
-    <a href="#dimensions">jQuery.formParams</a> - serializes a form into an object
+    <a href="#formparams">jQuery.formParams</a> - serializes a form into an object
   </label>
 
   <label>

index.md

@@ -722,7 +722,7 @@ Bitovi _(developers of jQuery++)_ offers [training](http://bitovi.com/training/)
 jQuery++ does things the jQuery way, which makes it really easy to learn if you are already familiar with jQuery.
 Get functionality that was always tricky to implement from one coherent library:
 
-- Set and animte outer and inner dimensions with [dimensions](#dimensions)
+- Set and animate outer and inner dimensions with [dimensions](#dimensions)
 - Serialize forms into objects with [formParams](#formparams)
 - [Drag](#drag) & [drop](#drop) events - no need for jQuery UI
 - [Resize](#resize) elements the right way

release/1.0.0/amd/jquerypp/dom/animate.js

@@ -0,0 +1,313 @@
+/*
+* jQuery++ - 1.0.0 (2012-11-20)
+* http://jquerypp.com
+* Copyright (c) 2012 Bitovi
+* Licensed MIT
+*/
+define(['jquery', 'jquerypp/dom/styles'], function ($) {
+
+	// Overwrites `jQuery.fn.animate` to use CSS 3 animations if possible
+	var
+	// The global animation counter
+	animationNum = 0,
+		// The stylesheet for our animations
+		styleSheet = null,
+		// The animation cache
+		cache = [],
+		// Stores the browser properties like transition end event name and prefix
+		browser = null,
+		// Store the original $.fn.animate
+		oldanimate = $.fn.animate,
+
+		// Return the stylesheet, create it if it doesn't exists
+		getStyleSheet = function () {
+			if (!styleSheet) {
+				var style = document.createElement('style');
+				style.setAttribute("type", "text/css");
+				style.setAttribute("media", "screen");
+
+				document.getElementsByTagName('head')[0].appendChild(style);
+				if (!window.createPopup) {
+					style.appendChild(document.createTextNode(''));
+				}
+
+				styleSheet = style.sheet;
+			}
+
+			return styleSheet;
+		},
+
+		//removes an animation rule from a sheet
+		removeAnimation = function (sheet, name) {
+			for (var j = sheet.cssRules.length - 1; j >= 0; j--) {
+				var rule = sheet.cssRules[j];
+				// 7 means the keyframe rule
+				if (rule.type === 7 && rule.name == name) {
+					sheet.deleteRule(j)
+					return;
+				}
+			}
+		},
+
+		// Returns whether the animation should be passed to the original $.fn.animate.
+		passThrough = function (props, ops) {
+			var nonElement = !(this[0] && this[0].nodeType),
+				isInline = !nonElement && $(this).css("display") === "inline" && $(this).css("float") === "none";
+
+			for (var name in props) {
+				// jQuery does something with these values
+				if (props[name] == 'show' || props[name] == 'hide' || props[name] == 'toggle'
+				// Arrays for individual easing
+				|| $.isArray(props[name])
+				// Negative values not handled the same
+				|| props[name] < 0
+				// unit-less value
+				|| name == 'zIndex' || name == 'z-index' || name == 'scrollTop' || name == 'scrollLeft') {
+					return true;
+				}
+			}
+
+			return props.jquery === true || getBrowser() === null ||
+			// Animating empty properties
+			$.isEmptyObject(props) ||
+			// We can't do custom easing
+			(ops && ops.length == 4) || (ops && typeof ops[2] == 'string') ||
+			// Second parameter is an object - we can only handle primitives
+			$.isPlainObject(ops) ||
+			// Inline and non elements
+			isInline || nonElement;
+		},
+
+		// Gets a CSS number (with px added as the default unit if the value is a number)
+		cssValue = function (origName, value) {
+			if (typeof value === "number" && !$.cssNumber[origName]) {
+				return value += "px";
+			}
+			return value;
+		},
+
+		// Feature detection borrowed by http://modernizr.com/
+		getBrowser = function () {
+			if (!browser) {
+				var t, el = document.createElement('fakeelement'),
+					transitions = {
+						'transition': {
+							transitionEnd: 'transitionEnd',
+							prefix: ''
+						},
+						//						'OTransition': {
+						//							transitionEnd : 'oTransitionEnd',
+						//							prefix : '-o-'
+						//						},
+						//						'MSTransition': {
+						//							transitionEnd : 'msTransitionEnd',
+						//							prefix : '-ms-'
+						//						},
+						'MozTransition': {
+							transitionEnd: 'animationend',
+							prefix: '-moz-'
+						},
+						'WebkitTransition': {
+							transitionEnd: 'webkitAnimationEnd',
+							prefix: '-webkit-'
+						}
+					}
+
+					for (t in transitions) {
+						if (el.style[t] !== undefined) {
+							browser = transitions[t];
+						}
+					}
+			}
+			return browser;
+		},
+
+		// Properties that Firefox can't animate if set to 'auto':
+		// https://bugzilla.mozilla.org/show_bug.cgi?id=571344
+		// Provides a converter that returns the actual value
+		ffProps = {
+			top: function (el) {
+				return el.position().top;
+			},
+			left: function (el) {
+				return el.position().left;
+			},
+			width: function (el) {
+				return el.width();
+			},
+			height: function (el) {
+				return el.height();
+			},
+			fontSize: function (el) {
+				return '1em';
+			}
+		},
+
+		// Add browser specific prefix
+		addPrefix = function (properties) {
+			var result = {};
+			$.each(properties, function (name, value) {
+				result[getBrowser().prefix + name] = value;
+			});
+			return result;
+		},
+
+		// Returns the animation name for a given style. It either uses a cached
+		// version or adds it to the stylesheet, removing the oldest style if the
+		// cache has reached a certain size.
+		getAnimation = function (style) {
+			var sheet, name, last;
+
+			// Look up the cached style, set it to that name and reset age if found
+			// increment the age for any other animation
+			$.each(cache, function (i, animation) {
+				if (style === animation.style) {
+					name = animation.name;
+					animation.age = 0;
+				} else {
+					animation.age += 1;
+				}
+			});
+
+			if (!name) { // Add a new style
+				sheet = getStyleSheet();
+				name = "jquerypp_animation_" + (animationNum++);
+				// get the last sheet and insert this rule into it
+				sheet.insertRule("@" + getBrowser().prefix + "keyframes " + name + ' ' + style, (sheet.cssRules && sheet.cssRules.length) || 0);
+				cache.push({
+					name: name,
+					style: style,
+					age: 0
+				});
+
+				// Sort the cache by age
+				cache.sort(function (first, second) {
+					return first.age - second.age;
+				});
+
+				// Remove the last (oldest) item from the cache if it has more than 20 items
+				if (cache.length > 20) {
+					last = cache.pop();
+					removeAnimation(sheet, last.name);
+				}
+			}
+
+			return name;
+		};
+
+
+	$.fn.animate = function (props, speed, easing, callback) {
+		//default to normal animations if browser doesn't support them
+		if (passThrough.apply(this, arguments)) {
+			return oldanimate.apply(this, arguments);
+		}
+
+		var optall = jQuery.speed(speed, easing, callback);
+
+		// Add everything to the animation queue
+		this.queue(optall.queue, function (done) {
+			var
+			//current CSS values
+			current,
+			// The list of properties passed
+			properties = [],
+				to = "",
+				prop, self = $(this),
+				duration = optall.duration,
+				//the animation keyframe name
+				animationName,
+				// The key used to store the animation hook
+				dataKey,
+				//the text for the keyframe
+				style = "{ from {",
+				// The animation end event handler.
+				// Will be called both on animation end and after calling .stop()
+				animationEnd = function (currentCSS, exec) {
+					self.css(currentCSS);
+
+					self.css(addPrefix({
+						"animation-duration": "",
+						"animation-name": "",
+						"animation-fill-mode": "",
+						"animation-play-state": ""
+					}));
+
+					// Call the original callback
+					if ($.isFunction(optall.old) && exec) {
+						// Call success, pass the DOM element as the this reference
+						optall.old.call(self[0], true)
+					}
+
+					$.removeData(self, dataKey, true);
+				},
+				finishAnimation = function () {
+					// Call animationEnd using the passed properties
+					animationEnd(props, true);
+					done();
+				};
+
+			for (prop in props) {
+				properties.push(prop);
+			}
+
+			if (getBrowser().prefix === '-moz-') {
+				// Normalize 'auto' properties in FF
+				$.each(properties, function (i, prop) {
+					var converter = ffProps[$.camelCase(prop)];
+					if (converter && self.css(prop) == 'auto') {
+						self.css(prop, converter(self));
+					}
+				});
+			}
+
+			// Use $.styles
+			current = self.styles.apply(self, properties);
+			$.each(properties, function (i, cur) {
+				// Convert a camelcased property name
+				var name = cur.replace(/([A-Z]|^ms)/g, "-$1").toLowerCase();
+				style += name + " : " + cssValue(cur, current[cur]) + "; ";
+				to += name + " : " + cssValue(cur, props[cur]) + "; ";
+			});
+
+			style += "} to {" + to + " }}";
+
+			animationName = getAnimation(style);
+			dataKey = animationName + '.run';
+
+			// Add a hook which will be called when the animation stops
+			$._data(this, dataKey, {
+				stop: function (gotoEnd) {
+					// Pause the animation
+					self.css(addPrefix({
+						'animation-play-state': 'paused'
+					}));
+					// Unbind the animation end handler
+					self.off(getBrowser().transitionEnd, finishAnimation);
+					if (!gotoEnd) {
+						// We were told not to finish the animation
+						// Call animationEnd but set the CSS to the current computed style
+						animationEnd(self.styles.apply(self, properties), false);
+					} else {
+						// Finish animaion
+						animationEnd(props, true);
+					}
+				}
+			});
+
+			// set this element to point to that animation
+			self.css(addPrefix({
+				"animation-duration": duration + "ms",
+				"animation-name": animationName,
+				"animation-fill-mode": "forwards"
+			}));
+
+			// Attach the transition end event handler to run only once
+			self.one(getBrowser().transitionEnd, finishAnimation);
+
+		});
+
+		return this;
+	};
+
+	return $;
+});

release/1.0.0/amd/jquerypp/dom/compare.js

@@ -0,0 +1,56 @@
+/*
+* jQuery++ - 1.0.0 (2012-11-20)
+* http://jquerypp.com
+* Copyright (c) 2012 Bitovi
+* Licensed MIT
+*/
+define(['jquery'], function ($) {
+
+	// See http://ejohn.org/blog/comparing-document-position/
+	jQuery.fn.compare = function (element) { //usually 
+		try {
+			// Firefox 3 throws an error with XUL - we can't use compare then
+			element = element.jquery ? element[0] : element;
+		} catch (e) {
+			return null;
+		}
+
+		// make sure we aren't coming from XUL element
+		if (window.HTMLElement) {
+			var s = HTMLElement.prototype.toString.call(element)
+			if (s == '[xpconnect wrapped native prototype]' || s == '[object XULElement]' || s === '[object Window]') {
+				return null;
+			}
+		}
+
+		if (this[0].compareDocumentPosition) {
+			// For browsers that support it, use compareDocumentPosition
+			// https://developer.mozilla.org/en/DOM/Node.compareDocumentPosition
+			return this[0].compareDocumentPosition(element);
+		}
+
+		// this[0] contains element
+		if (this[0] == document && element != document) return 8;
+
+		var number =
+		// this[0] contains element
+		(this[0] !== element && this[0].contains(element) && 16) +
+		// element contains this[0]
+		(this[0] != element && element.contains(this[0]) && 8),
+			docEl = document.documentElement;
+
+		// Use the sourceIndex
+		if (this[0].sourceIndex) {
+			// this[0] precedes element
+			number += (this[0].sourceIndex < element.sourceIndex && 4)
+			// element precedes foo[0]
+			number += (this[0].sourceIndex > element.sourceIndex && 2)
+			// The nodes are in different documents
+			number += (this[0].ownerDocument !== element.ownerDocument || (this[0] != docEl && this[0].sourceIndex <= 0) || (element != docEl && element.sourceIndex <= 0)) && 1
+		}
+
+		return number;
+	}
+
+	return $;
+});