diff options
Diffstat (limited to 'js/panels/Timeline/EasingMenu.reel')
| -rw-r--r-- | js/panels/Timeline/EasingMenu.reel/EasingMenu.html | 3 | ||||
| -rw-r--r-- | js/panels/Timeline/EasingMenu.reel/EasingMenu.js | 17 |
2 files changed, 15 insertions, 5 deletions
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.html b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html index 82218b45..1c8f808f 100644 --- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.html +++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html | |||
| @@ -23,8 +23,9 @@ | |||
| 23 | <body> | 23 | <body> |
| 24 | <div data-montage-id="container-easing-menu" class="container-easing-choices"> | 24 | <div data-montage-id="container-easing-menu" class="container-easing-choices"> |
| 25 | <ul data-montage-id="easing_choices" class="easing-choices"> | 25 | <ul data-montage-id="easing_choices" class="easing-choices"> |
| 26 | <li data-ninja-ease="none">none</li> | ||
| 26 | <li data-ninja-ease="ease">ease</li> | 27 | <li data-ninja-ease="ease">ease</li> |
| 27 | <li data-ninja-ease="ease-out" class="easing-selected">ease-out</li> | 28 | <li data-ninja-ease="ease-out">ease-out</li> |
| 28 | <li data-ninja-ease="ease-in">ease-in</li> | 29 | <li data-ninja-ease="ease-in">ease-in</li> |
| 29 | <li data-ninja-ease="ease-in-out">ease-in-out</li> | 30 | <li data-ninja-ease="ease-in-out">ease-in-out</li> |
| 30 | <li data-ninja-ease="linear">linear</li> | 31 | <li data-ninja-ease="linear">linear</li> |
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js index f0547e31..ced3ae6a 100644 --- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js +++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js | |||
| @@ -81,7 +81,7 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { | |||
| 81 | 81 | ||
| 82 | // currentChoice: The data attribute of the current choice | 82 | // currentChoice: The data attribute of the current choice |
| 83 | _currentChoice: { | 83 | _currentChoice: { |
| 84 | value: null | 84 | value: "none" |
| 85 | }, | 85 | }, |
| 86 | currentChoice: { | 86 | currentChoice: { |
| 87 | get: function() { | 87 | get: function() { |
| @@ -109,8 +109,14 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { | |||
| 109 | draw: { | 109 | draw: { |
| 110 | value: function() { | 110 | value: function() { |
| 111 | // Update the selection classes. | 111 | // Update the selection classes. |
| 112 | this.element.querySelector(".easing-selected").classList.remove("easing-selected"); | 112 | var easingSelected = this.element.querySelector(".easing-selected"); |
| 113 | this.element.querySelector('[data-ninja-ease="'+this.currentChoice+'"]').classList.add("easing-selected"); | 113 | if (easingSelected !== null) { |
| 114 | easingSelected.classList.remove("easing-selected"); | ||
| 115 | } | ||
| 116 | var dataEl = this.element.querySelector('[data-ninja-ease="'+this.currentChoice+'"]'); | ||
| 117 | if (dataEl !== null) { | ||
| 118 | dataEl.classList.add("easing-selected"); | ||
| 119 | } | ||
| 114 | } | 120 | } |
| 115 | }, | 121 | }, |
| 116 | didDraw: { | 122 | didDraw: { |
| @@ -147,7 +153,10 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { | |||
| 147 | event.stopPropagation(); | 153 | event.stopPropagation(); |
| 148 | 154 | ||
| 149 | // Un-highlight the old choice and highlight the new choice | 155 | // Un-highlight the old choice and highlight the new choice |
| 150 | this.element.querySelector(".easing-selected").classList.remove("easing-selected"); | 156 | var easingSelected = this.element.querySelector(".easing-selected"); |
| 157 | if (easingSelected !== null) { | ||
| 158 | easingSelected.classList.remove("easing-selected"); | ||
| 159 | } | ||
| 151 | event.target.classList.add("easing-selected"); | 160 | event.target.classList.add("easing-selected"); |
| 152 | 161 | ||
| 153 | // Set the easing in the span that called us | 162 | // Set the easing in the span that called us |