From 80d1074a5e4a10da8d36c14b8d4f4e9fae47a5ec Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Wed, 13 Jun 2012 16:00:32 -0700
Subject: Timeline: More work on new easing menu.

---
 js/panels/Timeline/EasingMenu.reel/EasingMenu.js | 141 +++++++++++++++++++++--
 1 file changed, 132 insertions(+), 9 deletions(-)

(limited to 'js/panels/Timeline/EasingMenu.reel')

diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
index b736ea59..006efd69 100644
--- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
+++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
@@ -13,26 +13,149 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
     hasTemplate:{
         value: true
     },
+
+	/* Begin: Models */
+	
+	// popup: the initialized component.
+    _popup: {
+		value: null
+    },
+    popup: {
+    	get: function() {
+    		return this._popup;
+    	},
+    	set: function(newVal) {
+    		this._popup = newVal
+    	}
+    },
+    
+    // callingComponent: pointer to the span that called for the menu
+    _callingComponent: {
+    	value: null
+    },
+    callingComponent: {
+    	get: function() {
+    		return this._callingComponent;
+    	},
+    	set: function(newVal) {
+    		this._callingComponent = newVal;
+    	}
+    },
+    
+    // anchor: pointer to the anchoring element
+    _anchor: {
+    	value: null
+    },
+    anchor: {
+    	get: function() {
+    		return this._anchor;
+    	},
+    	set: function(newVal) {
+    		this._anchor = newVal;
+    	}
+    },
+    
+    
+    _top: {
+    	value: null
+    },
+    top: {
+    	get: function() {
+    		return this._top;
+    	},
+    	set: function(newVal) {
+    		this._top = newVal;
+    	}
+    },
+    _left: {
+    	value: null
+    },
+    left: {
+    	get: function() {
+    		return this._left;
+    	},
+    	set: function(newVal) {
+    		this._left = newVal;
+    	}
+    },
+    
+    // currentChoice: The data attribute of the current choice
+    _currentChoice: {
+    	value: null
+    },
+    currentChoice: {
+    	get: function() {
+    		return this._currentChoice;
+    	},
+    	set: function(newVal) {
+    		this._currentChoice = newVal;
+    	}
+    },
+    
+    /* End: Models */
+    
+    /* Begin: Draw Cycle */
+    willDraw: {
+    	value: function() {
+    		this.element.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
+    	}
+    },
     
     draw: {
     	value: function() {
-    		console.log("EasingMenu.draw")
+    		// Update the selection classes.
+            this.element.querySelector(".easing-selected").classList.remove("easing-selected");
+            this.element.querySelector('[data-ninja-ease="'+this.currentChoice+'"]').classList.add("easing-selected");
+    	}
+    },
+    didDraw: {
+    	value: function() {
     	}
     },
+	/* End Draw Cycle */
     
+    /* Begin: Controllers */
 	show: {
 		value: function() {
-            var popup, easingMenu;
-            popup = Popup.create();
-            this._popup = popup;
+			// Initialize the popup if it hasn't already been done
+            if (this.popup == null) {
+            	this.popup = Popup.create();
+	            this.popup.modal = false;
+	            this.popup.content = EasingMenu.create();
+            }
+            
+            // Show the popup
+            this.popup.anchor = this.anchor;
+            var position = {};
+            position.top = this.top;
+            position.left = this.left;
+            this.popup.position = position;
+            this.popup.show();
 
-            popup.modal = false;
 
-            easingMenu = EasingMenu.create();
-            popup.content = easingMenu;
-
-            popup.show();
+            
+            
+            
+            // Redraw the content (needed to reflect probable changes in selection from the last time we showed it)
+            this.popup.content.needsDraw = true;
 		}
+	},
+	handleEasingChoicesClick: {
+    	value: function(event) {
+    		event.stopPropagation();
+
+			// Un-highlight the old choice and highlight the new choice
+    		this.element.querySelector(".easing-selected").classList.remove("easing-selected");
+    		event.target.classList.add("easing-selected");
+    		
+    		// Set the easing in the span that called us
+    		this.callingComponent.easing = event.target.dataset.ninjaEase;
+    		
+    		// Hide the menu.
+    		this.popup.hide();	
+    	}
     }
     
+    /* End: Controllers */
+    
 });
-- 
cgit v1.2.3