Timeline: More work on new easing menu.

3 files changed, 150 insertions, 14 deletions

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 */
+    
 });
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index bb8fdf03..44316469 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -150,31 +150,42 @@ var Span = exports.Span = Montage.create(Component, {
         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;
+                console.log(event);
+                this.application.ninja.timeline.easingMenu.top = 100;
+                this.application.ninja.timeline.easingMenu.left = 100;
                 this.application.ninja.timeline.easingMenu.show();
-
+                this.application.ninja.timeline.easingMenu.callingComponent = this;
         }
     },
     handleEasingChoicesClick: {
         value: function(event) {
                 event.stopPropagation();
+                
+                console.log("span.handleEasingChoicesClick")
                         
                         // Remove the pointer to ourselves
-                        this.application.ninja.timeline.currentOpenSpanMenu = false;
+                        //this.application.ninja.timeline.currentOpenSpanMenu = false;
                         
                         // Un-highlight the old choice and highlight the new choice
-                this.easing_choices.querySelector(".easing-selected").classList.remove("easing-selected");
+                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.areChoicesVisible = false;
+                this.application.ninja.timeline.easingMenu.hide();