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 | |
49 /** @const {number} */ | |
50 ImageEditor.Mode.Resize.MINIMUM_VALID_VALUE = 1; | |
51 | |
52 /** @const {number} */ | |
53 ImageEditor.Mode.Resize.DEFAULT_MAX_VALID_VALUE = 10000; | |
54 | |
55 ImageEditor.Mode.Resize.prototype = { | |
56 __proto__ : ImageEditor.Mode.prototype | |
57 }; | |
58 | |
59 /** @override */ | |
60 ImageEditor.Mode.Resize.prototype.setUp = function() { | |
61 ImageEditor.Mode.prototype.setUp.apply(this, arguments); | |
62 | |
63 this.setDefault_(); | |
64 }; | |
65 | |
66 /** @override */ | |
67 ImageEditor.Mode.Resize.prototype.createTools = function(toolbar) { | |
68 this.widthInputElement_ = toolbar.addInput('width', 'GALLERY_WIDTH', | |
69 this.onInputChanged_.bind(this, 'width'), | |
fukino
2016/09/06 10:50:35
indent should be 4.
harukam
2016/09/09 10:37:42
Thanks, done.
| |
70 this.onInputBlurred_.bind(this, 'width'), | |
71 this.widthInputValue_, 'px'); | |
72 this.heightInputElement_ = toolbar.addInput('height', 'GALLERY_HEIGHT', | |
73 this.onInputChanged_.bind(this, 'height'), | |
fukino
2016/09/06 10:50:35
ditto
harukam
2016/09/09 10:37:42
Done.
| |
74 this.onInputBlurred_.bind(this, 'height'), | |
75 this.heightInputValue_, 'px'); | |
76 toolbar.addCheckbox('ratio-fixed', 'GALLERY_FIXRATIO', | |
77 this.onCheckBoxChanged_.bind(this), this.fixedRatio_); | |
fukino
2016/09/06 10:50:35
ditto
harukam
2016/09/09 10:37:43
Done.
| |
78 }; | |
79 | |
80 /** | |
81 * Handlers change events of width/height input element. | |
82 * @param {string} name Name | |
83 * @param {Event} event An event. | |
84 * @private | |
85 */ | |
86 ImageEditor.Mode.Resize.prototype.onInputChanged_ = function( | |
87 name, event) { | |
88 | |
89 if(name !== 'height' && name !== 'width') | |
90 return; | |
91 | |
92 this.updateInputValues_(); | |
93 | |
94 function adjustToRatio() { | |
95 switch (name) { | |
96 case 'width': | |
97 var newHeight = this.widthInputValue_ / this.ratio_; | |
98 this.heightInputValue_ = Math.floor(newHeight); | |
99 this.setHeightInputValue_(); | |
100 break; | |
101 case 'height': | |
102 var newWidth = this.heightInputValue_ * this.ratio_; | |
103 this.widthInputValue_ = Math.floor(newWidth); | |
104 this.setWidthInputValue_(); | |
105 break; | |
106 } | |
107 } | |
108 | |
109 if(this.fixedRatio_ && this.isInputValid()) | |
110 adjustToRatio.call(this); | |
111 }; | |
112 | |
113 /** | |
114 * Handlers blur events of width/height input element. | |
115 * @param {string} name Name | |
116 * @param {Event} event An event. | |
117 * @private | |
118 */ | |
119 ImageEditor.Mode.Resize.prototype.onInputBlurred_ = function( | |
120 name, event) { | |
121 | |
122 if(name !== 'height' && name !== 'width') | |
123 return; | |
124 | |
125 if(!this.isInputValid()) { | |
126 this.showAlertDialog(); | |
127 } | |
128 } | |
129 | |
130 /** | |
131 * Handlers change events of fixed-ratio checkbox. | |
132 * @param {Event} event An event. | |
133 * @private | |
134 */ | |
135 ImageEditor.Mode.Resize.prototype.onCheckBoxChanged_ = function(event) { | |
136 var checked = event.target.checked; | |
137 | |
138 if(!this.fixedRatio_ && checked) | |
139 this.initializeInputValues_(); | |
140 | |
141 this.fixedRatio_ = checked; | |
142 }; | |
143 | |
144 /** | |
145 * Set default values. | |
146 * @private | |
147 */ | |
148 ImageEditor.Mode.Resize.prototype.setDefault_ = function() { | |
149 var viewport = this.getViewport(); | |
150 assert(viewport); | |
151 | |
152 var rect = viewport.getImageBounds(); | |
153 this.imageWidth_ = rect.width; | |
154 this.imageHeight_ = rect.height; | |
155 | |
156 this.initializeInputValues_(); | |
157 | |
158 this.ratio_ = this.imageWidth_ / this.imageHeight_; | |
159 | |
160 this.maxValidWidth_ = Math.max( | |
161 this.imageWidth_, ImageEditor.Mode.Resize.DEFAULT_MAX_VALID_VALUE); | |
162 this.maxValidHeight_ = Math.max( | |
163 this.imageHeight_, ImageEditor.Mode.Resize.DEFAULT_MAX_VALID_VALUE); | |
164 }; | |
165 | |
166 /** | |
167 * Initialize width/height input values. | |
168 * @private | |
169 */ | |
170 ImageEditor.Mode.Resize.prototype.initializeInputValues_ = function() { | |
171 this.widthInputValue_ = this.imageWidth_; | |
172 this.setWidthInputValue_(); | |
173 | |
174 this.heightInputValue_ = this.imageHeight_; | |
175 this.setHeightInputValue_(); | |
176 }; | |
177 | |
178 /** | |
179 * Update input values to local variales. | |
180 * @private | |
181 */ | |
182 ImageEditor.Mode.Resize.prototype.updateInputValues_ = function() { | |
183 if(this.widthInputElement_) | |
184 this.widthInputValue_ = parseInt(this.widthInputElement_.getValue(), 10); | |
185 if(this.heightInputElement_) | |
186 this.heightInputValue_ = parseInt(this.heightInputElement_.getValue(), 10); | |
187 }; | |
188 | |
189 /** | |
190 * Apply local variables' change to width input element. | |
191 * @private | |
192 */ | |
193 ImageEditor.Mode.Resize.prototype.setWidthInputValue_ = function() { | |
194 if(this.widthInputElement_) | |
195 this.widthInputElement_.setValue(this.widthInputValue_); | |
196 }; | |
197 | |
198 /** | |
199 * Apply local variables' change to height input element. | |
200 * @private | |
201 */ | |
202 ImageEditor.Mode.Resize.prototype.setHeightInputValue_ = function() { | |
203 if(this.heightInputElement_) | |
204 this.heightInputElement_.setValue(this.heightInputValue_); | |
205 }; | |
206 | |
207 /** | |
208 * Check if width/height input values are valid. | |
209 * @return {boolean} true if both values are valid. | |
210 */ | |
211 ImageEditor.Mode.Resize.prototype.isInputValid = function() { | |
212 var limitCheck = function(value, limit) { | |
213 return ImageEditor.Mode.Resize.MINIMUM_VALID_VALUE <= value && | |
214 value <= limit; | |
215 }.bind(this); | |
216 return limitCheck(this.widthInputValue_, this.maxValidWidth_) && | |
217 limitCheck(this.heightInputValue_, this.maxValidHeight_); | |
218 }; | |
219 | |
220 /** | |
221 * Show alert dialog only if input value is invalid. | |
222 */ | |
223 ImageEditor.Mode.Resize.prototype.showAlertDialog = function() { | |
224 if(this.isInputValid() || this.showingAlertDialog_) | |
225 return; | |
226 | |
227 var container = this.getImageView().container_; | |
228 var alertDialog = new FilesAlertDialog(container); | |
229 | |
230 // The Editor shouldn't handle key events in order to focus an alertDialog. | |
231 this.editor_.setKeyEventHandled(false); | |
232 this.showingAlertDialog_ = true; | |
233 alertDialog.showWithTitle('', strf('GALLERY_INVALIDVALUE'), | |
234 function() { | |
235 this.initializeInputValues_(); | |
236 this.editor_.setKeyEventHandled(true); | |
237 this.showingAlertDialog_ = false; | |
238 }.bind(this), null, null); | |
239 }; | |
240 | |
241 /** @override */ | |
242 ImageEditor.Mode.Resize.prototype.reset = function() { | |
243 ImageEditor.Mode.prototype.reset.call(this); | |
244 this.setDefault_(); | |
245 }; | |
246 | |
247 /** @override */ | |
248 ImageEditor.Mode.Resize.prototype.getCommand = function() { | |
249 return new Command.Resize(this.widthInputValue_, this.heightInputValue_); | |
250 }; | |
OLD | NEW |