diff options
author | Felipe Lopez Toledo <zer.subzero@gmail.com> | 2009-09-08 01:51:05 (GMT) |
---|---|---|
committer | Felipe Lopez Toledo <zer.subzero@gmail.com> | 2009-09-08 01:51:05 (GMT) |
commit | 4a5c55843ce2643d3368bf7ba8ea635e473d8f19 (patch) | |
tree | e87a3b069f137abaf6a3d3bd08e56237fcb9c48b | |
parent | 6668d979d480222945a16a1661895c6c5f0aa4f7 (diff) |
renamed "KLayer" to "KSurface", k.init supports surfaces
-rwxr-xr-x | css/karma.css | 25 | ||||
-rwxr-xr-x | examples/adding_up_to_10/js/lesson_multiple.js | 49 | ||||
-rwxr-xr-x | js/jquery.karma.js | 54 |
3 files changed, 82 insertions, 46 deletions
diff --git a/css/karma.css b/css/karma.css index 57d03a5..0135a5e 100755 --- a/css/karma.css +++ b/css/karma.css @@ -1,3 +1,24 @@ -#karma { - overflow:"hidden"; +/** +karma loader +**/ +@media screen { + #karma-loader{ + position:fixed; + top:0; + left:0; + padding: 2px 2px 1px 5px; + font-family: arial; + font-size: 12px; + background: #0066cc; + color: #ffffff; + + } + #karma-loader.status{ + + left:110px; + + } +} +.canvas { + }
\ No newline at end of file diff --git a/examples/adding_up_to_10/js/lesson_multiple.js b/examples/adding_up_to_10/js/lesson_multiple.js index 572af44..a58169e 100755 --- a/examples/adding_up_to_10/js/lesson_multiple.js +++ b/examples/adding_up_to_10/js/lesson_multiple.js @@ -1,11 +1,5 @@ $(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 }, @@ -17,31 +11,38 @@ k.init({ {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" } + ], + surfaces: [ + {id: "card1", width:250, height:250}, + {id: "card2", width:250, height:250}, + {id: "card3", width:250, height:250}, + {id: "inline1", canvas:"inlineCanvas1"}, + {id: "inline2", canvas:"inlineCanvas2"} ] }); + 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 ); + + + var library = k.library; + var surfaces = k.surfaces; + + + library.images["ball"].draw( surfaces["card1"].ctx ); + library.images["balloon"].draw( surfaces["card2"].ctx ); + library.images["banana"].draw( surfaces["card3"].ctx ); + library.images["ball"].draw( surfaces["inline1"].ctx ); + library.images["fish"].draw( surfaces["inline2"].ctx ); - layers["inline2"].addEventListener( + surfaces["inline2"].addEventListener( "click", - function(){layers["inline2"].clear();} + function(){surfaces["inline2"].clear();} ); - layers["inline2"].ctx.fillStyle = "#000"; - layers["inline2"].ctx.fillRect(0, 0, 150, 150); - layers["card2"].ctx.fillStyle = "#000"; - layers["card2"].ctx.fillRect(0, 0, 150, 150); - + surfaces["inline1"].ctx.fillStyle = "#00f"; + surfaces["inline1"].ctx.fillRect(0, 0, 150, 150); + surfaces["card1"].ctx.fillStyle = "#000"; + surfaces["card1"].ctx.fillRect(0, 0, 150, 150); }); });
\ No newline at end of file diff --git a/js/jquery.karma.js b/js/jquery.karma.js index 3e75669..63d4e4d 100755 --- a/js/jquery.karma.js +++ b/js/jquery.karma.js @@ -313,22 +313,22 @@ var Karma = function(options ) { this.container = $( this.container )[ 0 ]; if ( !valid(this.container) ) delete this.container; } + gk = { "paths": this.paths } - this.layers={}; - this.clayers=0; + this.surfaces = {}; } /** @memberOf Karma **/ -Karma.prototype.layer = function ( options ) { +Karma.prototype.surface = function ( options ) { if ( !valid(options, "object") ){ - var options = { id: "klayer-"+(clayers++) }; + var options = { id: "ksurface-"+ (this.surfaces.length + 1 ) }; } options.mainContainer = this.container; options.paths = this.paths; - this.layers[ options.id ] = new KLayer( options ); - return this.layer[ options.id ]; + this.surfaces[ options.id ] = new KSurface( options ); + return this.surface[ options.id ]; } @@ -416,16 +416,28 @@ The callback function will be executed when the preloading finishes. **/ Karma.prototype.main = function ( cb ) { if ( valid( this.pendingToLoad ) ) { + //loader + var loaderDiv = $("body").append('<div id=\"karma-loader\">Karma is \ + loading ...<div id=\"karma-loader\" class=\"status\"></div></div>'); + var statusDiv = $("#karma-loader .status"); + var that = this; var categories = ["images", "sounds", "videos" ]; var counters = { "loaded":0, "error": 0 }; var totalItems = 0; + //creates the surfaces + if ( valid( this.pendingToLoad[ "surfaces" ] ) ) { + $.each (this.pendingToLoad[ "surfaces" ], function( key, config ){ + Karma.prototype.surface.call( that, config ); + }); + } //get the total items for ( var i=0; i < categories.length; i++ ) { if ( valid ( this.pendingToLoad[ categories[ i ] ] ) ) { totalItems += this.pendingToLoad[ categories[ i ] ].length; } } + statusDiv.html("0/"+totalItems); /** callback to check if all the items were loaded or got an error when loading @@ -433,7 +445,10 @@ Karma.prototype.main = function ( cb ) { var checkAllLoaded = function ( ev ) { if ( ev.type === "load") counters.loaded += 1; else counters.error += 1; + statusDiv.html( counters.loaded + counters.error + "/" + totalItems); if ( counters.loaded + counters.error === totalItems ) { + $("#karma-loader:hiden:first").fadeOut( + "slow",function(){ $(this).remove();}); if ( cb ) cb(); } } @@ -572,7 +587,7 @@ var Class = function ( ) { }; /** -Creates a new layer +Creates a new surface @param {object} options @param {string} [options.id] @param {string | object} [options.container] @@ -582,12 +597,11 @@ Creates a new layer @param {boolean} [visible=true] @memberOf Karma **/ -var KLayer = Class( +var KSurface = Class( { init: function( options ){ - //fix the container - if ( valid( options.container, "string" ) && !valid( options.canvas) + if ( valid( options.container, "string" ) && !valid( options.canvas) ) { var name=options.container; options.container = $( options.container )[ 0 ]; @@ -609,7 +623,7 @@ var KLayer = Class( var defaultOptions = { //mainContainer: '',//must be overwritten by Karma.container - id: '',//must be overwritten by the Karma.layer OR user + id: '',//must be overwritten by the Karma.surface OR user container: '', //must be overwritten by Karma.container OR user paths: '', //must be overwritten by Karma.paths width: 100, @@ -620,21 +634,21 @@ var KLayer = Class( $.extend( this, defaultOptions, options); if ( !this.canvas ) { - this.canvas = document.createElement("canvas"); - this.canvas.width = this.width; - this.canvas.height = this.height; - this.canvas.id = this.id; - + this.canvas = document.createElement("canvas"); + this.canvas.width = this.width; + this.canvas.height = this.height; + this.canvas.id = this.id; + this.container.appendChild( this.canvas ); }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.id = this.canvas.id; } if ( this.canvas.getContext ) { this.ctx = this.canvas.getContext("2d"); - //this.container.appendChild( this.canvas ); }else { throw new Error ("Your browser doesn't support canvas, \ try the newest Firefox, Safari or Google Chrome"); @@ -650,7 +664,7 @@ var KLayer = Class( ); }, /** - Adds an event listener to the layer + Adds an event listener to the surface @param {string} type Event type @param {function} cb Function call back @param {boolean} [bubble=false] If the event must be captured on @@ -660,7 +674,7 @@ var KLayer = Class( this.canvas.addEventListener( type, cb, bubble || false ); }, /** - Removes an event listener attached to the layer + Removes an event listener attached to the surface @param {string} type Event type @param {function} cb Function call back @param {boolean} [bubble=false] If the event must be captured on @@ -681,7 +695,7 @@ var KLayer = Class( x || 0, y || 0, width || this.canvas.width, - height || this.canvas.height + height || this.canvas.width ); }, draw: function ( ) { |