Ox.getFile: refactor, fix IE css/js onload, handle errors, don't always append ?random in dev version; add Ox.getImage, Ox.getScript and Ox.getStylesheet (extension check is unreliable, google api js doesn't end in '.js', '...#.js' is ugly)

source/Ox/js/Request.js

@@ -83,16 +83,7 @@ Ox.getAsync = function(urls, get, callback) {
     urls.some(Ox.isArray) ? getSerial() : getParallel();
 };
 
-/*@
+/*
-Ox.getFile <f> Loads a file (image, script or stylesheet)
-    (file, callback) -> <u> undefined
-    file <s|a> Local path or remote URL, or array of those, or array of arrays
-        Multiple files in the same array will be processed simultaneously, but
-        multiple arrays of files will be processed in that order.
-    callback <f> Callback function
-        image <h> DOM element (if the file is an image)
-@*/
-// FIXME: this doesn't handle errors yet
 Ox.getFile = (function() {
 
     var cache = {};
@@ -121,6 +112,11 @@ Ox.getFile = (function() {
                     element.type = type == 'css' ? 'text/css' : 'text/javascript';
                     if (type == 'css') {
                         element.rel = 'stylesheet';
+                        waitForCSS()
+                    } else {
+                        element.onload = element.onreadystatechange = function() {
+                            
+                        };
                     }
                     if (/MSIE/.test(navigator.userAgent)) {
                         // fixme: find a way to check
@@ -183,6 +179,127 @@ Ox.getFile = (function() {
         }, callback);
     };
 
+}());
+*/
+
+(function() {
+
+    var cache = {},
+        head = document.head
+            || document.getElementsByTagName('head')[0]
+            || document.documentElement;
+
+    function getFile(type, url, callback) {
+        var element, tagValue, typeValue, urlKey;
+        if (!cache[url]) {
+            if (!type) {
+                type = url.split('.').pop();
+                type = type == 'css' ? 'stylesheet'
+                    : type == 'js' ? 'script' : 'image';
+            }
+            if (type == 'image') {
+                element = new Image();
+                element.onerror = onError;
+                element.onload = onLoad;
+                element.src = url;
+            } else {
+                tagValue = type == 'script' ? 'script' : 'link';
+                typeValue = type == 'script' ? 'text/javascript' : 'text/css';
+                urlKey = type == 'script' ? 'src' : 'href';
+                if (Ox.some(
+                    document.getElementsByTagName(tagValue),
+                    function(element) {
+                        return element[urlKey] == url;
+                    }
+                )) {
+                    onLoad();
+                } else {
+                    element = document.createElement(tagValue);
+                    element.onerror = onError;
+                    element.onload = element.onreadystatechange = onLoad;
+                    element.type = typeValue;
+                    element[urlKey] = url;
+                    if (type == 'stylesheet') {
+                        element.rel = 'stylesheet';
+                    }
+                    head.appendChild(element);
+                }
+            }
+        } else {
+            callback(cache[url], null);
+        }
+        function onError() {
+            callback(null, {code: 404, text: 'Not Found'});
+        }
+        function onLoad() {
+            if (
+                !this || !this.readyState
+                || this.readyState == 'loaded' || this.readyState == 'complete'
+            ) {
+                // for an image, keep a reference to the element
+                // to keep the image in the browser cache
+                cache[url] = type == 'image' ? this : true;
+                callback(cache[url], null);
+            }
+        }
+    }
+
+    function getFiles(type, urls, callback) {
+        Ox.getAsync(urls, function(url, callback) {
+            getFile(type, url, callback);
+        }, callback);
+    }
+
+    /*@
+    Ox.getFile <f> Loads a file (image, script or stylesheet)
+        (file, callback) -> <u> undefined
+        file <s|a> Local path or remote URL, or array of those, or array of such arrays
+            Multiple files in the same array will be processed simultaneously,
+            but multiple arrays of files will be processed in that order.
+        callback <f> Callback function
+            image <h> DOM element (if the file is an image)
+    @*/
+    Ox.getFile = function(url, callback) {
+        getFiles(null, url, callback);
+    };
+
+    /*@
+    Ox.getImage <f> Loads an image
+        (file, callback) -> <u> undefined
+        file <s|a> Local path or remote URL, or array of those, or array of such arrays
+            Multiple files in the same array will be processed simultaneously,
+            but multiple arrays of files will be processed in that order.
+        callback <f> Callback function
+            image <h> DOM element
+    @*/
+    Ox.getImage = function(url, callback) {
+        getFiles('image', url, callback);
+    };
+
+    /*@
+    Ox.getScript <f> Loads a script
+        (file, callback) -> <u> undefined
+        file <s|a> Local path or remote URL, or array of those, or array of such arrays
+            Multiple files in the same array will be processed simultaneously,
+            but multiple arrays of files will be processed in that order.
+        callback <f> Callback function
+    @*/
+    Ox.getScript = function() {
+        getFiles('script', url, callback);
+    };
+
+    /*@
+    Ox.getStylesheet <f> Loads a stylesheet
+        (file, callback) -> <u> undefined
+        file <s|a> Local path or remote URL, or array of those, or array of such arrays
+            Multiple files in the same array will be processed simultaneously,
+            but multiple arrays of files will be processed in that order.
+        callback <f> Callback function
+    @*/
+    Ox.getStylesheet = function() {
+        getFiles('stylesheet', url, callback);
+    };
+
 }());
 
 /*@