mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-23 10:07:19 +00:00
Code Issues Releases Wiki Activity

Cancel popups when clicking within an editor (#4658)

Browse Source 
* 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
This commit is contained in:
Simon Huber 2020-06-11 12:41:35 +02:00 committed by GitHub
parent 042c8d8a69
commit e59f606566
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 39 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
core/modules/editor/engines/framed.js
View File

@ -80,7 +80,8 @@ function FramedEngine(options) {
$tw.utils.addEventListeners(this.domNode,[ $tw.utils.addEventListeners(this.domNode,[
{name: "click",handlerObject: this,handlerMethod: "handleClickEvent"}, {name: "click",handlerObject: this,handlerMethod: "handleClickEvent"},
{name: "input",handlerObject: this,handlerMethod: "handleInputEvent"}, {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 // Insert the element into the DOM
this.iframeDoc.body.appendChild(this.domNode); 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 Handle a click
*/ */

3
core/modules/editor/engines/simple.js
View File

@ -122,6 +122,9 @@ SimpleEngine.prototype.handleInputEvent = function(event) {
Handle a dom "focus" event Handle a dom "focus" event
*/ */
SimpleEngine.prototype.handleFocusEvent = function(event) { SimpleEngine.prototype.handleFocusEvent = function(event) {
if(this.widget.editCancelPopups) {
$tw.popup.cancel(0);
}
if(this.widget.editFocusPopup) { if(this.widget.editFocusPopup) {
$tw.popup.triggerPopup({ $tw.popup.triggerPopup({
domNode: this.domNode, domNode: this.domNode,

3
core/modules/editor/factory.js
View File

@ -177,6 +177,7 @@ function editTextWidgetFactory(toolbarEngine,nonToolbarEngine) {
this.editFocusPopup = this.getAttribute("focusPopup"); this.editFocusPopup = this.getAttribute("focusPopup");
this.editFocus = this.getAttribute("focus"); this.editFocus = this.getAttribute("focus");
this.editTabIndex = this.getAttribute("tabindex"); this.editTabIndex = this.getAttribute("tabindex");
this.editCancelPopups = this.getAttribute("cancelPopups","") === "yes";
// Get the default editor element tag and type // Get the default editor element tag and type
var tag,type; var tag,type;
if(this.editField === "text") { if(this.editField === "text") {
@ -208,7 +209,7 @@ function editTextWidgetFactory(toolbarEngine,nonToolbarEngine) {
EditTextWidget.prototype.refresh = function(changedTiddlers) { EditTextWidget.prototype.refresh = function(changedTiddlers) {
var changedAttributes = this.computeAttributes(); var changedAttributes = this.computeAttributes();
// Completely rerender if any of our attributes have changed // 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(); this.refreshSelf();
return true; return true;
} else if(changedTiddlers[this.editTitle]) { } else if(changedTiddlers[this.editTitle]) {

6
core/modules/widgets/edit.js
View File

@ -48,6 +48,7 @@ EditWidget.prototype.execute = function() {
this.editPlaceholder = this.getAttribute("placeholder"); this.editPlaceholder = this.getAttribute("placeholder");
this.editTabIndex = this.getAttribute("tabindex"); this.editTabIndex = this.getAttribute("tabindex");
this.editFocus = this.getAttribute("focus",""); this.editFocus = this.getAttribute("focus","");
this.editCancelPopups = this.getAttribute("cancelPopups","");
// Choose the appropriate edit widget // Choose the appropriate edit widget
this.editorType = this.getEditorType(); this.editorType = this.getEditorType();
// Make the child widgets // Make the child widgets
@ -60,7 +61,8 @@ EditWidget.prototype.execute = function() {
"class": {type: "string", value: this.editClass}, "class": {type: "string", value: this.editClass},
"placeholder": {type: "string", value: this.editPlaceholder}, "placeholder": {type: "string", value: this.editPlaceholder},
"tabindex": {type: "string", value: this.editTabIndex}, "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 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) { EditWidget.prototype.refresh = function(changedTiddlers) {
var changedAttributes = this.computeAttributes(); var changedAttributes = this.computeAttributes();
// Refresh if an attribute has changed, or the type associated with the target tiddler has changed // 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(); this.refreshSelf();
return true; return true;
} else { } else {

1
core/ui/EditTemplate/body-editor.tid
View File

@ -7,6 +7,7 @@ title: $:/core/ui/EditTemplate/body/editor
placeholder={{$:/language/EditTemplate/Body/Placeholder}} placeholder={{$:/language/EditTemplate/Body/Placeholder}}
tabindex={{$:/config/EditTabIndex}} tabindex={{$:/config/EditTabIndex}}
focus={{{ [{$:/config/AutoFocus}match[text]then[true]] ~[[false]] }}} focus={{{ [{$:/config/AutoFocus}match[text]then[true]] ~[[false]] }}}
cancelPopups="yes"
><$set ><$set

2
core/ui/EditTemplate/body.tid
View File

@ -13,7 +13,7 @@ $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
<a href={{!!_canonical_uri}}><$text text={{!!_canonical_uri}}/></a> <a href={{!!_canonical_uri}}><$text text={{!!_canonical_uri}}/></a>
<$edit-text field="_canonical_uri" class="tc-edit-fields" tabindex={{$:/config/EditTabIndex}}></$edit-text> <$edit-text field="_canonical_uri" class="tc-edit-fields" tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"></$edit-text>
</div> </div>

6
core/ui/EditTemplate/fields.tid
View File

@ -51,7 +51,7 @@ $value={{{ [<newFieldValueTiddler>get[text]] }}}/>
<td class="tc-edit-field-name"> <td class="tc-edit-field-name">
<$text text=<<currentField>>/>:</td> <$text text=<<currentField>>/>:</td>
<td class="tc-edit-field-value"> <td class="tc-edit-field-value">
<$edit-text tiddler=<<currentTiddler>> field=<<currentField>> placeholder={{$:/language/EditTemplate/Fields/Add/Value/Placeholder}} tabindex={{$:/config/EditTabIndex}}/> <$edit-text tiddler=<<currentTiddler>> field=<<currentField>> placeholder={{$:/language/EditTemplate/Fields/Add/Value/Placeholder}} tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"/>
</td> </td>
<td class="tc-edit-field-remove"> <td class="tc-edit-field-remove">
<$button class="tc-btn-invisible" tooltip={{$:/language/EditTemplate/Field/Remove/Hint}} aria-label={{$:/language/EditTemplate/Field/Remove/Caption}}> <$button class="tc-btn-invisible" tooltip={{$:/language/EditTemplate/Field/Remove/Hint}} aria-label={{$:/language/EditTemplate/Field/Remove/Caption}}>
@ -72,7 +72,7 @@ $value={{{ [<newFieldValueTiddler>get[text]] }}}/>
<<lingo Fields/Add/Prompt>>&nbsp;&nbsp; <<lingo Fields/Add/Prompt>>&nbsp;&nbsp;
</em> </em>
<span class="tc-edit-field-add-name"> <span class="tc-edit-field-add-name">
<$edit-text tiddler=<<newFieldNameTiddler>> tag="input" default="" placeholder={{$:/language/EditTemplate/Fields/Add/Name/Placeholder}} focusPopup=<<qualify "$:/state/popup/field-dropdown">> class="tc-edit-texteditor tc-popup-handle" tabindex={{$:/config/EditTabIndex}} focus={{{ [{$:/config/AutoFocus}match[fields]then[true]] ~[[false]] }}}/> <$edit-text tiddler=<<newFieldNameTiddler>> tag="input" default="" placeholder={{$:/language/EditTemplate/Fields/Add/Name/Placeholder}} focusPopup=<<qualify "$:/state/popup/field-dropdown">> class="tc-edit-texteditor tc-popup-handle" tabindex={{$:/config/EditTabIndex}} focus={{{ [{$:/config/AutoFocus}match[fields]then[true]] ~[[false]] }}} cancelPopups="yes"/>
</span>&nbsp; </span>&nbsp;
<$button popup=<<qualify "$:/state/popup/field-dropdown">> class="tc-btn-invisible tc-btn-dropdown" tooltip={{$:/language/EditTemplate/Field/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Field/Dropdown/Caption}}>{{$:/core/images/down-arrow}}</$button>&nbsp; <$button popup=<<qualify "$:/state/popup/field-dropdown">> class="tc-btn-invisible tc-btn-dropdown" tooltip={{$:/language/EditTemplate/Field/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Field/Dropdown/Caption}}>{{$:/core/images/down-arrow}}</$button>&nbsp;
<$reveal state=<<qualify "$:/state/popup/field-dropdown">> type="nomatch" text="" default=""> <$reveal state=<<qualify "$:/state/popup/field-dropdown">> type="nomatch" text="" default="">
@ -104,7 +104,7 @@ $value={{{ [<newFieldValueTiddler>get[text]] }}}/>
<span class="tc-edit-field-add-value"> <span class="tc-edit-field-add-value">
<$set name="currentTiddlerCSSescaped" value={{{ [<currentTiddler>escapecss[]] }}}> <$set name="currentTiddlerCSSescaped" value={{{ [<currentTiddler>escapecss[]] }}}>
<$keyboard key="((add-field))" actions=<<new-field-actions>>> <$keyboard key="((add-field))" actions=<<new-field-actions>>>
<$edit-text tiddler=<<newFieldValueTiddler>> tag="input" default="" placeholder={{$:/language/EditTemplate/Fields/Add/Value/Placeholder}} class="tc-edit-texteditor" tabindex={{$:/config/EditTabIndex}}/> <$edit-text tiddler=<<newFieldValueTiddler>> tag="input" default="" placeholder={{$:/language/EditTemplate/Fields/Add/Value/Placeholder}} class="tc-edit-texteditor" tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"/>
</$keyboard> </$keyboard>
</$set> </$set>
</span>&nbsp; </span>&nbsp;

4
core/ui/EditTemplate/tags.tid
View File

@ -30,8 +30,8 @@ color:$(foregroundColor)$;
<$list filter="[all[current]tags[]sort[title]]" storyview="pop"> <$list filter="[all[current]tags[]sort[title]]" storyview="pop">
<$macrocall $name="tag-body" colour={{!!color}} palette={{$:/palette}} icon={{!!icon}}/> <$macrocall $name="tag-body" colour={{!!color}} palette={{$:/palette}} icon={{!!icon}}/>
</$list> </$list>
<$set name="tabIndex" value={{$:/config/EditTabIndex}}> <$vars tabIndex={{$:/config/EditTabIndex}} cancelPopups="yes">
<$macrocall $name="tag-picker"/> <$macrocall $name="tag-picker"/>
</$set> </$vars>
</$fieldmangler> </$fieldmangler>
</div> </div>

2
core/ui/EditTemplate/title.tid
View File

@ -1,7 +1,7 @@
title: $:/core/ui/EditTemplate/title title: $:/core/ui/EditTemplate/title
tags: $:/tags/EditTemplate 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="""`| [ ] { }`"""> <$vars pattern="""[\|\[\]{}]""" bad-chars="""`| [ ] { }`""">

2
core/ui/EditTemplate/type.tid
View File

@ -4,7 +4,7 @@ tags: $:/tags/EditTemplate
\define lingo-base() $:/language/EditTemplate/ \define lingo-base() $:/language/EditTemplate/
\whitespace trim \whitespace trim
<div class="tc-type-selector"><$fieldmangler> <div class="tc-type-selector"><$fieldmangler>
<em class="tc-edit"><<lingo Type/Prompt>></em>&nbsp;&nbsp;<$edit-text field="type" tag="input" default="" placeholder={{$:/language/EditTemplate/Type/Placeholder}} focusPopup=<<qualify "$:/state/popup/type-dropdown">> class="tc-edit-typeeditor tc-edit-texteditor tc-popup-handle" tabindex={{$:/config/EditTabIndex}} focus={{{ [{$:/config/AutoFocus}match[type]then[true]] ~[[false]] }}}/>&nbsp;<$button popup=<<qualify "$:/state/popup/type-dropdown">> 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>&nbsp;<$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}}</$button> <em class="tc-edit"><<lingo Type/Prompt>></em>&nbsp;&nbsp;<$edit-text field="type" tag="input" default="" placeholder={{$:/language/EditTemplate/Type/Placeholder}} focusPopup=<<qualify "$:/state/popup/type-dropdown">> class="tc-edit-typeeditor tc-edit-texteditor tc-popup-handle" tabindex={{$:/config/EditTabIndex}} focus={{{ [{$:/config/AutoFocus}match[type]then[true]] ~[[false]] }}} cancelPopups="yes"/>&nbsp;<$button popup=<<qualify "$:/state/popup/type-dropdown">> 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>&nbsp;<$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}}</$button>
</$fieldmangler></div> </$fieldmangler></div>
<div class="tc-block-dropdown-wrapper"> <div class="tc-block-dropdown-wrapper">

2
core/ui/SideBarSegments/search.tid
View File

@ -6,7 +6,7 @@ tags: $:/tags/SideBarSegment
<$set name="searchTiddler" value="$:/temp/search"> <$set name="searchTiddler" value="$:/temp/search">
<div class="tc-search"> <div class="tc-search">
<$edit-text tiddler="$:/temp/search" type="search" tag="input" focus={{$:/config/Search/AutoFocus}} focusPopup=<<qualify "$:/state/popup/search-dropdown">> class="tc-popup-handle"/> <$edit-text tiddler="$:/temp/search" type="search" tag="input" focus={{$:/config/Search/AutoFocus}} focusPopup=<<qualify "$:/state/popup/search-dropdown">> class="tc-popup-handle" cancelPopups="yes"/>
<$reveal state="$:/temp/search" type="nomatch" text=""> <$reveal state="$:/temp/search" type="nomatch" text="">
<$button tooltip={{$:/language/Buttons/AdvancedSearch/Hint}} aria-label={{$:/language/Buttons/AdvancedSearch/Caption}} class="tc-btn-invisible"> <$button tooltip={{$:/language/Buttons/AdvancedSearch/Hint}} aria-label={{$:/language/Buttons/AdvancedSearch/Caption}} class="tc-btn-invisible">
<$action-setfield $tiddler="$:/temp/advancedsearch" text={{$:/temp/search}}/> <$action-setfield $tiddler="$:/temp/advancedsearch" text={{$:/temp/search}}/>

2
core/wiki/macros/tag-picker.tid
View File

@ -19,7 +19,7 @@ tags: $:/tags/Macro
<div class="tc-edit-add-tag"> <div class="tc-edit-add-tag">
<span class="tc-add-tag-name"> <span class="tc-add-tag-name">
<$keyboard key="ENTER" actions=<<add-tag-actions>>> <$keyboard key="ENTER" actions=<<add-tag-actions>>>
<$edit-text tiddler=<<newTagNameTiddler>> tag="input" default="" placeholder={{$:/language/EditTemplate/Tags/Add/Placeholder}} focusPopup=<<qualify "$:/state/popup/tags-auto-complete">> class="tc-edit-texteditor tc-popup-handle" tabindex=<<tabIndex>> focus={{{ [{$:/config/AutoFocus}match[tags]then[true]] ~[[false]] }}}/> <$edit-text tiddler=<<newTagNameTiddler>> tag="input" default="" placeholder={{$:/language/EditTemplate/Tags/Add/Placeholder}} focusPopup=<<qualify "$:/state/popup/tags-auto-complete">> class="tc-edit-texteditor tc-popup-handle" tabindex=<<tabIndex>> focus={{{ [{$:/config/AutoFocus}match[tags]then[true]] ~[[false]] }}} cancelPopups=<<cancelPopups>>/>
</$keyboard> </$keyboard>
</span>&nbsp;<$button popup=<<qualify "$:/state/popup/tags-auto-complete">> class="tc-btn-invisible" tooltip={{$:/language/EditTemplate/Tags/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Tags/Dropdown/Caption}}>{{$:/core/images/down-arrow}}</$button>&nbsp;<span class="tc-add-tag-button"> </span>&nbsp;<$button popup=<<qualify "$:/state/popup/tags-auto-complete">> class="tc-btn-invisible" tooltip={{$:/language/EditTemplate/Tags/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Tags/Dropdown/Caption}}>{{$:/core/images/down-arrow}}</$button>&nbsp;<span class="tc-add-tag-button">
<$set name="tag" value={{{ [<newTagNameTiddler>get[text]] }}}> <$set name="tag" value={{{ [<newTagNameTiddler>get[text]] }}}>

1
editions/tw5.com/tiddlers/widgets/EditTextWidget.tid
View File

@ -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") | |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 "%" | |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 | |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 ! Notes

1
editions/tw5.com/tiddlers/widgets/EditWidget.tid
View File

@ -18,3 +18,4 @@ The content of the `<$edit>` widget is ignored.
|index |The index to edit | |index |The index to edit |
|class |A CSS class to be added the generated editing widget | |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 | |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 |

5
plugins/tiddlywiki/codemirror/engine.js
View File

@ -128,6 +128,11 @@ function CodeMirrorEngine(options) {
this.cm.on("keydown",function(cm,event) { this.cm.on("keydown",function(cm,event) {
return self.widget.handleKeydownEvent.call(self.widget,event); return self.widget.handleKeydownEvent.call(self.widget,event);
}); });
this.cm.on("focus",function(cm,event) {
if(self.widget.editCancelPopups) {
$tw.popup.cancel(0);
}
});
} }
/* /*

2
plugins/tiddlywiki/menubar/items/search.tid
View File

@ -8,7 +8,7 @@ tags: $:/tags/MenuBar
<span style="margin: 0 0.5em;"> <span style="margin: 0 0.5em;">
<$edit-text tiddler=<<searchTiddler>> 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=<<searchTiddler>> tag="input" type="search" focusPopup="$:/state/popup/menubar-search-dropdown" class="tc-popup-handle tc-menu-show-when-wide" placeholder="Search..." default="" cancelPopups="yes"/>
</span> </span>