* Added img! plugin and test cases.

cujojs · Dec 10, 2012 · 0f1c953 · 0f1c953
1 parent 83f445b
commit 0f1c953
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 0 deletions.
diff --git a/src/curl/plugin/img.js b/src/curl/plugin/img.js
@@ -0,0 +1,55 @@
+/* plugin loads and returns an IMG once available.
+*/
+
+define(/*=='img',==*/['domReady!'], function () {
+    return {
+        'load': function (absId, require, loaded, config) {
+			// init
+			var img = document.createElement('img');
+			img.style.display = "none"; // should not be visible during load
+			var done = false; // state
+
+			// wireup events
+			img.onload = callback;
+			img.onreadystatechange = callback;
+			img.onerror = error;
+
+			function callback() {
+//console.log("img!callback.done:", done, ", readyState: ", img.readyState);
+				if (done === true)
+					return; // ignore dups
+
+				if (typeof img.readyState === 'string') { // hello, IE (and Opera)
+					if (img.readyState === 'complete') { // done
+						done = true; // ignore dups
+						success();
+					}
+					return;
+				}
+
+				done = true;
+
+				success();
+			}
+
+			function success() {
+				img.style.display = "block"; // must show before calculating dimensions
+				var o = { dom: img, width: img.width, height: img.height }; // calc dimensions before removing from DOM (some browsers will calc improperly)
+				document.body.removeChild(img); // remove from DOM before returning result
+				loaded(o);
+			}
+
+			function error() {
+//console.log("img!callback.ERR:", done, ", readyState: ", img.readyState);
+				loaded.error("IMG load error: " + absId);
+			}
+
+			document.body.appendChild(img); // requires domReady!
+			img.src = absId; // set source after adding to body
+
+			if (done === false && img.complete === true) { // IE
+				callback();
+			}
+        }
+    };
+});
diff --git a/test/img.html b/test/img.html
@@ -0,0 +1,63 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>curl loading test for img! plugin</title>
+
+<script>
+
+	curl = {
+		debug: true,
+		paths: {
+			curl: '../src/curl'
+		},
+		pluginPath: 'curl/plugin'
+	};
+
+</script>
+<script src="../src/curl.js" type="text/javascript"></script>
+
+
+<script type="text/javascript">
+
+	curl(
+		[
+			'img!img/circle.png',
+			'img!img/rect.png',
+			'domReady!'
+		]
+	).then(
+		function (img1, img2) {
+			write('SUCCESS: images loaded, img1: ' + (img1.width + 'x' + img1.height) + ', img2: ' + (img2.width + 'x' + img2.height));
+			document.body.appendChild(img1.dom);
+			document.body.appendChild(img2.dom);
+		},
+		function (ex) {
+			write('FAILED: ' + ex.message)
+		}
+	);
+
+	curl([ 'img!img/does_not_exist.png', 'domReady!' ])
+	.then(
+		function (img3) {
+			write("FAILED: img3 does not exist, and returned success anyway, which is BAD.");
+		},
+		function (ex) {
+			write("SUCCESS: img3 does not exist, and failed to load, as desired.");
+		}
+	);
+
+	function write (msg) {
+		curl(['domReady!'], function () {
+			document.body.appendChild(document.createElement('div')).innerHTML = msg;
+		});
+	}
+
+</script>
+
+</head>
+<body>
+
+<p>We should know the dimensions of both images, and they should be hidden in the root of the body until loaded.</p>
+
+</body>
+</html>
diff --git a/test/img/circle.png b/test/img/circle.png
diff --git a/test/img/rect.png b/test/img/rect.png