Timeline: Easing selection per keyframe.

4 files changed, 92 insertions, 11 deletions

diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html
index d6c359ad..a1f3afeb 100644
--- a/js/panels/Timeline/Span.reel/Span.html
+++ b/js/panels/Timeline/Span.reel/Span.html
@@ -29,13 +29,14 @@
                 <div class="tween_span_bar"></div>
                 <div data-montage-id="container_easing" class="container-easing">
                         <div data-montage-id="easing_choice" class="easing-choice">
-                                ease-in-out
+                                ease-out
                         </div>
                         <ul data-montage-id="easing_choices" class="easing-choices">
-                                <li>choice 1</li>
-                                <li>choice 2</li>
-                                <li>choice 3</li>
-                                <li>choice 4</li>
+                                <li data-ninja-ease="ease">ease</li>
+                                <li data-ninja-ease="ease-out" class="easing-selected">ease-out</li>
+                                <li data-ninja-ease="ease-in">ease-in</li>
+                                <li data-ninja-ease="ease-in-out">ease-in-out</li>
+                                <li data-ninja-ease="linear">linear</li>
                         </ul>
                 </div>
         </div>
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index e5894500..1ab3455c 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -57,6 +57,22 @@ var Span = exports.Span = Montage.create(Component, {
                 }
         }
     },
+    
+    _easing: {
+        value: "ease-in"
+    },
+    easing: {
+        get: function() {
+                return this._easing;
+        },
+        set: function(newVal) {
+                if (newVal !== this._easing) {
+                        this._easing = newVal;
+                        this.parentComponent.setKeyframeEase(newVal);
+                        this.needsDraw = true;
+                }
+        }
+    },
         
         // BEGIN: draw cycle
         prepareForDraw: {
@@ -67,7 +83,27 @@ var Span = exports.Span = Montage.create(Component, {
         
     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) {
@@ -82,6 +118,12 @@ var Span = exports.Span = Montage.create(Component, {
             } else {
                 this.easing_choices.style.display = "none";
             }
+            
+            // Change easing?
+            if (this.easing_choice.innerText !== this.easing) {
+                this.easing_choice.innerText = this.easing;
+            }
+            
         }
     },
 
@@ -90,6 +132,7 @@ var Span = exports.Span = Montage.create(Component, {
                 value: function() {
                         this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false);
                         this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
+
                 }
         },
         
@@ -108,6 +151,12 @@ var Span = exports.Span = Montage.create(Component, {
     },
     handleEasingChoicesClick: {
         value: function(event) {
+
+                this.easing_choices.querySelector(".easing-selected").classList.remove("easing-selected");
+                event.target.classList.add("easing-selected");
+                this.easing = event.target.dataset.ninjaEase;
+
+                // Which element was just 
                 this.areChoicesVisible = false;
         }
     }
diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css
index 16f931b2..e5cb4263 100644
--- a/js/panels/Timeline/Span.reel/css/Span.css
+++ b/js/panels/Timeline/Span.reel/css/Span.css
@@ -34,7 +34,7 @@
 .container-easing {
   position: absolute;
   top: 2px;
-  right: 6px;
+  right: 8px;
   font-size: 10px;
   line-height: 8px;
   border: 1px solid black;
@@ -47,15 +47,16 @@
 .container-easing .easing-choice,
 .container-easing .easing-choices {
   width: 70px;
+  white-space: nowrap;
 }
 
-/* line 58, ../scss/Span.scss */
+/* line 59, ../scss/Span.scss */
 .container-easing,
 .container-easing .easing-choice {
   height: 10px;
 }
 
-/* line 61, ../scss/Span.scss */
+/* line 62, ../scss/Span.scss */
 .container-easing .easing-choice {
   position: absolute;
   top: 0px;
@@ -64,7 +65,7 @@
   cursor: pointer;
 }
 
-/* line 68, ../scss/Span.scss */
+/* line 69, ../scss/Span.scss */
 .container-easing .easing-choices {
   position: absolute;
   display: none;
@@ -81,9 +82,25 @@
   padding: 0px;
 }
 
-/* line 83, ../scss/Span.scss */
+/* 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 a39cf465..b3aff4d2 100644
--- a/js/panels/Timeline/Span.reel/scss/Span.scss
+++ b/js/panels/Timeline/Span.reel/scss/Span.scss
@@ -42,7 +42,7 @@
 .container-easing {
         position: absolute;
         top: 2px;
-        right: 6px;
+        right: 8px;
         font-size: 10px;
         line-height: 8px;
         border: 1px solid $color-menu-border;
@@ -53,6 +53,7 @@
 .container-easing .easing-choice,
 .container-easing .easing-choices {
         width: 70px;
+        white-space: nowrap;
 }