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,[
{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
*/

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

@ -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,

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

@ -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]) {

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

@ -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 {

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

@ -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

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>
<$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>

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

@ -51,7 +51,7 @@ $value={{{ [<newFieldValueTiddler>get[text]] }}}/>
<td class="tc-edit-field-name">
<$text text=<<currentField>>/>:</td>
<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 class="tc-edit-field-remove">
<$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;
</em>
<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;
<$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="">
@ -104,7 +104,7 @@ $value={{{ [<newFieldValueTiddler>get[text]] }}}/>
<span class="tc-edit-field-add-value">
<$set name="currentTiddlerCSSescaped" value={{{ [<currentTiddler>escapecss[]] }}}>
<$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>
</$set>
</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">
<$macrocall $name="tag-body" colour={{!!color}} palette={{$:/palette}} icon={{!!icon}}/>
</$list>
<$set name="tabIndex" value={{$:/config/EditTabIndex}}>
<$vars tabIndex={{$:/config/EditTabIndex}} cancelPopups="yes">
<$macrocall $name="tag-picker"/>
</$set>
</$vars>
</$fieldmangler>
</div>

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

@ -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="""`| [ ] { }`""">

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

@ -4,7 +4,7 @@ tags: $:/tags/EditTemplate
\define lingo-base() $:/language/EditTemplate/
\whitespace trim
<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>
<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">
<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="">
<$button tooltip={{$:/language/Buttons/AdvancedSearch/Hint}} aria-label={{$:/language/Buttons/AdvancedSearch/Caption}} class="tc-btn-invisible">
<$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">
<span class="tc-add-tag-name">
<$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>
</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]] }}}>

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") |
|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

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 |
|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 |

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

@ -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);
}
});
}
/*

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

@ -8,7 +8,7 @@ tags: $:/tags/MenuBar
<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>