KLayer modified, added

author: Felipe Lopez Toledo <zer.subzero@gmail.com> 2009-09-04 06:56:16 (GMT)
committer: Felipe Lopez Toledo <zer.subzero@gmail.com> 2009-09-04 06:56:16 (GMT)
commit: 39d99e15d44afe823f10ec601547a95bdeee5aa5 (patch)
tree: ea1932b45183b531a875501d2afbaffeff7e1d1e
parent: e192e2fedcbacba0dd29f1711d8195c5e008b5f3 (diff)
4 files changed, 130 insertions, 18 deletions
diff --git a/examples/adding_up_to_10/css/lesson_multiple.css b/examples/adding_up_to_10/css/lesson_multiple.css
index c10f168..acce1f7 100755
--- a/examples/adding_up_to_10/css/lesson_multiple.css
+++ b/examples/adding_up_to_10/css/lesson_multiple.css
@@ -1,8 +1,9 @@
 #karma-main { 
-	position: relative; 
-	/*background-image: url('../assets/generic/images/bg.png');*/
+	/*position: relative; 
+	background-image: url('../assets/generic/images/bg.png');
 	width: 1200px;
 	height: 800px;
+	*/
 }
 canvas {
 	border: 2px solid #cccccc;
diff --git a/examples/adding_up_to_10/index_multiple.html b/examples/adding_up_to_10/index_multiple.html
new file mode 100644
index 0000000..15e5caa
--- /dev/null
+++ b/examples/adding_up_to_10/index_multiple.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en">
+
+<head>
+	<title>Karma - Adding Up to 10</title>
+	<meta name="keywords" content="karma,javascript,html5,sugar,sugarlabs,gsoc,ole,nepal">
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+	<link type="image/ico" rel="icon" href="../../assets/default/images/favicon.ico" /> 
+
+	<link type="text/css" rel="stylesheet" href="../../css/karma.css" />
+	<link type="text/css" rel="stylesheet" href="css/lesson_multiple.css" />
+         
+	<script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
+	<script type="text/javascript" src="../../js/karma.Gettext.js"></script>
+	<script type="text/javascript" src="../../js/jquery.karma.js"></script>
+	<script type="text/javascript" src="js/lesson_multiple.js"></script>
+   
+</head>
+
+<body>
+	<div id="karma-main" > </div>
+	<canvas id="inlineCanvas1" width="200px" height="200px"></canvas>
+	click the second box!
+	<canvas id="inlineCanvas2" width="200px" height="200px"></canvas>
+</body>
+
+</html>
diff --git a/examples/adding_up_to_10/js/lesson_multiple.js b/examples/adding_up_to_10/js/lesson_multiple.js
new file mode 100644
index 0000000..d1361ff
--- /dev/null
+++ b/examples/adding_up_to_10/js/lesson_multiple.js
@@ -0,0 +1,42 @@
+$(document).ready(function(){
+var k = $.karma ({container: "#karma-main"});
+k.layer( {id:"inline1", canvas:"inlineCanvas1"} );
+k.layer( {id:"inline2", canvas:"inlineCanvas2"} );
+k.layer( {id:"card1", width:250, height:250} ); 
+k.layer( {id:"card2", width:250, height:250} );
+k.layer( {id:"card3", width:250, height:250} );
+
+k.init({
+	images: [
+		{id: "ball",   file: "ball.png",   localized : false },
+		{id: "balloon", file: "balloon.png", localized : false },
+		{id: "banana", file: "banana.png", localized : false },
+		{id: "chilli", file: "chilli.png", localized : false },
+		{id: "fish"  , file: "fish.png",   localized : false },
+	    {id: "flower", file: "flower.png", localized : false },
+	    {id: "plussign", file: "plussign.png", localized : false },
+	    {id: "happyMonkey", file: "happyMonkey.jpg", localized : false },
+	    {id: "scorebox", file: "scorebox.png", localized : false }
+	]
+	,
+	sounds: [
+		{id: "correct",  file: "correct.ogg"   },
+		{id: "incorrect",file: "incorrect.ogg" }
+	]
+});
+k.main(function() {
+	var [library, layers ] = [k.library, k.layers];
+	library.images["ball"].draw( layers["card1"].ctx );
+	library.images["balloon"].draw( layers["card2"].ctx );
+	library.images["banana"].draw( layers["card3"].ctx );
+	library.images["ball"].draw( layers["inline1"].ctx );
+	library.images["fish"].draw( layers["inline2"].ctx );
+	
+
+	layers["inline2"].addEventListener(
+		"click", 
+		function(){layers["inline2"].clear();}
+	);
+	
+});
+});
+\ No newline at end of file
diff --git a/js/jquery.karma.js b/js/jquery.karma.js
index 244b6c9..32306e5 100755
--- a/js/jquery.karma.js
+++ b/js/jquery.karma.js
@@ -43,15 +43,13 @@
  * @exports $ as jQuery
 */
 
-
-
 (function ($) {
 //helpers
 /**
-Checks if the argument (arg) is seted and if its type is 'type'.<br>
-1. if arg is seted: it returns toReturn if specified, otherwise it returns 
+Checks if the argument 'arg' is set and if its type is 'type'.<br>
+1. if arg is set: it returns 'toReturn' if specified, otherwise it returns 
 	'true'
-2. if arg is not seted: it returns 'false'
+2. if arg is not set: it returns 'false'
 @param arg The param to check
 @param {Object} [type] The expeted type of 'arg'
 @param [toReturn] object or value to return in case 1
@@ -62,6 +60,7 @@ valid(msg); //returns true
 valid(msg, "String" ); //returns true
 valid(msg, "Number"); //returns false
 valid(msg, "String",false ); //returns false
+valid(msg, "String", "hello" ); //returns "hello"
 valid(msg123); //returns false
 **/
 var valid = function ( arg, type, toReturn ) {
@@ -73,10 +72,23 @@ var valid = function ( arg, type, toReturn ) {
 		}
 		return false
 	}
-	if ( typeof arg !== "undefined" ) return true;
+	if ( typeof arg !== "undefined" && arg!== "null" ) return true;
 	return false;
 }
 /**
+clone function
+
+**/
+var clone = function(obj){
+    if(obj == null || typeof(obj) != 'object')
+        return obj;
+    var temp = new obj.constructor(); 
+    for(var key in obj)
+        temp[key] = clone( obj[key] );
+    return temp;
+}
+
+/**
  * Karma
  * @name Karma
  * @class Represents a Karma (master) object.
@@ -85,8 +97,6 @@ var valid = function ( arg, type, toReturn ) {
  * @param {String} [options.language] 
 */
 var Karma = function(options ) {
-
-
 	var that = this;
 	this.version = "0.3 alpha";
 	//
@@ -251,7 +261,7 @@ var Karma = function(options ) {
 	//PRIVATE STUFF end
 	// default options 
 	var defaultOptions ={
-		container:   "#karma-ma1in",
+		container:   "#karma-main",
 		language:   { 
 						lang: 			undefined,
 						alternatives: 	['en-US', 'en'],
@@ -264,8 +274,7 @@ var Karma = function(options ) {
 					}
 	};
 	//
-
-	this.library = { "images": [], "sounds": [], "videos":[], "shapes":[] }
+	this.library = { "images": [], "sounds": [], "videos":[], "shapes":[] };
 	
 	//initializes the defaultOptions argument
 	//1 argument: string.  assume it's the container
@@ -562,7 +571,7 @@ var Class = function ( ) {
 };
 
 /**
-creates a new layer
+Creates a new layer
 @param {object} options
 @param {string} [options.id] 
 @param {string | object} [options.container]
@@ -575,8 +584,10 @@ creates a new layer
 var KLayer = Class(
 	{
 		init: function( options ){
+			
 			//fix the container
-			if ( valid( options.container, "string" ) ) {
+			if ( valid( options.container, "string" ) && !valid( options.canvas)
+			) {
 				var name=options.container;
 				options.container = $( options.container )[ 0 ];
 				if ( !valid (options.container) ){
@@ -594,6 +605,7 @@ var KLayer = Class(
 				}
 				options.container = options.mainContainer;
 			}
+			
 			var defaultOptions = {
 				//mainContainer: '',//must be overwritten by Karma.container
 				id: '',//must be overwritten by the Karma.layer OR user
@@ -606,9 +618,17 @@ var KLayer = Class(
 			}
 			$.extend( this, defaultOptions, options);
 			
-			this.canvas = document.createElement("canvas");
-			this.canvas.width  = this.width; 
-			this.canvas.height = this.height;
+			if ( !this.canvas ) {
+				this.canvas = document.createElement("canvas");
+				this.canvas.width  = this.width; 
+				this.canvas.height = this.height;
+			}else {
+				this.canvas = document.getElementById( options.canvas );
+				if ( !this.canvas )
+					throw new Error ("The canvas id doesn't exist");
+				this.width = this.canvas.width;
+				this.height = this.canvas.height;
+			}
 			this.canvas.id = this.id;
 			if ( this.canvas.getContext ) {
 				this.ctx = this.canvas.getContext("2d");
@@ -628,6 +648,26 @@ var KLayer = Class(
 			);
 		},
 		/**
+		Adds an event listener to the layer
+		@param {string} type Event type
+		@param {function} cb Function call back
+		@param {boolean} [bubble=false] If the event must be captured on
+			bubbling phase
+		**/
+		addEventListener : function ( type, cb, bubble ) {
+			this.canvas.addEventListener( type, cb, bubble || false );
+		},
+		/**
+		Removes an event listener attached to the layer
+		@param {string} type Event type
+		@param {function} cb Function call back
+		@param {boolean} [bubble=false] If the event must be captured on
+			bubbling phase
+		**/
+		removeEventListener : function ( type, cb, bubble ) {
+			this.canvas.removeEventListener( type, cb, bubble || false );
+		},
+		/**
 		Clears a rectangular area within the canvas
 		@param {Number} [x=0] Start position of x
 		@param {Number} [y=0] Start position of y
author	Felipe Lopez Toledo <zer.subzero@gmail.com>	2009-09-04 06:56:16 (GMT)
committer	Felipe Lopez Toledo <zer.subzero@gmail.com>	2009-09-04 06:56:16 (GMT)
commit	39d99e15d44afe823f10ec601547a95bdeee5aa5 (patch)
tree	ea1932b45183b531a875501d2afbaffeff7e1d1e
parent	e192e2fedcbacba0dd29f1711d8195c5e008b5f3 (diff)