| OLD | NEW |
| 1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 /** | 4 /** |
| 5 * @unrestricted | 5 * @unrestricted |
| 6 */ | 6 */ |
| 7 WebInspector.InplaceEditor = class { | 7 UI.InplaceEditor = class { |
| 8 /** | 8 /** |
| 9 * @param {!Element} element | 9 * @param {!Element} element |
| 10 * @param {!WebInspector.InplaceEditor.Config=} config | 10 * @param {!UI.InplaceEditor.Config=} config |
| 11 * @return {?WebInspector.InplaceEditor.Controller} | 11 * @return {?UI.InplaceEditor.Controller} |
| 12 */ | 12 */ |
| 13 static startEditing(element, config) { | 13 static startEditing(element, config) { |
| 14 if (!WebInspector.InplaceEditor._defaultInstance) | 14 if (!UI.InplaceEditor._defaultInstance) |
| 15 WebInspector.InplaceEditor._defaultInstance = new WebInspector.InplaceEdit
or(); | 15 UI.InplaceEditor._defaultInstance = new UI.InplaceEditor(); |
| 16 return WebInspector.InplaceEditor._defaultInstance.startEditing(element, con
fig); | 16 return UI.InplaceEditor._defaultInstance.startEditing(element, config); |
| 17 } | 17 } |
| 18 | 18 |
| 19 /** | 19 /** |
| 20 * @param {!Element} element | 20 * @param {!Element} element |
| 21 * @param {!WebInspector.InplaceEditor.Config=} config | 21 * @param {!UI.InplaceEditor.Config=} config |
| 22 * @return {!Promise.<!WebInspector.InplaceEditor.Controller>} | 22 * @return {!Promise.<!UI.InplaceEditor.Controller>} |
| 23 */ | 23 */ |
| 24 static startMultilineEditing(element, config) { | 24 static startMultilineEditing(element, config) { |
| 25 return self.runtime.extension(WebInspector.InplaceEditor).instance().then(st
artEditing); | 25 return self.runtime.extension(UI.InplaceEditor).instance().then(startEditing
); |
| 26 | 26 |
| 27 /** | 27 /** |
| 28 * @param {!Object} inplaceEditor | 28 * @param {!Object} inplaceEditor |
| 29 * @return {!WebInspector.InplaceEditor.Controller|!Promise.<!WebInspector.I
nplaceEditor.Controller>} | 29 * @return {!UI.InplaceEditor.Controller|!Promise.<!UI.InplaceEditor.Control
ler>} |
| 30 */ | 30 */ |
| 31 function startEditing(inplaceEditor) { | 31 function startEditing(inplaceEditor) { |
| 32 var controller = /** @type {!WebInspector.InplaceEditor} */ (inplaceEditor
).startEditing(element, config); | 32 var controller = /** @type {!UI.InplaceEditor} */ (inplaceEditor).startEdi
ting(element, config); |
| 33 if (!controller) | 33 if (!controller) |
| 34 return Promise.reject(new Error('Editing is already in progress')); | 34 return Promise.reject(new Error('Editing is already in progress')); |
| 35 return controller; | 35 return controller; |
| 36 } | 36 } |
| 37 } | 37 } |
| 38 | 38 |
| 39 /** | 39 /** |
| 40 * @return {string} | 40 * @return {string} |
| 41 */ | 41 */ |
| 42 editorContent(editingContext) { | 42 editorContent(editingContext) { |
| 43 var element = editingContext.element; | 43 var element = editingContext.element; |
| 44 if (element.tagName === 'INPUT' && element.type === 'text') | 44 if (element.tagName === 'INPUT' && element.type === 'text') |
| 45 return element.value; | 45 return element.value; |
| 46 | 46 |
| 47 return element.textContent; | 47 return element.textContent; |
| 48 } | 48 } |
| 49 | 49 |
| 50 setUpEditor(editingContext) { | 50 setUpEditor(editingContext) { |
| 51 var element = editingContext.element; | 51 var element = editingContext.element; |
| 52 element.classList.add('editing'); | 52 element.classList.add('editing'); |
| 53 | 53 |
| 54 var oldTabIndex = element.getAttribute('tabIndex'); | 54 var oldTabIndex = element.getAttribute('tabIndex'); |
| 55 if (typeof oldTabIndex !== 'number' || oldTabIndex < 0) | 55 if (typeof oldTabIndex !== 'number' || oldTabIndex < 0) |
| 56 element.tabIndex = 0; | 56 element.tabIndex = 0; |
| 57 this._focusRestorer = new WebInspector.ElementFocusRestorer(element); | 57 this._focusRestorer = new UI.ElementFocusRestorer(element); |
| 58 editingContext.oldTabIndex = oldTabIndex; | 58 editingContext.oldTabIndex = oldTabIndex; |
| 59 } | 59 } |
| 60 | 60 |
| 61 closeEditor(editingContext) { | 61 closeEditor(editingContext) { |
| 62 var element = editingContext.element; | 62 var element = editingContext.element; |
| 63 element.classList.remove('editing'); | 63 element.classList.remove('editing'); |
| 64 | 64 |
| 65 if (typeof editingContext.oldTabIndex !== 'number') | 65 if (typeof editingContext.oldTabIndex !== 'number') |
| 66 element.removeAttribute('tabIndex'); | 66 element.removeAttribute('tabIndex'); |
| 67 else | 67 else |
| 68 element.tabIndex = editingContext.oldTabIndex; | 68 element.tabIndex = editingContext.oldTabIndex; |
| 69 element.scrollTop = 0; | 69 element.scrollTop = 0; |
| 70 element.scrollLeft = 0; | 70 element.scrollLeft = 0; |
| 71 } | 71 } |
| 72 | 72 |
| 73 cancelEditing(editingContext) { | 73 cancelEditing(editingContext) { |
| 74 var element = editingContext.element; | 74 var element = editingContext.element; |
| 75 if (element.tagName === 'INPUT' && element.type === 'text') | 75 if (element.tagName === 'INPUT' && element.type === 'text') |
| 76 element.value = editingContext.oldText; | 76 element.value = editingContext.oldText; |
| 77 else | 77 else |
| 78 element.textContent = editingContext.oldText; | 78 element.textContent = editingContext.oldText; |
| 79 } | 79 } |
| 80 | 80 |
| 81 augmentEditingHandle(editingContext, handle) { | 81 augmentEditingHandle(editingContext, handle) { |
| 82 } | 82 } |
| 83 | 83 |
| 84 /** | 84 /** |
| 85 * @param {!Element} element | 85 * @param {!Element} element |
| 86 * @param {!WebInspector.InplaceEditor.Config=} config | 86 * @param {!UI.InplaceEditor.Config=} config |
| 87 * @return {?WebInspector.InplaceEditor.Controller} | 87 * @return {?UI.InplaceEditor.Controller} |
| 88 */ | 88 */ |
| 89 startEditing(element, config) { | 89 startEditing(element, config) { |
| 90 if (!WebInspector.markBeingEdited(element, true)) | 90 if (!UI.markBeingEdited(element, true)) |
| 91 return null; | 91 return null; |
| 92 | 92 |
| 93 config = config || new WebInspector.InplaceEditor.Config(function() {}, func
tion() {}); | 93 config = config || new UI.InplaceEditor.Config(function() {}, function() {})
; |
| 94 var editingContext = {element: element, config: config}; | 94 var editingContext = {element: element, config: config}; |
| 95 var committedCallback = config.commitHandler; | 95 var committedCallback = config.commitHandler; |
| 96 var cancelledCallback = config.cancelHandler; | 96 var cancelledCallback = config.cancelHandler; |
| 97 var pasteCallback = config.pasteHandler; | 97 var pasteCallback = config.pasteHandler; |
| 98 var context = config.context; | 98 var context = config.context; |
| 99 var isMultiline = config.multiline || false; | 99 var isMultiline = config.multiline || false; |
| 100 var moveDirection = ''; | 100 var moveDirection = ''; |
| 101 var self = this; | 101 var self = this; |
| 102 | 102 |
| 103 /** | 103 /** |
| (...skipping 11 matching lines...) Expand all Loading... |
| 115 * @param {!Event=} e | 115 * @param {!Event=} e |
| 116 */ | 116 */ |
| 117 function blurEventListener(e) { | 117 function blurEventListener(e) { |
| 118 if (config.blurHandler && !config.blurHandler(element, e)) | 118 if (config.blurHandler && !config.blurHandler(element, e)) |
| 119 return; | 119 return; |
| 120 if (!isMultiline || !e || !e.relatedTarget || !e.relatedTarget.isSelfOrDes
cendant(element)) | 120 if (!isMultiline || !e || !e.relatedTarget || !e.relatedTarget.isSelfOrDes
cendant(element)) |
| 121 editingCommitted.call(element); | 121 editingCommitted.call(element); |
| 122 } | 122 } |
| 123 | 123 |
| 124 function cleanUpAfterEditing() { | 124 function cleanUpAfterEditing() { |
| 125 WebInspector.markBeingEdited(element, false); | 125 UI.markBeingEdited(element, false); |
| 126 | 126 |
| 127 element.removeEventListener('blur', blurEventListener, isMultiline); | 127 element.removeEventListener('blur', blurEventListener, isMultiline); |
| 128 element.removeEventListener('keydown', keyDownEventListener, true); | 128 element.removeEventListener('keydown', keyDownEventListener, true); |
| 129 if (pasteCallback) | 129 if (pasteCallback) |
| 130 element.removeEventListener('paste', pasteEventListener, true); | 130 element.removeEventListener('paste', pasteEventListener, true); |
| 131 | 131 |
| 132 if (self._focusRestorer) | 132 if (self._focusRestorer) |
| 133 self._focusRestorer.restore(); | 133 self._focusRestorer.restore(); |
| 134 self.closeEditor(editingContext); | 134 self.closeEditor(editingContext); |
| 135 } | 135 } |
| (...skipping 10 matching lines...) Expand all Loading... |
| 146 cleanUpAfterEditing(); | 146 cleanUpAfterEditing(); |
| 147 | 147 |
| 148 committedCallback(this, self.editorContent(editingContext), editingContext
.oldText, context, moveDirection); | 148 committedCallback(this, self.editorContent(editingContext), editingContext
.oldText, context, moveDirection); |
| 149 } | 149 } |
| 150 | 150 |
| 151 /** | 151 /** |
| 152 * @param {!Event} event | 152 * @param {!Event} event |
| 153 * @return {string} | 153 * @return {string} |
| 154 */ | 154 */ |
| 155 function defaultFinishHandler(event) { | 155 function defaultFinishHandler(event) { |
| 156 var isMetaOrCtrl = WebInspector.isMac() ? event.metaKey && !event.shiftKey
&& !event.ctrlKey && !event.altKey : | 156 var isMetaOrCtrl = Host.isMac() ? event.metaKey && !event.shiftKey && !eve
nt.ctrlKey && !event.altKey : |
| 157 event.ctrlKey && !event.shiftKey
&& !event.metaKey && !event.altKey; | 157 event.ctrlKey && !event.shiftKey
&& !event.metaKey && !event.altKey; |
| 158 if (isEnterKey(event) && (event.isMetaOrCtrlForTest || !isMultiline || isM
etaOrCtrl)) | 158 if (isEnterKey(event) && (event.isMetaOrCtrlForTest || !isMultiline || isM
etaOrCtrl)) |
| 159 return 'commit'; | 159 return 'commit'; |
| 160 else if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code ||
event.key === 'Escape') | 160 else if (event.keyCode === UI.KeyboardShortcut.Keys.Esc.code || event.key
=== 'Escape') |
| 161 return 'cancel'; | 161 return 'cancel'; |
| 162 else if (!isMultiline && event.key === 'Tab') | 162 else if (!isMultiline && event.key === 'Tab') |
| 163 return 'move-' + (event.shiftKey ? 'backward' : 'forward'); | 163 return 'move-' + (event.shiftKey ? 'backward' : 'forward'); |
| 164 return ''; | 164 return ''; |
| 165 } | 165 } |
| 166 | 166 |
| 167 function handleEditingResult(result, event) { | 167 function handleEditingResult(result, event) { |
| 168 if (result === 'commit') { | 168 if (result === 'commit') { |
| 169 editingCommitted.call(element); | 169 editingCommitted.call(element); |
| 170 event.consume(true); | 170 event.consume(true); |
| (...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 203 | 203 |
| 204 var handle = {cancel: editingCancelled.bind(element), commit: editingCommitt
ed.bind(element), setWidth() {}}; | 204 var handle = {cancel: editingCancelled.bind(element), commit: editingCommitt
ed.bind(element), setWidth() {}}; |
| 205 this.augmentEditingHandle(editingContext, handle); | 205 this.augmentEditingHandle(editingContext, handle); |
| 206 return handle; | 206 return handle; |
| 207 } | 207 } |
| 208 }; | 208 }; |
| 209 | 209 |
| 210 /** | 210 /** |
| 211 * @typedef {{cancel: function(), commit: function(), setWidth: function(number)
}} | 211 * @typedef {{cancel: function(), commit: function(), setWidth: function(number)
}} |
| 212 */ | 212 */ |
| 213 WebInspector.InplaceEditor.Controller; | 213 UI.InplaceEditor.Controller; |
| 214 | 214 |
| 215 | 215 |
| 216 /** | 216 /** |
| 217 * @template T | 217 * @template T |
| 218 * @unrestricted | 218 * @unrestricted |
| 219 */ | 219 */ |
| 220 WebInspector.InplaceEditor.Config = class { | 220 UI.InplaceEditor.Config = class { |
| 221 /** | 221 /** |
| 222 * @param {function(!Element,string,string,T,string)} commitHandler | 222 * @param {function(!Element,string,string,T,string)} commitHandler |
| 223 * @param {function(!Element,T)} cancelHandler | 223 * @param {function(!Element,T)} cancelHandler |
| 224 * @param {T=} context | 224 * @param {T=} context |
| 225 * @param {function(!Element,!Event):boolean=} blurHandler | 225 * @param {function(!Element,!Event):boolean=} blurHandler |
| 226 */ | 226 */ |
| 227 constructor(commitHandler, cancelHandler, context, blurHandler) { | 227 constructor(commitHandler, cancelHandler, context, blurHandler) { |
| 228 this.commitHandler = commitHandler; | 228 this.commitHandler = commitHandler; |
| 229 this.cancelHandler = cancelHandler; | 229 this.cancelHandler = cancelHandler; |
| 230 this.context = context; | 230 this.context = context; |
| (...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 266 this.smartIndent = smartIndent; | 266 this.smartIndent = smartIndent; |
| 267 } | 267 } |
| 268 | 268 |
| 269 /** | 269 /** |
| 270 * @param {function(!Event):string} postKeydownFinishHandler | 270 * @param {function(!Event):string} postKeydownFinishHandler |
| 271 */ | 271 */ |
| 272 setPostKeydownFinishHandler(postKeydownFinishHandler) { | 272 setPostKeydownFinishHandler(postKeydownFinishHandler) { |
| 273 this.postKeydownFinishHandler = postKeydownFinishHandler; | 273 this.postKeydownFinishHandler = postKeydownFinishHandler; |
| 274 } | 274 } |
| 275 }; | 275 }; |
| OLD | NEW |