Index: ui/file_manager/gallery/js/image_editor/image_editor.js |
diff --git a/ui/file_manager/gallery/js/image_editor/image_editor.js b/ui/file_manager/gallery/js/image_editor/image_editor.js |
index 9db0b9aaa2483838fbd7ffd5cf00855c8a1439cd..a7ce081e6121df0b7aef125e7d71814a8da13bd0 100644 |
--- a/ui/file_manager/gallery/js/image_editor/image_editor.js |
+++ b/ui/file_manager/gallery/js/image_editor/image_editor.js |
@@ -44,6 +44,11 @@ function ImageEditor( |
*/ |
this.settingUpNextMode_ = false; |
+ /** |
+ * @private {boolean} |
+ */ |
+ this.keyEventHandled_ = true; |
+ |
ImageUtil.removeChildren(this.container_); |
this.viewport_ = viewport; |
@@ -679,6 +684,20 @@ 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 |
@@ -725,6 +744,13 @@ ImageEditor.prototype.leaveMode = function(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 m
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. |
@@ -748,6 +774,9 @@ ImageEditor.prototype.enterModeByName_ = function(name) { |
* @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': |
@@ -1298,6 +1327,79 @@ ImageEditor.Toolbar.prototype.addButton = function( |
}; |
/** |
+ * 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. |