aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js1
-rw-r--r--js/panels/Timeline/Span.reel/Span.html11
-rw-r--r--js/panels/Timeline/Span.reel/Span.js49
-rw-r--r--js/panels/Timeline/Span.reel/css/Span.css27
-rw-r--r--js/panels/Timeline/Span.reel/scss/Span.scss16
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js1
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js3
7 files changed, 96 insertions, 12 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index 52302319..41eb6ef1 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -91,6 +91,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
91 } 91 }
92 } 92 }
93 this.parentComponent.parentComponent.parentComponent.draggingIndex = myIndex; 93 this.parentComponent.parentComponent.parentComponent.draggingIndex = myIndex;
94 this.selectKeyframe();
94 } 95 }
95 }, 96 },
96 handleDragend: { 97 handleDragend: {
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 @@
29 <div class="tween_span_bar"></div> 29 <div class="tween_span_bar"></div>
30 <div data-montage-id="container_easing" class="container-easing"> 30 <div data-montage-id="container_easing" class="container-easing">
31 <div data-montage-id="easing_choice" class="easing-choice"> 31 <div data-montage-id="easing_choice" class="easing-choice">
32 ease-in-out 32 ease-out
33 </div> 33 </div>
34 <ul data-montage-id="easing_choices" class="easing-choices"> 34 <ul data-montage-id="easing_choices" class="easing-choices">
35 <li>choice 1</li> 35 <li data-ninja-ease="ease">ease</li>
36 <li>choice 2</li> 36 <li data-ninja-ease="ease-out" class="easing-selected">ease-out</li>
37 <li>choice 3</li> 37 <li data-ninja-ease="ease-in">ease-in</li>
38 <li>choice 4</li> 38 <li data-ninja-ease="ease-in-out">ease-in-out</li>
39 <li data-ninja-ease="linear">linear</li>
39 </ul> 40 </ul>
40 </div> 41 </div>
41 </div> 42 </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, {
57 } 57 }
58 } 58 }
59 }, 59 },
60
61 _easing: {
62 value: "ease-in"
63 },
64 easing: {
65 get: function() {
66 return this._easing;
67 },
68 set: function(newVal) {
69 if (newVal !== this._easing) {
70 this._easing = newVal;
71 this.parentComponent.setKeyframeEase(newVal);
72 this.needsDraw = true;
73 }
74 }
75 },
60 76
61 // BEGIN: draw cycle 77 // BEGIN: draw cycle
62 prepareForDraw: { 78 prepareForDraw: {
@@ -67,7 +83,27 @@ var Span = exports.Span = Montage.create(Component, {
67 83
68 draw:{ 84 draw:{
69 value: function(){ 85 value: function(){
86
70 this.element.style.width = this.spanWidth + "px"; 87 this.element.style.width = this.spanWidth + "px";
88
89 if ((this.spanWidth <= 70) && (this.spanWidth >0)) {
90 var containerWidth = this.spanWidth -18,
91 choiceWidth;
92 if (containerWidth < 0) {
93 containerWidth = 0;
94 }
95 choiceWidth = containerWidth -3;
96 if (choiceWidth < 0) {
97 choiceWidth = 0;
98 }
99 this.container_easing.style.width = containerWidth + "px";
100 this.easing_choice.style.width = choiceWidth + "px";
101 this.easing_choice.style.overflow = "hidden";
102 }
103 if (this.spanWidth > 70) {
104 this.container_easing.setAttribute("style", "");
105 this.easing_choice.setAttribute("style", "");
106 }
71 107
72 // Highlight the span? 108 // Highlight the span?
73 if (this.isHighlighted === true) { 109 if (this.isHighlighted === true) {
@@ -82,6 +118,12 @@ var Span = exports.Span = Montage.create(Component, {
82 } else { 118 } else {
83 this.easing_choices.style.display = "none"; 119 this.easing_choices.style.display = "none";
84 } 120 }
121
122 // Change easing?
123 if (this.easing_choice.innerText !== this.easing) {
124 this.easing_choice.innerText = this.easing;
125 }
126
85 } 127 }
86 }, 128 },
87 129
@@ -90,6 +132,7 @@ var Span = exports.Span = Montage.create(Component, {
90 value: function() { 132 value: function() {
91 this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false); 133 this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false);
92 this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false); 134 this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
135
93 } 136 }
94 }, 137 },
95 138
@@ -108,6 +151,12 @@ var Span = exports.Span = Montage.create(Component, {
108 }, 151 },
109 handleEasingChoicesClick: { 152 handleEasingChoicesClick: {
110 value: function(event) { 153 value: function(event) {
154
155 this.easing_choices.querySelector(".easing-selected").classList.remove("easing-selected");
156 event.target.classList.add("easing-selected");
157 this.easing = event.target.dataset.ninjaEase;
158
159 // Which element was just
111 this.areChoicesVisible = false; 160 this.areChoicesVisible = false;
112 } 161 }
113 } 162 }
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 @@
34.container-easing { 34.container-easing {
35 position: absolute; 35 position: absolute;
36 top: 2px; 36 top: 2px;
37 right: 6px; 37 right: 8px;
38 font-size: 10px; 38 font-size: 10px;
39 line-height: 8px; 39 line-height: 8px;
40 border: 1px solid black; 40 border: 1px solid black;
@@ -47,15 +47,16 @@
47.container-easing .easing-choice, 47.container-easing .easing-choice,
48.container-easing .easing-choices { 48.container-easing .easing-choices {
49 width: 70px; 49 width: 70px;
50 white-space: nowrap;
50} 51}
51 52
52/* line 58, ../scss/Span.scss */ 53/* line 59, ../scss/Span.scss */
53.container-easing, 54.container-easing,
54.container-easing .easing-choice { 55.container-easing .easing-choice {
55 height: 10px; 56 height: 10px;
56} 57}
57 58
58/* line 61, ../scss/Span.scss */ 59/* line 62, ../scss/Span.scss */
59.container-easing .easing-choice { 60.container-easing .easing-choice {
60 position: absolute; 61 position: absolute;
61 top: 0px; 62 top: 0px;
@@ -64,7 +65,7 @@
64 cursor: pointer; 65 cursor: pointer;
65} 66}
66 67
67/* line 68, ../scss/Span.scss */ 68/* line 69, ../scss/Span.scss */
68.container-easing .easing-choices { 69.container-easing .easing-choices {
69 position: absolute; 70 position: absolute;
70 display: none; 71 display: none;
@@ -81,9 +82,25 @@
81 padding: 0px; 82 padding: 0px;
82} 83}
83 84
84/* line 83, ../scss/Span.scss */ 85/* line 84, ../scss/Span.scss */
85.container-easing .easing-choices li { 86.container-easing .easing-choices li {
86 list-style-type: none; 87 list-style-type: none;
87 margin: 0px; 88 margin: 0px;
88 padding: 0px; 89 padding: 0px;
90 padding-top: 2px;
91 padding-bottom: 2px;
92 padding-left: 3px;
93 cursor: pointer;
94}
95
96/* line 95, ../scss/Span.scss */
97.container-easing .easing-choices li:hover,
98.container-easing .easing-choices li.easing-selected {
99 color: #242424;
100 background-color: #b2b2b2;
101}
102
103/* line 99, ../scss/Span.scss */
104.container-easing .easing-choices li.easing-selected {
105 cursor: default;
89} 106}
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 @@
42.container-easing { 42.container-easing {
43 position: absolute; 43 position: absolute;
44 top: 2px; 44 top: 2px;
45 right: 6px;