mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
ENHANCEMENT Updated jquery.ondemand.js to sapphire trunk version, to ensure compatibility with jQuery 1.4.2
git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/sapphire/branches/2.4@100852 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Ingo Schommer
Sam Minnee
parent
092701dff8
commit
7dc9e50cbd
@ -1,233 +1,170 @@
|
||||
/**
|
||||
* On-demand JavaScript handler
|
||||
* Based on http://plugins.jquery.com/files/issues/jquery.ondemand.js_.txt and modified to integrate with Sapphire
|
||||
* 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.
|
||||
*
|
||||
* IMPORTANT: This plugin monkeypatches the jQuery.ajax() method.
|
||||
*/
|
||||
(function($){
|
||||
|
||||
function isExternalScript(url){
|
||||
re = new RegExp('(http|https)://');
|
||||
return re.test(url);
|
||||
};
|
||||
|
||||
$.extend({
|
||||
|
||||
requireConfig : {
|
||||
routeJs : '', // empty default paths give more flexibility and user has
|
||||
routeCss : '' // choice of using this config or full path in scriptUrl argument
|
||||
}, // previously were useless for users which don't use '_js/' and '_css/' folders. (by PGA)
|
||||
|
||||
queue : [],
|
||||
pending : null,
|
||||
loaded_list : null, // loaded files list - to protect against loading existed file again (by PGA)
|
||||
|
||||
// loaded files list - to protect against loading existed file again (by PGA)
|
||||
_ondemand_loaded_list : null,
|
||||
|
||||
// Added by SRM: Initialise the loaded_list with the scripts included on first load
|
||||
initialiseItemLoadedList : function() {
|
||||
if(this.loaded_list == null) {
|
||||
$this = this;
|
||||
$this.loaded_list = {};
|
||||
$('script').each(function() {
|
||||
if($(this).attr('src')) $this.loaded_list[ $(this).attr('src') ] = 1;
|
||||
});
|
||||
$('link[@rel="stylesheet"]').each(function() {
|
||||
if($(this).attr('href')) $this.loaded_list[ $(this).attr('href') ] = 1;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns true if the given CSS or JS script has already been loaded
|
||||
*/
|
||||
isItemLoaded : function(scriptUrl) {
|
||||
this.initialiseItemLoadedList();
|
||||
return this.loaded_list[scriptUrl] != undefined;
|
||||
},
|
||||
|
||||
requireJs : function(scriptUrl, callback, opts, obj, scope)
|
||||
{
|
||||
|
||||
if(opts != undefined || opts == null){
|
||||
$.extend($.requireConfig, opts);
|
||||
}
|
||||
|
||||
var _request = {
|
||||
url : scriptUrl,
|
||||
callback : callback,
|
||||
opts : opts,
|
||||
obj : obj,
|
||||
scope : scope
|
||||
}
|
||||
|
||||
if(this.pending)
|
||||
{
|
||||
this.queue.push(_request);
|
||||
return;
|
||||
}
|
||||
|
||||
this.pending = _request;
|
||||
|
||||
this.initialiseItemLoadedList();
|
||||
|
||||
if (this.loaded_list[this.pending.url] != undefined) { // if required file exists (by PGA)
|
||||
this.requestComplete(); // => request complete
|
||||
return;
|
||||
}
|
||||
|
||||
var _this = this;
|
||||
var _url = (isExternalScript(scriptUrl)) ? scriptUrl : $.requireConfig.routeJs + scriptUrl;
|
||||
var _head = document.getElementsByTagName('head')[0];
|
||||
var _scriptTag = document.createElement('script');
|
||||
|
||||
// Firefox, Opera
|
||||
$(_scriptTag).bind('load', function(){
|
||||
_this.requestComplete();
|
||||
if(this.loaded_list == null) {
|
||||
$this = this;
|
||||
$this.loaded_list = {};
|
||||
$('script').each(function() {
|
||||
if($(this).attr('src')) $this.loaded_list[ $(this).attr('src') ] = 1;
|
||||
});
|
||||
|
||||
// IE
|
||||
_scriptTag.onreadystatechange = function(){
|
||||
if(this.readyState === 'loaded' || this.readyState === 'complete'){
|
||||
_this.requestComplete();
|
||||
}
|
||||
}
|
||||
|
||||
_scriptTag.type = "text/javascript";
|
||||
_scriptTag.src = _url;
|
||||
|
||||
_head.appendChild(_scriptTag);
|
||||
$('link[rel="stylesheet"]').each(function() {
|
||||
if($(this).attr('href')) $this.loaded_list[ $(this).attr('href') ] = 1;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
requestComplete : function()
|
||||
{
|
||||
|
||||
if(this.pending.callback){
|
||||
if(this.pending.obj){
|
||||
if(this.pending.scope){
|
||||
this.pending.callback.call(this.pending.obj);
|
||||
} else {
|
||||
this.pending.callback.call(window, this.pending.obj);
|
||||
}
|
||||
} else {
|
||||
this.pending.callback.call();
|
||||
}
|
||||
}
|
||||
|
||||
this.loaded_list[this.pending.url] = 1; // adding loaded file to loaded list (by PGA)
|
||||
this.pending = null;
|
||||
|
||||
if(this.queue.length > 0)
|
||||
{
|
||||
var request = this.queue.shift();
|
||||
this.requireJs(request.url, request.callback, request.opts, request.obj, request.scope);
|
||||
|
||||
/**
|
||||
* Returns true if the given CSS or JS script has already been loaded
|
||||
*/
|
||||
isItemLoaded : function(scriptUrl) {
|
||||
var self = this;
|
||||
|
||||
if(this._ondemand_loaded_list == null) {
|
||||
this._ondemand_loaded_list = {};
|
||||
$('script').each(function() {
|
||||
if($(this).attr('src')) self._ondemand_loaded_list[ $(this).attr('src') ] = 1;
|
||||
});
|
||||
$('link[rel="stylesheet"]').each(function() {
|
||||
if($(this).attr('href')) self._ondemand_loaded_list[ $(this).attr('href') ] = 1;
|
||||
});
|
||||
}
|
||||
|
||||
return (this._ondemand_loaded_list[scriptUrl] != undefined);
|
||||
},
|
||||
|
||||
requireCss : function(styleUrl, media){
|
||||
if(media == null) media = 'all';
|
||||
if(media == null) media = 'all';
|
||||
|
||||
// Don't double up on loading scripts
|
||||
if(this.isItemLoaded(styleUrl)) return;
|
||||
// Don't double up on loading scripts
|
||||
if($.isItemLoaded(styleUrl)) return;
|
||||
|
||||
if(document.createStyleSheet){
|
||||
var ss = document.createStyleSheet($.requireConfig.routeCss + styleUrl);
|
||||
var ss = document.createStyleSheet(styleUrl);
|
||||
ss.media = media;
|
||||
|
||||
} else {
|
||||
var styleTag = document.createElement('link');
|
||||
$(styleTag).attr({
|
||||
href : $.requireConfig.routeCss + styleUrl,
|
||||
href : styleUrl,
|
||||
type : 'text/css',
|
||||
media : media,
|
||||
rel : 'stylesheet'
|
||||
}).appendTo($('head').get(0));
|
||||
}
|
||||
|
||||
this.loaded_list[styleUrl] = 1;
|
||||
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, _ondemandComplete) {
|
||||
var self = this;
|
||||
|
||||
// CSS
|
||||
if(xml.getResponseHeader('X-Include-CSS')) {
|
||||
var cssIncludes = xml.getResponseHeader('X-Include-CSS').split(',');
|
||||
for(var i=0;i<cssIncludes.length;i++) {
|
||||
// Syntax: "URL:##:media"
|
||||
if(cssIncludes[i].match(/^(.*):##:(.*)$/)) {
|
||||
$.requireCss(RegExp.$1, RegExp.$2);
|
||||
// Syntax: "URL"
|
||||
} else {
|
||||
$.requireCss(cssIncludes[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// JavaScript
|
||||
var newJsIncludes = [];
|
||||
if(xml.getResponseHeader('X-Include-JS')) {
|
||||
var jsIncludes = xml.getResponseHeader('X-Include-JS').split(',');
|
||||
for(var i=0;i<jsIncludes.length;i++) {
|
||||
if(!$.isItemLoaded(jsIncludes[i])) {
|
||||
newJsIncludes.push(jsIncludes[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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,
|
||||
success: function() {
|
||||
self._ondemand_loaded_list[newJsInclude] = 1;
|
||||
getScriptQueue();
|
||||
},
|
||||
cache: false,
|
||||
// jQuery seems to override the XHR objects if used in async mode
|
||||
async: false
|
||||
});
|
||||
} else {
|
||||
_ondemandComplete(xml, status);
|
||||
}
|
||||
}
|
||||
|
||||
if(newJsIncludes.length) {
|
||||
getScriptQueue();
|
||||
} else {
|
||||
// If there aren't any new includes, then we can just call the callbacks ourselves
|
||||
_ondemandComplete(xml, status);
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
/**
|
||||
* Sapphire extensions
|
||||
* Ajax requests are amended to look for X-Include-JS and X-Include-CSS headers
|
||||
*/
|
||||
_originalAjax = $.ajax;
|
||||
$.ajax = function(s) {
|
||||
var _complete = s.complete;
|
||||
var _success = s.success;
|
||||
var _dataType = s.dataType;
|
||||
// Avoid recursion in ajax callbacks caused by getScript(), by not parsing
|
||||
// ondemand headers for 'script' datatypes
|
||||
if(s.dataType == 'script') return _originalAjax(s);
|
||||
|
||||
// This replaces the usual ajax success & complete handlers. They are called after any on demand JS is loaded.
|
||||
var _ondemandComplete = function(xml) {
|
||||
var status = jQuery.httpSuccess(xml) ? 'success' : 'error';
|
||||
if(status == 'success') {
|
||||
data = jQuery.httpData(xml, _dataType);
|
||||
if(_success) _success(data, status, xml);
|
||||
}
|
||||
if(_complete) _complete(xml, status);
|
||||
}
|
||||
var _complete = s.complete;
|
||||
var _success = s.success;
|
||||
var _dataType = s.dataType;
|
||||
|
||||
// This replaces the usual ajax success & complete handlers. They are called after any on demand JS is loaded.
|
||||
var _ondemandComplete = function(xml, status) {
|
||||
var status = $.httpSuccess(xml) ? 'success' : 'error';
|
||||
if(status == 'success') {
|
||||
var data = jQuery.httpData(xml, _dataType);
|
||||
if(_success) _success(data, status);
|
||||
}
|
||||
if(_complete) _complete(xml, status);
|
||||
}
|
||||
|
||||
// We remove the success handler and take care of calling it outselves within _ondemandComplete
|
||||
s.success = null;
|
||||
s.complete = function(xml, status) {
|
||||
processOnDemandHeaders(xml, _ondemandComplete);
|
||||
}
|
||||
// We remove the success handler and take care of calling it outselves within _ondemandComplete
|
||||
s.success = null;
|
||||
s.complete = function(xml, status) {
|
||||
$.processOnDemandHeaders(xml, status, _ondemandComplete);
|
||||
}
|
||||
|
||||
return _originalAjax(s);
|
||||
return _originalAjax(s);
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
|
||||
/**
|
||||
* This is the on-demand handler used by our patched version of prototype.
|
||||
* once we get rid of all uses of prototype, we can remove this
|
||||
*/
|
||||
function prototypeOnDemandHandler(xml, callback) {
|
||||
processOnDemandHeaders(xml, callback);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Process the X-Include-CSS and X-Include-JS headers provided by the Requirements class
|
||||
*/
|
||||
function processOnDemandHeaders(xml, _ondemandComplete) {
|
||||
var i;
|
||||
// CSS
|
||||
if(xml.getResponseHeader('X-Include-CSS')) {
|
||||
var cssIncludes = xml.getResponseHeader('X-Include-CSS').split(',');
|
||||
for(i=0;i<cssIncludes.length;i++) {
|
||||
// Syntax 1: "URL:##:media"
|
||||
if(cssIncludes[i].match(/^(.*):##:(.*)$/)) {
|
||||
jQuery.requireCss(RegExp.$1, RegExp.$2);
|
||||
|
||||
// Syntax 2: "URL"
|
||||
} else {
|
||||
jQuery.requireCss(cssIncludes[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// JavaScript
|
||||
var newIncludes = [];
|
||||
if(xml.getResponseHeader('X-Include-JS')) {
|
||||
var jsIncludes = xml.getResponseHeader('X-Include-JS').split(',');
|
||||
for(i=0;i<jsIncludes.length;i++) {
|
||||
if(!jQuery.isItemLoaded(jsIncludes[i])) {
|
||||
newIncludes.push(jsIncludes[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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)
|
||||
if(newIncludes.length > 0) {
|
||||
for(i=0;i<jsIncludes.length;i++) {
|
||||
jQuery.requireJs(jsIncludes[i], (i == jsIncludes.length-1) ? function() { _ondemandComplete(xml); } : null);
|
||||
}
|
||||
|
||||
// If there aren't any new includes, then we can just call the callbacks ourselves
|
||||
} else {
|
||||
_ondemandComplete(xml, status);
|
||||
}
|
||||
}
|
||||
})(jQuery);
|
||||
Loading…
Reference in New Issue
Block a user