Timeline: New easing menu.

4 files changed, 75 insertions, 65 deletions

diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
index 006efd69..f0547e31 100644
--- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
+++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
@@ -92,12 +92,17 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
         }
     },
     
+    _isShown: {
+        value: false
+    },
+    
     /* End: Models */
     
     /* Begin: Draw Cycle */
     willDraw: {
         value: function() {
                 this.element.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
+                document.addEventListener("scroll", this.handleDocumentScroll.bind(this), false);
         }
     },
     
@@ -131,11 +136,8 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
             position.left = this.left;
             this.popup.position = position;
             this.popup.show();
+            this._isShow = true;
 
-
-            
-            
-            
             // Redraw the content (needed to reflect probable changes in selection from the last time we showed it)
             this.popup.content.needsDraw = true;
                 }
@@ -152,9 +154,17 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
                 this.callingComponent.easing = event.target.dataset.ninjaEase;
                 
                 // Hide the menu.
-                this.popup.hide();      
+                this.popup.hide();
+                this._isShow = false;
         }
-    }
+   },
+        handleDocumentScroll: {
+                value: function(event) {
+                        if (this._isShow = true) {
+                                this.popup.hide();
+                        }
+                }
+        }
     
     /* End: Controllers */
     
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index 44316469..7347ef51 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -152,9 +152,25 @@ var Span = exports.Span = Montage.create(Component, {
                 //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;
+
+                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;
         }
@@ -162,8 +178,6 @@ var Span = exports.Span = Montage.create(Component, {
     handleEasingChoicesClick: {
         value: function(event) {
                 event.stopPropagation();
-                
-                console.log("span.handleEasingChoicesClick")
                         
                         // Remove the pointer to ourselves
                         //this.application.ninja.timeline.currentOpenSpanMenu = false;
diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css
index e5cb4263..040379ea 100644
--- a/js/panels/Timeline/Span.reel/css/Span.css
+++ b/js/panels/Timeline/Span.reel/css/Span.css
@@ -27,11 +27,8 @@
   opacity: 0.4;
 }
 
-/*
- * Easing picker
- */
-/* line 42, ../scss/Span.scss */
-.container-easing {
+/* line 38, ../scss/Span.scss */
+.container-easing-choice {
   position: absolute;
   top: 2px;
   right: 8px;
@@ -42,65 +39,26 @@
   background-color: #474747;
 }
 
-/* line 54, ../scss/Span.scss */
-.container-easing,
-.container-easing .easing-choice,
-.container-easing .easing-choices {
+/* line 50, ../scss/Span.scss */
+.container-easing-choice,
+.container-easing-choice .easing-choice,
+.container-easing-choices .easing-choices {
+  font-size: 10px;
   width: 70px;
   white-space: nowrap;
 }
 
-/* line 59, ../scss/Span.scss */
-.container-easing,
-.container-easing .easing-choice {
+/* line 56, ../scss/Span.scss */
+.container-easing-choice,
+.container-easing-choice .easing-choice {
   height: 10px;
 }
 
-/* line 62, ../scss/Span.scss */
-.container-easing .easing-choice {
+/* line 59, ../scss/Span.scss */
+.container-easing-choice .easing-choice {
   position: absolute;
   top: 0px;
   left: 3px;
   width: 67px;
   cursor: pointer;
 }
-
-/* line 69, ../scss/Span.scss */
-.container-easing .easing-choices {
-  position: absolute;
-  display: none;
-  bottom: -1px;
-  left: -1px;
-  z-index: 100;
-  height: auto;
-  border: 1px solid black;
-  color: white;
-  background-color: #474747;
-  overflow: hidden;
-  list-style-type: none;
-  margin: 0px;
-  padding: 0px;
-}
-
-/* line 84, ../scss/Span.scss */
-.container-easing .easing-choices li {
-  list-style-type: none;
-  margin: 0px;
-  padding: 0px;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  padding-left: 3px;
-  cursor: pointer;
-}
-
-/* line 95, ../scss/Span.scss */
-.container-easing .easing-choices li:hover,
-.container-easing .easing-choices li.easing-selected {
-  color: #242424;
-  background-color: #b2b2b2;
-}
-
-/* line 99, ../scss/Span.scss */
-.container-easing .easing-choices li.easing-selected {
-  cursor: default;
-}
diff --git a/js/panels/Timeline/Span.reel/scss/Span.scss b/js/panels/Timeline/Span.reel/scss/Span.scss
index 6afb4780..31781f87 100644
--- a/js/panels/Timeline/Span.reel/scss/Span.scss
+++ b/js/panels/Timeline/Span.reel/scss/Span.scss
@@ -35,3 +35,31 @@
     opacity: 0.4;
 }
 
+.container-easing-choice {
+  position: absolute;
+  top: 2px;
+  right: 8px;
+  font-size: 10px;
+  line-height: 8px;
+  border: 1px solid $color-menu-border;
+  color: $color-menu-text;