diff options
Diffstat (limited to 'node_modules/montage/ui/composer/translate-composer.js')
-rw-r--r-- | node_modules/montage/ui/composer/translate-composer.js | 641 |
1 files changed, 347 insertions, 294 deletions
diff --git a/node_modules/montage/ui/composer/translate-composer.js b/node_modules/montage/ui/composer/translate-composer.js index 6e762af9..86e6fb09 100644 --- a/node_modules/montage/ui/composer/translate-composer.js +++ b/node_modules/montage/ui/composer/translate-composer.js | |||
@@ -3,19 +3,24 @@ | |||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<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. | 4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
5 | </copyright> */ | 5 | </copyright> */ |
6 | /*global require,exports */ | ||
6 | /** | 7 | /** |
7 | @module montage/ui/composer/translate-composer | 8 | @module montage/ui/composer/translate-composer |
8 | @requires montage | 9 | @requires montage/core/core |
9 | @requires montage/ui/composer/composer | 10 | @requires montage/ui/composer/composer |
10 | */ | 11 | */ |
11 | var Montage = require("montage").Montage, | 12 | var Montage = require("montage").Montage, |
12 | Composer = require("ui/composer/composer").Composer, | 13 | Composer = require("ui/composer/composer").Composer, |
13 | defaultEventManager = require("core/event/event-manager").defaultEventManager; | 14 | defaultEventManager = require("core/event/event-manager").defaultEventManager; |
14 | /** | 15 | /** |
16 | Provides translateX and translateY properties that are updated when the | ||
17 | user clicks/touches and drags on the given element. Should be used wherever | ||
18 | a user interacts with an element by dragging it. | ||
19 | |||
15 | @class module:montage/ui/composer/translate-composer.TranslateComposer | 20 | @class module:montage/ui/composer/translate-composer.TranslateComposer |
16 | @extends module:montage/ui/composer/composer.Composer | 21 | @extends module:montage/ui/composer/composer.Composer |
17 | */ | 22 | */ |
18 | var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** @lends module:montage/ui/event/composer/translate-composer.TranslateComposer# */ { | 23 | var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** @lends module:montage/ui/composer/translate-composer.TranslateComposer# */ { |
19 | 24 | ||
20 | /** | 25 | /** |
21 | These elements perform some native action when clicked/touched and so we | 26 | These elements perform some native action when clicked/touched and so we |
@@ -53,11 +58,16 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** | |||
53 | value: 1 | 58 | value: 1 |
54 | }, | 59 | }, |
55 | 60 | ||
61 | /** | ||
62 | How many pixels to translate by for each pixel of cursor movement. | ||
63 | @type {Number} | ||
64 | @default 1 | ||
65 | */ | ||
56 | pointerSpeedMultiplier: { | 66 | pointerSpeedMultiplier: { |
57 | get: function () { | 67 | get: function() { |
58 | return this._pointerSpeedMultiplier; | 68 | return this._pointerSpeedMultiplier; |
59 | }, | 69 | }, |
60 | set: function (value) { | 70 | set: function(value) { |
61 | this._pointerSpeedMultiplier = value; | 71 | this._pointerSpeedMultiplier = value; |
62 | } | 72 | } |
63 | }, | 73 | }, |
@@ -76,33 +86,59 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** | |||
76 | value: false | 86 | value: false |
77 | }, | 87 | }, |
78 | 88 | ||
89 | _allowFloats: { | ||
90 | enumerable: false, | ||
91 | value: false | ||
92 | }, | ||
93 | /** | ||
94 | Allow (@link translateX} and {@link translateY} to be floats. | ||
95 | @type {Boolean} | ||
96 | @default false | ||
97 | */ | ||
98 | allowFloats: { | ||
99 | get: function() { | ||
100 | return this._allowFloats; | ||
101 | }, | ||
102 | set: function(value) { | ||
103 | if (this._allowFloats !== value) { | ||
104 | this._allowFloats = value; | ||
105 | this.translateX = this._translateX; | ||
106 | this.translateY = this._translateY; | ||
107 | } | ||
108 | } | ||
109 | }, | ||
110 | |||
79 | _translateX: { | 111 | _translateX: { |
80 | enumerable: false, | 112 | enumerable: false, |
81 | value: 0 | 113 | value: 0 |
82 | }, | 114 | }, |
83 | 115 | /** | |
116 | Amount of translation in the X (left/right) direction. Can be inverted with | ||
117 | {@link invertXAxis}, and restricted to a range with | ||
118 | {@link minTranslateX} and {@link maxTranslateX}. | ||
119 | @type {Number} | ||
120 | @default 0 | ||
121 | */ | ||
84 | translateX: { | 122 | translateX: { |
85 | get: function () { | 123 | get: function() { |
86 | return this._translateX; | 124 | return this._translateX; |
87 | }, | 125 | }, |
88 | set: function (value) { | 126 | set: function(value) { |
89 | if (this._axis==="vertical") { | 127 | if (this._axis === "vertical") { |
90 | this._translateX=0; | 128 | this._translateX = this._minTranslateX || 0; |
91 | } else { | 129 | } else { |
92 | var tmp=isNaN(value)?0:value>>0; | 130 | var tmp = isNaN(value) ? 0 : this._allowFloats ? parseFloat(value) : value >> 0; |
93 | 131 | ||
94 | if ((!this._hasBouncing)||(!this._isSelfUpdate)) { | 132 | if (this._minTranslateX !== null && tmp < this._minTranslateX) { |
95 | if (tmp<0) { | 133 | tmp = this._minTranslateX; |
96 | tmp=0; | ||
97 | } | ||
98 | if (tmp>this._maxTranslateX) { | ||
99 | tmp=this._maxTranslateX; | ||
100 | } | ||
101 | if (!this._isSelfUpdate) { | ||
102 | this.isAnimating = false; | ||
103 | } | ||
104 | } | 134 | } |
105 | this._translateX=tmp; | 135 | if (this._maxTranslateX !== null && tmp > this._maxTranslateX) { |
136 | tmp = this._maxTranslateX; | ||
137 | } | ||
138 | if (!this._isSelfUpdate) { | ||
139 | this.isAnimating = false; | ||
140 | } | ||
141 | this._translateX = tmp; | ||
106 | } | 142 | } |
107 | } | 143 | } |
108 | }, | 144 | }, |
@@ -111,77 +147,143 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** | |||
111 | enumerable: false, | 147 | enumerable: false, |
112 | value: 0 | 148 | value: 0 |
113 | }, | 149 | }, |
114 | 150 | /** | |
151 | Amount of translation in the Y (up/down) direction. Can be inverted with | ||
152 | {@link invertYAxis}, and restricted to a range with | ||
153 | {@link minTranslateY} and {@link maxTranslateY}. | ||
154 | @type {Number} | ||
155 | @default 0 | ||
156 | */ | ||
115 | translateY: { | 157 | translateY: { |
116 | get: function () { | 158 | get: function() { |
117 | return this._translateY; | 159 | return this._translateY; |
118 | }, | 160 | }, |
119 | set: function (value) { | 161 | set: function(value) { |
120 | if (this._axis==="horizontal") { | 162 | if (this._axis === "horizontal") { |
121 | this._translateY=0; | 163 | this._translateY = this._minTranslateY || 0; |
122 | } else { | 164 | } else { |
123 | var tmp=isNaN(value)?0:value>>0; | 165 | var tmp = isNaN(value) ? 0 : this._allowFloats ? parseFloat(value) : value >> 0; |
124 | 166 | ||
125 | if ((!this._hasBouncing)||(!this._isSelfUpdate)) { | 167 | if (this._minTranslateY !== null && tmp < this._minTranslateY) { |
126 | if (tmp<0) { | 168 | tmp = this._minTranslateY; |
127 | tmp=0; | 169 | } |
128 | } | 170 | if (this._maxTranslateY !== null && tmp > this._maxTranslateY) { |
129 | if (tmp>this._maxTranslateY) { | 171 | tmp = this._maxTranslateY; |
130 | tmp=this._maxTranslateY; | ||
131 | } | ||
132 | if (!this._isSelfUpdate) { | ||
133 | this.isAnimating = false; | ||
134 | } | ||
135 | } | 172 | } |
136 | this._translateY=tmp; | 173 | if (!this._isSelfUpdate) { |
174 | this.isAnimating = false; | ||
175 | } | ||
176 | this._translateY = tmp; | ||
137 | } | 177 | } |
138 | } | 178 | } |
139 | }, | 179 | }, |
140 | 180 | ||
141 | _maxTranslateX: { | 181 | _minTranslateX: { |
142 | enumerable: false, | 182 | enumerable: false, |
143 | value: 0 | 183 | value: null |
144 | }, | 184 | }, |
185 | /** | ||
186 | The minimum value {@link translateX} can take. If set to null then | ||
187 | there is no minimum. | ||
188 | @type {number|null} | ||
189 | @default null | ||
190 | */ | ||
191 | minTranslateX: { | ||
192 | get: function() { | ||
193 | return this._minTranslateX; | ||
194 | }, | ||
195 | set: function(value) { | ||
196 | if (value !== null) { | ||
197 | value = parseFloat(value); | ||