Index: ui/file_manager/gallery/js/image_editor/image_resize.js |
diff --git a/ui/file_manager/gallery/js/image_editor/image_resize.js b/ui/file_manager/gallery/js/image_editor/image_resize.js |
new file mode 100644 |
index 0000000000000000000000000000000000000000..db19381afb2cbd795477b4c2ef19e9b3a9141de6 |
--- /dev/null |
+++ b/ui/file_manager/gallery/js/image_editor/image_resize.js |
@@ -0,0 +1,256 @@ |
+// Copyright 2014 The Chromium Authors. All rights reserved. |
+// Use of this source code is governed by a BSD-style license that can be |
+// found in the LICENSE file. |
+ |
+/** |
+ * Image Resize Mode |
+ * |
+ * @extends {ImageEditor.Mode} |
+ * @constructor |
+ * @struct |
+ */ |
+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.
|
+ ImageEditor.Mode.call(this, 'image-resize', 'GALLERY_IMAGERESIZE'); |
+ |
+ /** |
+ * @type {number} |
fukino
2016/08/31 05:10:25
@private {number}
ditto for following properties.
harukam
2016/09/05 10:37:00
Done.
|
+ * @private |
+ */ |
+ this.imageWidth_ = 0; |
+ |
+ /** |
+ * @type {number} |
+ * @private |
+ */ |
+ this.imageHeight_ = 0; |
+ |
+ /** |
+ * @type {number} |
+ * @private |
+ */ |
+ this.maxValidValue_ = 0; |
+ |
+ /** |
+ * @type {number} |
+ * @private |
+ */ |
+ this.widthInputValue_ = 0; |
+ |
+ /** |
+ * @type {number} |
+ * @private |
+ */ |
+ this.heightInputValue_ = 0; |
+ |
+ /** |
+ * @type {HTMLElement} |
+ * @private |
+ */ |
+ this.widthInputElement_ = null; |
+ |
+ /** |
+ * @type {HTMLElement} |
+ * @private |
+ */ |
+ this.heightInputElement_ = null; |
+ |
+ /** |
+ * @type {number} |
+ * @private |
+ */ |
+ this.ratio_ = 0; |
+ |
+ /** |
+ * @type {boolean} |
+ * @private |
+ */ |
+ this.fixedRatio_ = true; |
+}; |
+ |
+ImageEditor.Mode.ImageResize.prototype = { |
+ __proto__ : ImageEditor.Mode.prototype |
+}; |
+ |
+/** @override */ |
+ImageEditor.Mode.ImageResize.prototype.setUp = function() { |
+ ImageEditor.Mode.prototype.setUp.apply(this, arguments); |
+ |
+ this.setDefault_(); |
+}; |
+ |
+/** @override */ |
+ImageEditor.Mode.ImageResize.prototype.createTools = function(toolbar) { |
+ this.widthInputElement_ = toolbar.addInput('width', 'GALLERY_WIDTH', |
+ this.onInputChanged_.bind(this, 'width'), this.widthInputValue_, 'px'); |
+ this.heightInputElement_ = toolbar.addInput('height', 'GALLERY_HEIGHT', |
+ this.onInputChanged_.bind(this, 'height'), this.heightInputValue_, 'px'); |
+ toolbar.addCheckbox('ratio-fixed', 'GALLERY_FIXRATIO', |
+ this.onCheckBoxChanged_.bind(this), this.fixedRatio_); |
+}; |
+ |
+/** |
+ * Handlers change events of width/height input element. |
+ * @param {string} name Name |
+ * @param {Event} event An event. |
+ * @private |
+ */ |
+ImageEditor.Mode.ImageResize.prototype.onInputChanged_ = function( |
+ name, event) { |
fukino
2016/08/31 05:10:25
4 space indent
harukam
2016/09/05 10:37:00
Done.
|
+ |
+ if(name !== 'height' && name !== 'width') |
+ return; |
+ |
+ this.updateInputValues_(); |
+ |
+ function adjustToRatio() { |
+ switch (name) { |
+ case 'width': |
+ var newHeight = this.widthInputValue_ / this.ratio_; |
+ this.heightInputValue_ = Math.floor(newHeight); |
+ this.setHeightInputValue_(); |
+ break; |
+ case 'height': |
+ var newWidth = this.heightInputValue_ * this.ratio_; |
+ this.widthInputValue_ = Math.floor(newWidth); |
+ this.setWidthInputValue_(); |
+ break; |
+ } |
+ } |
+ |
+ if(this.fixedRatio_ && this.isInputValid()) |
+ adjustToRatio.call(this); |
+}; |
+ |
+/** |
+ * Handlers change events of fixed-ratio checkbox. |
+ * @param {Event} event An event. |
+ * @private |
+ */ |
+ImageEditor.Mode.ImageResize.prototype.onCheckBoxChanged_ = function(event) { |
+ var checked = event.target.checked; |
+ |
+ if(!this.fixedRatio_ && checked) |
+ this.initializeInputValues_(); |
+ |
+ this.fixedRatio_ = checked; |
+}; |
+ |
+/** |
+ * Set default values. |
+ * @private |
+ */ |
+ImageEditor.Mode.ImageResize.prototype.setDefault_ = function() { |
+ var viewport = this.getViewport(); |
+ assert(viewport); |
+ |
+ var rect = viewport.getImageBounds(); |
+ this.imageWidth_ = rect.width; |
+ this.imageHeight_ = rect.height; |
+ |
+ this.initializeInputValues_(); |
+ |
+ this.ratio_ = this.imageWidth_ / this.imageHeight_; |
+ |
+ this.maxValidValue_ = Math.max( |
+ this.imageWidth_, this.imageHeight_, |
+ ImageEditor.Mode.ImageResize.DEFAULT_MAX_VALID_VALUE); |
+}; |
+ |
+/** |
+ * Initialize width/height input values. |
+ * @private |
+ */ |
+ImageEditor.Mode.ImageResize.prototype.initializeInputValues_ = function() { |
+ this.widthInputValue_ = this.imageWidth_; |
+ this.setWidthInputValue_(); |
+ |
+ this.heightInputValue_ = this.imageHeight_; |
+ this.setHeightInputValue_(); |
+}; |
+ |
+/** |
+ * Update input values to local variales. |
+ * @private |
+ */ |
+ImageEditor.Mode.ImageResize.prototype.updateInputValues_ = function() { |
+ if(this.widthInputElement_) |
+ this.widthInputValue_ = parseInt(this.widthInputElement_.getValue(), 10); |
+ if(this.heightInputElement_) |
+ this.heightInputValue_ = parseInt(this.heightInputElement_.getValue(), 10); |
+}; |
+ |
+/** |
+ * Apply local variables' change to width input element. |
+ * @private |
+ */ |
+ImageEditor.Mode.ImageResize.prototype.setWidthInputValue_ = function() { |
+ if(this.widthInputElement_) |
+ this.widthInputElement_.setValue(this.widthInputValue_); |
+}; |
+ |
+/** |
+ * Apply local variables' change to height input element. |
+ * @private |
+ */ |
+ImageEditor.Mode.ImageResize.prototype.setHeightInputValue_ = function() { |
+ if(this.heightInputElement_) |
+ this.heightInputElement_.setValue(this.heightInputValue_); |
+}; |
+ |
+/** |
+ * Check if width/height input values are valid. |
+ * @return {boolean} true if both values are valid. |
+ */ |
+ImageEditor.Mode.ImageResize.prototype.isInputValid = function() { |
+ var limitCheck = function(value) { |
+ return ImageEditor.Mode.ImageResize.MINIMUM_VALID_VALUE <= value && |
+ value <= this.maxValidValue_; |
+ }.bind(this); |
+ return limitCheck(this.widthInputValue_) && |
+ limitCheck(this.heightInputValue_); |
+}; |
+ |
+/** |
+ * show alert dialog only if input value is invalid. |
+ * @param {function()} callback Callback |
+ */ |
+ImageEditor.Mode.ImageResize.prototype.showAlertDialog = function(callback) { |
+ if(this.isInputValid()) |
+ return; |
+ |
+ var container = this.getImageView().container_; |
+ var alertDialog = new FilesAlertDialog(container); |
+ alertDialog.showWithTitle('', strf('GALLERY_INVALIDVALUE'), |
+ function() { |
fukino
2016/08/31 05:10:25
4 space indent.
harukam
2016/09/05 10:37:00
Done.
|
+ this.initializeInputValues_(); |
+ callback(); |
+ }.bind(this), null, null); |
+}; |
+ |
+/** @override */ |
+ImageEditor.Mode.ImageResize.prototype.reset = function() { |
+ ImageEditor.Mode.prototype.reset.call(this); |
+ this.setDefault_(); |
+}; |
+ |
+/** @override */ |
+ImageEditor.Mode.ImageResize.prototype.cleanUpUI = function() { |
+ 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.
|
+}; |
+ |
+/** |
+ * @const |
+ * @type {number} |
fukino
2016/08/31 05:10:24
@const {number}
harukam
2016/09/05 10:37:00
Done.
|
+ */ |
+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.
|
+ |
+/** |
+ * @const |
+ * @type {number} |
+ */ |
+ImageEditor.Mode.ImageResize.DEFAULT_MAX_VALID_VALUE = 10000; |
+ |
+/** @override */ |
+ImageEditor.Mode.ImageResize.prototype.getCommand = function() { |
+ return new Command.ImageResize(this.widthInputValue_, this.heightInputValue_); |
+}; |