social_cheesecake 0.0.1 → 0.0.4

data/app/assets/javascripts/socialcheesecake/actor.js

@@ -0,0 +1,131 @@
+socialCheesecake.defineModule(
+    'SocialCheesecake#Actor'
+)
+.dependsOn(
+    'SocialCheesecake#Text'  
+)
+.withCode(function() {
+	socialCheesecake.Actor = function(settings) {
+		if(!settings) throw "No arguments passed to the function"
+		if(!settings.parent) throw "Actor must be associated to at least a subsector"
+		var defaultSettings = {
+		}
+		for(var property in defaultSettings) {
+			if(!( property in settings)) {
+				settings[property] = defaultSettings[property];
+			}
+		}
+		this.id = settings.id;
+		this.parents = [];
+		if(settings.parent) this.parents.push(settings.parent);
+		
+		var actor = this;
+		var gridIdPrefix = this.parents[0].parent.parent.grid.divIdPrefix;
+		var actor_div = document.getElementById(gridIdPrefix+this.id);
+		var mouseoverCallback = function(){
+			var sector;
+			actor.focus();
+			for (var subsector in actor.parents){
+				sector = actor.parents[subsector].parent;
+				sector.eventHandler("mouseover");
+				actor.parents[subsector].eventHandler("mouseover");
+			}
+		}
+		var mouseoutCallback = function(){
+			var sector;
+			actor.unfocus();
+			for (var subsector in actor.parents){
+				sector = actor.parents[subsector].parent;
+				sector.eventHandler("mouseout");
+				actor.parents[subsector].eventHandler("mouseout");
+			}
+			console.log("mouseout");
+		}
+		actor_div.addEventListener("mouseover", mouseoverCallback, false);
+		actor_div.addEventListener("mouseout", mouseoutCallback, false);
+		actor_div.addEventListener("mousedown", function(){
+			var sector;
+			if( arguments.callee.activeActor){
+				// Deactivate actor
+				arguments.callee.activeActor = false;
+				actor_div.addEventListener("mouseover", mouseoverCallback, false);
+				actor_div.addEventListener("mouseout", mouseoutCallback, false);
+			}else{
+				//Activate actor
+				arguments.callee.activeActor = true;
+				actor_div.removeEventListener("mouseover", mouseoverCallback, false);
+				actor_div.removeEventListener("mouseout", mouseoutCallback, false);
+			}
+		});
+	}
+	
+	socialCheesecake.Actor.prototype.focus = function() {
+		var cheesecake = this.parents[0].parent.parent;
+		var gridIdPrefix = cheesecake.grid.divIdPrefix;
+		var actor_id = this.id;
+		var actor_div = document.getElementById(gridIdPrefix+actor_id);
+		var newClass="";
+		if (actor_div.getAttribute("class")){
+			if (!(actor_div.getAttribute("class").match(/\sfocused/) )){
+				newClass = actor_div.getAttribute("class").concat(" focused");
+				actor_div.setAttribute("class", newClass);
+			}
+		}else{
+			newClass = "focused";
+			actor_div.setAttribute("class", newClass);
+		}
+	}
+	
+	socialCheesecake.Actor.prototype.unfocus = function() {
+		var cheesecake = this.parents[0].parent.parent;
+		var gridIdPrefix = cheesecake.grid.divIdPrefix;
+		var actor_id = this.id;
+		var actor_div = document.getElementById(gridIdPrefix+actor_id);
+		var newClass="";
+		if (actor_div.getAttribute("class")){
+			newClass = actor_div.getAttribute("class").replace(/(^|\s)focused($|\s)/, "");
+			actor_div.setAttribute("class", newClass);
+		}	
+	}
+	
+	socialCheesecake.Actor.prototype.isFocused = function() {
+		var cheesecake = this.parents[0].parent.parent;
+		var gridIdPrefix = cheesecake.grid.divIdPrefix;
+		var actor_id = this.id;
+		var actor_div = document.getElementById(gridIdPrefix+actor_id);
+		var focused = false;
+		if ((actor_div.getAttribute("class")) && 
+				(actor_div.getAttribute("class").match(/(^|\s)focused($|\s)/))){
+			focused = true;
+		}	
+		return focused;
+	}
+	
+	socialCheesecake.Actor.prototype.hide = function() {
+		var cheesecake = this.parents[0].parent.parent;
+		var gridIdPrefix = cheesecake.grid.divIdPrefix;
+		var actor_id = this.id;
+		var actor_div = document.getElementById(gridIdPrefix+actor_id);
+		var newStyle=" display: none;";
+		if (actor_div.getAttribute("style")){
+			if (actor_div.getAttribute("style").match(/display\s*:\s*[a-z]*;/)){
+				newStyle = actor_div.getAttribute("style").replace(/display\s*:\s*[a-z]*;/, "display: none;");			
+			}else{
+				newStyle = actor_div.getAttribute("style").concat("display: none;");
+			}
+		}
+		actor_div.setAttribute("style", newStyle);
+	}
+	
+	socialCheesecake.Actor.prototype.show = function() {
+		var cheesecake = this.parents[0].parent.parent;
+		var gridIdPrefix = cheesecake.grid.divIdPrefix;
+		var actor_id = this.id;
+		var actor_div = document.getElementById(gridIdPrefix+actor_id);
+		if (actor_div.getAttribute("style")){
+			var newStyle = actor_div.getAttribute("style").replace(/display\s*:\s*none;/, "");
+			actor_div.setAttribute("style", newStyle);
+		}
+	}
+});  
+  

data/app/assets/javascripts/socialcheesecake/cheesecake.js

@@ -0,0 +1,256 @@
+socialCheesecake.defineModule(
+	'SocialCheesecake#Cheesecake'
+)
+.dependsOn(
+    'SocialCheesecake#Sector',
+    'SocialCheesecake#Grid'  
+)
+.withCode(function() {
+	socialCheesecake.Cheesecake = function(cheesecakeData) {
+		var jsonSectors = cheesecakeData.sectors;
+		var cheesecake = this;
+		//Properties
+		cheesecake.center = {
+			x : cheesecakeData.center.x,
+			y : cheesecakeData.center.y
+		};
+		cheesecake.rMax = cheesecakeData.rMax;
+		cheesecake.sectors = [];
+		cheesecake.auxiliarSectors = [];
+		cheesecake.stage = new Kinetic.Stage(cheesecakeData.container.id, 
+			cheesecakeData.container.width, cheesecakeData.container.height);
+		cheesecake.grid = new socialCheesecake.Grid({
+			parent : this,
+			grid_id : cheesecakeData.grid.id,
+			divIdPrefix : cheesecakeData.grid.divIdPrefix || "actor_"
+		});
+
+		var phi = 0;
+		var delta = 2 * Math.PI / jsonSectors.length;
+		var actors = [];
+		for(var i = 0; i < jsonSectors.length; i++) {
+		var settings = {
+			parent : cheesecake,
+			center : {
+				x : cheesecakeData.center.x,
+				y : cheesecakeData.center.y
+			},
+			label : jsonSectors[i].name,
+			phi : phi,
+			delta : delta,
+			rOut : cheesecakeData.rMax,
+			subsectors : jsonSectors[i].subsectors,
+			mouseover : {
+				color : "#aaffaa",
+				callback : function(sector) {
+					document.body.style.cursor = "pointer";
+					cheesecake.grid.hideAll();
+					for (var actor in sector.actors){
+						sector.actors[actor].show();
+					}
+				}
+			},
+			mouseout : {
+				color : "#eeffee",
+				callback : function(sector) {
+					document.body.style.cursor = "default";
+					cheesecake.grid.showAll();
+				}
+			},
+			mousedown : {
+				color : "#77ff77",
+				callback : function(sector) {
+					cheesecake.focusAndBlurCheesecake(sector);
+					cheesecake.grid.hideAll();
+					for (var actor in sector.actors){
+						sector.actors[actor].show();
+					}
+				}
+			},
+			mouseup : { color : "#aaffaa" }
+		};
+		cheesecake.sectors[i] = new socialCheesecake.Sector(settings);
+		cheesecake.stage.add(cheesecake.sectors[i].getRegion());
+		phi += delta;
+		}
+	}
+	
+	socialCheesecake.Cheesecake.prototype.focusAndBlurCheesecake = function(sector) {
+		var cheesecake = this;
+		var regions = cheesecake.stage.shapes;
+		var sectorIndex;
+		for(var i in cheesecake.sectors) {
+			if(cheesecake.sectors[i] === sector) sectorIndex = i;
+		}
+		if(sectorIndex == null)
+			throw "sector doesn't belong to this cheesecake"
+		for(var i = (regions.length - 1); i >= 0; i--) {
+			if(!regions[i].permanent) {
+				cheesecake.stage.remove(regions[i]);
+			}
+		}
+		
+		//Unfocus all actors
+		cheesecake.grid.unfocusAll();
+		
+		//Add auxiliar sectors
+		var greySettings = {
+			parent : cheesecake,
+			center : {
+				x : cheesecake.center.x,
+				y : cheesecake.center.y
+			},
+			phi : sector.phi + sector.delta,
+			delta : 2 * Math.PI - sector.delta,
+			rOut : cheesecake.rMax,
+			mouseout : {
+				color : "#f5f5f5",
+				callback : function() {
+					document.body.style.cursor = "default";
+				}
+			},
+			mousedown : { color : "#f5f5f5" },
+			mouseup : { color : "#f5f5f5" },
+			mouseover : {
+				color : "#f5f5f5",
+				callback : function() {
+					document.body.style.cursor = "pointer";
+				}
+			},
+			color : "#f5f5f5"
+		};
+		var dummySettings = {
+			parent : cheesecake,
+			center : {
+				x : cheesecake.center.x,
+				y : cheesecake.center.y
+			},
+			phi : sector.phi,
+			delta : sector.delta,
+			rOut : sector.rOut,
+			label : sector.label,
+			simulate : sectorIndex,
+			mouseout : {
+				callback : function() {
+					document.body.style.cursor = "default";
+				}
+			},
+			mouseover : {
+				callback : function() {
+					document.body.style.cursor = "pointer";
+				}
+			}
+		};
+		var greySector = new socialCheesecake.Sector(greySettings);
+		cheesecake.auxiliarSectors.push(greySector);
+		var dummySector = new socialCheesecake.Sector(dummySettings)
+		cheesecake.auxiliarSectors.push(dummySector);
+
+		cheesecake.stage.add(greySector.getRegion());
+		cheesecake.stage.add(dummySector.getRegion());
+		var greySectorContext = greySector.getRegion().getContext();
+		var dummySectorContext = dummySector.getRegion().getContext();
+
+		//Animations
+		var greyMousedownCallback = function() {
+			cheesecake.unfocusAndUnblurCheesecake();
+			cheesecake.grid.showAll();
+		}
+		var greyResizeCallback = function() {
+			greySector.mousedown.callback = greyMousedownCallback;
+		}
+		var greyRotateToCallback = function() {
+			greySector.resize({
+				context : greySectorContext,
+				delta : 3 * Math.PI / 2,
+				anchor : "M",
+				callback : greyResizeCallback
+			});
+		}
+		var dummyResizeCallback = function() {
+			dummySector.splitUp();
+		}
+		var dummyRotateToCallback = function() {
+			dummySector.resize({
+				context : dummySectorContext,
+				anchor : "M",
+				callback : dummyResizeCallback
+			});
+		}
+
+		greySector.rotateTo({
+			context : greySectorContext,
+			destination : 5*Math.PI / 4,
+			callback : greyRotateToCallback,
+			anchor : "M"
+		});
+
+		dummySector.rotateTo({
+			context : dummySectorContext,
+			destination : Math.PI / 4 ,
+			callback : dummyRotateToCallback,
+			anchor : "M"
+		});
+	}
+	socialCheesecake.Cheesecake.prototype.recoverCheesecake = function() {
+		var cheesecake = this;
+		var regions = cheesecake.stage.shapes;
+
+		//Delete the auxiliar sectors
+		for(var i = (regions.length - 1); i >= 0; i--) {
+			if(!regions[i].permanent) {
+				cheesecake.stage.remove(regions[i]);
+			}
+		}
+		cheesecake.auxiliarSectors.pop();
+
+		// Add the former sectors
+		for(var i in cheesecake.sectors) {
+			cheesecake.stage.add(cheesecake.sectors[i].getRegion());
+		}
+	}
+	socialCheesecake.Cheesecake.prototype.unfocusAndUnblurCheesecake = function() {
+		var cheesecake = this;
+		var auxiliarSectors = this.auxiliarSectors;
+		var sector;
+		var greySector;
+
+		//Localize the dummy and grey sectors
+		for(var i in auxiliarSectors) {
+			if(auxiliarSectors[i].simulate != null) {
+				sector = auxiliarSectors[i];
+			} else {
+				greySector = auxiliarSectors[i];
+			}
+		}
+
+		//Animate and go back to the general view
+		sector.putTogether();
+		sector.resize({
+			context : sector.getRegion().getContext(),
+			anchor : "M",
+			delta : sector.originalAttr.delta,
+			callback : function() {
+				sector.rotateTo({
+					context : sector.getRegion().getContext(),
+					destination : sector.originalAttr.phi
+				});
+			}
+		});
+		greySector.resize({
+			context : greySector.getRegion().getContext(),
+			anchor : "M",
+			delta : greySector.originalAttr.delta,
+			callback : function() {
+				greySector.rotateTo({
+				context : greySector.getRegion().getContext(),
+				destination : greySector.originalAttr.phi,
+				callback : function() {
+						cheesecake.recoverCheesecake();
+					}
+				});
+			}
+		});
+	}
+});
+

data/app/assets/javascripts/socialcheesecake/grid.js

@@ -0,0 +1,149 @@
+socialCheesecake.defineModule(
+    'SocialCheesecake#Grid'
+)
+.dependsOn(
+    'SocialCheesecake#Actor'  
+)
+.withCode(function() { 
+	socialCheesecake.Grid = function (settings){
+		if (!settings) throw "No arguments passed to the function";
+		console.log(settings.actors);
+		
+		//Actors dimensions and positions
+		this.actors = [];
+		this.parent = settings.parent;
+		this.id = settings.grid_id;
+		this.divIdPrefix = settings.divIdPrefix;
+	}
+  
+	socialCheesecake.Grid.prototype.addActor = function (actor_info, subsector) {
+		var actors = this.actors;
+		var actor;
+		
+		//Check if the actor is already in the array
+		var actorAlreadyDeclared = false;
+		for (var i in actors){
+			if (actors[i].id == actor_info.id){
+				actorAlreadyDeclared = true;
+				actor = actors[i];
+				//Check if the subsector has already been declared a parent of the actor
+				var subsectorAlreadyDeclared = false;
+				for ( var parent in actor.parents){
+					if (actor.parents[parent] == subsector) subsectorAlreadyDeclared=true;
+				}
+				if (!subsectorAlreadyDeclared) actor.parents.push(subsector);
+			}
+		}
+		// If the actor was not in the array, create it and add it to the array
+		if(!actorAlreadyDeclared){
+			actor = new socialCheesecake.Actor({
+				id : actor_info.id, 
+				parent: subsector
+			});
+			actors.push(actor);
+		}
+		return actor;
+	}
+	
+	socialCheesecake.Grid.prototype.getActor = function (id) {
+		for (var i in actors){
+			if (this.actors[i].id == id){
+				return this.actors[i];
+			}
+		}
+		return null
+	}
+	
+	socialCheesecake.Grid.prototype.focus = function (actor_ids) {
+		if (actor_ids instanceof Array) {
+			for(var i in actor_ids){
+				var actor = actor_ids[i];
+				if(actor instanceof socialCheesecake.Actor){
+					actor.focus();
+				}else{
+					this.getActor(actor).focus();
+				}				
+			}
+		} else {
+			if(actor_ids instanceof socialCheesecake.Actor){
+				actor_ids.focus();
+			}else{
+				this.getActor(actor_ids).focus();
+			}		
+		}
+	}
+	
+	socialCheesecake.Grid.prototype.focusAll = function () {
+		this.focus(this.actors);
+	}
+	
+	socialCheesecake.Grid.prototype.hide = function (actor_ids) {
+		if (actor_ids instanceof Array) {
+			for(var i in actor_ids){
+				var actor = actor_ids[i];
+				if(actor instanceof socialCheesecake.Actor){
+					actor.hide();
+				}else{
+					this.getActor(actor).hide();
+				}				
+			}
+		} else {
+			if(actor_ids instanceof socialCheesecake.Actor){
+				actor_ids.hide();
+			}else{
+				this.getActor(actor_ids).hide();
+			}		
+		}
+	}
+	
+	socialCheesecake.Grid.prototype.hideAll = function () {
+		this.hide(this.actors)		
+	}
+	
+	socialCheesecake.Grid.prototype.show = function (actor_ids) {
+		if (actor_ids instanceof Array) {
+			for(var i in actor_ids){
+				var actor = actor_ids[i];
+				if(actor instanceof socialCheesecake.Actor){
+					actor.show();
+				}else{
+					this.getActor(actor).show();
+				}				
+			}
+		} else {
+			if(actor_ids instanceof socialCheesecake.Actor){
+				actor_ids.show();
+			}else{
+				this.getActor(actor_ids).show();
+			}		
+		}
+	}
+	
+	socialCheesecake.Grid.prototype.showAll = function () {
+		this.show(this.actors)
+	}
+	
+	socialCheesecake.Grid.prototype.unfocus = function (actor_ids) {
+		if (actor_ids instanceof Array) {
+			for(var i in actor_ids){
+				var actor = actor_ids[i];
+				if(actor instanceof socialCheesecake.Actor){
+					actor.unfocus();
+				}else{
+					this.getActor(actor).unfocus();
+				}				
+			}
+		} else {
+			if(actor_ids instanceof socialCheesecake.Actor){
+				actor_ids.unfocus();
+			}else{
+				this.getActor(actor_ids).unfocus();
+			}		
+		}
+	}
+	
+	socialCheesecake.Grid.prototype.unfocusAll = function () {
+		this.unfocus(this.actors)
+	}
+});
+