aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
diff options
context:
space:
mode:
authorAnanya Sen2012-06-21 11:07:11 -0700
committerAnanya Sen2012-06-21 11:07:11 -0700
commit6915d6607f2d768f363baed84287f6593925ae1e (patch)
tree306738165c11fab764a27c3e76d93c2e4d86f297 /js/panels/Timeline/EasingMenu.reel/EasingMenu.js
parent8db9e73ca68c006769af3997034959f6b7008add (diff)
parentc8fc6d15e1570e89243abe527cd149e354f7e11f (diff)
downloadninja-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.js180
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
7var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component,
9 Popup = require("montage/ui/popup/popup.reel").Popup;
10
11var 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});