jquery.ondemand.js

/**
 * On-demand JavaScript handler
 *
 * Based on http://plugins.jquery.com/files/issues/jquery.ondemand.js_.txt
 * and heavily modified to integrate with SilverStripe and prototype.js.
 * Adds capabilities for custom X-Include-CSS and X-Include-JS HTTP headers
 * to request loading of externals alongside an ajax response.
 *
 * Requires jQuery 1.5 ($.Deferred support)
 *
 * CAUTION: Relies on customization of the 'beforeSend' callback in jQuery.ajaxSetup()
 *
 * @author Ingo Schommer (ingo at silverstripe dot com)
 * @author Sam Minnee (sam at silverstripe dot com)
 */
(function($){

	var decodePath = function(str) {
		return str.replace(/%2C/g,',').replace(/\&/g, '&').replace(/^\s+|\s+$/g, '');
	};

    var stripParams = function(str, whitelist) {
    	str = str.replace(new RegExp('('+whitelist.join('|')+')=([^&]*)&?', 'g'), '');
    	if (str.lastIndexOf("?") === str.length-1) {
    		str = str.substr(0, str.length-1);
		}
        return str;
    };

    const whitelist = ['m','_'];

	$.extend({

		// loaded files list - to protect against loading existed file again  (by PGA)
		_ondemand_loaded_list : null,

		/**
		 * Returns true if the given CSS or JS script has already been loaded
		 */
		isItemLoaded : function(scriptUrl) {
			var self = this, src;
			if(this._ondemand_loaded_list === null) {
				this._ondemand_loaded_list = {};
				$('script').each(function() {
					src = $(this).attr('src');
					if(src) {
				  		src = stripParams(decodePath(src), whitelist);
				  		self._ondemand_loaded_list[src] = 1;
                    }
				});
				$('link[rel="stylesheet"]').each(function() {
					src = $(this).attr('href');
					if(src) self._ondemand_loaded_list[src] = 1;
				});
			}
			return (this._ondemand_loaded_list[decodePath(scriptUrl)] !== undefined);
		},

		requireCss : function(styleUrl, media){
			if(!media) media = 'all';

			// Don't double up on loading scripts
			if($.isItemLoaded(styleUrl)) return;

			if(document.createStyleSheet){
				var ss = document.createStyleSheet(styleUrl);
				ss.media = media;

			} else {
				var styleTag = document.createElement('link');
				$(styleTag).attr({
					href	: styleUrl,
					type	: 'text/css',
					media 	: media,
					rel		: 'stylesheet'
				}).appendTo($('head').get(0));
			}

			this._ondemand_loaded_list[styleUrl] = 1;

		},

		/**
		 * Process the X-Include-CSS and X-Include-JS headers provided by the Requirements class
		 */
		processOnDemandHeaders: function(xml, status, xhr) {
			var self = this, processDfd = new $.Deferred();

			// CSS
			if(xhr.getResponseHeader && xhr.getResponseHeader('X-Include-CSS')) {
				var cssIncludes = xhr.getResponseHeader('X-Include-CSS').split(',');
				for(var i=0;i<cssIncludes.length;i++) {
					// Syntax: "URL:##:media"
					if(cssIncludes[i].match(/^(.*):##:(.*)$/)) {
						$.requireCss(decodePath(RegExp.$1), RegExp.$2);
					// Syntax: "URL"
					} else {
						$.requireCss(decodePath(cssIncludes[i]));
					}
				}
			}

			// JavaScript
			var newJsIncludes = [];
			if(xhr.getResponseHeader && xhr.getResponseHeader('X-Include-JS')) {
				var jsIncludes = xhr.getResponseHeader('X-Include-JS').split(',');
				for(var i=0;i<jsIncludes.length;i++) {
					var jsIncludePath = stripParams(decodePath(jsIncludes[i]), whitelist);

					if(!$.isItemLoaded(jsIncludePath)) {
						newJsIncludes.push(jsIncludePath);
					}
				}
			}

			// We make an array of the includes that are actually new, and attach the callback to the last one
			// They are placed in a queue and will be included in order.  This means that the callback will
			// be able to execute script in the new includes (such as a livequery update)
			var getScriptQueue = function() {
				if(newJsIncludes.length) {
					var newJsInclude = newJsIncludes.shift();
					// emulates getScript() with addtl. setting
					$.ajax({
						dataType: 'script',
						url: newJsInclude,
						complete: function() {
							self._ondemand_loaded_list[newJsInclude] = 1;
							getScriptQueue();
						},
						error: function(xhr, status, error) {
							console.error(error);
						},
						cache: false,
						// jQuery seems to override the XHR objects if used in async mode
						async: false
					});
				} else {
					processDfd.resolve(xml, status, xhr);
				}
			}

			if(newJsIncludes.length) {
				getScriptQueue();
			} else {
				// If there aren't any new includes, then we can just call the callbacks ourselves
				processDfd.resolve(xml, status, xhr);
			}

			return processDfd.promise();
		}

	});

	$.ajaxSetup({
		// beforeSend is the only place to access the XHR object before success handlers are added
		beforeSend: function(jqXHR, s) {
			// Avoid recursion in ajax callbacks caused by getScript(), by not parsing
			// ondemand headers for 'script' datatypes
			if(s.dataType == 'script') return;

			var dfd = new $.Deferred();

			// Register our own success handler (assumes no handlers are already registered)
			// 'success' is an alias for 'done', which is executed by the built-in deferred instance in $.ajax()
			jqXHR.success(function(success, statusText, jXHR) {
				$.processOnDemandHeaders(success, statusText, jXHR).done(function() {
					dfd.resolveWith(s.context || this, [success, statusText, jXHR]);
				});
			});

			// Reroute all external success hanlders through our own deferred.
			// Not overloading fail() as no event can cause the original request to fail.
			jqXHR.success = function(callback) {
				dfd.done(callback);
			}
		}
	});


})(jQuery);