diff options
author | Ananya Sen | 2012-06-21 11:07:11 -0700 |
---|---|---|
committer | Ananya Sen | 2012-06-21 11:07:11 -0700 |
commit | 6915d6607f2d768f363baed84287f6593925ae1e (patch) | |
tree | 306738165c11fab764a27c3e76d93c2e4d86f297 /js/panels/Timeline/EasingMenu.reel/EasingMenu.js | |
parent | 8db9e73ca68c006769af3997034959f6b7008add (diff) | |
parent | c8fc6d15e1570e89243abe527cd149e354f7e11f (diff) | |
download | ninja-6915d6607f2d768f363baed84287f6593925ae1e.tar.gz |
Merge branch 'refs/heads/ninja-internal-master' into cut-copy-paste
Diffstat (limited to 'js/panels/Timeline/EasingMenu.reel/EasingMenu.js')
-rw-r--r-- | js/panels/Timeline/EasingMenu.reel/EasingMenu.js | 180 |
1 files changed, 180 insertions, 0 deletions
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js new file mode 100644 index 00000000..ced3ae6a --- /dev/null +++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js | |||
@@ -0,0 +1,180 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | var Montage = require("montage/core/core").Montage, | ||
8 | Component = require("montage/ui/component").Component, | ||
9 | Popup = require("montage/ui/popup/popup.reel").Popup; | ||
10 | |||
11 | var EasingMenu = exports.EasingMenu = Montage.create(Component, { | ||
12 | |||
13 | hasTemplate:{ | ||
14 | value: true | ||
15 | }, | ||
16 | |||
17 | /* Begin: Models */ | ||
18 | |||
19 | // popup: the initialized component. | ||
20 | _popup: { | ||
21 | value: null | ||
22 | }, | ||
23 | popup: { | ||
24 | get: function() { | ||
25 | return this._popup; | ||
26 | }, | ||
27 | set: function(newVal) { | ||
28 | this._popup = newVal | ||
29 | } | ||
30 | }, | ||
31 | |||
32 | // callingComponent: pointer to the span that called for the menu | ||
33 | _callingComponent: { | ||
34 | value: null | ||
35 | }, | ||
36 | callingComponent: { | ||
37 | get: function() { | ||
38 | return this._callingComponent; | ||
39 | }, | ||
40 | set: function(newVal) { | ||
41 | this._callingComponent = newVal; | ||
42 | } | ||
43 | }, | ||
44 | |||
45 | // anchor: pointer to the anchoring element | ||
46 | _anchor: { | ||
47 | value: null | ||
48 | }, | ||
49 | anchor: { | ||
50 | get: function() { | ||
51 | return this._anchor; | ||
52 | }, | ||
53 | set: function(newVal) { | ||
54 | this._anchor = newVal; | ||
55 | } | ||
56 | }, | ||
57 | |||
58 | |||
59 | _top: { | ||
60 | value: null | ||
61 | }, | ||
62 | top: { | ||
63 | get: function() { | ||
64 | return this._top; | ||
65 | }, | ||
66 | set: function(newVal) { | ||
67 | this._top = newVal; | ||
68 | } | ||
69 | }, | ||
70 | _left: { | ||
71 | value: null | ||
72 | }, | ||
73 | left: { | ||
74 | get: function() { | ||
75 | return this._left; | ||
76 | }, | ||
77 | set: function(newVal) { | ||
78 | this._left = newVal; | ||
79 | } | ||
80 | }, | ||
81 | |||
82 | // currentChoice: The data attribute of the current choice | ||
83 | _currentChoice: { | ||
84 | value: "none" | ||
85 | }, | ||
86 | currentChoice: { | ||
87 | get: function() { | ||
88 | return this._currentChoice; | ||
89 | }, | ||
90 | set: function(newVal) { | ||
91 | this._currentChoice = newVal; | ||
92 | } | ||
93 | }, | ||
94 | |||
95 | _isShown: { | ||
96 | value: false | ||
97 | }, | ||
98 | |||
99 | /* End: Models */ | ||
100 | |||
101 | /* Begin: Draw Cycle */ | ||
102 | willDraw: { | ||
103 | value: function() { | ||
104 | this.element.addEventListener("click", this.handleEasingChoicesClick.bind(this), false); | ||
105 | document.addEventListener("scroll", this.handleDocumentScroll.bind(this), false); | ||
106 | } | ||
107 | }, | ||
108 | |||
109 | draw: { | ||
110 | value: function() { | ||
111 | // Update the selection classes. | ||
112 | var easingSelected = this.element.querySelector(".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 | } | ||
120 | } | ||
121 | }, | ||
122 | didDraw: { | ||
123 | value: function() { | ||
124 | } | ||
125 | }, | ||
126 | /* End Draw Cycle */ | ||
127 | |||
128 | /* Begin: Controllers */ | ||
129 | show: { | ||
130 | value: function() { | ||
131 | // Initialize the popup if it hasn't already been done | ||
132 | if (this.popup == null) { | ||
133 | this.popup = Popup.create(); | ||
134 | this.popup.modal = false; | ||
135 | this.popup.content = EasingMenu.create(); | ||
136 | } | ||
137 | |||
138 | // Show the popup | ||
139 | this.popup.anchor = this.anchor; | ||
140 | var position = {}; | ||
141 | position.top = this.top; | ||
142 | position.left = this.left; | ||
143 | this.popup.position = position; | ||
144 | this.popup.show(); | ||
145 | this._isShow = true; | ||
146 | |||
147 | // Redraw the content (needed to reflect probable changes in selection from the last time we showed it) | ||
148 | this.popup.content.needsDraw = true; | ||
149 | } | ||
150 | }, | ||
151 | handleEasingChoicesClick: { | ||
152 | value: function(event) { | ||
153 | event.stopPropagation(); | ||
154 | |||
155 | // Un-highlight the old choice and highlight the new choice | ||
156 | var easingSelected = this.element.querySelector(".easing-selected"); | ||
157 | if (easingSelected !== null) { | ||
158 | easingSelected.classList.remove("easing-selected"); | ||
159 | } | ||
160 | event.target.classList.add("easing-selected"); | ||
161 | |||
162 | // Set the easing in the span that called us | ||
163 | this.callingComponent.easing = event.target.dataset.ninjaEase; | ||
164 | |||
165 | // Hide the menu. | ||
166 | this.popup.hide(); | ||
167 | this._isShow = false; | ||
168 | } | ||
169 | }, | ||
170 | handleDocumentScroll: { | ||
171 | value: function(event) { | ||
172 | if (this._isShow = true) { | ||
173 | this.popup.hide(); | ||
174 | } | ||
175 | } | ||
176 | } | ||
177 | |||
178 | /* End: Controllers */ | ||
179 | |||
180 | }); | ||