Add an ability for resize in gallery.

ui/file_manager/gallery/js/image_editor/image_editor.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.
 
 /**
  * ImageEditor is the top level object that holds together and connects
  * everything needed for image editing.
  *
  * @param {!Viewport} viewport The viewport.
  * @param {!ImageView} imageView The ImageView containing the images to edit.
@@ skipping 26 matching lines @@
   /**
    * @private {HTMLElement}
    */
   this.currentTool_ = null;
 
   /**
    * @private {boolean}
    */
   this.settingUpNextMode_ = false;
 
+  /**
+   * @private {boolean}
+   */
+  this.keyEventHandled_ = true;
+
   ImageUtil.removeChildren(this.container_);
 
   this.viewport_ = viewport;
 
   this.imageView_ = imageView;
 
   this.buffer_ = new ImageBuffer();
   this.buffer_.addOverlay(this.imageView_);
 
   this.panControl_ = new ImageEditor.MouseControl(
@@ skipping 615 matching lines @@
 /**
  * The user clicked on 'OK' or 'Cancel' or on a different mode button.
  * @param {boolean} commit True if commit is required.
  * @param {boolean} leaveToSwitchMode True if it leaves to change mode.
  * @private
  */
 ImageEditor.prototype.leaveModeInternal_ = function(commit, leaveToSwitchMode) {
   if (!this.currentMode_)
     return;
 
+  // If the current mode is 'Resize', and commit is required,
+  // leaving mode should be stopped when an input value is not valid.
+  // 'onblur' event handler in ImageResize also checks if the value is valid,
+  // but 'keyDown' event is fired faster then it.
+  // So, We should check the value here, too.
+  if(commit && this.currentMode_.name === 'resize') {
+    var resizeMode = /** @type {!ImageEditor.Mode.Resize} */
+                              (this.currentMode_);
+    if(!resizeMode.isInputValid()) {
+      resizeMode.showAlertDialog();
+      return;
+    }
+  }
+
   this.modeToolbar_.show(false);
 
   // If it leaves to switch mode, do not restore screen size since the next mode
   // might change screen size. We should avoid to show intermediate animation
   // which tries to restore screen size.
   if (!leaveToSwitchMode) {
     this.getViewport().setScreenTop(ImageEditor.Toolbar.HEIGHT);
     this.getViewport().setScreenBottom(ImageEditor.Toolbar.HEIGHT);
     this.getImageView().applyViewportChange();
   }
@@ skipping 26 matching lines @@
  * @param {boolean} leaveToSwitchMode True if it leaves to switch mode.
  */
 ImageEditor.prototype.leaveMode = function(leaveToSwitchMode) {
   this.leaveModeInternal_(!!this.currentMode_ &&
       this.currentMode_.updated_ &&
       this.currentMode_.implicitCommit,
       leaveToSwitchMode);
 };
 
 /**
+ *

[fukino, 2016/09/06 10:50:35]

comment?

[harukam, 2016/09/09 10:37:42]

Sorry for the carelessness.

+ */
+ImageEditor.prototype.setKeyEventHandled = function(handled) {

[fukino, 2016/09/06 10:50:35]

I'd like to avoid circular dependency which this method involves.
* ImageEditor has a instance of ResizeMode.
* ResizeMode calls ImageEditor's method.

To avoid accessing ImageEditor instance from ResizeMode, how about doing this?
- Add a function ImageEditor.Mode.prototype.isConsumingKeyEvents and the default
implementation is just returning false.
- Override the function in ResizeMode which returns true while dialog is open.
- ImageEditor checks the current mode's isConsumingKeyEvents().

[harukam, 2016/09/09 10:37:42]

Sounds good, thanks.

+  this.keyEventHandled_ = handled;
+};
+
+/**
  * Enter the editor mode with the given name.
  *
  * @param {string} name Mode name.
  * @private
  */
 ImageEditor.prototype.enterModeByName_ = function(name) {
   for (var i = 0; i !== this.modes_.length; i++) {
     var mode = this.modes_[i];
     if (mode.name === name) {
       if (!mode.button_.hasAttribute('disabled'))
         this.enterMode(mode);
       return;
     }
   }
   console.error('Mode "' + name + '" not found.');
 };
 
 /**
  * Key down handler.
  * @param {!Event} event The keydown event.
  * @return {boolean} True if handled.
  */
 ImageEditor.prototype.onKeyDown = function(event) {
+  if (!this.keyEventHandled_)
+    return false;
+
   switch (util.getKeyModifiers(event) + event.key) {
     case 'Escape':
     case 'Enter':
       if (this.getMode()) {
         this.leaveModeInternal_(event.key === 'Enter',
             false /* not to switch mode */);
         return true;
       }
       break;
 
@@ skipping 530 matching lines @@
  */
 ImageEditor.Toolbar.prototype.addButton = function(
     title, type, handler, opt_class) {
   var button = ImageEditor.Toolbar.createButton_(
       title, type, handler, opt_class);
   this.add(button);
   return button;
 };
 
 /**
+ * Add a checkbox
+ *
+ * @param {string} name Checkbox name
+ * @param {string} title Checkbox title
+ * @param {function(Event)} handler onChange handler
+ * @param {boolean} value Default value
+ * @return {!HTMLElement} Checkbox Element
+ */
+ImageEditor.Toolbar.prototype.addCheckbox = function(
+    name, title, handler, value) {
+
+  var checkbox = /** @type {!HTMLElement} */
+      (document.createElement('paper-checkbox'));
+  checkbox.textContent = strf(title);
+  checkbox.addEventListener('change', handler, false);
+  checkbox.checked = value;
+  checkbox.classList.add('checkbox', name);
+
+  this.add(checkbox);
+
+  return checkbox;
+};
+
+/**
+ * Add a input field.
+ *
+ * @param {string} name Input name
+ * @param {string} title Input title
+ * @param {function(Event)} handler onInput and onChange handler
+ * @param {function(Event)} onblur onBlur handler
+ * @param {string|number} value Default value
+ * @param {string=} opt_unit Unit for an input field
+ * @return {!HTMLElement} Input Element
+ */
+ImageEditor.Toolbar.prototype.addInput = function(
+    name, title, handler, onblur, value, opt_unit) {
+
+  var input = /** @type {!HTMLElement} */ (document.createElement('div'));
+  input.classList.add('input', name);
+
+  var text = document.createElement('paper-input');
+  text.setAttribute('label', strf(title));
+  text.classList.add('text', name);
+  text.value = value;
+
+  // We should listen to not only 'change' event, but also 'input' because we
+  // want to update values as soon as the user types characters.
+  text.addEventListener('input', handler, false);
+  text.addEventListener('change', handler, false);
+  text.addEventListener('blur', onblur, true);

[fukino, 2016/09/06 10:50:35]

true -> false.

[harukam, 2016/09/09 10:37:42]

Done.

+  input.appendChild(text);
+
+  if(opt_unit) {
+    var unit_label = document.createElement('span');
+    unit_label.textContent = opt_unit;
+    unit_label.classList.add('unit_label');
+    input.appendChild(unit_label);
+  }
+
+  input.name = name;
+  input.getValue = function(text) {
+    return text.value;
+  }.bind(this, text);
+  input.setValue = function(text, value) {
+    text.value = value;
+  }.bind(this, text);
+
+  this.add(input);
+
+  return input;
+};
+
+/**
  * Add a range control (scalar value picker).
  *
  * @param {string} name An option name.
  * @param {string} title An option title.
  * @param {number} min Min value of the option.
  * @param {number} value Default value of the option.
  * @param {number} max Max value of the options.
  * @param {number=} opt_scale A number to multiply by when setting
  *     min/value/max in DOM.
  * @param {boolean=} opt_showNumeric True if numeric value should be displayed.
@@ skipping 217 matching lines @@
 
 /**
  * Hide the prompt.
  */
 ImageEditor.Prompt.prototype.hide = function() {
   if (!this.prompt_) return;
   this.prompt_.setAttribute('state', 'fadeout');
   // Allow some time for the animation to play out.
   this.setTimer(this.reset.bind(this), 500);
 };