On Thursday, July 2, 2020 at 1:31:53 PM UTC-7, Eric Shulman wrote:
>
> Here's the version that uses the focusPopup="..." method, so that the
> delete/cancel/ok buttons
> only appear when you put the cursor into the input field
>
Here's yet another version. This one uses a $button to toggle between
field display and editing.
and, like the "popup" version, the delete/cancel/ok buttons only appear
when you click on the
text to start editing. However, unlike the popup version, the buttons do
not automatically
disappear when you click somewhere else. You have to click on one of the
buttons to trigger
an action that makes them go away.
\define inputbutton(fieldname,width:"12em",style:"2px inset")
<$vars
temp="$:/temp/$(currentTiddler)$/$fieldname$"
default={{{ [<currentTiddler>get[$fieldname$]] }}}
placeholder="enter a value for $fieldname$">
<$list filter="[<temp>!is[tiddler]]" variable="inactive">
<$button class="tc-btn-invisible" style=
"width:$width$;text-align:left;white-space:nowrap;border:$style$" set=<<temp
>> setTo=<<default>>>
<$reveal default=<<default>> type="match" text=""><$text text=<<
placeholder>>/></$reveal>
<$reveal default=<<default>> type="nomatch" text=""><$text text=<<
default>>/></$reveal>
</$button>
</$list>
<$list filter="[<temp>is[tiddler]]" variable="active">
<$keyboard key="enter" actions="""
<$action-setfield $tiddler=<<currentTiddler>> $field="$fieldname$"
$value={{{ [<temp>get[text]] }}} />
<$action-deletetiddler $filter="[<temp>]" />
""">
<$edit-text tag="input" tiddler=<<temp>> default=<<default>> placeholder
=<<placeholder>>/>
</$keyboard>
<span style="position:relative;">
<span style="position:absolute;width:7em;">
<$button tooltip="delete field" style="display:inline-block;width:2em">
{{$:/core/images/delete-button}}
<$action-deletefield $tiddler=<<currentTiddler>> $field="$fieldname$"
/>
<$action-deletetiddler $filter="[<temp>]" />
</$button>
<$button tooltip="cancel input" style="display:inline-block;width:2em">
{{$:/core/images/cancel-button}}
<$action-deletetiddler $filter="[<temp>]" />
</$button>
<$button tooltip="save input" style="display:inline-block;width:2em">
{{$:/core/images/done-button}}
<$action-setfield $tiddler=<<currentTiddler>> $field="$fieldname$"
$value={{{ [<temp>get[text]] }}} />
<$action-deletetiddler $filter="[<temp>]" />
</$button>
</span>
</span>
</$list>
</$vars>
\end
Install it the same way as the previous version:
* copy the above code into a tiddler (e.g.,
"/TiddlyTools/Macros/inputbutton")
* tag that tiddler with "$:/tags/Macro"
* in any other tiddler, write:
<<inputbutton "foo">>
enjoy,
-e
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/78e4a633-2ebd-418a-a033-1efd68acbc5eo%40googlegroups.com.
