From e59f606566fd9e06430a01b9d5aaa96c09a8c3f0 Mon Sep 17 00:00:00 2001 From: Simon Huber Date: Thu, 11 Jun 2020 12:41:35 +0200 Subject: [PATCH] Cancel popups when clicking within an editor (#4658) * Add cancelPopups attribute to edit widget * Add cancelPopups attribute to factory.js * Cancel popups in editor/simple.js * Cancel popups on focus in engines/framed.js * Cancel popups on focus in CodeMirror engine * Add cancelPopups="yes" to tag-picker * Add cancelPopups="yes" to sidebar search * Add cancelPopups="yes" to editor * Add cancelPopups="yes" to fields EditTemplate * Update body.tid * Add cancelPopups="yes" to title EditTemplate * Add cancelPopups="yes" to type EditTemplate * Update EditTextWidget.tid * Update EditWidget.tid * Add cancelPopups="yes" to menubar plugin search * Update tag-picker.tid * Update tags.tid --- core/modules/editor/engines/framed.js | 12 +++++++++++- core/modules/editor/engines/simple.js | 3 +++ core/modules/editor/factory.js | 3 ++- core/modules/widgets/edit.js | 6 ++++-- core/ui/EditTemplate/body-editor.tid | 1 + core/ui/EditTemplate/body.tid | 2 +- core/ui/EditTemplate/fields.tid | 6 +++--- core/ui/EditTemplate/tags.tid | 4 ++-- core/ui/EditTemplate/title.tid | 2 +- core/ui/EditTemplate/type.tid | 2 +- core/ui/SideBarSegments/search.tid | 2 +- core/wiki/macros/tag-picker.tid | 2 +- editions/tw5.com/tiddlers/widgets/EditTextWidget.tid | 1 + editions/tw5.com/tiddlers/widgets/EditWidget.tid | 1 + plugins/tiddlywiki/codemirror/engine.js | 5 +++++ plugins/tiddlywiki/menubar/items/search.tid | 2 +- 16 files changed, 39 insertions(+), 15 deletions(-) diff --git a/core/modules/editor/engines/framed.js b/core/modules/editor/engines/framed.js index 6e7da24da..bdb83fe8a 100644 --- a/core/modules/editor/engines/framed.js +++ b/core/modules/editor/engines/framed.js @@ -80,7 +80,8 @@ function FramedEngine(options) { $tw.utils.addEventListeners(this.domNode,[ {name: "click",handlerObject: this,handlerMethod: "handleClickEvent"}, {name: "input",handlerObject: this,handlerMethod: "handleInputEvent"}, - {name: "keydown",handlerObject: this.widget,handlerMethod: "handleKeydownEvent"} + {name: "keydown",handlerObject: this.widget,handlerMethod: "handleKeydownEvent"}, + {name: "focus",handlerObject: this,handlerMethod: "handleFocusEvent"}, ]); // Insert the element into the DOM this.iframeDoc.body.appendChild(this.domNode); @@ -153,6 +154,15 @@ FramedEngine.prototype.focus = function() { } }; +/* +Handle a focus event +*/ +FramedEngine.prototype.handleFocusEvent = function(event) { + if(this.widget.editCancelPopups) { + $tw.popup.cancel(0); + } +}; + /* Handle a click */ diff --git a/core/modules/editor/engines/simple.js b/core/modules/editor/engines/simple.js index bb77893d7..39f1163f6 100644 --- a/core/modules/editor/engines/simple.js +++ b/core/modules/editor/engines/simple.js @@ -122,6 +122,9 @@ SimpleEngine.prototype.handleInputEvent = function(event) { Handle a dom "focus" event */ SimpleEngine.prototype.handleFocusEvent = function(event) { + if(this.widget.editCancelPopups) { + $tw.popup.cancel(0); + } if(this.widget.editFocusPopup) { $tw.popup.triggerPopup({ domNode: this.domNode, diff --git a/core/modules/editor/factory.js b/core/modules/editor/factory.js index 8dfc88037..98fa599bb 100644 --- a/core/modules/editor/factory.js +++ b/core/modules/editor/factory.js @@ -177,6 +177,7 @@ function editTextWidgetFactory(toolbarEngine,nonToolbarEngine) { this.editFocusPopup = this.getAttribute("focusPopup"); this.editFocus = this.getAttribute("focus"); this.editTabIndex = this.getAttribute("tabindex"); + this.editCancelPopups = this.getAttribute("cancelPopups","") === "yes"; // Get the default editor element tag and type var tag,type; if(this.editField === "text") { @@ -208,7 +209,7 @@ function editTextWidgetFactory(toolbarEngine,nonToolbarEngine) { EditTextWidget.prototype.refresh = function(changedTiddlers) { var changedAttributes = this.computeAttributes(); // Completely rerender if any of our attributes have changed - if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes["default"] || changedAttributes["class"] || changedAttributes.placeholder || changedAttributes.size || changedAttributes.autoHeight || changedAttributes.minHeight || changedAttributes.focusPopup || changedAttributes.rows || changedAttributes.tabindex || changedTiddlers[HEIGHT_MODE_TITLE] || changedTiddlers[ENABLE_TOOLBAR_TITLE]) { + if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes["default"] || changedAttributes["class"] || changedAttributes.placeholder || changedAttributes.size || changedAttributes.autoHeight || changedAttributes.minHeight || changedAttributes.focusPopup || changedAttributes.rows || changedAttributes.tabindex || changedAttributes.cancelPopups || changedTiddlers[HEIGHT_MODE_TITLE] || changedTiddlers[ENABLE_TOOLBAR_TITLE]) { this.refreshSelf(); return true; } else if(changedTiddlers[this.editTitle]) { diff --git a/core/modules/widgets/edit.js b/core/modules/widgets/edit.js index 92ac0e1be..9492952a5 100644 --- a/core/modules/widgets/edit.js +++ b/core/modules/widgets/edit.js @@ -48,6 +48,7 @@ EditWidget.prototype.execute = function() { this.editPlaceholder = this.getAttribute("placeholder"); this.editTabIndex = this.getAttribute("tabindex"); this.editFocus = this.getAttribute("focus",""); + this.editCancelPopups = this.getAttribute("cancelPopups",""); // Choose the appropriate edit widget this.editorType = this.getEditorType(); // Make the child widgets @@ -60,7 +61,8 @@ EditWidget.prototype.execute = function() { "class": {type: "string", value: this.editClass}, "placeholder": {type: "string", value: this.editPlaceholder}, "tabindex": {type: "string", value: this.editTabIndex}, - "focus": {type: "string", value: this.editFocus} + "focus": {type: "string", value: this.editFocus}, + "cancelPopups": {type: "string", value: this.editCancelPopups} }, children: this.parseTreeNode.children }]); @@ -94,7 +96,7 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of EditWidget.prototype.refresh = function(changedTiddlers) { var changedAttributes = this.computeAttributes(); // Refresh if an attribute has changed, or the type associated with the target tiddler has changed - if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes.tabindex || (changedTiddlers[this.editTitle] && this.getEditorType() !== this.editorType)) { + if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes.tabindex || changedAttributes.cancelPopups || (changedTiddlers[this.editTitle] && this.getEditorType() !== this.editorType)) { this.refreshSelf(); return true; } else { diff --git a/core/ui/EditTemplate/body-editor.tid b/core/ui/EditTemplate/body-editor.tid index fe2a034c6..f7e8a3acf 100644 --- a/core/ui/EditTemplate/body-editor.tid +++ b/core/ui/EditTemplate/body-editor.tid @@ -7,6 +7,7 @@ title: $:/core/ui/EditTemplate/body/editor placeholder={{$:/language/EditTemplate/Body/Placeholder}} tabindex={{$:/config/EditTabIndex}} focus={{{ [{$:/config/AutoFocus}match[text]then[true]] ~[[false]] }}} + cancelPopups="yes" ><$set diff --git a/core/ui/EditTemplate/body.tid b/core/ui/EditTemplate/body.tid index 50a8f7f88..8369c82e8 100644 --- a/core/ui/EditTemplate/body.tid +++ b/core/ui/EditTemplate/body.tid @@ -13,7 +13,7 @@ $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$ <$text text={{!!_canonical_uri}}/> -<$edit-text field="_canonical_uri" class="tc-edit-fields" tabindex={{$:/config/EditTabIndex}}> +<$edit-text field="_canonical_uri" class="tc-edit-fields" tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"> diff --git a/core/ui/EditTemplate/fields.tid b/core/ui/EditTemplate/fields.tid index 15132f585..47f582112 100644 --- a/core/ui/EditTemplate/fields.tid +++ b/core/ui/EditTemplate/fields.tid @@ -51,7 +51,7 @@ $value={{{ [get[text]] }}}/> <$text text=<>/>: -<$edit-text tiddler=<> field=<> placeholder={{$:/language/EditTemplate/Fields/Add/Value/Placeholder}} tabindex={{$:/config/EditTabIndex}}/> +<$edit-text tiddler=<> field=<> placeholder={{$:/language/EditTemplate/Fields/Add/Value/Placeholder}} tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"/> <$button class="tc-btn-invisible" tooltip={{$:/language/EditTemplate/Field/Remove/Hint}} aria-label={{$:/language/EditTemplate/Field/Remove/Caption}}> @@ -72,7 +72,7 @@ $value={{{ [get[text]] }}}/> <>   -<$edit-text tiddler=<> tag="input" default="" placeholder={{$:/language/EditTemplate/Fields/Add/Name/Placeholder}} focusPopup=<> class="tc-edit-texteditor tc-popup-handle" tabindex={{$:/config/EditTabIndex}} focus={{{ [{$:/config/AutoFocus}match[fields]then[true]] ~[[false]] }}}/> +<$edit-text tiddler=<> tag="input" default="" placeholder={{$:/language/EditTemplate/Fields/Add/Name/Placeholder}} focusPopup=<> class="tc-edit-texteditor tc-popup-handle" tabindex={{$:/config/EditTabIndex}} focus={{{ [{$:/config/AutoFocus}match[fields]then[true]] ~[[false]] }}} cancelPopups="yes"/>   <$button popup=<> class="tc-btn-invisible tc-btn-dropdown" tooltip={{$:/language/EditTemplate/Field/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Field/Dropdown/Caption}}>{{$:/core/images/down-arrow}}  <$reveal state=<> type="nomatch" text="" default=""> @@ -104,7 +104,7 @@ $value={{{ [get[text]] }}}/> <$set name="currentTiddlerCSSescaped" value={{{ [escapecss[]] }}}> <$keyboard key="((add-field))" actions=<>> -<$edit-text tiddler=<> tag="input" default="" placeholder={{$:/language/EditTemplate/Fields/Add/Value/Placeholder}} class="tc-edit-texteditor" tabindex={{$:/config/EditTabIndex}}/> +<$edit-text tiddler=<> tag="input" default="" placeholder={{$:/language/EditTemplate/Fields/Add/Value/Placeholder}} class="tc-edit-texteditor" tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"/>   diff --git a/core/ui/EditTemplate/tags.tid b/core/ui/EditTemplate/tags.tid index 8ab36bf0d..15d95d705 100644 --- a/core/ui/EditTemplate/tags.tid +++ b/core/ui/EditTemplate/tags.tid @@ -30,8 +30,8 @@ color:$(foregroundColor)$; <$list filter="[all[current]tags[]sort[title]]" storyview="pop"> <$macrocall $name="tag-body" colour={{!!color}} palette={{$:/palette}} icon={{!!icon}}/> -<$set name="tabIndex" value={{$:/config/EditTabIndex}}> +<$vars tabIndex={{$:/config/EditTabIndex}} cancelPopups="yes"> <$macrocall $name="tag-picker"/> - + diff --git a/core/ui/EditTemplate/title.tid b/core/ui/EditTemplate/title.tid index 0f3632ad1..8972504d2 100644 --- a/core/ui/EditTemplate/title.tid +++ b/core/ui/EditTemplate/title.tid @@ -1,7 +1,7 @@ title: $:/core/ui/EditTemplate/title tags: $:/tags/EditTemplate -<$edit-text field="draft.title" class="tc-titlebar tc-edit-texteditor" focus={{{ [{$:/config/AutoFocus}match[title]then[true]] ~[[false]] }}} tabindex={{$:/config/EditTabIndex}}/> +<$edit-text field="draft.title" class="tc-titlebar tc-edit-texteditor" focus={{{ [{$:/config/AutoFocus}match[title]then[true]] ~[[false]] }}} tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"/> <$vars pattern="""[\|\[\]{}]""" bad-chars="""`| [ ] { }`"""> diff --git a/core/ui/EditTemplate/type.tid b/core/ui/EditTemplate/type.tid index ec7ea499d..f9068fa8a 100644 --- a/core/ui/EditTemplate/type.tid +++ b/core/ui/EditTemplate/type.tid @@ -4,7 +4,7 @@ tags: $:/tags/EditTemplate \define lingo-base() $:/language/EditTemplate/ \whitespace trim
<$fieldmangler> -<>  <$edit-text field="type" tag="input" default="" placeholder={{$:/language/EditTemplate/Type/Placeholder}} focusPopup=<> class="tc-edit-typeeditor tc-edit-texteditor tc-popup-handle" tabindex={{$:/config/EditTabIndex}} focus={{{ [{$:/config/AutoFocus}match[type]then[true]] ~[[false]] }}}/> <$button popup=<> class="tc-btn-invisible tc-btn-dropdown" tooltip={{$:/language/EditTemplate/Type/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Type/Dropdown/Caption}}>{{$:/core/images/down-arrow}} <$button message="tm-remove-field" param="type" class="tc-btn-invisible tc-btn-icon" tooltip={{$:/language/EditTemplate/Type/Delete/Hint}} aria-label={{$:/language/EditTemplate/Type/Delete/Caption}}>{{$:/core/images/delete-button}} +<>  <$edit-text field="type" tag="input" default="" placeholder={{$:/language/EditTemplate/Type/Placeholder}} focusPopup=<> class="tc-edit-typeeditor tc-edit-texteditor tc-popup-handle" tabindex={{$:/config/EditTabIndex}} focus={{{ [{$:/config/AutoFocus}match[type]then[true]] ~[[false]] }}} cancelPopups="yes"/> <$button popup=<> class="tc-btn-invisible tc-btn-dropdown" tooltip={{$:/language/EditTemplate/Type/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Type/Dropdown/Caption}}>{{$:/core/images/down-arrow}} <$button message="tm-remove-field" param="type" class="tc-btn-invisible tc-btn-icon" tooltip={{$:/language/EditTemplate/Type/Delete/Hint}} aria-label={{$:/language/EditTemplate/Type/Delete/Caption}}>{{$:/core/images/delete-button}}
diff --git a/core/ui/SideBarSegments/search.tid b/core/ui/SideBarSegments/search.tid index f0ab71a98..9121d5ace 100644 --- a/core/ui/SideBarSegments/search.tid +++ b/core/ui/SideBarSegments/search.tid @@ -6,7 +6,7 @@ tags: $:/tags/SideBarSegment <$set name="searchTiddler" value="$:/temp/search">
-<$edit-text tiddler="$:/temp/search" type="search" tag="input" focus={{$:/config/Search/AutoFocus}} focusPopup=<> class="tc-popup-handle"/> +<$edit-text tiddler="$:/temp/search" type="search" tag="input" focus={{$:/config/Search/AutoFocus}} focusPopup=<> class="tc-popup-handle" cancelPopups="yes"/> <$reveal state="$:/temp/search" type="nomatch" text=""> <$button tooltip={{$:/language/Buttons/AdvancedSearch/Hint}} aria-label={{$:/language/Buttons/AdvancedSearch/Caption}} class="tc-btn-invisible"> <$action-setfield $tiddler="$:/temp/advancedsearch" text={{$:/temp/search}}/> diff --git a/core/wiki/macros/tag-picker.tid b/core/wiki/macros/tag-picker.tid index 5358da52a..22f9c22bf 100644 --- a/core/wiki/macros/tag-picker.tid +++ b/core/wiki/macros/tag-picker.tid @@ -19,7 +19,7 @@ tags: $:/tags/Macro
<$keyboard key="ENTER" actions=<>> -<$edit-text tiddler=<> tag="input" default="" placeholder={{$:/language/EditTemplate/Tags/Add/Placeholder}} focusPopup=<> class="tc-edit-texteditor tc-popup-handle" tabindex=<> focus={{{ [{$:/config/AutoFocus}match[tags]then[true]] ~[[false]] }}}/> +<$edit-text tiddler=<> tag="input" default="" placeholder={{$:/language/EditTemplate/Tags/Add/Placeholder}} focusPopup=<> class="tc-edit-texteditor tc-popup-handle" tabindex=<> focus={{{ [{$:/config/AutoFocus}match[tags]then[true]] ~[[false]] }}} cancelPopups=<>/>  <$button popup=<> class="tc-btn-invisible" tooltip={{$:/language/EditTemplate/Tags/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Tags/Dropdown/Caption}}>{{$:/core/images/down-arrow}}  <$set name="tag" value={{{ [get[text]] }}}> diff --git a/editions/tw5.com/tiddlers/widgets/EditTextWidget.tid b/editions/tw5.com/tiddlers/widgets/EditTextWidget.tid index c1884f1b3..7b6dc80a7 100644 --- a/editions/tw5.com/tiddlers/widgets/EditTextWidget.tid +++ b/editions/tw5.com/tiddlers/widgets/EditTextWidget.tid @@ -31,6 +31,7 @@ The content of the `<$edit-text>` widget is ignored. |autoHeight |Either "yes" or "no" to specify whether to automatically resize `textarea` editors to fit their content (defaults to "yes") | |minHeight |Minimum height for automatically resized `textarea` editors, specified in CSS length units such as "px", "em" or "%" | |rows|Sets the rows attribute of a generated textarea | +|cancelPopups |<<.from-version "5.1.23">> if set to "yes", cancels all popups when the input gets focus | ! Notes diff --git a/editions/tw5.com/tiddlers/widgets/EditWidget.tid b/editions/tw5.com/tiddlers/widgets/EditWidget.tid index 04db79002..34250d002 100644 --- a/editions/tw5.com/tiddlers/widgets/EditWidget.tid +++ b/editions/tw5.com/tiddlers/widgets/EditWidget.tid @@ -18,3 +18,4 @@ The content of the `<$edit>` widget is ignored. |index |The index to edit | |class |A CSS class to be added the generated editing widget | |tabindex |Sets the `tabindex` attribute of the input or textarea to the given value | +|cancelPopups |<<.from-version "5.1.23">> if set to "yes", cancels all popups when the input gets focus | diff --git a/plugins/tiddlywiki/codemirror/engine.js b/plugins/tiddlywiki/codemirror/engine.js index 630482d7d..fe64c1ef5 100755 --- a/plugins/tiddlywiki/codemirror/engine.js +++ b/plugins/tiddlywiki/codemirror/engine.js @@ -128,6 +128,11 @@ function CodeMirrorEngine(options) { this.cm.on("keydown",function(cm,event) { return self.widget.handleKeydownEvent.call(self.widget,event); }); + this.cm.on("focus",function(cm,event) { + if(self.widget.editCancelPopups) { + $tw.popup.cancel(0); + } + }); } /* diff --git a/plugins/tiddlywiki/menubar/items/search.tid b/plugins/tiddlywiki/menubar/items/search.tid index edbf773ee..64c45afc4 100644 --- a/plugins/tiddlywiki/menubar/items/search.tid +++ b/plugins/tiddlywiki/menubar/items/search.tid @@ -8,7 +8,7 @@ tags: $:/tags/MenuBar -<$edit-text tiddler=<> tag="input" type="search" focusPopup="$:/state/popup/menubar-search-dropdown" class="tc-popup-handle tc-menu-show-when-wide" placeholder="Search..." default=""/> +<$edit-text tiddler=<> tag="input" type="search" focusPopup="$:/state/popup/menubar-search-dropdown" class="tc-popup-handle tc-menu-show-when-wide" placeholder="Search..." default="" cancelPopups="yes"/>