Changeset 1243


Ignore:
Timestamp:
02/18/10 14:00:38 (5 years ago)
Author:
gogo
Message:

Fix for Internet Explorer with MootoolsFileManager?
Using loadScript and loadStyle is asynchronous in Internet Explorer which meant that the dependancies of MootoolsFileManager? were not being included.
Added a Xinha.includeAssets method to handle this by making it possible to synchronously load these items.

 * Example Usage:
 *
 * Xinha.includeAssets( 'foo.css', 'bar.js', [ 'foo.css', 'MyPlugin' ], { type: 'text/css', url: 'foo.php', plugin: 'MyPlugin } );
 *
 * Alternative usage, use Xinha.includeAssets() to make a loader, then use loadScript, loadStyle and whenReady methods
 * on your loader object as and when you wish, you can chain the calls if you like.
 *
 * Note whenReady can only have one active callback at a time, but once it's been called you can
 * issue another whenReady(), if there is nothing waiting to be loaded, it will be executed immediately.
 *
 *   var myAssetLoader = Xinha.includeAssets();
 *       myAssetLoader.loadScript('foo.js', 'MyPlugin')
 *                    .loadStyle('foo.css', 'MyPlugin'); 
Location:
trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/XinhaCore.js

    r1239 r1243  
    40434043 
    40444044/** Adds a script to the document 
    4045  * @param {String} style name of the stylesheet file 
     4045 * 
     4046 * Warning: Browsers may cause the script to load asynchronously. 
     4047 * 
     4048 * @param {String} style name of the javascript file 
    40464049 * @param {String} plugin optional name of a plugin; if passed this function looks for the stylesheet file in the plugin directory  
    4047  * @param {String} id optional a unique id for identifiing the created link element, e.g. for avoiding double loading  
    4048  *                 or later removing it again 
    4049  */ 
    4050 Xinha.loadScript = function(script, plugin) 
     4050 * 
     4051 */ 
     4052Xinha.loadScript = function(script, plugin, callback) 
    40514053{ 
    40524054  var url = _editor_url || ''; 
     
    40664068  } 
    40674069   
    4068   Xinha._loadback(url); 
    4069    
    4070 }; 
    4071  
     4070  Xinha._loadback(url, callback); 
     4071   
     4072}; 
     4073 
     4074/** Load one or more assets, sequentially, where an asset is a CSS file, or a javascript file. 
     4075 * 
     4076 * Example Usage: 
     4077 * 
     4078 * Xinha.includeAssets( 'foo.css', 'bar.js', [ 'foo.css', 'MyPlugin' ], { type: 'text/css', url: 'foo.php', plugin: 'MyPlugin } ); 
     4079 * 
     4080 * Alternative usage, use Xinha.includeAssets() to make a loader, then use loadScript, loadStyle and whenReady methods 
     4081 * on your loader object as and when you wish, you can chain the calls if you like. 
     4082 * 
     4083 * Note whenReady can only have one active callback at a time, but once it's been called you can 
     4084 * issue another whenReady(), if there is nothing waiting to be loaded, it will be executed immediately. 
     4085 * 
     4086 *   var myAssetLoader = Xinha.includeAssets(); 
     4087 *       myAssetLoader.loadScript('foo.js', 'MyPlugin') 
     4088 *                    .loadStyle('foo.css', 'MyPlugin');                         
     4089 *  
     4090 */ 
     4091  
     4092Xinha.includeAssets = function() 
     4093{ 
     4094  var assetLoader = { pendingAssets: [ ], loaderRunning: false }; 
     4095   
     4096  assetLoader.callback = function() { }; 
     4097   
     4098  assetLoader.loadNext = function() 
     4099  {   
     4100    var self = this; 
     4101    this.loaderRunning = true; 
     4102     
     4103    if(this.pendingAssets.length) 
     4104    { 
     4105      var nxt = this.pendingAssets[0]; 
     4106      this.pendingAssets.splice(0,1); // Remove 1 element 
     4107      switch(nxt.type) 
     4108      { 
     4109        case 'text/css': 
     4110          Xinha.loadStyle(nxt.url, nxt.plugin); 
     4111          return this.loadNext(); 
     4112         
     4113        case 'text/javascript': 
     4114          Xinha.loadScript(nxt.url, nxt.plugin, function() { self.loadNext(); }); 
     4115      } 
     4116    } 
     4117    else 
     4118    { 
     4119      this.loaderRunning = false; 
     4120      this.runCallback();       
     4121    } 
     4122  }; 
     4123   
     4124  assetLoader.loadScript = function(url, plugin) 
     4125  { 
     4126    var self = this; 
     4127     
     4128    this.pendingAssets.push({ 'type': 'text/javascript', 'url': url, 'plugin': plugin }); 
     4129    if(!this.loaderRunning) this.loadNext(); 
     4130     
     4131    return this; 
     4132  }; 
     4133   
     4134  assetLoader.loadStyle = function(url, plugin) 
     4135  { 
     4136    var self = this; 
     4137     
     4138    this.pendingAssets.push({ 'type': 'text/css', 'url': url, 'plugin': plugin }); 
     4139    if(!this.loaderRunning) this.loadNext(); 
     4140     
     4141    return this;     
     4142  }; 
     4143   
     4144  assetLoader.whenReady = function(callback)  
     4145  { 
     4146    this.callback = callback;     
     4147    if(!this.loaderRunning) this.loadNext(); 
     4148     
     4149    return this;     
     4150  }; 
     4151   
     4152  assetLoader.runCallback = function() 
     4153  { 
     4154    this.callback(); 
     4155    this.callback = null; 
     4156    return this; 
     4157  } 
     4158   
     4159  for(var i = 0 ; i < arguments.length; i++) 
     4160  { 
     4161    if(typeof arguments[i] == 'string') 
     4162    { 
     4163      if(arguments[i].match(/\.css$/i)) 
     4164      { 
     4165        assetLoader.loadStyle(arguments[i]); 
     4166      } 
     4167      else  
     4168      { 
     4169        assetLoader.loadScript(arguments[i]); 
     4170      } 
     4171    } 
     4172    else if(arguments[i].type) 
     4173    { 
     4174      if(arguments[i].type.match(/text\/css/i)) 
     4175      { 
     4176        assetLoader.loadStyle(arguments[i].url, arguments[i].plugin); 
     4177      } 
     4178      else if(arguments[i].type.match(/text\/javascript/i)) 
     4179      { 
     4180        assetLoader.loadScript(arguments[i].url, arguments[i].plugin); 
     4181      } 
     4182    } 
     4183    else if(arguments[i].length >= 1) 
     4184    { 
     4185      if(arguments[i][0].match(/\.css$/i)) 
     4186      { 
     4187        assetLoader.loadStyle(arguments[i][0], arguments[i][1]); 
     4188      } 
     4189      else  
     4190      { 
     4191        assetLoader.loadScript(arguments[i][0], arguments[i][1]); 
     4192      } 
     4193    } 
     4194  } 
     4195   
     4196  return assetLoader; 
     4197} 
    40724198 
    40734199/*************************************************** 
  • trunk/plugins/MootoolsFileManager/MootoolsFileManager.js

    r1241 r1243  
    3535}; 
    3636 
     37MootoolsFileManager.AssetLoader = Xinha.includeAssets(); 
     38 
    3739// In case you want to use your own version of Mootools, you can load it first. 
    3840if(typeof MooTools == 'undefined') 
    3941{ 
    40   Xinha.loadScript('mootools-filemanager/Demos/mootools-core.js', 'MootoolsFileManager'); 
    41   Xinha.loadScript('mootools-filemanager/Demos/mootools-more.js', 'MootoolsFileManager'); 
     42  MootoolsFileManager.AssetLoader 
     43    .loadScript('mootools-filemanager/Demos/mootools-core.js', 'MootoolsFileManager') 
     44    .loadScript('mootools-filemanager/Demos/mootools-more.js', 'MootoolsFileManager'); 
    4245} 
    4346 
     
    4649if(typeof FileManager == 'undefined') 
    4750{ 
    48   Xinha.loadStyle('mootools-filemanager/Css/FileManager.css', 'MootoolsFileManager'); 
    49   Xinha.loadStyle('mootools-filemanager/Css/Additions.css', 'MootoolsFileManager'); 
    50   Xinha.loadScript('mootools-filemanager/Source/FileManager.js', 'MootoolsFileManager'); 
    51   Xinha.loadScript('mootools-filemanager/Language/Language.en.js', 'MootoolsFileManager'); 
    52   Xinha.loadScript('mootools-filemanager/Source/Additions.js', 'MootoolsFileManager'); 
    53   Xinha.loadScript('mootools-filemanager/Source/Uploader/Fx.ProgressBar.js', 'MootoolsFileManager'); 
    54   Xinha.loadScript('mootools-filemanager/Source/Uploader/Swiff.Uploader.js', 'MootoolsFileManager'); 
    55   Xinha.loadScript('mootools-filemanager/Source/Uploader.js', 'MootoolsFileManager'); 
     51  MootoolsFileManager.AssetLoader 
     52    .loadStyle('mootools-filemanager/Css/FileManager.css', 'MootoolsFileManager') 
     53    .loadStyle('mootools-filemanager/Css/Additions.css', 'MootoolsFileManager') 
     54    .loadScript('mootools-filemanager/Source/FileManager.js', 'MootoolsFileManager') 
     55    .loadScript('mootools-filemanager/Language/Language.en.js', 'MootoolsFileManager') 
     56    .loadScript('mootools-filemanager/Source/Additions.js', 'MootoolsFileManager') 
     57    .loadScript('mootools-filemanager/Source/Uploader/Fx.ProgressBar.js', 'MootoolsFileManager') 
     58    .loadScript('mootools-filemanager/Source/Uploader/Swiff.Uploader.js', 'MootoolsFileManager') 
     59    .loadScript('mootools-filemanager/Source/Uploader.js', 'MootoolsFileManager'); 
    5660} 
    57 Xinha.loadStyle('MootoolsFileManager.css', 'MootoolsFileManager'); 
     61MootoolsFileManager.AssetLoader.loadStyle('MootoolsFileManager.css', 'MootoolsFileManager'); 
    5862 
    5963// Initialise the plugin for an editor instance. 
     
    290294      selectable:     true, 
    291295      uploadAuthData: this.editor.config.MootoolsFileManager.backend_data, 
    292       onComplete:     function(path, file, params) { self.ImageManagerReturn(path,file,params); } 
     296      onComplete:     function(path, file, params) { self.ImageManagerReturn(path,file,params); }, 
     297      extendedAttributes: outparam 
    293298      // @TODO : Add support to pass in the existing src, alt etc... 
    294299    });      
Note: See TracChangeset for help on using the changeset viewer.