social_cheesecake 0.0.4 → 0.1.0

data/app/assets/javascripts/social_cheesecake.js

@@ -1,3 +1,2 @@
 //= require kinetic
-//= require socialCheesecake
-
+//= require_directory ./socialcheesecake

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

@@ -0,0 +1,28 @@
+/**
+ * @license SocialCheesecake JavaScript Library v0.1.0
+ * https://github.com/adiezbal/SocialCheesecake
+ * Developed by Alicia Díez (https://github.com/adiezbal)
+ * Copyright 2011, Technical University of Madrid (Universidad Politécnica 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)
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */

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

@@ -1,10 +1,5 @@
-socialCheesecake.defineModule(
-    'SocialCheesecake#Actor'
-)
-.dependsOn(
-    'SocialCheesecake#Text'  
-)
-.withCode(function() {
+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"
@@ -16,12 +11,16 @@ socialCheesecake.defineModule(
 			}
 		}
 		this.id = settings.id;
+		this.opacity = 1;
+		this._focused = false;
+		this._selected = false;
+		this._hidden = false;
+		this.fading = "none";
 		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 actor_div = actor.getDiv();
 		var mouseoverCallback = function(){
 			var sector;
 			actor.focus();
@@ -39,32 +38,33 @@ socialCheesecake.defineModule(
 				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){
+			if( actor.isSelected()){
 				// Deactivate actor
-				arguments.callee.activeActor = false;
+				actor._selected = false;
 				actor_div.addEventListener("mouseover", mouseoverCallback, false);
 				actor_div.addEventListener("mouseout", mouseoutCallback, false);
 			}else{
 				//Activate actor
-				arguments.callee.activeActor = true;
+				actor._selected = true;
 				actor_div.removeEventListener("mouseover", mouseoverCallback, false);
 				actor_div.removeEventListener("mouseout", mouseoutCallback, false);
 			}
 		});
 	}
 	
+	socialCheesecake.Actor.prototype.isSelected = function() {
+		return this._selected;
+	}
+	
 	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 actor_div = this.getDiv();
 		var newClass="";
+		this._focused = true;
 		if (actor_div.getAttribute("class")){
 			if (!(actor_div.getAttribute("class").match(/\sfocused/) )){
 				newClass = actor_div.getAttribute("class").concat(" focused");
@@ -77,36 +77,24 @@ socialCheesecake.defineModule(
 	}
 	
 	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 actor_div = this.getDiv();
 		var newClass="";
+		this._focused = false;
 		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.isFocused = function() {		var actor = this;
+		var gridIdPrefix = this.getCheesecake().grid.divIdPrefix;
+		return this._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 actor_div = this.getDiv();
 		var newStyle=" display: none;";
+		this._hidden = true;
 		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;");			
@@ -115,17 +103,92 @@ socialCheesecake.defineModule(
 			}
 		}
 		actor_div.setAttribute("style", newStyle);
+		this.setDivOpacity(0);
+		this.fading= "none";
 	}
 	
 	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);
+		var actor_div = this.getDiv();
+		this._hidden = false;
 		if (actor_div.getAttribute("style")){
 			var newStyle = actor_div.getAttribute("style").replace(/display\s*:\s*none;/, "");
 			actor_div.setAttribute("style", newStyle);
 		}
 	}
-});  
+	
+	socialCheesecake.Actor.prototype.isHidden = function() {
+		return this._hidden;
+	}
+	
+	socialCheesecake.Actor.prototype.setDivOpacity = function(opacity) {
+		opacity = (opacity > 1) ? 1 : opacity;
+		opacity = (opacity < 0) ? 0 : opacity;
+		var actor = this;
+		var actor_div = this.getDiv();
+		
+		this.opacity = opacity;
+		var newStyle="opacity: "+this.opacity + ";";
+		
+		if (actor_div.getAttribute("style")){
+			newStyle = actor_div.getAttribute("style").replace(/opacity\s*:\s*[a-zA-Z0-9.]*;/g, "");
+			newStyle = newStyle.concat("opacity: "+this.opacity + ";");			
+		}
+		actor_div.setAttribute("style", newStyle);
+	}
+	
+	socialCheesecake.Actor.prototype.fade = function(time, modifyDisplay) {
+		var actor = this;	
+		var deltaOpacity = 1000.0/ (60.0 *time);
+		var grow = 0;
+		
+		var x = actor.opacity;
+		//console.log(">Fade actor "+ actor.id+" now with opacity "+ x);
+		//console.log("     >Fading value "+ this.fading);
+		
+		if (this.fading == "out"){
+			grow = -1;
+		}else if (this.fading == "in"){
+			grow = 1;
+			if (modifyDisplay) actor.show();
+		}
+		var opacity = this.opacity + grow * deltaOpacity;
+		opacity = Math.round(opacity*1000)/1000;
+		actor.setDivOpacity(opacity);
+				
+		if (((this.fading == "out") && (opacity >= 0))||
+	 			((this.fading == "in") && (opacity <= 1))){
+		  requestAnimFrame(function() {
+		  	
+				actor.fade(time, modifyDisplay);
+      });
+    }else{
+    	//console.log("STOP FADING Actor "+ actor.id + " now with opacity "+x);
+    	//console.log("     >Fading value "+ this.fading);
+    	this.fading = "none";
+    	if((modifyDisplay) && (opacity <= 0)) actor.hide();
+    }
+	}
+	
+	socialCheesecake.Actor.prototype.fadeOut = function(time, modifyDisplay) {
+		this.fading = "out";
+		this.fade(time, modifyDisplay);
+	}
+	
+	socialCheesecake.Actor.prototype.fadeIn = function(time, modifyDisplay) {
+		this.fading = "in";
+		this.fade(time, modifyDisplay);
+	}
+	
+	socialCheesecake.Actor.prototype.getCheesecake = function (){
+		return this.parents[0].parent.parent;
+	}
+	
+	socialCheesecake.Actor.prototype.getDiv = function () {
+		var gridIdPrefix = this.getCheesecake().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

@@ -1,11 +1,5 @@
-socialCheesecake.defineModule(
-	'SocialCheesecake#Cheesecake'
-)
-.dependsOn(
-    'SocialCheesecake#Sector',
-    'SocialCheesecake#Grid'  
-)
-.withCode(function() {
+var socialCheesecake = socialCheesecake || {};
+(function() {
 	socialCheesecake.Cheesecake = function(cheesecakeData) {
 		var jsonSectors = cheesecakeData.sectors;
 		var cheesecake = this;
@@ -43,18 +37,30 @@ socialCheesecake.defineModule(
 			mouseover : {
 				color : "#aaffaa",
 				callback : function(sector) {
+					/* FIX FOR EXECUTING MOUSEOUT BEFORE MOUSEOVER */					
+					for(var i in cheesecake.sectors){
+						cheesecake.sectors[i].getRegion().addEventListener("mouseout", undefined);
+						if(cheesecake.sectors[i]!= sector){
+						 cheesecake.sectors[i].unfocus();
+						 cheesecake.sectors[i].changeColor(cheesecake.sectors[i].mouseout.color);
+						}
+					}
+					sector.getRegion().addEventListener("mouseout", function() {
+						sector.eventHandler('mouseout');
+					});
+					
 					document.body.style.cursor = "pointer";
 					cheesecake.grid.hideAll();
-					for (var actor in sector.actors){
-						sector.actors[actor].show();
-					}
+					cheesecake.grid.fadeIn(sector.actors, 300, true);
+					sector.focus();				
 				}
 			},
 			mouseout : {
 				color : "#eeffee",
 				callback : function(sector) {
 					document.body.style.cursor = "default";
-					cheesecake.grid.showAll();
+					cheesecake.grid.fadeInAll(300, true);
+					sector.unfocus();
 				}
 			},
 			mousedown : {
@@ -62,9 +68,7 @@ socialCheesecake.defineModule(
 				callback : function(sector) {
 					cheesecake.focusAndBlurCheesecake(sector);
 					cheesecake.grid.hideAll();
-					for (var actor in sector.actors){
-						sector.actors[actor].show();
-					}
+					cheesecake.grid.fadeIn(sector.actors,300, true);
 				}
 			},
 			mouseup : { color : "#aaffaa" }
@@ -77,7 +81,7 @@ socialCheesecake.defineModule(
 	
 	socialCheesecake.Cheesecake.prototype.focusAndBlurCheesecake = function(sector) {
 		var cheesecake = this;
-		var regions = cheesecake.stage.shapes;
+		var regions = cheesecake.stage.getShapes();
 		var sectorIndex;
 		for(var i in cheesecake.sectors) {
 			if(cheesecake.sectors[i] === sector) sectorIndex = i;
@@ -117,7 +121,8 @@ socialCheesecake.defineModule(
 					document.body.style.cursor = "pointer";
 				}
 			},
-			color : "#f5f5f5"
+			color : "#f5f5f5",
+			auxiliar : true
 		};
 		var dummySettings = {
 			parent : cheesecake,
@@ -148,8 +153,6 @@ socialCheesecake.defineModule(
 
 		cheesecake.stage.add(greySector.getRegion());
 		cheesecake.stage.add(dummySector.getRegion());
-		var greySectorContext = greySector.getRegion().getContext();
-		var dummySectorContext = dummySector.getRegion().getContext();
 
 		//Animations
 		var greyMousedownCallback = function() {
@@ -161,7 +164,6 @@ socialCheesecake.defineModule(
 		}
 		var greyRotateToCallback = function() {
 			greySector.resize({
-				context : greySectorContext,
 				delta : 3 * Math.PI / 2,
 				anchor : "M",
 				callback : greyResizeCallback
@@ -172,21 +174,18 @@ socialCheesecake.defineModule(
 		}
 		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"
@@ -194,7 +193,7 @@ socialCheesecake.defineModule(
 	}
 	socialCheesecake.Cheesecake.prototype.recoverCheesecake = function() {
 		var cheesecake = this;
-		var regions = cheesecake.stage.shapes;
+		var regions = cheesecake.stage.getShapes();
 
 		//Delete the auxiliar sectors
 		for(var i = (regions.length - 1); i >= 0; i--) {
@@ -227,30 +226,26 @@ socialCheesecake.defineModule(
 		//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() {
+					destination : greySector.originalAttr.phi,
+					callback : function() {
 						cheesecake.recoverCheesecake();
 					}
 				});
 			}
 		});
 	}
-});
+})();
 

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

@@ -1,13 +1,7 @@
-socialCheesecake.defineModule(
-    'SocialCheesecake#Grid'
-)
-.dependsOn(
-    'SocialCheesecake#Actor'  
-)
-.withCode(function() { 
+var socialCheesecake = socialCheesecake || {};
+(function() { 
 	socialCheesecake.Grid = function (settings){
 		if (!settings) throw "No arguments passed to the function";
-		console.log(settings.actors);
 		
 		//Actors dimensions and positions
 		this.actors = [];
@@ -97,7 +91,7 @@ socialCheesecake.defineModule(
 	}
 	
 	socialCheesecake.Grid.prototype.hideAll = function () {
-		this.hide(this.actors)		
+		this.hide(this.actors);		
 	}
 	
 	socialCheesecake.Grid.prototype.show = function (actor_ids) {
@@ -120,7 +114,7 @@ socialCheesecake.defineModule(
 	}
 	
 	socialCheesecake.Grid.prototype.showAll = function () {
-		this.show(this.actors)
+		this.show(this.actors);
 	}
 	
 	socialCheesecake.Grid.prototype.unfocus = function (actor_ids) {
@@ -143,7 +137,54 @@ socialCheesecake.defineModule(
 	}
 	
 	socialCheesecake.Grid.prototype.unfocusAll = function () {
-		this.unfocus(this.actors)
+		this.unfocus(this.actors);
 	}
-});
+	
+	socialCheesecake.Grid.prototype.fadeOut = function (actor_ids, time, modifyDisplay) {
+		if (actor_ids instanceof Array) {
+			for(var i in actor_ids){
+				var actor = actor_ids[i];
+				if(actor instanceof socialCheesecake.Actor){
+					actor.fadeOut(time, modifyDisplay);
+				}else{
+					this.getActor(actor).fadeOut(time, modifyDisplay);
+				}				
+			}
+		} else {
+			if(actor_ids instanceof socialCheesecake.Actor){
+				actor_ids.fadeOut(time, modifyDisplay);
+			}else{
+				this.getActor(actor_ids).fadeOut(time, modifyDisplay);
+			}		
+		}
+	}
+	
+	socialCheesecake.Grid.prototype.fadeOutAll = function (time, modifyDisplay) {
+		this.fadeOut(this.actors, time, modifyDisplay);
+	}
+	
+	socialCheesecake.Grid.prototype.fadeIn = function (actor_ids, time, modifyDisplay) {
+		if (actor_ids instanceof Array) {
+			for(var i in actor_ids){
+				var actor = actor_ids[i];
+				if(actor instanceof socialCheesecake.Actor){
+					actor.fadeIn(time, modifyDisplay);
+				}else{
+					this.getActor(actor).fadeIn(time, modifyDisplay);
+				}				
+			}
+		} else {
+			if(actor_ids instanceof socialCheesecake.Actor){
+				actor_ids.fadeIn(time, modifyDisplay);
+			}else{
+				this.getActor(actor_ids).fadeIn(time, modifyDisplay);
+			}		
+		}
+	}
+	
+	socialCheesecake.Grid.prototype.fadeInAll = function (time, modifyDisplay) {
+		this.fadeIn(this.actors, time, modifyDisplay);
+	}
+	
+})();