diff options
Diffstat (limited to 'js/panels/Timeline/EasingMenu.reel/EasingMenu.js')
-rw-r--r-- | js/panels/Timeline/EasingMenu.reel/EasingMenu.js | 228 |
1 files changed, 114 insertions, 114 deletions
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js index 6d41afb0..84e1efb1 100644 --- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js +++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js | |||
@@ -29,8 +29,8 @@ POSSIBILITY OF SUCH DAMAGE. | |||
29 | </copyright> */ | 29 | </copyright> */ |
30 | 30 | ||
31 | var Montage = require("montage/core/core").Montage, | 31 | var Montage = require("montage/core/core").Montage, |
32 | Component = require("montage/ui/component").Component, | 32 | Component = require("montage/ui/component").Component, |
33 | Popup = require("montage/ui/popup/popup.reel").Popup; | 33 | Popup = require("montage/ui/popup/popup.reel").Popup; |
34 | 34 | ||
35 | var EasingMenu = exports.EasingMenu = Montage.create(Component, { | 35 | var EasingMenu = exports.EasingMenu = Montage.create(Component, { |
36 | 36 | ||
@@ -38,127 +38,127 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { | |||
38 | value: true | 38 | value: true |
39 | }, | 39 | }, |
40 | 40 | ||
41 | /* Begin: Models */ | 41 | /* Begin: Models */ |
42 | 42 | ||
43 | // popup: the initialized component. | 43 | // popup: the initialized component. |
44 | _popup: { | 44 | _popup: { |
45 | value: null | 45 | value: null |
46 | }, | 46 | }, |
47 | popup: { | 47 | popup: { |
48 | get: function() { | 48 | get: function() { |
49 | return this._popup; | 49 | return this._popup; |
50 | }, | 50 | }, |
51 | set: function(newVal) { | 51 | set: function(newVal) { |
52 | this._popup = newVal | 52 | this._popup = newVal |
53 | } | 53 | } |
54 | }, | 54 | }, |
55 | 55 | ||
56 | // callingComponent: pointer to the span that called for the menu | 56 | // callingComponent: pointer to the span that called for the menu |
57 | _callingComponent: { | 57 | _callingComponent: { |
58 | value: null | 58 | value: null |
59 | }, | 59 | }, |
60 | callingComponent: { | 60 | callingComponent: { |
61 | get: function() { | 61 | get: function() { |
62 | return this._callingComponent; | 62 | return this._callingComponent; |
63 | }, | 63 | }, |
64 | set: function(newVal) { | 64 | set: function(newVal) { |
65 | this._callingComponent = newVal; | 65 | this._callingComponent = newVal; |
66 | } | 66 | } |
67 | }, | 67 | }, |
68 | 68 | ||
69 | // anchor: pointer to the anchoring element | 69 | // anchor: pointer to the anchoring element |
70 | _anchor: { | 70 | _anchor: { |
71 | value: null | 71 | value: null |
72 | }, | 72 | }, |
73 | anchor: { | 73 | anchor: { |
74 | get: function() { | 74 | get: function() { |
75 | return this._anchor; | 75 | return this._anchor; |
76 | }, | 76 | }, |
77 | set: function(newVal) { | 77 | set: function(newVal) { |
78 | this._anchor = newVal; | 78 | this._anchor = newVal; |
79 | } | 79 | } |
80 | }, | 80 | }, |
81 | 81 | ||
82 | 82 | ||
83 | _top: { | 83 | _top: { |
84 | value: null | 84 | value: null |
85 | }, | 85 | }, |
86 | top: { | 86 | top: { |
87 | get: function() { | 87 | get: function() { |
88 | return this._top; | 88 | return this._top; |
89 | }, | 89 | }, |
90 | set: function(newVal) { | 90 | set: function(newVal) { |
91 | this._top = newVal; | 91 | this._top = newVal; |
92 | } | 92 | } |
93 | }, | 93 | }, |
94 | _left: { | 94 | _left: { |
95 | value: null | 95 | value: null |
96 | }, | 96 | }, |
97 | left: { | 97 | left: { |
98 | get: function() { | 98 | get: function() { |
99 | return this._left; | 99 | return this._left; |
100 | }, | 100 | }, |
101 | set: function(newVal) { | 101 | set: function(newVal) { |
102 | this._left = newVal; | 102 | this._left = newVal; |
103 | } | 103 | } |
104 | }, | 104 | }, |
105 | 105 | ||
106 | // currentChoice: The data attribute of the current choice | 106 | // currentChoice: The data attribute of the current choice |
107 | _currentChoice: { | 107 | _currentChoice: { |
108 | value: "none" | 108 | value: "none" |
109 | }, | 109 | }, |
110 | currentChoice: { | 110 | currentChoice: { |
111 | get: function() { | 111 | get: function() { |
112 | return this._currentChoice; | 112 | return this._currentChoice; |
113 | }, | 113 | }, |
114 | set: function(newVal) { | 114 | set: function(newVal) { |
115 | this._currentChoice = newVal; | 115 | this._currentChoice = newVal; |
116 | } | 116 | } |
117 | }, | 117 | }, |
118 | 118 | ||
119 | _isShown: { | 119 | _isShown: { |
120 | value: false | 120 | value: false |
121 | }, | 121 | }, |
122 | 122 | ||
123 | /* End: Models */ | 123 | /* End: Models */ |
124 | 124 | ||
125 | /* Begin: Draw Cycle */ | 125 | /* Begin: Draw Cycle */ |
126 | willDraw: { | 126 | willDraw: { |
127 | value: function() { | 127 | value: function() { |
128 | this.element.addEventListener("click", this.handleEasingChoicesClick.bind(this), false); | 128 | this.element.addEventListener("click", this.handleEasingChoicesClick.bind(this), false); |
129 | document.addEventListener("scroll", this.handleDocumentScroll.bind(this), false); | 129 | document.addEventListener("scroll", this.handleDocumentScroll.bind(this), false); |
130 | } | 130 | } |
131 | }, | 131 | }, |
132 | 132 | ||
133 | draw: { | 133 | draw: { |
134 | value: function() { | 134 | value: function() { |
135 | // Update the selection classes. | 135 | // Update the selection classes. |
136 | var easingSelected = this.element.querySelector(".easing-selected"); | 136 | var easingSelected = this.element.querySelector(".easing-selected"); |
137 | if (easingSelected !== null) { | 137 | if (easingSelected !== null) { |
138 | easingSelected.classList.remove("easing-selected"); | 138 | easingSelected.classList.remove("easing-selected"); |
139 | } | 139 | } |
140 | var dataEl = this.element.querySelector('[data-ninja-ease="'+this.currentChoice+'"]'); | 140 | var dataEl = this.element.querySelector('[data-ninja-ease="'+this.currentChoice+'"]'); |
141 | if (dataEl !== null) { | 141 | if (dataEl !== null) { |
142 | dataEl.classList.add("easing-selected"); | 142 | dataEl.classList.add("easing-selected"); |
143 | } | 143 | } |
144 | } | 144 | } |
145 | }, | 145 | }, |
146 | didDraw: { | 146 | didDraw: { |
147 | value: function() { | 147 | value: function() { |
148 | } | 148 | } |
149 | }, | 149 | }, |
150 | /* End Draw Cycle */ | 150 | /* End Draw Cycle */ |
151 | 151 | ||
152 | /* Begin: Controllers */ | 152 | /* Begin: Controllers */ |
153 | show: { | 153 | show: { |
154 | value: function() { | 154 | value: function() { |
155 | // Initialize the popup if it hasn't already been done | 155 | // Initialize the popup if it hasn't already been done |
156 | if (this.popup == null) { | 156 | if (this.popup == null) { |
157 | this.popup = Popup.create(); | 157 | this.popup = Popup.create(); |
158 | this.popup.modal = false; | 158 | this.popup.modal = false; |
159 | this.popup.content = EasingMenu.create(); | 159 | this.popup.content = EasingMenu.create(); |
160 | } | 160 | } |
161 | 161 | ||
162 | // Show the popup | 162 | // Show the popup |
163 | this.popup.anchor = this.anchor; | 163 | this.popup.anchor = this.anchor; |
164 | var position = {}; | 164 | var position = {}; |
@@ -170,35 +170,35 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { | |||
170 | 170 | ||
171 | // Redraw the content (needed to reflect probable changes in selection from the last time we showed it) | 171 | // Redraw the content (needed to reflect probable changes in selection from the last time we showed it) |
172 | this.popup.content.needsDraw = true; | 172 | this.popup.content.needsDraw = true; |
173 | } | 173 | } |
174 | }, | 174 | }, |
175 | handleEasingChoicesClick: { | 175 | handleEasingChoicesClick: { |
176 | value: function(event) { |