Add an ability for resize in gallery.

ui/file_manager/gallery/js/image_editor/image_resize.js

+// 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.
+
+/**
+ * Resize Mode
+ *
+ * @extends {ImageEditor.Mode}
+ * @constructor
+ * @struct
+ */
+ImageEditor.Mode.Resize = function() {
+  ImageEditor.Mode.call(this, 'resize', 'GALLERY_RESIZE');
+
+  /** @private {number} */
+  this.imageWidth_ = 0;
+
+  /** @private {number} */
+  this.imageHeight_ = 0;
+
+  /** @private {number} */
+  this.maxValidValue_ = 0;
+
+  /** @private {number} */
+  this.widthInputValue_ = 0;
+
+  /** @private {number} */
+  this.heightInputValue_ = 0;
+
+  /** @private {HTMLElement} */
+  this.widthInputElement_ = null;
+
+  /** @private {HTMLElement} */
+  this.heightInputElement_ = null;
+
+  /** @private {number} */
+  this.ratio_ = 0;
+
+  /** @private {boolean} */
+  this.fixedRatio_ = true;
+};
+
+/** @const {number} */
+ImageEditor.Mode.Resize.MINIMUM_VALID_VALUE = 1;
+
+/** @const {number} */
+ImageEditor.Mode.Resize.DEFAULT_MAX_VALID_VALUE = 10000;
+
+ImageEditor.Mode.Resize.prototype = {
+  __proto__ : ImageEditor.Mode.prototype
+};
+
+/** @override */
+ImageEditor.Mode.Resize.prototype.setUp = function() {
+  ImageEditor.Mode.prototype.setUp.apply(this, arguments);
+
+  this.setDefault_();
+};
+
+/** @override */
+ImageEditor.Mode.Resize.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.Resize.prototype.onInputChanged_ = function(
+    name, event) {
+
+  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.Resize.prototype.onCheckBoxChanged_ = function(event) {
+  var checked = event.target.checked;
+
+  if(!this.fixedRatio_ && checked)
+    this.initializeInputValues_();
+
+  this.fixedRatio_ = checked;
+};
+
+/**
+ * Set default values.
+ * @private
+ */
+ImageEditor.Mode.Resize.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(

[fukino, 2016/09/05 13:44:35]

Can we have max value for width and height separately?
If width is 20000 and height is 10000, we don't want the height to be increased.

[harukam, 2016/09/06 08:10:29]

Acknowledged.

+      this.imageWidth_, this.imageHeight_,
+      ImageEditor.Mode.Resize.DEFAULT_MAX_VALID_VALUE);
+};
+
+/**
+ * Initialize width/height input values.
+ * @private
+ */
+ImageEditor.Mode.Resize.prototype.initializeInputValues_ = function() {
+  this.widthInputValue_ = this.imageWidth_;
+  this.setWidthInputValue_();
+
+  this.heightInputValue_ = this.imageHeight_;
+  this.setHeightInputValue_();
+};
+
+/**
+ * Update input values to local variales.
+ * @private
+ */
+ImageEditor.Mode.Resize.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.Resize.prototype.setWidthInputValue_ = function() {
+  if(this.widthInputElement_)
+    this.widthInputElement_.setValue(this.widthInputValue_);
+};
+
+/**
+ * Apply local variables' change to height input element.
+ * @private
+ */
+ImageEditor.Mode.Resize.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.Resize.prototype.isInputValid = function() {
+  var limitCheck = function(value) {
+    return ImageEditor.Mode.Resize.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.Resize.prototype.showAlertDialog = function(callback) {
+  if(this.isInputValid())
+    return;
+
+  var container = this.getImageView().container_;
+  var alertDialog = new FilesAlertDialog(container);
+  alertDialog.showWithTitle('', strf('GALLERY_INVALIDVALUE'),
+      function() {
+        this.initializeInputValues_();
+        callback();
+      }.bind(this), null, null);
+};
+
+/** @override */
+ImageEditor.Mode.Resize.prototype.reset = function() {
+  ImageEditor.Mode.prototype.reset.call(this);
+  this.setDefault_();
+};
+
+/** @override */
+ImageEditor.Mode.Resize.prototype.getCommand = function() {
+  return new Command.Resize(this.widthInputValue_, this.heightInputValue_);
+};