diff options
Diffstat (limited to 'js/panels/Timeline/Span.reel/Span.js')
-rw-r--r-- | js/panels/Timeline/Span.reel/Span.js | 49 |
1 files changed, 49 insertions, 0 deletions
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 | } |