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..cee53ca437c8805a930ef30bb0aa69421cf6b3d7 100644 |
--- a/ui/file_manager/gallery/js/image_editor/image_editor.js |
+++ b/ui/file_manager/gallery/js/image_editor/image_editor.js |
@@ -519,6 +519,11 @@ ImageEditor.Mode.prototype.markUpdated = function() { |
ImageEditor.Mode.prototype.isUpdated = function() { return this.updated_; }; |
/** |
+ * @return {boolean} True if a key event should be consumed by the mode. |
+ */ |
+ImageEditor.Mode.prototype.isConsumingKeyEvents = function() { return false; }; |
+ |
+/** |
* Resets the mode to a clean state. |
*/ |
ImageEditor.Mode.prototype.reset = function() { |
@@ -614,6 +619,7 @@ ImageEditor.prototype.enterMode = function(mode) { |
ImageEditor.prototype.setUpMode_ = function(mode) { |
this.currentTool_ = mode.button_; |
this.currentMode_ = mode; |
+ this.rootContainer_.setAttribute('editor-mode', mode.name); |
// Activate toggle ripple if button is toggleable. |
var filesToggleRipple = |
@@ -679,7 +685,19 @@ 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. |
+ if(commit && this.currentMode_.name === 'resize') { |
+ var resizeMode = /** @type {!ImageEditor.Mode.Resize} */ |
+ (this.currentMode_); |
+ if(!resizeMode.isInputValid()) { |
+ resizeMode.showAlertDialog(); |
+ return; |
+ } |
+ } |
+ |
this.modeToolbar_.show(false); |
+ this.rootContainer_.removeAttribute('editor-mode'); |
// 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 |
@@ -748,6 +766,9 @@ ImageEditor.prototype.enterModeByName_ = function(name) { |
* @return {boolean} True if handled. |
*/ |
ImageEditor.prototype.onKeyDown = function(event) { |
+ if (this.currentMode_ && this.currentMode_.isConsumingKeyEvents()) |
+ return false; |
+ |
switch (util.getKeyModifiers(event) + event.key) { |
case 'Escape': |
case 'Enter': |
@@ -1298,6 +1319,53 @@ ImageEditor.Toolbar.prototype.addButton = function( |
}; |
/** |
+ * Add a input field. |
+ * |
+ * @param {string} name Input name |
+ * @param {string} title Input title |
+ * @param {function(Event)} handler onInput and onChange 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, 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); |
+ 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. |