OLD | NEW |
---|---|
(Empty) | |
1 // Copyright 2014 The Chromium Authors. All rights reserved. | |
2 // Use of this source code is governed by a BSD-style license that can be | |
3 // found in the LICENSE file. | |
4 | |
5 /** | |
6 * Resize Mode | |
7 * | |
8 * @extends {ImageEditor.Mode} | |
9 * @constructor | |
10 * @struct | |
11 */ | |
12 ImageEditor.Mode.Resize = function() { | |
13 ImageEditor.Mode.call(this, 'resize', 'GALLERY_RESIZE'); | |
14 | |
15 /** @private {number} */ | |
16 this.imageWidth_ = 0; | |
17 | |
18 /** @private {number} */ | |
19 this.imageHeight_ = 0; | |
20 | |
21 /** @private {number} */ | |
22 this.maxValidWidth_ = 0; | |
23 | |
24 /** @private {number} */ | |
25 this.maxValidHeight_ = 0; | |
26 | |
27 /** @private {number} */ | |
28 this.widthInputValue_ = 0; | |
29 | |
30 /** @private {number} */ | |
31 this.heightInputValue_ = 0; | |
32 | |
33 /** @private {HTMLElement} */ | |
34 this.widthInputElement_ = null; | |
35 | |
36 /** @private {HTMLElement} */ | |
37 this.heightInputElement_ = null; | |
38 | |
39 /** @private {number} */ | |
40 this.ratio_ = 0; | |
41 | |
42 /** @private {boolean} */ | |
43 this.fixedRatio_ = true; | |
44 | |
45 /** @private {boolean} */ | |
46 this.showingAlertDialog_ = false; | |
47 | |
48 /** @private {FilesAlertDialog} */ | |
49 this.alertDialog_ = null; | |
50 }; | |
51 | |
52 /** @const {number} */ | |
53 ImageEditor.Mode.Resize.MINIMUM_VALID_VALUE = 1; | |
54 | |
55 /** @const {number} */ | |
56 ImageEditor.Mode.Resize.DEFAULT_MAX_VALID_VALUE = 10000; | |
57 | |
58 ImageEditor.Mode.Resize.prototype = { | |
59 __proto__ : ImageEditor.Mode.prototype | |
60 }; | |
61 | |
62 /** @override */ | |
63 ImageEditor.Mode.Resize.prototype.setUp = function() { | |
64 ImageEditor.Mode.prototype.setUp.apply(this, arguments); | |
65 | |
66 this.setDefault_(); | |
67 }; | |
68 | |
69 /** @override */ | |
70 ImageEditor.Mode.Resize.prototype.createTools = function(toolbar) { | |
71 this.widthInputElement_ = toolbar.addInput('width', 'GALLERY_WIDTH', | |
72 this.onInputChanged_.bind(this, 'width'), | |
73 this.widthInputValue_, 'px'); | |
74 | |
75 this.lockIcon_ = toolbar.addButton('GALLERY_FIXRATIO', | |
76 ImageEditor.Toolbar.ButtonType.ICON_TOGGLEABLE, | |
77 this.onLockIconClicked_.bind(this), 'lockicon'); | |
fukino
2016/09/16 02:24:49
4 space indent.
harukam
2016/09/16 05:21:59
Done.
| |
78 if(this.fixedRatio_) this.lockIcon_.setAttribute('locked', true); | |
fukino
2016/09/16 02:24:49
If the 'locked' is a boolean attribute, setAttribu
fukino
2016/09/16 02:24:49
if (this.fixedRatio_)
this.lockIcon_.setAttribut
harukam
2016/09/16 05:21:58
Done.
harukam
2016/09/16 05:21:59
Done.
| |
79 | |
80 this.heightInputElement_ = toolbar.addInput('height', 'GALLERY_HEIGHT', | |
81 this.onInputChanged_.bind(this, 'height'), | |
82 this.heightInputValue_, 'px'); | |
83 }; | |
84 | |
85 /** | |
86 * Handlers change events of width/height input element. | |
87 * @param {string} name Name | |
fukino
2016/09/16 02:24:49
Remove 'Name' or add informative description.
harukam
2016/09/16 05:21:59
Done.
| |
88 * @param {Event} event An event. | |
fukino
2016/09/16 02:24:49
ditto
harukam
2016/09/16 05:21:59
Done.
| |
89 * @private | |
90 */ | |
91 ImageEditor.Mode.Resize.prototype.onInputChanged_ = function( | |
92 name, event) { | |
93 | |
94 if(name !== 'height' && name !== 'width') | |
95 return; | |
96 | |
97 this.updateInputValues_(); | |
98 | |
99 function adjustToRatio() { | |
100 switch (name) { | |
101 case 'width': | |
102 var newHeight = Math.ceil(this.widthInputValue_ / this.ratio_); | |
103 if(this.isInputValidByName_('heigth', newHeight)) { | |
104 this.heightInputValue_ = newHeight; | |
105 this.setHeightInputValue_(); | |
106 } | |
107 break; | |
108 case 'height': | |
109 var newWidth = Math.ceil(this.heightInputValue_ * this.ratio_); | |
110 if(this.isInputValidByName_('width', newWidth)) { | |
111 this.widthInputValue_ = newWidth; | |
112 this.setWidthInputValue_(); | |
113 } | |
114 break; | |
115 } | |
116 } | |
117 | |
118 if(this.fixedRatio_ && this.isInputValidByName_(name)) | |
119 adjustToRatio.call(this); | |
120 }; | |
121 | |
122 /** | |
123 * Handlers change events of lock icon. | |
124 * @param {Event} event An event. | |
125 * @private | |
126 */ | |
127 ImageEditor.Mode.Resize.prototype.onLockIconClicked_ = function(event) { | |
128 if(this.fixedRatio_) | |
129 this.lockIcon_.removeAttribute('locked'); | |
fukino
2016/09/16 02:24:49
this line can be moved to:
if (toggled) {
...
}
harukam
2016/09/16 05:21:58
Acknowledged.
| |
130 var toggled = !this.fixedRatio_; | |
131 | |
132 if(toggled) { | |
133 this.initializeInputValues_(); | |
134 this.lockIcon_.setAttribute('locked', true); | |
fukino
2016/09/16 02:24:49
setAttribute('locked', '');
harukam
2016/09/16 05:21:59
Done.
| |
135 } | |
136 this.fixedRatio_ = toggled; | |
137 }; | |
138 | |
139 /** | |
140 * Set default values. | |
141 * @private | |
142 */ | |
143 ImageEditor.Mode.Resize.prototype.setDefault_ = function() { | |
144 var viewport = this.getViewport(); | |
145 assert(viewport); | |
146 | |
147 var rect = viewport.getImageBounds(); | |
148 this.imageWidth_ = rect.width; | |
149 this.imageHeight_ = rect.height; | |
150 | |
151 this.initializeInputValues_(); | |
152 | |
153 this.ratio_ = this.imageWidth_ / this.imageHeight_; | |
154 | |
155 this.maxValidWidth_ = Math.max( | |
156 this.imageWidth_, ImageEditor.Mode.Resize.DEFAULT_MAX_VALID_VALUE); | |
157 this.maxValidHeight_ = Math.max( | |
158 this.imageHeight_, ImageEditor.Mode.Resize.DEFAULT_MAX_VALID_VALUE); | |
159 }; | |
160 | |
161 /** | |
162 * Initialize width/height input values. | |
163 * @private | |
164 */ | |
165 ImageEditor.Mode.Resize.prototype.initializeInputValues_ = function() { | |
166 this.widthInputValue_ = this.imageWidth_; | |
167 this.setWidthInputValue_(); | |
168 | |
169 this.heightInputValue_ = this.imageHeight_; | |
170 this.setHeightInputValue_(); | |
171 }; | |
172 | |
173 /** | |
174 * Update input values to local variales. | |
175 * @private | |
176 */ | |
177 ImageEditor.Mode.Resize.prototype.updateInputValues_ = function() { | |
178 if(this.widthInputElement_) | |
179 this.widthInputValue_ = parseInt(this.widthInputElement_.getValue(), 10); | |
180 if(this.heightInputElement_) | |
181 this.heightInputValue_ = parseInt(this.heightInputElement_.getValue(), 10); | |
182 }; | |
183 | |
184 /** | |
185 * Apply local variables' change to width input element. | |
186 * @private | |
187 */ | |
188 ImageEditor.Mode.Resize.prototype.setWidthInputValue_ = function() { | |
189 if(this.widthInputElement_) | |
190 this.widthInputElement_.setValue(this.widthInputValue_); | |
191 }; | |
192 | |
193 /** | |
194 * Apply local variables' change to height input element. | |
195 * @private | |
196 */ | |
197 ImageEditor.Mode.Resize.prototype.setHeightInputValue_ = function() { | |
198 if(this.heightInputElement_) | |
199 this.heightInputElement_.setValue(this.heightInputValue_); | |
200 }; | |
201 | |
202 /** | |
203 * Check if the given name of input has a valid value. | |
204 * | |
205 * @param {string} name Name of input to check. | |
206 * @param {number=} opt_value Value to be checked. Local input's variable will | |
207 be checked if undefined. | |
208 * @return {boolean} True if the input | |
209 * @private | |
210 */ | |
211 ImageEditor.Mode.Resize.prototype.isInputValidByName_ = function( | |
212 name, opt_value) { | |
213 console.assert(name === 'height' || name === 'width'); | |
214 | |
215 var limit = name === 'width' ? this.maxValidWidth_ : this.maxValidHeight_; | |
216 var value = opt_value || | |
217 (name === 'width' ? this.widthInputValue_ : this.heightInputValue_); | |
218 | |
219 return ImageEditor.Mode.Resize.MINIMUM_VALID_VALUE <= value && value <= limit; | |
220 }; | |
221 | |
222 /** | |
223 * Check if width/height input values are valid. | |
224 * @return {boolean} true if both values are valid. | |
225 */ | |
226 ImageEditor.Mode.Resize.prototype.isInputValid = function() { | |
227 return this.isInputValidByName_('width') && | |
228 this.isInputValidByName_('height'); | |
229 }; | |
230 | |
231 /** | |
232 * Show alert dialog only if input value is invalid. | |
233 */ | |
234 ImageEditor.Mode.Resize.prototype.showAlertDialog = function() { | |
235 if(this.isInputValid() || this.showingAlertDialog_) | |
236 return; | |
237 | |
238 this.alertDialog_ = this.alertDialog_ || | |
239 new FilesAlertDialog(/** @type {!HTMLElement} */ (document.body)); | |
240 this.showingAlertDialog_ = true; | |
241 this.alertDialog_.showWithTitle('', strf('GALLERY_INVALIDVALUE'), | |
242 function() { | |
243 this.initializeInputValues_(); | |
244 this.showingAlertDialog_ = false; | |
245 }.bind(this), null, null); | |
246 }; | |
247 | |
248 /** | |
249 * @return {boolean} True when showing an alert dialog. | |
250 * @override | |
251 */ | |
252 ImageEditor.Mode.Resize.prototype.isConsumingKeyEvents = function() { | |
253 return this.showingAlertDialog_; | |
254 }; | |
255 | |
256 /** @override */ | |
257 ImageEditor.Mode.Resize.prototype.cleanUpUI = function() { | |
258 ImageEditor.Mode.prototype.cleanUpUI.apply(this, arguments); | |
259 | |
260 if(this.showingAlertDialog_) { | |
261 this.alertDialog_.hide(); | |
262 this.showingAlertDialog_ = false; | |
263 } | |
264 }; | |
265 | |
266 /** @override */ | |
267 ImageEditor.Mode.Resize.prototype.reset = function() { | |
268 ImageEditor.Mode.prototype.reset.call(this); | |
269 | |
270 this.setDefault_(); | |
271 }; | |
272 | |
273 /** @override */ | |
274 ImageEditor.Mode.Resize.prototype.getCommand = function() { | |
275 return new Command.Resize(this.widthInputValue_, this.heightInputValue_); | |
276 }; | |
OLD | NEW |