From 9477c418dbf50f2341dec7c02f60ab3d77da5378 Mon Sep 17 00:00:00 2001 From: John Resig Date: Mon, 10 Jul 2006 03:20:56 +0000 Subject: [PATCH] More bug fixes and added documentation - passes the test suite now. --- ajax/ajax.js | 288 ++++++++++++++-------------- event/event.js | 206 ++++++++++---------- fx/fx.js | 555 +++++++++++++++++++++++++++--------------------------- jquery/jquery.js | 32 +++- 4 files changed, 563 insertions(+), 518 deletions(-) diff --git a/ajax/ajax.js b/ajax/ajax.js index f6a1d9e..4b062e9 100644 --- a/ajax/ajax.js +++ b/ajax/ajax.js @@ -5,7 +5,7 @@ /** * Load HTML from a remote file and inject it into the DOM */ -jQuery.prototype.load = function( url, params, callback ) { +jQuery.fn.load = function( url, params, callback ) { // I overwrote the event plugin's .load // this won't happen again, I hope -John if ( url && url.constructor == Function ) @@ -52,159 +52,173 @@ jQuery.prototype.load = function( url, params, callback ) { return this; }; -/** - * Load a remote page using a GET request - */ -jQuery.get = function( url, callback, type ) { - // Build and start the HTTP Request - jQuery.ajax( "GET", url, null, function(r) { - if ( callback ) callback( jQuery.httpData(r,type) ); - }); -}; - -/** - * Load a remote page using a POST request. - */ -jQuery.post = function( url, data, callback, type ) { - // Build and start the HTTP Request - jQuery.ajax( "POST", url, jQuery.param(data), function(r) { - if ( callback ) callback( jQuery.httpData(r,type) ); - }); -}; - // If IE is used, create a wrapper for the XMLHttpRequest object -if ( jQuery.browser == "msie" ) +if ( jQuery.browser.msie ) XMLHttpRequest = function(){ return new ActiveXObject( - (navigator.userAgent.toLowerCase().indexOf("msie 5") >= 0) ? + navigator.userAgent.indexOf("MSIE 5") >= 0 ? "Microsoft.XMLHTTP" : "Msxml2.XMLHTTP" ); }; // Attach a bunch of functions for handling common AJAX events -(function(){ +new function(){ var e = "ajaxStart,ajaxStop,ajaxComplete,ajaxError,ajaxSuccess".split(','); - for ( var i = 0; i < e.length; i++ ){ (function(){ + for ( var i = 0; i < e.length; i++ ) new function(){ var o = e[i]; - jQuery.fn[o] = function(f){return this.bind(o, f);}; - })();} -})(); - -/** - * A common wrapper for making XMLHttpRequests - */ -jQuery.ajax = function( type, url, data, ret ) { - // If only a single argument was passed in, - // assume that it is a object of key/value pairs - if ( !url ) { - ret = type.complete; - var success = type.success; - var error = type.error; - data = type.data; - url = type.url; - type = type.type; + jQuery.fn[o] = function(f){ + return this.bind(o, f); + }; } - - // Watch for a new set of requests - if ( ! jQuery.ajax.active++ ) - jQuery.event.trigger( "ajaxStart" ); +} - // Create the request object - var xml = new XMLHttpRequest(); +jQuery.extend({ - // Open the socket - xml.open(type || "GET", url, true); + /** + * Load a remote page using a GET request + */ + get: function( url, data, callback, type ) { + if ( data.constructor == Function ) { + callback = data; + data = null; + } + + if ( data ) + url += "?" + jQuery.param(data); + + // Build and start the HTTP Request + jQuery.ajax( "GET", url, null, function(r) { + if ( callback ) callback( jQuery.httpData(r,type) ); + }); + }, - // Set the correct header, if data is being sent - if ( data ) - xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); - - // Set header so calling script knows that it's an XMLHttpRequest - xml.setRequestHeader("X-Requested-With", "XMLHttpRequest"); - - // Make sure the browser sends the right content length - if ( xml.overrideMimeType ) - xml.setRequestHeader("Connection", "close"); - - // Wait for a response to come back - xml.onreadystatechange = function(){ - // The transfer is complete and the data is available - if ( xml.readyState == 4 ) { - // Make sure that the request was successful - if ( jQuery.httpSuccess( xml ) ) { - - // If a local callback was specified, fire it - if ( success ) success( xml ); + /** + * Load a remote page using a POST request. + */ + post: function( url, data, callback, type ) { + // Build and start the HTTP Request + jQuery.ajax( "POST", url, jQuery.param(data), function(r) { + if ( callback ) callback( jQuery.httpData(r,type) ); + }); + }, + + /** + * A common wrapper for making XMLHttpRequests + */ + ajax: function( type, url, data, ret ) { + // If only a single argument was passed in, + // assume that it is a object of key/value pairs + if ( !url ) { + ret = type.complete; + var success = type.success; + var error = type.error; + data = type.data; + url = type.url; + type = type.type; + } + + // Watch for a new set of requests + if ( ! jQuery.active++ ) + jQuery.event.trigger( "ajaxStart" ); + + // Create the request object + var xml = new XMLHttpRequest(); + + // Open the socket + xml.open(type || "GET", url, true); + + // Set the correct header, if data is being sent + if ( data ) + xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); + + // Set header so calling script knows that it's an XMLHttpRequest + xml.setRequestHeader("X-Requested-With", "XMLHttpRequest"); + + // Make sure the browser sends the right content length + if ( xml.overrideMimeType ) + xml.setRequestHeader("Connection", "close"); + + // Wait for a response to come back + xml.onreadystatechange = function(){ + // The transfer is complete and the data is available + if ( xml.readyState == 4 ) { + // Make sure that the request was successful + if ( jQuery.httpSuccess( xml ) ) { - // Fire the global callback - jQuery.event.trigger( "ajaxSuccess" ); - - // Otherwise, the request was not successful - } else { - // If a local callback was specified, fire it - if ( error ) error( xml ); + // If a local callback was specified, fire it + if ( success ) success( xml ); + + // Fire the global callback + jQuery.event.trigger( "ajaxSuccess" ); - // Fire the global callback - jQuery.event.trigger( "ajaxError" ); + // Otherwise, the request was not successful + } else { + // If a local callback was specified, fire it + if ( error ) error( xml ); + + // Fire the global callback + jQuery.event.trigger( "ajaxError" ); + } + + // The request was completed + jQuery.event.trigger( "ajaxComplete" ); + + // Handle the global AJAX counter + if ( ! --jQuery.active ) + jQuery.event.trigger( "ajaxStop" ); + + // Process result + if ( ret ) ret(xml); } - - // The request was completed - jQuery.event.trigger( "ajaxComplete" ); - - // Handle the global AJAX counter - if ( ! --jQuery.ajax.active ) - jQuery.event.trigger( "ajaxStop" ); - - // Process result - if ( ret ) ret(xml); } - }; - - // Send the data - xml.send(data); -}; - -// Counter for holding the number of active queries -jQuery.ajax.active = 0; - -// Determines if an XMLHttpRequest was successful or not -jQuery.httpSuccess = function(r) { - try { - return r.status ? - ( r.status >= 200 && r.status < 300 ) || r.status == 304 : - location.protocol == "file:"; - } catch(e){} - return false; -}; - -// Get the data out of an XMLHttpRequest. -// Return parsed XML if content-type header is "xml" and type is "xml" or omitted, -// otherwise return plain text. -jQuery.httpData = function(r,type) { - var ct = r.getResponseHeader("content-type"); - var xml = ( !type || type == "xml" ) && ct && ct.indexOf("xml") >= 0; - return xml ? r.responseXML : r.responseText; -}; - -// Serialize an array of form elements or a set of -// key/values into a query string -jQuery.param = function(a) { - var s = []; - - // If an array was passed in, assume that it is an array - // of form elements - if ( a.constructor == Array ) - // Serialize the form elements - for ( var i = 0; i < a.length; i++ ) - s.push( a[i].name + "=" + encodeURIComponent( a[i].value ) ); + + // Send the data + xml.send(data); + }, + + // Counter for holding the number of active queries + active: 0, + + // Determines if an XMLHttpRequest was successful or not + httpSuccess: function(r) { + try { + return r.status ? + ( r.status >= 200 && r.status < 300 ) || r.status == 304 : + location.protocol == "file:"; + } catch(e){} + return false; + }, + + // Get the data out of an XMLHttpRequest. + // Return parsed XML if content-type header is "xml" and type is "xml" or omitted, + // otherwise return plain text. + httpData: function(r,type) { + var ct = r.getResponseHeader("content-type"); + var xml = ( !type || type == "xml" ) && ct && ct.indexOf("xml") >= 0; + return xml ? r.responseXML : r.responseText; + }, + + // Serialize an array of form elements or a set of + // key/values into a query string + param: function(a) { + var s = []; - // Otherwise, assume that it's an object of key/value pairs - else - // Serialize the key/values - for ( var j in a ) - s.push( j + "=" + encodeURIComponent( a[j] ) ); - - // Return the resulting serialization - return s.join("&"); -}; + // If an array was passed in, assume that it is an array + // of form elements + if ( a.constructor == Array ) + // Serialize the form elements + for ( var i = 0; i < a.length; i++ ) + s.push( a[i].name + "=" + encodeURIComponent( a[i].value ) ); + + // Otherwise, assume that it's an object of key/value pairs + else + // Serialize the key/values + for ( var j in a ) + s.push( j + "=" + encodeURIComponent( a[j] ) ); + + // Return the resulting serialization + return s.join("&"); + } + +}); diff --git a/event/event.js b/event/event.js index fe6e621..0c7b0b1 100644 --- a/event/event.js +++ b/event/event.js @@ -1,102 +1,130 @@ -// We're overriding the old toggle function, so -// remember it for later -jQuery.prototype._toggle = jQuery.prototype.toggle; +jQuery.fn.extend({ -/** - * Toggle between two function calls every other click. - */ -jQuery.prototype.toggle = function(a,b) { - // If two functions are passed in, we're - // toggling on a click - return a && b ? this.click(function(e){ - // Figure out which function to execute - this.last = this.last == a ? b : a; - - // Make sure that clicks stop - e.preventDefault(); - - // and execute the function - return this.last.apply( this, [e] ) || false; - }) : + // We're overriding the old toggle function, so + // remember it for later + _toggle: jQuery.fn.toggle, - // Otherwise, execute the old toggle function - this._toggle(); -}; - -/** - * Toggle between two function calls on mouse over/out. - */ -jQuery.prototype.hover = function(f,g) { - - // A private function for haandling mouse 'hovering' - function handleHover(e) { - // Check if mouse(over|out) are still within the same parent element - var p = (e.type == "mouseover" ? e.fromElement : e.toElement) || e.relatedTarget; - - // Traverse up the tree - while ( p && p != this ) p = p.parentNode; + /** + * Toggle between two function calls every other click. + */ + toggle: function(a,b) { + // If two functions are passed in, we're + // toggling on a click + return a && b ? this.click(function(e){ + // Figure out which function to execute + this.last = this.last == a ? b : a; + + // Make sure that clicks stop + e.preventDefault(); + + // and execute the function + return this.last.apply( this, [e] ) || false; + }) : - // If we actually just moused on to a sub-element, ignore it - if ( p == this ) return false; + // Otherwise, execute the old toggle function + this._toggle(); + }, + + /** + * Toggle between two function calls on mouse over/out. + */ + hover: function(f,g) { - // Execute the right function - return (e.type == "mouseover" ? f : g).apply(this, [e]); - } + // A private function for haandling mouse 'hovering' + function handleHover(e) { + // Check if mouse(over|out) are still within the same parent element + var p = (e.type == "mouseover" ? e.fromElement : e.toElement) || e.relatedTarget; - // Bind the function to the two event listeners - return this.mouseover(handleHover).mouseout(handleHover); -}; - -/** - * Bind a function to fire when the DOM is ready. - */ -jQuery.prototype.ready = function(f) { - // If the DOM is already ready - if ( jQuery.isReady ) - // Execute the function immediately - f.apply( document ); + // Traverse up the tree + while ( p && p != this ) p = p.parentNode; + + // If we actually just moused on to a sub-element, ignore it + if ( p == this ) return false; + + // Execute the right function + return (e.type == "mouseover" ? f : g).apply(this, [e]); + } - // Otherwise, remember the function for later - else { - // Add the function to the wait list - jQuery.readyList.push( f ); + // Bind the function to the two event listeners + return this.mouseover(handleHover).mouseout(handleHover); + }, + + /** + * Bind a function to fire when the DOM is ready. + */ + ready: function(f) { + // If the DOM is already ready + if ( jQuery.isReady ) + // Execute the function immediately + f.apply( document ); + + // Otherwise, remember the function for later + else { + // Add the function to the wait list + jQuery.readyList.push( f ); + } + + return this; } +}); - return this; -}; +jQuery.extend({ + /* + * All the code that makes DOM Ready work nicely. + */ + isReady: false, + readyList: [], + + // Handle when the DOM is ready + ready: function() { + // Make sure that the DOM is not already loaded + if ( !jQuery.isReady ) { + // Remember that the DOM is ready + jQuery.isReady = true; + + // If there are functions bound, to execute + if ( jQuery.readyList ) { + // Execute all of them + for ( var i = 0; i < jQuery.readyList.length; i++ ) + jQuery.readyList[i].apply( document ); + + // Reset the list of functions + jQuery.readyList = null; + } + } + } +}); -(function(){ +new function(){ /* * Bind a number of event-handling functions, dynamically */ - var e = ("blur,focus,contextmenu,load,resize,scroll,unload,click,dblclick," + - "mousedown,mouseup,mouseenter,mouseleave,mousemove,mouseover,mouseout," + - "change,reset,select,submit,keydown,keypress,keyup").split(","); + var e = ("blur,focus,load,resize,scroll,unload,click,dblclick," + + "mousedown,mouseup,mousemove,mouseover,mouseout,change,reset,select," + + "submit,keydown,keypress,keyup,error").split(","); // Go through all the event names, but make sure that // it is enclosed properly - for ( var i = 0; i < e.length; i++ ) {(function(){ + for ( var i = 0; i < e.length; i++ ) new function(){ var o = e[i]; // Handle event binding - jQuery.prototype[o] = function(f){ return this.bind(o, f); }; + jQuery.fn[o] = function(f){ + return f ? this.bind(o, f) : this.trigger(o); + }; // Handle event unbinding - jQuery.prototype["un"+o] = function(f){ return this.unbind(o, f); }; - - // Handle event triggering - jQuery.prototype["do"+o] = function(){ return this.trigger(o); }; + jQuery.fn["un"+o] = function(f){ return this.unbind(o, f); }; // Finally, handle events that only fire once - jQuery.prototype["one"+o] = function(f){ + jQuery.fn["one"+o] = function(f){ // Attach the event listener return this.bind(o, function(e){ // TODO: Remove the event listener, instead of this hack // If this function has already been executed, stop - if ( this[o+f] !== null ) - return true; + if ( this[o+f] !== null ) return; // Otherwise, mark as having been executed this[o+f]++; @@ -106,42 +134,16 @@ jQuery.prototype.ready = function(f) { }); }; - })();} - - /* - * All the code that makes DOM Ready work nicely. - */ - - jQuery.isReady = false; - jQuery.readyList = []; - - // Handle when the DOM is ready - jQuery.ready = function() { - // Make sure that the DOM is not already loaded - if ( !jQuery.isReady ) { - // Remember that the DOM is ready - jQuery.isReady = true; - - // If there are functions bound, to execute - if ( jQuery.readyList ) { - // Execute all of them - for ( var i = 0; i < jQuery.readyList.length; i++ ) - jQuery.readyList[i].apply( document ); - - // Reset the list of functions - jQuery.readyList = null; - } - } - }; + } // If Mozilla is used - if ( jQuery.browser == "mozilla" || jQuery.browser == "opera" ) { + if ( jQuery.browser.mozilla || jQuery.browser.opera ) { // Use the handy event callback document.addEventListener( "DOMContentLoaded", jQuery.ready, false ); // If IE is used, use the excellent hack by Matthias Miller // http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited - } else if ( jQuery.browser == "msie" ) { + } else if ( jQuery.browser.msie ) { // Only works if you document.write() it document.write("