From 0d2df34c58f02dd9e52fb76a9757daacdab163f2 Mon Sep 17 00:00:00 2001 From: Simon Huber Date: Mon, 13 Jul 2020 18:42:55 +0200 Subject: [PATCH] Keyboard-driven dropdown inputs (#4725) * Add shortcut descriptions to Misc.multids * Update framed.js * Update simple.js * Add inputActions and refreshTitle to factory.js * Add inputActions and refreshTitle to edit.js * Update DefaultSearchResultList.tid * Update search.tid * Update ShortcutInfo.multids * Update shortcuts.multids * Create keyboard-driven-input.tid * Update tag-picker.tid * Create keyboard-driven-input_Macro.tid * Update EditTextWidget.tid * Update EditWidget.tid * Update engine.js * Update base.tid * Use primaryListFilter, secondaryListFilter, primaryList and secondaryList * Update tag-picker.tid * Update search.tid * Update DefaultSearchResultList.tid * Update keyboard-driven-input_Macro.tid * Fix typo udpate -> update * Update framed.js --- core/language/en-GB/Misc.multids | 5 ++ core/modules/editor/engines/framed.js | 14 +++- core/modules/editor/engines/simple.js | 12 +++- core/modules/editor/factory.js | 6 +- core/modules/widgets/edit.js | 4 +- core/ui/DefaultSearchResultList.tid | 12 +++- core/ui/SideBarSegments/search.tid | 72 ++++++++++++------- core/wiki/config/ShortcutInfo.multids | 5 ++ core/wiki/config/shortcuts/shortcuts.multids | 5 ++ core/wiki/macros/keyboard-driven-input.tid | 51 +++++++++++++ core/wiki/macros/tag-picker.tid | 57 ++++++++++----- .../macros/keyboard-driven-input_Macro.tid | 20 ++++++ .../tiddlers/widgets/EditTextWidget.tid | 2 + .../tw5.com/tiddlers/widgets/EditWidget.tid | 3 + plugins/tiddlywiki/codemirror/engine.js | 12 +++- themes/tiddlywiki/vanilla/base.tid | 13 ++++ 16 files changed, 244 insertions(+), 49 deletions(-) create mode 100644 core/wiki/macros/keyboard-driven-input.tid create mode 100644 editions/tw5.com/tiddlers/macros/keyboard-driven-input_Macro.tid diff --git a/core/language/en-GB/Misc.multids b/core/language/en-GB/Misc.multids index 861bb6899..62d41adfa 100644 --- a/core/language/en-GB/Misc.multids +++ b/core/language/en-GB/Misc.multids @@ -62,6 +62,11 @@ OfficialPluginLibrary: Official ~TiddlyWiki Plugin Library OfficialPluginLibrary/Hint: The official ~TiddlyWiki plugin library at tiddlywiki.com. Plugins, themes and language packs are maintained by the core team. PluginReloadWarning: Please save {{$:/core/ui/Buttons/save-wiki}} and reload {{$:/core/ui/Buttons/refresh}} to allow changes to ~JavaScript plugins to take effect RecentChanges/DateFormat: DDth MMM YYYY +Shortcuts/Input/Accept/Hint: Accept the selected item +Shortcuts/Input/AcceptVariant/Hint: Accept the selected item (variant) +Shortcuts/Input/Cancel/Hint: Clear the input field +Shortcuts/Input/Down/Hint: Select the next item +Shortcuts/Input/Up/Hint: Select the previous item SystemTiddler/Tooltip: This is a system tiddler SystemTiddlers/Include/Prompt: Include system tiddlers TagManager/Colour/Heading: Colour diff --git a/core/modules/editor/engines/framed.js b/core/modules/editor/engines/framed.js index bdb83fe8a..8413d11df 100644 --- a/core/modules/editor/engines/framed.js +++ b/core/modules/editor/engines/framed.js @@ -81,7 +81,7 @@ function FramedEngine(options) { {name: "click",handlerObject: this,handlerMethod: "handleClickEvent"}, {name: "input",handlerObject: this,handlerMethod: "handleInputEvent"}, {name: "keydown",handlerObject: this.widget,handlerMethod: "handleKeydownEvent"}, - {name: "focus",handlerObject: this,handlerMethod: "handleFocusEvent"}, + {name: "focus",handlerObject: this,handlerMethod: "handleFocusEvent"} ]); // Insert the element into the DOM this.iframeDoc.body.appendChild(this.domNode); @@ -108,13 +108,20 @@ Set the text of the engine if it doesn't currently have focus FramedEngine.prototype.setText = function(text,type) { if(!this.domNode.isTiddlyWikiFakeDom) { if(this.domNode.ownerDocument.activeElement !== this.domNode) { - this.domNode.value = text; + this.updateDomNodeText(text); } // Fix the height if needed this.fixHeight(); } }; +/* +Update the DomNode with the new text +*/ +FramedEngine.prototype.updateDomNodeText = function(text) { + this.domNode.value = text; +}; + /* Get the text of the engine */ @@ -177,6 +184,9 @@ Handle a dom "input" event which occurs when the text has changed FramedEngine.prototype.handleInputEvent = function(event) { this.widget.saveChanges(this.getText()); this.fixHeight(); + if(this.widget.editInputActions) { + this.widget.invokeActionString(this.widget.editInputActions); + } return true; }; diff --git a/core/modules/editor/engines/simple.js b/core/modules/editor/engines/simple.js index 39f1163f6..1c50d28b1 100644 --- a/core/modules/editor/engines/simple.js +++ b/core/modules/editor/engines/simple.js @@ -68,13 +68,20 @@ Set the text of the engine if it doesn't currently have focus SimpleEngine.prototype.setText = function(text,type) { if(!this.domNode.isTiddlyWikiFakeDom) { if(this.domNode.ownerDocument.activeElement !== this.domNode || text === "") { - this.domNode.value = text; + this.updateDomNodeText(text); } // Fix the height if needed this.fixHeight(); } }; +/* +Update the DomNode with the new text +*/ +SimpleEngine.prototype.updateDomNodeText = function(text) { + this.domNode.value = text; +}; + /* Get the text of the engine */ @@ -115,6 +122,9 @@ Handle a dom "input" event which occurs when the text has changed SimpleEngine.prototype.handleInputEvent = function(event) { this.widget.saveChanges(this.getText()); this.fixHeight(); + if(this.widget.editInputActions) { + this.widget.invokeActionString(this.widget.editInputActions); + } return true; }; diff --git a/core/modules/editor/factory.js b/core/modules/editor/factory.js index 98fa599bb..e7c4ec3d8 100644 --- a/core/modules/editor/factory.js +++ b/core/modules/editor/factory.js @@ -178,6 +178,8 @@ function editTextWidgetFactory(toolbarEngine,nonToolbarEngine) { this.editFocus = this.getAttribute("focus"); this.editTabIndex = this.getAttribute("tabindex"); this.editCancelPopups = this.getAttribute("cancelPopups","") === "yes"; + this.editInputActions = this.getAttribute("inputActions"); + this.editRefreshTitle = this.getAttribute("refreshTitle"); // Get the default editor element tag and type var tag,type; if(this.editField === "text") { @@ -209,9 +211,11 @@ 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 || changedAttributes.cancelPopups || 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 || changedAttributes.inputActions || changedAttributes.refreshTitle || changedTiddlers[HEIGHT_MODE_TITLE] || changedTiddlers[ENABLE_TOOLBAR_TITLE]) { this.refreshSelf(); return true; + } else if (changedTiddlers[this.editRefreshTitle]) { + this.engine.updateDomNodeText(this.getEditInfo().value); } else if(changedTiddlers[this.editTitle]) { var editInfo = this.getEditInfo(); this.updateEditor(editInfo.value,editInfo.type); diff --git a/core/modules/widgets/edit.js b/core/modules/widgets/edit.js index 472fc534b..6ee918170 100644 --- a/core/modules/widgets/edit.js +++ b/core/modules/widgets/edit.js @@ -49,6 +49,8 @@ EditWidget.prototype.execute = function() { this.editTabIndex = this.getAttribute("tabindex"); this.editFocus = this.getAttribute("focus",""); this.editCancelPopups = this.getAttribute("cancelPopups",""); + this.editInputActions = this.getAttribute("inputActions"); + this.editRefreshTitle = this.getAttribute("refreshTitle"); // Choose the appropriate edit widget this.editorType = this.getEditorType(); // Make the child widgets @@ -87,7 +89,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 || changedAttributes.cancelPopups || (changedTiddlers[this.editTitle] && this.getEditorType() !== this.editorType)) { + if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes.tabindex || changedAttributes.cancelPopups || changedAttributes.inputActions || changedAttributes.refreshTitle || (changedTiddlers[this.editTitle] && this.getEditorType() !== this.editorType)) { this.refreshSelf(); return true; } else { diff --git a/core/ui/DefaultSearchResultList.tid b/core/ui/DefaultSearchResultList.tid index 331ef8718..1e0b1e403 100644 --- a/core/ui/DefaultSearchResultList.tid +++ b/core/ui/DefaultSearchResultList.tid @@ -5,11 +5,19 @@ caption: {{$:/language/Search/DefaultResults/Caption}} \define searchResultList() //{{$:/language/Search/Matches/Title}}// -<$list filter="[!is[system]search:title{$(searchTiddler)$}sort[title]limit[250]]" template="$:/core/ui/ListItemTemplate"/> +<$list filter="[!is[system]search:title{$(searchTiddler)$}sort[title]limit[250]]"> +addsuffix[-primaryList]] -[get[text]] +[then[]else[tc-list-item-selected]] }}}> +<$transclude tiddler="$:/core/ui/ListItemTemplate"/> + + //{{$:/language/Search/Matches/All}}// -<$list filter="[!is[system]search{$(searchTiddler)$}sort[title]limit[250]]" template="$:/core/ui/ListItemTemplate"/> +<$list filter="[!is[system]search{$(searchTiddler)$}sort[title]limit[250]]"> +addsuffix[-secondaryList]] -[get[text]] +[then[]else[tc-list-item-selected]] }}}> +<$transclude tiddler="$:/core/ui/ListItemTemplate"/> + + \end <> diff --git a/core/ui/SideBarSegments/search.tid b/core/ui/SideBarSegments/search.tid index 9121d5ace..08cbd45f7 100644 --- a/core/ui/SideBarSegments/search.tid +++ b/core/ui/SideBarSegments/search.tid @@ -2,25 +2,12 @@ title: $:/core/ui/SideBarSegments/search tags: $:/tags/SideBarSegment \whitespace trim -
-<$set name="searchTiddler" value="$:/temp/search"> -
-<$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}}/> -<$action-setfield $tiddler="$:/temp/search" text=""/> -<$action-navigate $to="$:/AdvancedSearch"/> -{{$:/core/images/advanced-search-button}} - -<$button class="tc-btn-invisible"> -<$action-setfield $tiddler="$:/temp/search" text="" /> -{{$:/core/images/close-button}} - +\define count-popup-button() +\whitespace trim <$button popup=<> class="tc-btn-invisible"> {{$:/core/images/down-arrow}} -<$list filter="[{$:/temp/search}minlength{$:/config/Search/MinLength}limit[1]]" variable="listItem"> +<$list filter="[{$(searchTiddler)$}minlength{$:/config/Search/MinLength}limit[1]]" variable="listItem"> <$set name="searchTerm" value={{{ [get[text]] }}}> <$set name="resultCount" value="""<$count filter="[!is[system]search]"/>"""> {{$:/language/Search/Matches}} @@ -28,28 +15,65 @@ tags: $:/tags/SideBarSegment +\end + +\define search-results-list() +\whitespace trim +<$list filter="[{$(searchTiddler)$}minlength{$:/config/Search/MinLength}limit[1]]" emptyMessage="""
{{$:/language/Search/Search/TooShort}}
""" variable="listItem"> + +{{$:/core/ui/SearchResults}} + + +\end + +\define delete-state-tiddlers() <$action-deletetiddler $filter="[[$:/temp/search]] [] []"/> + +\define cancel-search-actions() <$action-deletetiddler $filter="[<__storeTitle__>] [<__tiddler__>] [<__selectionStateTitle__>]"/> + +\define input-accept-actions() <$action-navigate $to={{{ [<__tiddler__>get[text]] }}}/> + +\define input-accept-variant-actions() <$action-sendmessage $message="tm-edit-tiddler" $param={{{ [<__tiddler__>get[text]] }}}/> + +
+ +<$vars searchTiddler="$:/temp/search/input" searchListState=<> titleSearchFilter="[!is[system]search:titlesort[title]limit[250]]" allSearchFilter="[!is[system]searchsort[title]limit[250]]"> +
+<$macrocall $name="keyboard-driven-input" tiddler="$:/temp/search" storeTitle=<> + selectionStateTitle=<> refreshTitle="$:/temp/search/refresh" type="search" + tag="input" focus={{$:/config/Search/AutoFocus}} focusPopup=<> + class="tc-popup-handle" primaryListFilter=<> secondaryListFilter=<> + filterMinLength={{$:/config/Search/MinLength}} inputCancelActions=<> + inputAcceptActions=<> inputAcceptVariantActions=<> cancelPopups="yes" /> +<$reveal state=<> 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}}/> +<> +<$action-navigate $to="$:/AdvancedSearch"/> +{{$:/core/images/advanced-search-button}} + +<$button class="tc-btn-invisible"> +<> +{{$:/core/images/close-button}} + +<> -<$reveal state="$:/temp/search" type="match" text=""> +<$reveal state=<> type="match" text=""> <$button to="$:/AdvancedSearch" tooltip={{$:/language/Buttons/AdvancedSearch/Hint}} aria-label={{$:/language/Buttons/AdvancedSearch/Caption}} class="tc-btn-invisible"> {{$:/core/images/advanced-search-button}}
-<$reveal tag="div" class="tc-block-dropdown-wrapper" state="$:/temp/search" type="nomatch" text=""> +<$reveal tag="div" class="tc-block-dropdown-wrapper" state=<> type="nomatch" text=""> <$reveal tag="div" class="tc-block-dropdown tc-search-drop-down tc-popup-handle" state=<> type="nomatch" text="" default=""> -<$list filter="[{$:/temp/search}minlength{$:/config/Search/MinLength}limit[1]]" emptyMessage="""
{{$:/language/Search/Search/TooShort}}
""" variable="listItem"> - -{{$:/core/ui/SearchResults}} - - +<> - +
diff --git a/core/wiki/config/ShortcutInfo.multids b/core/wiki/config/ShortcutInfo.multids index 5862f2394..f013aa6a4 100644 --- a/core/wiki/config/ShortcutInfo.multids +++ b/core/wiki/config/ShortcutInfo.multids @@ -11,6 +11,11 @@ heading-3: {{$:/language/Buttons/Heading3/Hint}} heading-4: {{$:/language/Buttons/Heading4/Hint}} heading-5: {{$:/language/Buttons/Heading5/Hint}} heading-6: {{$:/language/Buttons/Heading6/Hint}} +input-accept: {{$:/language/Shortcuts/Input/Accept/Hint}} +input-accept-variant: {{$:/language/Shortcuts/Input/AcceptVariant/Hint}} +input-cancel: {{$:/language/Shortcuts/Input/Cancel/Hint}} +input-down: {{$:/language/Shortcuts/Input/Down/Hint}} +input-up: {{$:/language/Shortcuts/Input/Up/Hint}} italic: {{$:/language/Buttons/Italic/Hint}} link: {{$:/language/Buttons/Link/Hint}} linkify: {{$:/language/Buttons/Linkify/Hint}} diff --git a/core/wiki/config/shortcuts/shortcuts.multids b/core/wiki/config/shortcuts/shortcuts.multids index 1fbb9576b..3c7b773ed 100644 --- a/core/wiki/config/shortcuts/shortcuts.multids +++ b/core/wiki/config/shortcuts/shortcuts.multids @@ -11,6 +11,11 @@ heading-3: ctrl-3 heading-4: ctrl-4 heading-5: ctrl-5 heading-6: ctrl-6 +input-accept: Enter +input-accept-variant: Alt-Enter +input-cancel: Escape +input-down: Down +input-up: Up link: ctrl-L linkify: alt-shift-L list-bullet: ctrl-shift-L diff --git a/core/wiki/macros/keyboard-driven-input.tid b/core/wiki/macros/keyboard-driven-input.tid new file mode 100644 index 000000000..d26776f71 --- /dev/null +++ b/core/wiki/macros/keyboard-driven-input.tid @@ -0,0 +1,51 @@ +title: $:/core/macros/keyboard-driven-input +tags: $:/tags/Macro + +\define keyboard-input-actions() +<$list filter="[<__index__>match[]]"> +<$action-setfield $tiddler=<<__storeTitle__>> text={{{ [<__tiddler__>get<__field__>] }}}/> + +<$list filter="[<__index__>!match[]]"> +<$action-setfield $tiddler=<<__storeTitle__>> text={{{ [<__tiddler__>getindex<__index__>] }}}/> + +\end + +\define input-next-actions(afterOrBefore:"after",reverse:"") +<$list filter="[<__storeTitle__>get[text]minlength<__filterMinLength__>] [<__filterMinLength__>match[0]] +[limit[1]]" variable="ignore"> +<$vars userInput={{{ [<__storeTitle__>get[text]] }}} selectedItem={{{ [<__selectionStateTitle__>get[text]] }}}> +<$set name="filteredList" filter="[subfilter<__primaryListFilter__>addsuffix[-primaryList]] =[subfilter<__secondaryListFilter__>addsuffix[-secondaryList]]"> +<$set name="nextItem" value={{{ [enlist$afterOrBefore$] ~[enlist$reverse$nth[1]] }}}> +<$list filter="[minlength[1]]"> +<$action-setfield $tiddler=<<__selectionStateTitle__>> text=<>/> +<$list filter="[<__index__>match[]]"> +<$action-setfield $tiddler=<<__tiddler__>> $field=<<__field__>> $value={{{ [] +[splitregexp[(?:.(?!-))+$]] }}}/> + +<$list filter="[<__index__>!match[]]"> +<$action-setfield $tiddler=<<__tiddler__>> $index=<<__index__>> $value={{{ [] +[splitregexp[(?:.(?!-))+$]] }}}/> + +<$action-setfield $tiddler=<<__refreshTitle__>> text="yes"/> + + + + + +\end + +\define keyboard-driven-input(tiddler,storeTitle,field:"text",index:"",tag:"input",type,focus:"",inputAcceptActions,inputAcceptVariantActions,inputCancelActions,placeholder:"",default:"",class,primaryListFilter,secondaryListFilter,focusPopup,rows,minHeight,tabindex,size,autoHeight,filterMinLength:"0",refreshTitle,selectionStateTitle,cancelPopups:"") +<$keyboard key="((input-accept))" actions=<<__inputAcceptActions__>>> +<$keyboard key="((input-accept-variant))" actions=<<__inputAcceptVariantActions__>>> +<$keyboard key="((input-up))" actions=<>> +<$keyboard key="((input-down))" actions=<>> +<$keyboard key="((input-cancel))" actions=<<__inputCancelActions__>>> +<$edit-text tiddler=<<__tiddler__>> field=<<__field__>> index=<<__index__>> + inputActions=<> tag=<<__tag__>> class=<<__class__>> + placeholder=<<__placeholder__>> default=<<__default__>> focusPopup=<<__focusPopup__>> + focus=<<__focus__>> type=<<__type__>> rows=<<__rows__>> minHeight=<<__minHeight__>> + tabindex=<<__tabindex__>> size=<<__size__>> autoHeight=<<__autoHeight__>> + refreshTitle=<<__refreshTitle__>> cancelPopups=<<__cancelPopups__>>/> + + + + + +\end diff --git a/core/wiki/macros/tag-picker.tid b/core/wiki/macros/tag-picker.tid index 01b3a091e..283c81e3b 100644 --- a/core/wiki/macros/tag-picker.tid +++ b/core/wiki/macros/tag-picker.tid @@ -1,36 +1,54 @@ title: $:/core/macros/tag-picker tags: $:/tags/Macro +\define delete-tag-state-tiddlers() <$action-deletetiddler $filter="[] [] []"/> + \define add-tag-actions(actions) -<$set name="tag" value={{{ [get[text]] }}}> +<$set name="tag" value={{{ [<__tiddler__>get[text]] }}}> +<$list filter="[!tag]" variable="ignore" emptyMessage=""" +<$action-sendmessage $message="tm-remove-tag" $param=<>/> +"""> <$action-sendmessage $message="tm-add-tag" $param=<>/> -<$action-deletetiddler $tiddler=<>/> $actions$ + +<> +<$action-setfield $tiddler=<> text="yes"/> \end -\define tag-button(actions) -<$button class="tc-btn-invisible" tag="a" tooltip={{$:/language/EditTemplate/Tags/Add/Button/Hint}}> +\define tag-button(actions,selectedClass) +<$button class="tc-btn-invisible $selectedClass$" tag="a" tooltip={{$:/language/EditTemplate/Tags/Add/Button/Hint}}> <$action-sendmessage $message="tm-add-tag" $param=<>/> -<$action-deletetiddler $tiddler=<>/> +<> $actions$ <$macrocall $name="tag-pill" tag=<>/> \end +\define clear-tags-actions() +<$list filter="[<__storeTitle__>has[text]] [<__tiddler__>has[text]]" variable="ignore" emptyMessage="""<><$action-sendmessage $message="tm-cancel-tiddler"/>"""> +<> + +\end + \define tag-picker-inner(actions) \whitespace trim +<$vars tagSelectionState=<> storeTitle=<> refreshTitle=<> nonSystemTagsFilter="[tags[]!is[system]search:titlesort[]]" systemTagsFilter="[tags[]is[system]search:titlesort[]]">
-<$keyboard key="ENTER" actions="""<$macrocall $name="add-tag-actions" actions=<<__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]] }}} cancelPopups="yes"/> - +<$macrocall $name="keyboard-driven-input" tiddler=<> storeTitle=<> refreshTitle=<> + selectionStateTitle=<> primaryListFilter=<> secondaryListFilter=<> + inputAcceptActions="""<$macrocall $name="add-tag-actions" actions=<<__actions__>>/>""" inputCancelActions=<> tag="input" + placeholder={{$:/language/EditTemplate/Tags/Add/Placeholder}} focusPopup=<> + class="tc-edit-texteditor tc-popup-handle" tabindex=<> focus={{{ [{$:/config/AutoFocus}match[tags]then[true]] ~[[false]] }}} + filterMinLength={{$:/config/Tags/MinLength}} cancelPopups=<> />  <$button popup=<> class="tc-btn-invisible tc-btn-dropdown" tooltip={{$:/language/EditTemplate/Tags/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Tags/Dropdown/Caption}}>{{$:/core/images/down-arrow}}  <$set name="tag" value={{{ [get[text]] }}}> -<$button set="$:/temp/NewTagName" setTo="" class=""> -<$macrocall $name="add-tag-actions" actions=<<__actions__>>/> -<$action-deletetiddler $tiddler=<>/> +<$button set=<> setTo="" class=""> +<$action-sendmessage $message="tm-add-tag" $param=<>/> +$actions$ +<> {{$:/language/EditTemplate/Tags/Add/Button}} @@ -38,22 +56,27 @@ $actions$
<$reveal state=<> type="nomatch" text="" default=""> -
-<$set name="newTagName" value={{{ [get[text]] }}}> -<$list filter="[minlength{$:/config/Tags/MinLength}limit[1]]" emptyMessage="""
{{$:/language/Search/Search/TooShort}}
""" variable="listItem"> -<$list filter="[tags[]!is[system]search:titlesort[]]" variable="tag"> +
+<$set name="userInput" value={{{ [get[text]] }}}> +<$list filter="[minlength{$:/config/Tags/MinLength}limit[1]]" emptyMessage="""
{{$:/language/Search/Search/TooShort}}
""" variable="listItem"> +<$list filter=<> variable="tag"> +<$list filter="[addsuffix[-primaryList]] -[get[text]]" emptyMessage="""<$macrocall $name="tag-button" actions=<<__actions__>> selectedClass="tc-tag-button-selected"/>"""> <$macrocall $name="tag-button" actions=<<__actions__>>/> +
-<$list filter="[minlength{$:/config/Tags/MinLength}limit[1]]" emptyMessage="""
{{$:/language/Search/Search/TooShort}}
""" variable="listItem"> -<$list filter="[tags[]is[system]search:titlesort[]]" variable="tag"> +<$list filter="[minlength{$:/config/Tags/MinLength}limit[1]]" emptyMessage="""
{{$:/language/Search/Search/TooShort}}
""" variable="listItem"> +<$list filter=<> variable="tag"> +<$list filter="[addsuffix[-secondaryList]] -[get[text]]" emptyMessage="""<$macrocall $name="tag-button" actions=<<__actions__>> selectedClass="tc-tag-button-selected"/>"""> <$macrocall $name="tag-button" actions=<<__actions__>>/> +
+ \end \define tag-picker(actions) \whitespace trim diff --git a/editions/tw5.com/tiddlers/macros/keyboard-driven-input_Macro.tid b/editions/tw5.com/tiddlers/macros/keyboard-driven-input_Macro.tid new file mode 100644 index 000000000..45c4c0ec6 --- /dev/null +++ b/editions/tw5.com/tiddlers/macros/keyboard-driven-input_Macro.tid @@ -0,0 +1,20 @@ +title: keyboard-driven-input Macro +tags: Macros [[Core Macros]] + +The <<.def keyboard-driven-input>> [[macro|Macros]] generates an input field or textarea that lets you cycle through a given list of entries with the up and down arrow keys. Doing so, an entry gets selected and can be processed with further actions + +!! Parameters + +To create the input field or textarea, the <<.def keyboard-driven-input>> [[macro|Macros]] accepts all parameters of the EditTextWidget + +The additional parameters are: + +| |purpose |h +|storeTitle |the title of the tiddler that stores the user input | +|selectionStateTitle |the title of the tiddler that stores the selected entry with a -list1 or -list2 suffix to make it unique | +|inputAcceptActions |the actions that get processed when the user hits {{$:/config/shortcuts/input-accept}} | +|inputAcceptVariantActions |the actions that get processed when the user hits {{$:/config/shortcuts/input-accept-variant}} | +|inputCancelActions |the actions that get processed when the user hits {{$:/config/shortcuts/input-cancel}} | +|primaryListFilter |a filter that specifies the first item-list | +|secondaryListFilter |a second filter that specifies a second item-list | + diff --git a/editions/tw5.com/tiddlers/widgets/EditTextWidget.tid b/editions/tw5.com/tiddlers/widgets/EditTextWidget.tid index 7b6dc80a7..a73d8bf69 100644 --- a/editions/tw5.com/tiddlers/widgets/EditTextWidget.tid +++ b/editions/tw5.com/tiddlers/widgets/EditTextWidget.tid @@ -32,6 +32,8 @@ The content of the `<$edit-text>` widget is ignored. |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 | +|inputActions |<<.from-version 5.1.23>> Optional actions that are triggered every time an input event occurs within the input field or textarea | +|refreshTitle |<<.from-version 5.1.23>> An optional tiddler title that makes the input field update whenever the specified tiddler changes | ! Notes diff --git a/editions/tw5.com/tiddlers/widgets/EditWidget.tid b/editions/tw5.com/tiddlers/widgets/EditWidget.tid index 34250d002..930319d70 100644 --- a/editions/tw5.com/tiddlers/widgets/EditWidget.tid +++ b/editions/tw5.com/tiddlers/widgets/EditWidget.tid @@ -19,3 +19,6 @@ The content of the `<$edit>` widget is ignored. |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 | +|inputActions |<<.from-version 5.1.23>> Optional actions that are triggered every time an input event occurs within the input field or textarea | +|refreshTitle |<<.from-version 5.1.23>> An optional tiddler title that makes the input field update whenever the specified tiddler changes | + diff --git a/plugins/tiddlywiki/codemirror/engine.js b/plugins/tiddlywiki/codemirror/engine.js index fe64c1ef5..fb75fdafe 100755 --- a/plugins/tiddlywiki/codemirror/engine.js +++ b/plugins/tiddlywiki/codemirror/engine.js @@ -120,6 +120,9 @@ function CodeMirrorEngine(options) { // Set up a change event handler this.cm.on("change",function() { self.widget.saveChanges(self.getText()); + if(self.widget.editInputActions) { + self.widget.invokeActionString(self.widget.editInputActions); + } }); this.cm.on("drop",function(cm,event) { event.stopPropagation(); // Otherwise TW's dropzone widget sees the drop event @@ -142,10 +145,17 @@ CodeMirrorEngine.prototype.setText = function(text,type) { var self = this; self.cm.setOption("mode",type); if(!this.cm.hasFocus()) { - this.cm.setValue(text); + this.updateDomNodeText(text); } }; +/* +Update the DomNode with the new text +*/ +CodeMirrorEngine.prototype.updateDomNodeText = function(text) { + this.cm.setValue(text); +}; + /* Get the text of the engine */ diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid index 3b52dfaf6..bf2b884d4 100644 --- a/themes/tiddlywiki/vanilla/base.tid +++ b/themes/tiddlywiki/vanilla/base.tid @@ -198,6 +198,13 @@ input[type="checkbox"] { vertical-align: middle; } +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-results-button, +input[type="search"]::-webkit-search-results-decoration { + -webkit-appearance:none; +} + .tc-muted { color: <>; } @@ -713,6 +720,12 @@ button.tc-btn-invisible.tc-remove-tag-button { outline: none; } +.tc-tag-button-selected, +.tc-list-item-selected a.tc-tiddlylink { + background-color: <>; + color: <>; +} + /* ** Page layout */