1 /**

     2  * StyleSheetLoader.js

     3  *

     4  * Copyright, Moxiecode Systems AB

     5  * Released under LGPL License.

     6  *

     7  * License: http://www.tinymce.com/license

     8  * Contributing: http://www.tinymce.com/contributing

     9  */

    10 

    11 /**

    12  * This class handles loading of external stylesheets and fires events when these are loaded.

    13  *

    14  * @class tinymce.dom.StyleSheetLoader

    15  * @private

    16  */

    17 define("tinymce/dom/StyleSheetLoader", [

    18 	"tinymce/util/Tools"

    19 ], function(Tools) {

    20 	"use strict";

    21 

    22 	return function(document, settings) {

    23 		var idCount = 0, loadedStates = {}, maxLoadTime;

    24 

    25 		settings = settings || {};

    26 		maxLoadTime = settings.maxLoadTime || 5000;

    27 

    28 		function appendToHead(node) {

    29 			document.getElementsByTagName('head')[0].appendChild(node);

    30 		}

    31 

    32 		/**

    33 		 * Loads the specified css style sheet file and call the loadedCallback once it's finished loading.

    34 		 *

    35 		 * @method load

    36 		 * @param {String} url Url to be loaded.

    37 		 * @param {Function} loadedCallback Callback to be executed when loaded.

    38 		 * @param {Function} errorCallback Callback to be executed when failed loading.

    39 		 */

    40 		function load(url, loadedCallback, errorCallback) {

    41 			var link, style, startTime, state;

    42 

    43 			function passed() {

    44 				var callbacks = state.passed, i = callbacks.length;

    45 

    46 				while (i--) {

    47 					callbacks[i]();

    48 				}

    49 

    50 				state.status = 2;

    51 				state.passed = [];

    52 				state.failed = [];

    53 			}

    54 

    55 			function failed() {

    56 				var callbacks = state.failed, i = callbacks.length;

    57 

    58 				while (i--) {

    59 					callbacks[i]();

    60 				}

    61 

    62 				state.status = 3;

    63 				state.passed = [];

    64 				state.failed = [];

    65 			}

    66 

    67 			// Sniffs for older WebKit versions that have the link.onload but a broken one

    68 			function isOldWebKit() {

    69 				var webKitChunks = navigator.userAgent.match(/WebKit\/(\d*)/);

    70 				return !!(webKitChunks && webKitChunks[1] < 536);

    71 			}

    72 

    73 			// Calls the waitCallback until the test returns true or the timeout occurs

    74 			function wait(testCallback, waitCallback) {

    75 				if (!testCallback()) {

    76 					// Wait for timeout

    77 					if ((new Date().getTime()) - startTime < maxLoadTime) {

    78 						window.setTimeout(waitCallback, 0);

    79 					} else {

    80 						failed();

    81 					}

    82 				}

    83 			}

    84 

    85 			// Workaround for WebKit that doesn't properly support the onload event for link elements

    86 			// Or WebKit that fires the onload event before the StyleSheet is added to the document

    87 			function waitForWebKitLinkLoaded() {

    88 				wait(function() {

    89 					var styleSheets = document.styleSheets, styleSheet, i = styleSheets.length, owner;

    90 

    91 					while (i--) {

    92 						styleSheet = styleSheets[i];

    93 						owner = styleSheet.ownerNode ? styleSheet.ownerNode : styleSheet.owningElement;

    94 						if (owner && owner.id === link.id) {

    95 							passed();

    96 							return true;

    97 						}

    98 					}

    99 				}, waitForWebKitLinkLoaded);

   100 			}

   101 

   102 			// Workaround for older Geckos that doesn't have any onload event for StyleSheets

   103 			function waitForGeckoLinkLoaded() {

   104 				wait(function() {

   105 					try {

   106 						// Accessing the cssRules will throw an exception until the CSS file is loaded

   107 						var cssRules = style.sheet.cssRules;

   108 						passed();

   109 						return !!cssRules;

   110 					} catch (ex) {

   111 						// Ignore

   112 					}

   113 				}, waitForGeckoLinkLoaded);

   114 			}

   115 

   116 			url = Tools._addCacheSuffix(url);

   117 

   118 			if (!loadedStates[url]) {

   119 				state = {

   120 					passed: [],

   121 					failed: []

   122 				};

   123 

   124 				loadedStates[url] = state;

   125 			} else {

   126 				state = loadedStates[url];

   127 			}

   128 

   129 			if (loadedCallback) {

   130 				state.passed.push(loadedCallback);

   131 			}

   132 

   133 			if (errorCallback) {

   134 				state.failed.push(errorCallback);

   135 			}

   136 

   137 			// Is loading wait for it to pass

   138 			if (state.status == 1) {

   139 				return;

   140 			}

   141 

   142 			// Has finished loading and was success

   143 			if (state.status == 2) {

   144 				passed();

   145 				return;

   146 			}

   147 

   148 			// Has finished loading and was a failure

   149 			if (state.status == 3) {

   150 				failed();

   151 				return;

   152 			}

   153 

   154 			// Start loading

   155 			state.status = 1;

   156 			link = document.createElement('link');

   157 			link.rel = 'stylesheet';

   158 			link.type = 'text/css';

   159 			link.id = 'u' + (idCount++);

   160 			link.async = false;

   161 			link.defer = false;

   162 			startTime = new Date().getTime();

   163 

   164 			// Feature detect onload on link element and sniff older webkits since it has an broken onload event

   165 			if ("onload" in link && !isOldWebKit()) {

   166 				link.onload = waitForWebKitLinkLoaded;

   167 				link.onerror = failed;

   168 			} else {

   169 				// Sniff for old Firefox that doesn't support the onload event on link elements

   170 				// TODO: Remove this in the future when everyone uses modern browsers

   171 				if (navigator.userAgent.indexOf("Firefox") > 0) {

   172 					style = document.createElement('style');

   173 					style.textContent = '@import "' + url + '"';

   174 					waitForGeckoLinkLoaded();

   175 					appendToHead(style);

   176 					return;

   177 				} else {

   178 					// Use the id owner on older webkits

   179 					waitForWebKitLinkLoaded();

   180 				}

   181 			}

   182 

   183 			appendToHead(link);

   184 			link.href = url;

   185 		}

   186 

   187 		this.load = load;

   188 	};

   189 });