social_cheesecake 0.4.0 → 0.5.0

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

@@ -1,12 +1,11 @@
 /**
- * @license SocialCheesecake JavaScript Library v0.4.0
+ * @license SocialCheesecake JavaScript Library v0.5.0
  * https://github.com/adiezbal/SocialCheesecake
  * Developed by Alicia Diez (https://github.com/adiezbal)
  * Copyright 2011, Technical University of Madrid (Universidad Politecnica de Madrid)
  * Licensed under the MIT or GPL Version 2 licenses.
- * Date: Dec 22 2011
  *
- * Copyright (C) 2011 by Technical University of Madrid (Universidad Politécnica de Madrid)
+ * Copyright (C) 2012 by Technical University of Madrid (Universidad Politécnica de Madrid)
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy
  * of this software and associated documentation files (the "Software"), to deal

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

@@ -2,14 +2,13 @@ var socialCheesecake = socialCheesecake || {};
 (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"
+			throw "No arguments passed to the function";
 		
 		this.id = settings.id;
 		this.name = settings.name;
+		this.grid = settings.grid;
 		this.extraInfo = (settings.extraInfo) ? settings.extraInfo : undefined;
-		this.opacity = socialCheesecake.Grid.maxOpacity;
+		this.opacity = this.grid.maxOpacity || 1;
 		this._focused = false;
 		this._selected = false;
 		this._hidden = true;
@@ -25,21 +24,25 @@ var socialCheesecake = socialCheesecake || {};
 		actor_div.addEventListener("mouseover", function() {
 			var sector;
 			actor.focus();
-			for(var subsector in actor.parents) {
-				sector = actor.parents[subsector].parent;
-				sector.focus();
-				sector.colorHandler("mouseover");
-				actor.parents[subsector].colorHandler("mouseover");
+			if(!actor.isOrphan()){
+				for(var subsector in actor.parents) {
+					sector = actor.parents[subsector].parent;
+					sector.focus();
+					sector.colorHandler("mouseover");
+					actor.parents[subsector].colorHandler("mouseover");
+				}
 			}
 		}, false);
 		actor_div.addEventListener("mouseout", function() {
 			var sector;
 			actor.unfocus();
-			for(var subsector in actor.parents) {
-				sector = actor.parents[subsector].parent;
-				sector.unfocus();
-				sector.colorHandler("mouseout");
-				actor.parents[subsector].colorHandler("mouseout");
+			if(!actor.isOrphan()){
+				for(var subsector in actor.parents) {
+					sector = actor.parents[subsector].parent;
+					sector.unfocus();
+					sector.colorHandler("mouseout");
+					actor.parents[subsector].colorHandler("mouseout");
+				}
 			}
 		}, false);
 		actor_div.addEventListener("click", function() {
@@ -124,6 +127,13 @@ var socialCheesecake = socialCheesecake || {};
 		var gridIdPrefix = this.getCheesecake().grid.divIdPrefix;
 		return this._focused;
 	}
+	
+	socialCheesecake.Actor.prototype.isOrphan = function (){
+		var actor = this;
+		var orphan = false;
+		if( actor.parents.length <1) orphan = true;
+		return orphan;
+	}
 
 	socialCheesecake.Actor.prototype.hide = function() {
 		var actor_div = this.getDiv();
@@ -198,8 +208,8 @@ var socialCheesecake = socialCheesecake || {};
 	socialCheesecake.Actor.prototype.fade = function(time, modifyDisplay) {
 		var actor = this;
 		var time = (time) ? time : 300;
-		var minOpacity = socialCheesecake.Grid.minOpacity;
-		var maxOpacity = socialCheesecake.Grid.maxOpacity;
+		var minOpacity = this.grid.minOpacity;
+		var maxOpacity = this.grid.maxOpacity;
 		var deltaOpacity = ((maxOpacity - minOpacity)* 1000.0) / (60.0 * time);
 		var grow = 0;
 		
@@ -227,7 +237,7 @@ var socialCheesecake = socialCheesecake || {};
 	}
 
 	socialCheesecake.Actor.prototype.fadeOut = function(time, modifyDisplay) {
-		var maxOpacity = socialCheesecake.Grid.maxOpacity;
+		var maxOpacity = this.grid.maxOpacity;
 		this.fading = "out";
 		this.setDivOpacity(maxOpacity);
 		this.fade(time, modifyDisplay);
@@ -235,7 +245,7 @@ var socialCheesecake = socialCheesecake || {};
 
 	socialCheesecake.Actor.prototype.fadeIn = function(time, modifyDisplay) {
 		var actor = this;
-		var minOpacity = socialCheesecake.Grid.minOpacity;
+		var minOpacity = this.grid.minOpacity;
 
 		if(actor.isFiltered())
 			return;
@@ -247,11 +257,11 @@ var socialCheesecake = socialCheesecake || {};
 	}
 
 	socialCheesecake.Actor.prototype.getCheesecake = function() {
-		return this.parents[0].parent.parent;
+		return this.grid.parent;
 	}
 
 	socialCheesecake.Actor.prototype.getDiv = function() {
-		var gridIdPrefix = this.getCheesecake().grid.divIdPrefix;
+		var gridIdPrefix = this.grid.divIdPrefix;
 		var actor_id = this.id;
 		var actor_div = document.getElementById(gridIdPrefix + actor_id);
 		return actor_div;

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

@@ -11,16 +11,9 @@ var socialCheesecake = socialCheesecake || {};
 		cheesecake.rMax = cheesecakeData.rMax;
 		cheesecake.sectors = [];
 		cheesecake.highlightedSector = null;
-		cheesecake.onSectorHighlight = cheesecakeData.onSectorHighlight || null;
-		cheesecake.onSectorFocusBegin = cheesecakeData.onSectorFocusBegin || null;
-		cheesecake.onSectorFocusEnd = cheesecakeData.onSectorFocusEnd || null;
-		cheesecake.onSectorUnfocusBegin = cheesecakeData.onSectorUnfocusBegin || null;
-		cheesecake.onSectorUnfocusEnd = cheesecakeData.onSectorUnfocusEnd || null;
-		cheesecake.syncSectorFocusCallbacks = cheesecake.syncSectorFocusCallbacks || false;
 		cheesecake.auxiliarSectors = [];
 		cheesecake.stage = new Kinetic.Stage(cheesecakeData.container.id, cheesecakeData.container.width, cheesecakeData.container.height);
-		cheesecake.stage.add(new Kinetic.Layer());
-		cheesecake.stage.mainLayer = cheesecake.stage.layers[0];
+		cheesecake.stage.add(new Kinetic.Layer({name: "main"}));
 		cheesecake.grid = new socialCheesecake.Grid({
 			parent : this,
 			grid_id : cheesecakeData.grid.id,
@@ -28,18 +21,10 @@ var socialCheesecake = socialCheesecake || {};
 			maxOpacity : cheesecakeData.grid.maxOpacity || 1,
 			minOpacity : cheesecakeData.grid.minOpacity || 0
 		});
-		cheesecake.searchEngine = new socialCheesecake.SearchEngine({
-			parent : this
-		});
 		cheesecake.matchActorsNumber = cheesecakeData.match;
-		if(cheesecake.matchActorsNumber == null)
-			cheesecake.matchActorsNumber = true;
+		if(cheesecake.matchActorsNumber == null) cheesecake.matchActorsNumber = true;
 		cheesecake._initialState = {};
 		cheesecake._changes = {};
-		cheesecake.onChange = function(cheesecake) {
-		};
-		if(cheesecakeData.onChange)
-			cheesecake.onChange = cheesecakeData.onChange;
 		//Text settings
 		if(cheesecakeData.text) {
 			for(var style in cheesecakeData.text) {
@@ -54,6 +39,13 @@ var socialCheesecake = socialCheesecake || {};
 				}
 			}
 		}
+		//Callback settings
+		if(cheesecakeData.callbacks){
+			for(var type in cheesecakeData.callbacks) {
+				socialCheesecake.eventCallbackHandlers[type] = cheesecakeData.callbacks[type];
+			}
+		}
+		cheesecake.syncSectorFocusCallbacks = cheesecake.syncSectorFocusCallbacks || false;
 		//Extra sector if necessary
 		if(jsonSectors.length < 16) {
 			var extraSector = new socialCheesecake.Sector({
@@ -95,14 +87,14 @@ var socialCheesecake = socialCheesecake || {};
 	}
 
 	socialCheesecake.Cheesecake.prototype.disable = function() {
-		var layers = this.stage.layers;
+		var layers = this.stage.getChildren();
 		for(var layer in layers) {
 			layers[layer].listen(false);
 		}
 	}
 
 	socialCheesecake.Cheesecake.prototype.enable = function() {
-		var layers = this.stage.layers;
+		var layers = this.stage.getChildren();
 		for(var layer in layers) {
 			layers[layer].listen(true);
 		}
@@ -111,6 +103,7 @@ var socialCheesecake = socialCheesecake || {};
 	socialCheesecake.Cheesecake.prototype.focusAndBlurCheesecake = function(sector) {
 		var cheesecake = this;
 		var sectorIndex;
+		var onSectorFocusBegin = socialCheesecake.eventCallbackHandlers.onSectorFocusBegin;
 		for(var i in cheesecake.sectors) {
 			if(cheesecake.sectors[i] === sector)
 				sectorIndex = i;
@@ -119,6 +112,7 @@ var socialCheesecake = socialCheesecake || {};
 			throw "sector doesn't belong to this cheesecake"
 		cheesecake.clearLayer();
 		cheesecake.setHighlightedSector(sector);
+		cheesecake.disable();
 
 		//Add auxiliar sectors
 		var greySettings = {
@@ -138,15 +132,9 @@ var socialCheesecake = socialCheesecake || {};
 		cheesecake.addToLayer(greySector);
 		cheesecake.addToLayer(dummySector);
 		//Animations
-		var greyClickCallback = function() {
-			greySector.label = "";
-			cheesecake.unfocusAndUnblurCheesecake();
-		};
 		var greyResizeCallback = function() {
-			greySector.click = {
-				callback : greyClickCallback
-			}
-			greySector.label = "GO BACK";
+			greySector.changeProperty("label", "GO BACK");
+			cheesecake.enable();
 		};
 		var greyRotateToCallback = function() {
 			greySector.resizeDelta({
@@ -168,11 +156,11 @@ var socialCheesecake = socialCheesecake || {};
 					callback : dummyResizeCallback
 				});
 			}
-			if(cheesecake.onSectorFocusBegin) {
+			if(onSectorFocusBegin) {
 				if(cheesecake.syncSectorFocusCallbacks) {
-					cheesecake.onSectorFocusBegin(cheesecake, callback);
+					onSectorFocusBegin(cheesecake, callback);
 				} else {
-					cheesecake.onSectorFocusBegin(cheesecake);
+					onSectorFocusBegin(cheesecake);
 					callback();
 				}
 			} else {
@@ -194,8 +182,8 @@ var socialCheesecake = socialCheesecake || {};
 	socialCheesecake.Cheesecake.prototype.recoverCheesecake = function() {
 		var cheesecake = this;
 		var lastSector = this.highlightedSector;
-		var mainLayer = this.stage.mainLayer;
-		var regions = mainLayer.getShapes();
+		var mainLayer = this.stage.getChild("main");
+		var regions = mainLayer.getChildren();
 
 		//Delete the auxiliar sectors
 		cheesecake.removeFromLayer(cheesecake.auxiliarSectors);
@@ -214,6 +202,8 @@ var socialCheesecake = socialCheesecake || {};
 	socialCheesecake.Cheesecake.prototype.unfocusAndUnblurCheesecake = function() {
 		var cheesecake = this;
 		var auxiliarSectors = this.auxiliarSectors;
+		var onSectorUnfocusEnd = socialCheesecake.eventCallbackHandlers.onSectorUnfocusEnd;
+		var onSectorUnfocusBegin = socialCheesecake.eventCallbackHandlers.onSectorUnfocusBegin;
 		var dummySector;
 		var sectorNewDelta;
 		var sectorNewPhi;
@@ -241,8 +231,8 @@ var socialCheesecake = socialCheesecake || {};
 				anchor : "M",
 				delta : dummyNewDelta,
 				callback : function() {
-					if(cheesecake.onSectorUnfocusEnd) {
-						cheesecake.onSectorUnfocusEnd(cheesecake);
+					if(onSectorUnfocusEnd) {
+						onSectorUnfocusEnd(cheesecake);
 					}
 					cheesecake.grid.showAll();
 					dummySector.rotateTo({
@@ -263,11 +253,11 @@ var socialCheesecake = socialCheesecake || {};
 				}
 			});
 		}
-		if(cheesecake.onSectorUnfocusBegin) {
+		if(onSectorUnfocusBegin) {
 			if(cheesecake.syncSectorFocusCallbacks) {
-				cheesecake.onSectorUnfocusBegin(cheesecake, actions);
+				onSectorUnfocusBegin(cheesecake, actions);
 			} else {
-				cheesecake.onSectorUnfocusBegin(cheesecake);
+				onSectorUnfocusBegin(cheesecake);
 				actions();
 			}
 		} else {
@@ -277,12 +267,14 @@ var socialCheesecake = socialCheesecake || {};
 	
 	socialCheesecake.Cheesecake.prototype.addNewSector = function() {
 		var cheesecake = this;
-		var sectors = this.sectors;	
+		var sectors = this.sectors;
+		var id = this.getInitialState().sectors.length;
+		console.log(id);
 		var newSector;
 		var settings = {
 			parent : cheesecake,
 			center : cheesecake.center,
-			/*id : jsonSectors[i].id,*/
+			id : id,
 			label : "New Sector",
 			rOut : cheesecake.rMax,
 			subsectors : [{name : "New Subsector 1"}]
@@ -294,40 +286,43 @@ var socialCheesecake = socialCheesecake || {};
 		cheesecake.calculatePortions();
 	}
 	
+	/*
+	 * Add new Subsector to the Focused Sector
+	 */
+	socialCheesecake.Cheesecake.prototype.addNewSubsector = function(subsectorIndex){
+		var cheesecake = this;
+		var sector = this.getFocusedSector();
+		if(sector == null) return;
+		if(subsectorIndex > sector.subsectors.length ){
+			console.log("Cannot add new subsector in position "+ subsectorIndex+".This sector only has "+sector.subsectors.length+" subsectors");
+			return;
+		}
+		sector.turnExtraIntoNewSubsector(subsectorIndex);
+	}
+	
 	/**
 	 * actorId 		- actor which changes one of its parents
 	 */
 	socialCheesecake.Cheesecake.prototype.updateActorMembership = function(actor) {
 		var changes = this._changes;
 		var grid = this.grid;
-		var changesInActors;
+		changes.actors = changes.actors || [];
+		var changesInActors = changes.actors;
 		var alreadyChanged = false;
 		var actorId = actor.id;
 		var actorParents = actor.getParentsIds();
 		var actorName = actor.name;
 		var actorExtraInfo = actor.extraInfo;
-		var onChange = this.onChange;
+		var onChange = socialCheesecake.eventCallbackHandlers.onChange;
 
-		if(changes.actors != undefined) {
-			changesInActors = changes.actors
-			for(var a in changesInActors) {
-				if(changesInActors[a].id == actorId) {
-					alreadyChanged = true;
-					changesInActors[a].subsectors = actorParents;
-				}
+		for(var a in changesInActors) {
+			if(changesInActors[a].id == actorId) {
+				alreadyChanged = true;
+				changesInActors[a].subsectors = actorParents;
 			}
-			if(!alreadyChanged) {
-				changesInActors.push({
-					id : actorId,
-					subsectors : actorParents,
-					name : actorName,
-					extraInfo : actorExtraInfo,
-					justAdded : false
-				});
-			}
-		} else {
-			changes.actors = [];
-			changes.actors.push({
+		}
+		if(!alreadyChanged) {
+			changesInActors.push({
 				id : actorId,
 				subsectors : actorParents,
 				name : actorName,
@@ -336,7 +331,30 @@ var socialCheesecake = socialCheesecake || {};
 			});
 		}
 		//Execute onChange Callback
-		onChange(this);
+		if(onChange) onChange(this);
+	}
+	
+	/*
+	 * Executes when a sector is removed / added and/or subsectors are added or removed from them
+	 */
+	socialCheesecake.Cheesecake.prototype.updateSectorChanges = function(sector){
+		var changes = this._changes;
+		changes.sectors = changes.sectors || [];
+		var changesInSectors = changes.sectors;
+		var alreadyChanged = false;
+		for(var s in changesInSectors){
+			if(changesInSectors[s].id == sector.id){
+				alreadyChanged = true;
+				changesInSectors[s].subsectors = sector.getSubsectorsIds();
+				changesInSectors[s].name = sector.label;
+			}
+		}if(!alreadyChanged){
+			changesInSectors.push({
+				id : sector.id,
+				subsectors : sector.getSubsectorsIds(),
+				name : sector.label
+			});
+		}
 	}
 
 	socialCheesecake.Cheesecake.prototype.calculatePortions = function() {
@@ -389,7 +407,7 @@ var socialCheesecake = socialCheesecake || {};
 	}
 	
 	socialCheesecake.Cheesecake.prototype.addToLayer = function(sectors, layer){
-		var layer = layer || this.stage.mainLayer;
+		var layer = layer || this.stage.getChild("main");
 		if(sectors instanceof Array){
 			for(var sector in sectors){
 				layer.add(sectors[sector].getRegion());
@@ -400,7 +418,7 @@ var socialCheesecake = socialCheesecake || {};
 	}
 	
 	socialCheesecake.Cheesecake.prototype.removeFromLayer = function(sectors, layer){
-		var layer = layer || this.stage.mainLayer;
+		var layer = layer || this.stage.getChild("main");
 		if(sectors instanceof Array){
 			for(var sector in sectors) {
 				try{
@@ -413,14 +431,20 @@ var socialCheesecake = socialCheesecake || {};
 		}
 	}
 	
-	socialCheesecake.Cheesecake.prototype.drawLayer = function(layer){
-		var layer = layer || this.stage.mainLayer;
+	socialCheesecake.Cheesecake.prototype.drawLayer = function(layer, initialContextState){
+		var layer = layer || this.stage.getChild("main");
+		initialContextState = (initialContextState != null)? initialContextState : true;
+		if(initialContextState){
+			var context = layer.getContext();
+			context.restore();
+			context.save();
+		}
 		layer.draw();
 	}
 	
 	socialCheesecake.Cheesecake.prototype.clearLayer = function(layer){
-		var layer = layer || this.stage.mainLayer;
-		var regions = layer.getShapes();
+		var layer = layer || this.stage.getChild("main");
+		var regions = layer.getChildren();
 		for(var i = (regions.length - 1); i >= 0; i--) {
 			layer.remove(regions[i]);
 		}
@@ -428,11 +452,10 @@ var socialCheesecake = socialCheesecake || {};
 	}
 
 	socialCheesecake.Cheesecake.prototype.setHighlightedSector = function(sector) {
+		var onSectorHighlight = socialCheesecake.eventCallbackHandlers.onSectorHighlight;
 		if(this.highlightedSector != sector) {
 			this.highlightedSector = sector;
-			if(this.onSectorHighlight) {
-				this.onSectorHighlight(this);
-			}
+			if(onSectorHighlight) onSectorHighlight(this);
 		}
 	}
 	
@@ -523,19 +546,42 @@ var socialCheesecake = socialCheesecake || {};
 	socialCheesecake.Cheesecake.prototype.getInitialState = function() {
 		return this._initialState;
 	}
+	
+	socialCheesecake.Cheesecake.prototype.filter = function(pattern) {
+		console.log("search")
+		var grid = this.grid;
+		var highlightedSector = this.highlightedSector;
+		socialCheesecake.SearchEngine.filter(pattern, grid.actors);
+		if(highlightedSector) {
+			grid.fadeIn(highlightedSector.actors, 100, true);
+		} else {
+			grid.fadeIn(grid.actors, 100, true);
+		}
+	}
 
 	socialCheesecake.Cheesecake.prototype._setInitialState = function() {
 		var state = this._initialState;
 		var actors = this.grid.actors;
+		var sectors = this.sectors;
 
 		state.actors = [];
-		for(var actor in actors ) {
+		for(var actor in actors){
 			state.actors.push({
 				id : actors[actor].id,
 				subsectors : actors[actor].getParentsIds(),
 				name : actors[actor].name,
 				extraInfo : actors[actor].extraInfo
-			})
+			});
+		}
+		state.sectors = [];
+		for(var sector in sectors){
+			if(sectors[sector].type == "normalSector"){
+				state.sectors.push({
+					id : sectors[sector].id,
+					name : sectors[sector].label,
+					subsectors : sectors[sector].getSubsectorsIds()
+				});
+			}
 		}
 	}
 })();