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.
+
+/**
+ * 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't have to override it.

[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 constructor definition? (around
line #70?)

[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_);
+};