diff options
Diffstat (limited to 'js/panels')
-rw-r--r-- | js/panels/Timeline/Keyframe.reel/Keyframe.js | 1 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/Span.html | 11 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/Span.js | 49 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/css/Span.css | 27 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/scss/Span.scss | 16 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 1 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 3 |
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 |