From d3f67c2e306cb1888099f4decba00a9d8727cc43 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Tue, 22 May 2012 18:23:36 -0700
Subject: Timeline: New easing selector in spans.

---
 js/panels/Timeline/Span.reel/Span.js | 78 ++++++++++++++++++++++++++++++++++--
 1 file changed, 75 insertions(+), 3 deletions(-)

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

diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index bfa6aab8..e5894500 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -13,10 +13,10 @@ var Span = exports.Span = Montage.create(Component, {
         value: true
     },
 
+	// BEGIN: Models
     _spanWidth:{
         value:0
     },
-
     spanWidth:{
         serializable:true,
         get:function () {
@@ -27,16 +27,88 @@ var Span = exports.Span = Montage.create(Component, {
             this.needsDraw = true;
         }
     },
-
+    
+    _isHighlighted: {
+    	value: false
+    },
+    isHighlighted: {
+    	get: function() {
+    		return this._isHighlighted;
+    	},
+    	set: function(newVal) {
+    		if (newVal !== this._isHighlighted) {
+    			this._isHighlighted = newVal;
+    			this.needsDraw = true;
+    		}
+    	}
+    },
+    
+    _areChoicesVisible: {
+    	value: false
+    },
+    areChoicesVisible: {
+    	get: function() {
+    		return this._areChoicesVisible;
+    	},
+    	set: function(newVal) {
+    		if (newVal !== this._areChoicesVisible) {
+    			this._areChoicesVisible = newVal;
+    			this.needsDraw = true;
+    		}
+    	}
+    },
+	
+	// BEGIN: draw cycle
+	prepareForDraw: {
+		value: function() {
+			this.init();
+		}
+	},
+	
     draw:{
         value: function(){
             this.element.style.width = this.spanWidth + "px";
+            
+            // Highlight the span?
+            if (this.isHighlighted === true) {
+            	this.element.classList.add("spanHighlight");
+            } else {
+            	this.element.classList.remove("spanHighlight");
+            }
+            
+            // Hide or show the choices menu?
+            if (this.areChoicesVisible === true) {
+            	this.easing_choices.style.display = "block";
+            } else {
+            	this.easing_choices.style.display = "none";
+            }
         }
     },
 
+	// BEGIN: Controllers
+	init: {
+		value: function() {
+			this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false);
+			this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
+		}
+	},
+	
     highlightSpan:{
         value: function(){
-            this.element.classList.add("spanHighlight");
+        	// Class add/remove should only be done in draw cycle.
+            // this.element.classList.add("spanHighlight");
+            this.isHighlighted = true;
         }
+    },
+    
+    handleEasingChoiceClick: {
+    	value: function(event) {
+    		this.areChoicesVisible = true;
+    	}
+    },
+    handleEasingChoicesClick: {
+    	value: function(event) {
+    		this.areChoicesVisible = false;
+    	}
     }
 });
-- 
cgit v1.2.3