1 files changed, 170 insertions, 5 deletions

diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index bfa6aab8..91ce1cfb 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -4,8 +4,8 @@
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
 
-var Montage = require("montage/core/core").Montage;
-var Component = require("montage/ui/component").Component;
+var Montage = require("montage/core/core").Montage,
+        Component = require("montage/ui/component").Component;
 
 var Span = exports.Span = Montage.create(Component, {
 
@@ -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,181 @@ 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;
+                }
+        }
+    },
+    
+    _easing: {
+        value: "none"
+    },
+    easing: {
+        get: function() {
+                return this._easing;
+        },
+        set: function(newVal) {
+                if (newVal !== this._easing) {
+                        if (typeof(newVal) === "undefined") {
+                                newVal = "none";
+                        }
+                        this._easing = newVal;
+                        this.parentComponent.setKeyframeEase(newVal);
+                        this.needsDraw = true;
+                }
+        }
+    },
+        
+        // BEGIN: draw cycle
+        prepareForDraw: {
+                value: function() {
+                        this.init();
+                }
+        },
+        
     draw:{
         value: function(){
             this.element.style.width = this.spanWidth + "px";
+
+            if ((this.spanWidth <= 70) && (this.spanWidth >0)) {
+                var containerWidth = this.spanWidth -18,
+                        choiceWidth;
+                if (containerWidth < 0) {
+                        containerWidth = 0;
+                }
+                choiceWidth = containerWidth -3;
+                if (choiceWidth < 0) {
+                        choiceWidth = 0;
+                }
+                this.container_easing.style.width = containerWidth + "px";
+                this.easing_choice.style.width = choiceWidth + "px";
+                this.easing_choice.style.overflow = "hidden";
+            }
+                        if (this.spanWidth > 70) {
+                this.container_easing.setAttribute("style", "");
+                this.easing_choice.setAttribute("style", "");
+            }
+            
+            // 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";
+            }
+            */
+            
+            // Change easing?
+            if (this.easing_choice.innerText !== this.easing) {
+                this.easing_choice.innerText = this.easing;
+            }
+            
         }
     },
 
+        // 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) {
+                event.stopPropagation();
+                //this.areChoicesVisible = true;
+                this.application.ninja.timeline.easingMenu.anchor = this.easing_choice;
+                this.application.ninja.timeline.easingMenu.currentChoice = event.currentTarget.innerText;
+
+                function findPos(obj) {
+                        var objReturn = {};
+                        objReturn.top = 0;
+                        objReturn.left = 0;
+
+                                if (obj.offsetParent) {
+
+                                        do {
+                                                objReturn.left += obj.offsetLeft;
+                                                objReturn.top += obj.offsetTop;
+        
+                                        } while (obj = obj.offsetParent);
+                                }
+                                return objReturn;
+                        }
+                        var objPos = findPos(event.target);
+                this.application.ninja.timeline.easingMenu.top = objPos.top +38 - (this.application.ninja.timeline.layout_tracks.scrollTop);
+                this.application.ninja.timeline.easingMenu.left = objPos.left+18 - (this.application.ninja.timeline.layout_tracks.scrollLeft);
+                this.application.ninja.timeline.easingMenu.show();
+                this.application.ninja.timeline.easingMenu.callingComponent = this;
+        }
+    },
+    handleEasingChoicesClick: {
+        value: function(event) {
+                event.stopPropagation();
+                        
+                        // Remove the pointer to ourselves
+                        //this.application.ninja.timeline.currentOpenSpanMenu = false;
+                        
+                        // Un-highlight the old choice and highlight the new choice
+                this.application.ninja.timeline.easingMenu.popup.contentEl.querySelector(".easing-selected").classList.remove("easing-selected");
+                event.target.classList.add("easing-selected");
+                
+                // Set the easing 
+                this.easing = event.target.dataset.ninjaEase;
+                
+                // Unbind the event handler
+                this.application.ninja.timeline.easingMenu.popup.contentEl.removeEventListener("click");
+                
+                // Hide the menu.
+                this.hideEasingMenu();  
+        }
+    },
+    hideEasingMenu: {
+        value: function() {
+                //this.areChoicesVisible = false;
+                this.application.ninja.timeline.easingMenu.hide();
+        }
     }
 });