Updated all examples to remove onEvent handlers and to include the Ev…

…ent class. Signed-off-by: Grant Skinner <[email protected]>
MannyC · Jul 20, 2013 · 91cc562 · 91cc562
1 parent 37115e3
commit 91cc562
Show file tree

Hide file tree

Showing 42 changed files with 421 additions and 489 deletions.
diff --git a/VERSIONS.txt b/VERSIONS.txt
@@ -3,6 +3,7 @@ Version NEXT [Not Released]
 CRITICAL (may break existing content):
 - removed all onEvent handlers (ex. onClick, onTick, onAnimationEnd, etc)
 - BitmapAnimation renamed to Sprite
+- MouseEvent now inherits from new Event class
 - sprite sheet data's animation .frequency property removed in favour of .speed
 - removed "target" from MouseEvent's param list
 - returning false from an event handler no longer causes dispatchEvent to return false, see Event.preventDefault

diff --git a/examples/APITest.html b/examples/APITest.html
@@ -18,6 +18,7 @@
 <script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
 <script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
 <script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
+<script type="text/javascript" src="../src/easeljs/events/Event.js"></script>
 <script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
 <script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
 <script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
@@ -119,9 +120,9 @@
     //Click one of the shapes.
     var sprite = new createjs.Shape();
     sprite.graphics.beginFill(FILL_COLOR).drawCircle(30, 30, 20).moveTo(50, 50).drawRect(50, 50, 25, 25);
-    sprite.onClick = function (event) {
+    sprite.addEventListener("click", function (event) {
         alert('Click!');
-    };
+    });
 
     stage.addChild(sprite);
 }

diff --git a/examples/AlphaMaskReveal.html b/examples/AlphaMaskReveal.html
@@ -1,171 +1,170 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-    <title>EaselJS: AlphaMaskFilter Reveal Demo</title>
-
-    <link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />
-    <style>
-        BODY {
-            -webkit-user-select: none;  /* Chrome all / Safari all */
-          -moz-user-select: none;     /* Firefox all */
-          -ms-user-select: none;      /* IE 10+ */
-
-          /* No support for these yet, use at own risk */
-          -o-user-select: none;
-          user-select: none;
-        }
-    </style>
-
-    <script type="text/javascript" src="../src/easeljs/events/EventDispatcher.js"></script>
-    <script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
-    <script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
-    <script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
-    <script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
-    <script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
-    <script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
-    <script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
-    <script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
-    <script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
-    <script type="text/javascript" src="../src/easeljs/geom/Point.js"></script>
-    <script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
-    <script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
-    <script type="text/javascript" src="../src/easeljs/ui/Touch.js"></script>
-
-    <script type="text/javascript" src="../src/easeljs/filters/AlphaMaskFilter.js"></script>
-    <script type="text/javascript" src="../src/easeljs/filters/BoxBlurFilter.js"></script>
-
-    <!-- We also provide hosted minified versions of all CreateJS libraries.
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+	<title>EaselJS: AlphaMaskFilter Reveal Demo</title>
+
+	<link href="assets/demoStyles.css" rel="stylesheet" type="text/css"/>
+	<style>
+		BODY {
+			-webkit-user-select: none; /* Chrome all / Safari all */
+			-moz-user-select: none; /* Firefox all */
+			-ms-user-select: none; /* IE 10+ */
+			/* No support for these yet, use at own risk */
+			-o-user-select: none;
+			user-select: none;
+		}
+	</style>
+
+	<script type="text/javascript" src="../src/easeljs/events/EventDispatcher.js"></script>
+	<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
+	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
+	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
+	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
+	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
+	<script type="text/javascript" src="../src/easeljs/events/Event.js"></script>
+	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
+	<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
+	<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
+	<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
+	<script type="text/javascript" src="../src/easeljs/geom/Point.js"></script>
+	<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
+	<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
+	<script type="text/javascript" src="../src/easeljs/ui/Touch.js"></script>
+
+	<script type="text/javascript" src="../src/easeljs/filters/AlphaMaskFilter.js"></script>
+	<script type="text/javascript" src="../src/easeljs/filters/BoxBlurFilter.js"></script>
+
+	<!-- We also provide hosted minified versions of all CreateJS libraries.
 	  http://code.createjs.com -->
 
-    <script>
+	<script>
+
+		var stage;
+		var isDrawing;
+		var drawingCanvas;
+		var oldPt;
+		var oldMidPt;
+		var displayCanvas;
+		var image;
+		var bitmap;
+		var maskFilter;
+		var cursor;
+		var text;
+		var blur;
+
+		function init() {
+			if (window.top != window) {
+				document.getElementById("header").style.display = "none";
+			}
+
+			document.getElementById("loader").className = "loader";
+
+			image = new Image();
+			image.onload = handleComplete;
+			image.src = "assets/AlphaMaskImage.png";
+
+			stage = new createjs.Stage("testCanvas");
+			text = new createjs.Text("Loading...", "20px Arial", "#999999");
+			text.set({x: stage.canvas.width / 2, y: stage.canvas.height - 80});
+			text.textAlign = "center";
+		}
+
+		function handleComplete() {
+			document.getElementById("loader").className = "";
+			createjs.Touch.enable(stage);
+			stage.enableMouseOver();
+
+			stage.addEventListener("stagemousedown", handleMouseDown);
+			stage.addEventListener("stagemouseup", handleMouseUp);
+			stage.addEventListener("stagemousemove", handleMouseMove);
+			drawingCanvas = new createjs.Shape();
+			bitmap = new createjs.Bitmap(image);
+
+			blur = new createjs.Bitmap(image);
+			blur.filters = [new createjs.BoxBlurFilter(15, 15, 2)];
+			blur.cache(0, 0, 960, 400);
+			blur.alpha = 0.9;
+
+			text.text = "Click and Drag to Reveal the Image.";
+
+			stage.addChild(blur, text, bitmap);
+			updateCacheImage(false);
+
+			cursor = new createjs.Shape(new createjs.Graphics().beginFill("#FFFFFF").drawCircle(0, 0, 20));
+			cursor.cursor = "pointer";
+
+			stage.addChild(cursor);
+		}
+
+		function handleMouseDown(event) {
+			oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
+			oldMidPt = oldPt;
+			isDrawing = true;
+		}
+
+		function handleMouseMove(event) {
+			cursor.x = stage.mouseX;
+			cursor.y = stage.mouseY;
+
+			if (!isDrawing) {
+				stage.update();
+				return;
+			}
+
+			var midPoint = new createjs.Point(oldPt.x + stage.mouseX >> 1, oldPt.y + stage.mouseY >> 1);
+
+			drawingCanvas.graphics.setStrokeStyle(40, "round", "round")
+				.beginStroke("rgba(0,0,0,0.15)")
+				.moveTo(midPoint.x, midPoint.y)
+				.curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);
+
+			oldPt.x = stage.mouseX;
+			oldPt.y = stage.mouseY;
+
+			oldMidPt.x = midPoint.x;
+			oldMidPt.y = midPoint.y;
+
+			updateCacheImage(true);
+
+		}
+
+		function handleMouseUp(event) {
+			updateCacheImage(true);
+			isDrawing = false;
+		}
+
+		function updateCacheImage(update) {
+			if (update) {
+				drawingCanvas.updateCache(0, 0, image.width, image.height);
+			} else {
+				drawingCanvas.cache(0, 0, image.width, image.height);
+			}
+
+			maskFilter = new createjs.AlphaMaskFilter(drawingCanvas.cacheCanvas);
+
+			bitmap.filters = [maskFilter];
+			if (update) {
+				bitmap.updateCache(0, 0, image.width, image.height);
+			} else {
+				bitmap.cache(0, 0, image.width, image.height);
+			}
 
-        var stage;
-        var isDrawing;
-        var drawingCanvas;
-        var oldPt;
-        var oldMidPt;
-        var displayCanvas;
-        var image;
-        var bitmap;
-        var maskFilter;
-        var cursor;
-        var text;
-        var blur;
-
-        function init() {
-            if (window.top != window) {
-                document.getElementById("header").style.display = "none";
-            }
-
-            document.getElementById("loader").className = "loader";
-
-            image = new Image();
-            image.onload = handleComplete;
-            image.src = "assets/AlphaMaskImage.png";
-
-            stage = new createjs.Stage("testCanvas");
-            text = new createjs.Text("Loading...", "20px Arial", "#999999");
-                    text.set({x:stage.canvas.width/2, y:stage.canvas.height-80});
-            text.textAlign = "center";
-        }
-
-        function handleComplete() {
-            document.getElementById("loader").className = "";
-            createjs.Touch.enable(stage);
-            stage.enableMouseOver();
-
-            stage.addEventListener("stagemousedown", handleMouseDown);
-            stage.addEventListener("stagemouseup", handleMouseUp);
-            stage.addEventListener("stagemousemove", handleMouseMove);
-            drawingCanvas = new createjs.Shape();
-            bitmap = new createjs.Bitmap(image);
-
-            blur = new createjs.Bitmap(image);
-            blur.filters = [new createjs.BoxBlurFilter(15,15,2)];
-            blur.cache(0,0,960,400);
-            blur.alpha = 0.9;
-
-            text.text = "Click and Drag to Reveal the Image.";
-
-            stage.addChild(blur, text, bitmap);
-            updateCacheImage(false);
-
-            cursor = new createjs.Shape(new createjs.Graphics().beginFill("#FFFFFF").drawCircle(0,0,20));
-            cursor.cursor = "pointer";
-
-            stage.addChild(cursor);
-        }
-
-        function handleMouseDown(event) {
-            oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
-            oldMidPt = oldPt;
-
-            isDrawing = true;
-        }
-
-        function handleMouseMove(event) {
-            cursor.x = stage.mouseX;
-            cursor.y = stage.mouseY;
-
-            if (!isDrawing) {
-                stage.update();
-                return;
-            }
-
-            var midPoint = new createjs.Point(oldPt.x + stage.mouseX>>1, oldPt.y+stage.mouseY>>1);
-
-                    drawingCanvas.graphics.setStrokeStyle(40, "round", "round")
-                        .beginStroke("rgba(0,0,0,0.15)")
-                        .moveTo(midPoint.x, midPoint.y)
-                        .curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);
-
-            oldPt.x = stage.mouseX;
-            oldPt.y = stage.mouseY;
-
-            oldMidPt.x = midPoint.x;
-            oldMidPt.y = midPoint.y;
-
-            updateCacheImage(true);
-
-        }
-
-        function handleMouseUp(event) {
-            updateCacheImage(true);
-            isDrawing = false;
-        }
-
-        function updateCacheImage(update) {
-            if (update) {
-                drawingCanvas.updateCache(0, 0, image.width, image.height);
-            } else {
-                drawingCanvas.cache(0, 0, image.width, image.height);
-            }
-
-            maskFilter = new createjs.AlphaMaskFilter(drawingCanvas.cacheCanvas);
-
-            bitmap.filters = [maskFilter];
-            if (update) {
-                bitmap.updateCache(0, 0, image.width, image.height);
-            } else {
-                bitmap.cache(0, 0, image.width, image.height);
-            }
-
-            stage.update();
-        }
-    </script>
+			stage.update();
+		}
+	</script>
 
 </head>
 
 <body onload="init();">
 <div id="loader"></div>
 <header id="header" class="EaselJS">
-    <h1><span class="text-product">Easel<strong>JS</strong></span> AlphaMaskFilter reveal</h1>
+	<h1><span class="text-product">Easel<strong>JS</strong></span> AlphaMaskFilter reveal</h1>
 
-    <p>This example demonstrates revealing an image using another image as the mask. The mask is created by drawing a
-    shape, and then caching the shape to make an image with an alpha channel. It is then applied to the image as
-    an mask using the <strong>AlphaMaskFilter</strong> filter. Another copy of the image is added below with a
-    <strong>BoxBlurFilter</strong> to make the effect cooler.</p>
+	<p>This example demonstrates revealing an image using another image as the mask. The mask is created by drawing a
+		shape, and then caching the shape to make an image with an alpha channel. It is then applied to the image as
+		an mask using the <strong>AlphaMaskFilter</strong> filter. Another copy of the image is added below with a
+		<strong>BoxBlurFilter</strong> to make the effect cooler.</p>
 </header>
 
 <canvas id="testCanvas" width="960" height="400"></canvas>

diff --git a/examples/BarGraph.html b/examples/BarGraph.html
@@ -12,6 +12,7 @@
 	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
 	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
 	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
+	<script type="text/javascript" src="../src/easeljs/events/Event.js"></script>
 	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
 	<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
 	<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>