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 * Image Resize Mode | |
7 * | |
8 * @extends {ImageEditor.Mode} | |
9 * @constructor | |
10 * @struct | |
11 */ | |
12 ImageEditor.Mode.ImageResize = function() { | |
fukino
2016/08/31 05:10:24
Mode.Resize looks more consistent with other mode.
harukam
2016/09/05 10:37:00
Done.
| |
13 ImageEditor.Mode.call(this, 'image-resize', 'GALLERY_IMAGERESIZE'); | |
14 | |
15 /** | |
16 * @type {number} | |
fukino
2016/08/31 05:10:25
@private {number}
ditto for following properties.
harukam
2016/09/05 10:37:00
Done.
| |
17 * @private | |
18 */ | |
19 this.imageWidth_ = 0; | |
20 | |
21 /** | |
22 * @type {number} | |
23 * @private | |
24 */ | |
25 this.imageHeight_ = 0; | |
26 | |
27 /** | |
28 * @type {number} | |
29 * @private | |
30 */ | |
31 this.maxValidValue_ = 0; | |
32 | |
33 /** | |
34 * @type {number} | |
35 * @private | |
36 */ | |
37 this.widthInputValue_ = 0; | |
38 | |
39 /** | |
40 * @type {number} | |
41 * @private | |
42 */ | |
43 this.heightInputValue_ = 0; | |
44 | |
45 /** | |
46 * @type {HTMLElement} | |
47 * @private | |
48 */ | |
49 this.widthInputElement_ = null; | |
50 | |
51 /** | |
52 * @type {HTMLElement} | |
53 * @private | |
54 */ | |
55 this.heightInputElement_ = null; | |
56 | |
57 /** | |
58 * @type {number} | |
59 * @private | |
60 */ | |
61 this.ratio_ = 0; | |
62 | |
63 /** | |
64 * @type {boolean} | |
65 * @private | |
66 */ | |
67 this.fixedRatio_ = true; | |
68 }; | |
69 | |
70 ImageEditor.Mode.ImageResize.prototype = { | |
71 __proto__ : ImageEditor.Mode.prototype | |
72 }; | |
73 | |
74 /** @override */ | |
75 ImageEditor.Mode.ImageResize.prototype.setUp = function() { | |
76 ImageEditor.Mode.prototype.setUp.apply(this, arguments); | |
77 | |
78 this.setDefault_(); | |
79 }; | |
80 | |
81 /** @override */ | |
82 ImageEditor.Mode.ImageResize.prototype.createTools = function(toolbar) { | |
83 this.widthInputElement_ = toolbar.addInput('width', 'GALLERY_WIDTH', | |
84 this.onInputChanged_.bind(this, 'width'), this.widthInputValue_, 'px'); | |
85 this.heightInputElement_ = toolbar.addInput('height', 'GALLERY_HEIGHT', | |
86 this.onInputChanged_.bind(this, 'height'), this.heightInputValue_, 'px'); | |
87 toolbar.addCheckbox('ratio-fixed', 'GALLERY_FIXRATIO', | |
88 this.onCheckBoxChanged_.bind(this), this.fixedRatio_); | |
89 }; | |
90 | |
91 /** | |
92 * Handlers change events of width/height input element. | |
93 * @param {string} name Name | |
94 * @param {Event} event An event. | |
95 * @private | |
96 */ | |
97 ImageEditor.Mode.ImageResize.prototype.onInputChanged_ = function( | |
98 name, event) { | |
fukino
2016/08/31 05:10:25
4 space indent
harukam
2016/09/05 10:37:00
Done.
| |
99 | |
100 if(name !== 'height' && name !== 'width') | |
101 return; | |
102 | |
103 this.updateInputValues_(); | |
104 | |
105 function adjustToRatio() { | |
106 switch (name) { | |
107 case 'width': | |
108 var newHeight = this.widthInputValue_ / this.ratio_; | |
109 this.heightInputValue_ = Math.floor(newHeight); | |
110 this.setHeightInputValue_(); | |
111 break; | |
112 case 'height': | |
113 var newWidth = this.heightInputValue_ * this.ratio_; | |
114 this.widthInputValue_ = Math.floor(newWidth); | |
115 this.setWidthInputValue_(); | |
116 break; | |
117 } | |
118 } | |
119 | |
120 if(this.fixedRatio_ && this.isInputValid()) | |
121 adjustToRatio.call(this); | |
122 }; | |
123 | |
124 /** | |
125 * Handlers change events of fixed-ratio checkbox. | |
126 * @param {Event} event An event. | |
127 * @private | |
128 */ | |
129 ImageEditor.Mode.ImageResize.prototype.onCheckBoxChanged_ = function(event) { | |
130 var checked = event.target.checked; | |
131 | |
132 if(!this.fixedRatio_ && checked) | |
133 this.initializeInputValues_(); | |
134 | |
135 this.fixedRatio_ = checked; | |
136 }; | |
137 | |
138 /** | |
139 * Set default values. | |
140 * @private | |
141 */ | |
142 ImageEditor.Mode.ImageResize.prototype.setDefault_ = function() { | |
143 var viewport = this.getViewport(); | |
144 assert(viewport); | |
145 | |
146 var rect = viewport.getImageBounds(); | |
147 this.imageWidth_ = rect.width; | |
148 this.imageHeight_ = rect.height; | |
149 | |
150 this.initializeInputValues_(); | |
151 | |
152 this.ratio_ = this.imageWidth_ / this.imageHeight_; | |
153 | |
154 this.maxValidValue_ = Math.max( | |
155 this.imageWidth_, this.imageHeight_, | |
156 ImageEditor.Mode.ImageResize.DEFAULT_MAX_VALID_VALUE); | |
157 }; | |
158 | |
159 /** | |
160 * Initialize width/height input values. | |
161 * @private | |
162 */ | |
163 ImageEditor.Mode.ImageResize.prototype.initializeInputValues_ = function() { | |
164 this.widthInputValue_ = this.imageWidth_; | |
165 this.setWidthInputValue_(); | |
166 | |
167 this.heightInputValue_ = this.imageHeight_; | |
168 this.setHeightInputValue_(); | |
169 }; | |
170 | |
171 /** | |
172 * Update input values to local variales. | |
173 * @private | |
174 */ | |
175 ImageEditor.Mode.ImageResize.prototype.updateInputValues_ = function() { | |
176 if(this.widthInputElement_) | |
177 this.widthInputValue_ = parseInt(this.widthInputElement_.getValue(), 10); | |
178 if(this.heightInputElement_) | |
179 this.heightInputValue_ = parseInt(this.heightInputElement_.getValue(), 10); | |
180 }; | |
181 | |
182 /** | |
183 * Apply local variables' change to width input element. | |
184 * @private | |
185 */ | |
186 ImageEditor.Mode.ImageResize.prototype.setWidthInputValue_ = function() { | |
187 if(this.widthInputElement_) | |
188 this.widthInputElement_.setValue(this.widthInputValue_); | |
189 }; | |
190 | |
191 /** | |
192 * Apply local variables' change to height input element. | |
193 * @private | |
194 */ | |
195 ImageEditor.Mode.ImageResize.prototype.setHeightInputValue_ = function() { | |
196 if(this.heightInputElement_) | |
197 this.heightInputElement_.setValue(this.heightInputValue_); | |
198 }; | |
199 | |
200 /** | |
201 * Check if width/height input values are valid. | |
202 * @return {boolean} true if both values are valid. | |
203 */ | |
204 ImageEditor.Mode.ImageResize.prototype.isInputValid = function() { | |
205 var limitCheck = function(value) { | |
206 return ImageEditor.Mode.ImageResize.MINIMUM_VALID_VALUE <= value && | |
207 value <= this.maxValidValue_; | |
208 }.bind(this); | |
209 return limitCheck(this.widthInputValue_) && | |
210 limitCheck(this.heightInputValue_); | |
211 }; | |
212 | |
213 /** | |
214 * show alert dialog only if input value is invalid. | |
215 * @param {function()} callback Callback | |
216 */ | |
217 ImageEditor.Mode.ImageResize.prototype.showAlertDialog = function(callback) { | |
218 if(this.isInputValid()) | |
219 return; | |
220 | |
221 var container = this.getImageView().container_; | |
222 var alertDialog = new FilesAlertDialog(container); | |
223 alertDialog.showWithTitle('', strf('GALLERY_INVALIDVALUE'), | |
224 function() { | |
fukino
2016/08/31 05:10:25
4 space indent.
harukam
2016/09/05 10:37:00
Done.
| |
225 this.initializeInputValues_(); | |
226 callback(); | |
227 }.bind(this), null, null); | |
228 }; | |
229 | |
230 /** @override */ | |
231 ImageEditor.Mode.ImageResize.prototype.reset = function() { | |
232 ImageEditor.Mode.prototype.reset.call(this); | |
233 this.setDefault_(); | |
234 }; | |
235 | |
236 /** @override */ | |
237 ImageEditor.Mode.ImageResize.prototype.cleanUpUI = function() { | |
238 ImageEditor.Mode.prototype.cleanUpUI.apply(this, arguments); | |
fukino
2016/08/31 05:10:25
If you do nothing special in this method, you don'
harukam
2016/09/05 10:37:00
Done.
| |
239 }; | |
240 | |
241 /** | |
242 * @const | |
243 * @type {number} | |
fukino
2016/08/31 05:10:24
@const {number}
harukam
2016/09/05 10:37:00
Done.
| |
244 */ | |
245 ImageEditor.Mode.ImageResize.MINIMUM_VALID_VALUE = 1; | |
fukino
2016/08/31 05:10:24
Could you put these constants just after the const
harukam
2016/09/05 10:37:00
Done.
| |
246 | |
247 /** | |
248 * @const | |
249 * @type {number} | |
250 */ | |
251 ImageEditor.Mode.ImageResize.DEFAULT_MAX_VALID_VALUE = 10000; | |
252 | |
253 /** @override */ | |
254 ImageEditor.Mode.ImageResize.prototype.getCommand = function() { | |
255 return new Command.ImageResize(this.widthInputValue_, this.heightInputValue_); | |
256 }; | |
OLD | NEW |