third_party/WebKit/Source/devtools/front_end/ui/InplaceEditor.js

   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
   3 // found in the LICENSE file.
   4
   5 /**
   6  * @constructor
   7  */
   8 WebInspector.InplaceEditor = function()
   9 {
  10 }
  11
  12 /**
  13  * @typedef {{cancel: function(), commit: function(), setWidth: function(number)}}
  14  */
  15 WebInspector.InplaceEditor.Controller;
  16
  17 /**
  18  * @param {!Element} element
  19  * @param {!WebInspector.InplaceEditor.Config=} config
  20  * @return {?WebInspector.InplaceEditor.Controller}
  21  */
  22 WebInspector.InplaceEditor.startEditing = function(element, config)
  23 {
  24     if (!WebInspector.InplaceEditor._defaultInstance)
  25         WebInspector.InplaceEditor._defaultInstance = new WebInspector.InplaceEditor();
  26     return WebInspector.InplaceEditor._defaultInstance.startEditing(element, config);
  27 }
  28
  29 /**
  30  * @param {!Element} element
  31  * @param {!WebInspector.InplaceEditor.Config=} config
  32  * @return {!Promise.<!WebInspector.InplaceEditor.Controller>}
  33  */
  34 WebInspector.InplaceEditor.startMultilineEditing = function(element, config)
  35 {
  36     return self.runtime.instancePromise(WebInspector.InplaceEditor).then(startEditing);
  37
  38     /**
  39      * @param {!Object} inplaceEditor
  40      * @return {!WebInspector.InplaceEditor.Controller|!Promise.<!WebInspector.InplaceEditor.Controller>}
  41      */
  42     function startEditing(inplaceEditor)
  43     {
  44         var controller = /** @type {!WebInspector.InplaceEditor} */ (inplaceEditor).startEditing(element, config);
  45         if (!controller)
  46             return Promise.reject(new Error("Editing is already in progress"));
  47         return controller;
  48     }
  49 }
  50
  51 WebInspector.InplaceEditor.prototype = {
  52     /**
  53      * @return {string}
  54      */
  55     editorContent: function(editingContext) {
  56         var element = editingContext.element;
  57         if (element.tagName === "INPUT" && element.type === "text")
  58             return element.value;
  59
  60         return element.textContent;
  61     },
  62
  63     setUpEditor: function(editingContext)
  64     {
  65         var element = editingContext.element;
  66         element.classList.add("editing");
  67
  68         var oldTabIndex = element.getAttribute("tabIndex");
  69         if (typeof oldTabIndex !== "number" || oldTabIndex < 0)
  70             element.tabIndex = 0;
  71         WebInspector.setCurrentFocusElement(element);
  72         editingContext.oldTabIndex = oldTabIndex;
  73     },
  74
  75     closeEditor: function(editingContext)
  76     {
  77         var element = editingContext.element;
  78         element.classList.remove("editing");
  79
  80         if (typeof editingContext.oldTabIndex !== "number")
  81             element.removeAttribute("tabIndex");
  82         else
  83             element.tabIndex = editingContext.oldTabIndex;
  84         element.scrollTop = 0;
  85         element.scrollLeft = 0;
  86     },
  87
  88     cancelEditing: function(editingContext)
  89     {
  90         var element = editingContext.element;
  91         if (element.tagName === "INPUT" && element.type === "text")
  92             element.value = editingContext.oldText;
  93         else
  94             element.textContent = editingContext.oldText;
  95     },
  96
  97     augmentEditingHandle: function(editingContext, handle)
  98     {
  99     },
 100
 101     /**
 102      * @param {!Element} element
 103      * @param {!WebInspector.InplaceEditor.Config=} config
 104      * @return {?WebInspector.InplaceEditor.Controller}
 105      */
 106     startEditing: function(element, config)
 107     {
 108         if (!WebInspector.markBeingEdited(element, true))
 109             return null;
 110
 111         config = config || new WebInspector.InplaceEditor.Config(function() {}, function() {});
 112         var editingContext = { element: element, config: config };
 113         var committedCallback = config.commitHandler;
 114         var cancelledCallback = config.cancelHandler;
 115         var pasteCallback = config.pasteHandler;
 116         var context = config.context;
 117         var isMultiline = config.multiline || false;
 118         var moveDirection = "";
 119         var self = this;
 120
 121         /**
 122          * @param {!Event} e
 123          */
 124         function consumeCopy(e)
 125         {
 126             e.consume();
 127         }
 128
 129         this.setUpEditor(editingContext);
 130
 131         editingContext.oldText = isMultiline ? config.initialValue : this.editorContent(editingContext);
 132
 133         /**
 134          * @param {!Event=} e
 135          */
 136         function blurEventListener(e) {
 137             if (config.blurHandler && !config.blurHandler(element, e))
 138                 return;
 139             if (!isMultiline || !e || !e.relatedTarget || !e.relatedTarget.isSelfOrDescendant(element))
 140                 editingCommitted.call(element);
 141         }
 142
 143         function cleanUpAfterEditing()
 144         {
 145             WebInspector.markBeingEdited(element, false);
 146
 147             element.removeEventListener("blur", blurEventListener, isMultiline);
 148             element.removeEventListener("keydown", keyDownEventListener, true);
 149             if (pasteCallback)
 150                 element.removeEventListener("paste", pasteEventListener, true);
 151
 152             WebInspector.restoreFocusFromElement(element);
 153             self.closeEditor(editingContext);
 154         }
 155
 156         /** @this {Element} */
 157         function editingCancelled()
 158         {
 159             self.cancelEditing(editingContext);
 160             cleanUpAfterEditing();
 161             cancelledCallback(this, context);
 162         }
 163
 164         /** @this {Element} */
 165         function editingCommitted()
 166         {
 167             cleanUpAfterEditing();
 168
 169             committedCallback(this, self.editorContent(editingContext), editingContext.oldText, context, moveDirection);
 170         }
 171
 172         /**
 173          * @param {!Event} event
 174          * @return {string}
 175          */
 176         function defaultFinishHandler(event)
 177         {
 178             var isMetaOrCtrl = WebInspector.isMac() ?
 179                 event.metaKey && !event.shiftKey && !event.ctrlKey && !event.altKey :
 180                 event.ctrlKey && !event.shiftKey && !event.metaKey && !event.altKey;
 181             if (isEnterKey(event) && (event.isMetaOrCtrlForTest || !isMultiline || isMetaOrCtrl))
 182                 return "commit";
 183             else if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code || event.keyIdentifier === "U+001B")
 184                 return "cancel";
 185             else if (!isMultiline && event.keyIdentifier === "U+0009") // Tab key
 186                 return "move-" + (event.shiftKey ? "backward" : "forward");
 187             return "";
 188         }
 189
 190         function handleEditingResult(result, event)
 191         {
 192             if (result === "commit") {
 193                 editingCommitted.call(element);
 194                 event.consume(true);
 195             } else if (result === "cancel") {
 196                 editingCancelled.call(element);
 197                 event.consume(true);
 198             } else if (result && result.startsWith("move-")) {
 199                 moveDirection = result.substring(5);
 200                 if (event.keyIdentifier !== "U+0009")
 201                     blurEventListener();
 202             }
 203         }
 204
 205         /**
 206          * @param {!Event} event
 207          */
 208         function pasteEventListener(event)
 209         {
 210             var result = pasteCallback(event);
 211             handleEditingResult(result, event);
 212         }
 213
 214         /**
 215          * @param {!Event} event
 216          */
 217         function keyDownEventListener(event)
 218         {
 219             var result = defaultFinishHandler(event);
 220             if (!result && config.postKeydownFinishHandler)
 221                 result = config.postKeydownFinishHandler(event);
 222             handleEditingResult(result, event);
 223         }
 224
 225         element.addEventListener("blur", blurEventListener, isMultiline);
 226         element.addEventListener("keydown", keyDownEventListener, true);
 227         if (pasteCallback)
 228             element.addEventListener("paste", pasteEventListener, true);
 229
 230         var handle = {
 231             cancel: editingCancelled.bind(element),
 232             commit: editingCommitted.bind(element),
 233             setWidth: function() {}
 234         };
 235         this.augmentEditingHandle(editingContext, handle);
 236         return handle;
 237     }
 238 }
 239
 240 /**
 241  * @constructor
 242  * @param {function(!Element,string,string,T,string)} commitHandler
 243  * @param {function(!Element,T)} cancelHandler
 244  * @param {T=} context
 245  * @param {function(!Element,!Event):boolean=} blurHandler
 246  * @template T
 247  */
 248 WebInspector.InplaceEditor.Config = function(commitHandler, cancelHandler, context, blurHandler)
 249 {
 250     this.commitHandler = commitHandler;
 251     this.cancelHandler = cancelHandler;
 252     this.context = context;
 253     this.blurHandler = blurHandler;
 254
 255     /**
 256      * @type {function(!Event):string|undefined}
 257      */
 258     this.pasteHandler;
 259
 260     /**
 261      * @type {boolean|undefined}
 262      */
 263     this.multiline;
 264
 265     /**
 266      * @type {function(!Event):string|undefined}
 267      */
 268     this.postKeydownFinishHandler;
 269 }
 270
 271 WebInspector.InplaceEditor.Config.prototype = {
 272     setPasteHandler: function(pasteHandler)
 273     {
 274         this.pasteHandler = pasteHandler;
 275     },
 276
 277     /**
 278      * @param {string} initialValue
 279      * @param {!Object} mode
 280      * @param {string} theme
 281      * @param {boolean=} lineWrapping
 282      * @param {boolean=} smartIndent
 283      */
 284     setMultilineOptions: function(initialValue, mode, theme, lineWrapping, smartIndent)
 285     {
 286         this.multiline = true;
 287         this.initialValue = initialValue;
 288         this.mode = mode;
 289         this.theme = theme;
 290         this.lineWrapping = lineWrapping;
 291         this.smartIndent = smartIndent;
 292     },
 293
 294     /**
 295      * @param {function(!Event):string} postKeydownFinishHandler
 296      */
 297     setPostKeydownFinishHandler: function(postKeydownFinishHandler)
 298     {
 299         this.postKeydownFinishHandler = postKeydownFinishHandler;
 300     }
 301 }