Toggle edit-text widget?

#1

I’m building a TiddlyWiki to present visual narratives, there is a demo here TiddlyImage.

I’d like to make the image descriptions read-only by default but editable by clicking a button within the narrative.

I have this code so far which gives a permanently open input field:

<!-- https://tiddlywiki.com/#EditTextWidget -->

<style>
.textbox {
  background-color: gray;
  color: black;
  border: 2px solid black; 
  padding: 20px;
  width: 100%;
  font-size:125%;
}
</style> 

<p>
  <$edit-text tiddler=<<currentTiddler>> field="description" tag=input class=textbox/>
</p>

Is there some approach I could take to have text display as read-only by default but toggle the edit capability on demand?

Many thanks,

TechTangle

1 Like
#2

I don’t have time to give a fully worked answer, sorry, but here are some tips;

  • Create a tiddler $:/config/author-mode containing yes
  • Manually change this to no or make a button to change it,
    • I would add a field to the above tiddler config-values=“yes no”
  • Now use the value in your code to display according to its value
<$list filter="[{$:/config/author-mode}match[yes]]" variable=~ emptyMessage={{!!description}}?
   <$edit-text tiddler=<<currentTiddler>> field="description" tag=input class=textbox/>
</$list>
  • Not if $:/config/author-mode does not match yes it will display the description, this can be enhanced by using a macro for the empty message.

I have some tools based on tiddlers with a config-values field I can share later.

#3

Thanks @TW_Tones from your description I implemented the show/hide edit-text behaviour.

A couple of questions if I may:

How can the emptyMessage text be formatted?

Would it be possible in read-only mode to also display the tags belonging to a component tiddler and in author-mode to present a tag-picker ready populated with the component’s existing tags? How best to accomplish?

#4

I’ve pushed this code to demo to illustrate what I’d like to achieve, hopefully it’s clear. Toggling the author-mode button should present the capability to edit the source tiddlers text or tags. In read-only the formatted description and tag pills should show. Can anyone help solve the issues which are eluding me and get this functional? Thanks.

<!-- https://tiddlywiki.com/#EditTextWidget -->

<style>
.editbox {
  background-color: tomato;
  color: black;
  border: 2px solid black; 
  padding: 20px;
  width: 100%;
  font-size:100%;
}

.displaybox {
  background-color: gray;
  color: black;  
  padding: 20px;
  width: 100%;
  font-size:125%;
}
</style>
 
<!-- Needs to do more here than simply display an emptyMessage string.
Want to display the tags pertaining to the list item at hand along with its .displaybox formatted textual 'description' field.
Think a custom macro call is required but can't get the invocation syntax correct -->

<$list filter="[{$:/config/author-mode!!selected}match[yes]]" variable=~ emptyMessage={{!!description}} ?>

<!-- Open a tag selector thingy.  But how to have it pre-populated with the existing tags of this list item?? -->
<<tag-picker>>

<!-- Open the $edit-text editor box -->
<$edit-text tiddler=<<currentTiddler>> field="description" tag=textarea class=editbox/>

</$list>
#5

Here’s an example of how to switch between display and edit modes.

This should help you get started in the right direction.

\define authormode() $:/config/author-mode!!selected

\define toggle()
<$button set=<<authormode>> setTo="yes">Author Mode</$button>
<$button set=<<authormode>> setTo="no">Read Only</$button>
\end

\define view(fieldname) <div class="viewbox">{{!!$fieldname$}}<br/></div>
\define edit(fieldname) <$edit-text field="$fieldname$" tag=input class="editbox" focus="yes"/>
\define show(fieldname) 
<$list filter="[{$(authormode)$}match[yes]]" variable="none"
   emptyMessage="<<view $fieldname$>>"><<edit $fieldname$>>
</$list>
\end

<style>
.editbox { background:tomato !important; color:black; border:2px solid; padding:20px; width:100%; font-size:100%; }
.viewbox { background:gray; color:black; padding:20px; width:100%; font-size:125%; }
</style>

<<toggle>>
<<show description>>

enjoy,
-e

1 Like
#6

Wonderful @EricShulman, thanks. Are you able to enlighten on the desired tag-picker functionality?

#7

Add this macro definition to the code I previously posted (put it after the end of the definition for the show(...) macro, and before the <style>...</style> defiintions)

\define tags()
<$list filter="[{$(authormode)$}match[yes]]" variable="none"
   emptyMessage="{{||$:/core/ui/ViewTemplate/tags}}">{{||$:/core/ui/EditTemplate/tags}}
</$list>
\end

Then, you can add <<tags>> to the end of the content (following the <<show description>> macro call). When in read-only mode, it will display the ViewTemplate tag pills for the current tiddler. When in author-mode, it will display the EditTemplate interface for adding/removing tags

1 Like
#8

For any future viewer I’ll post the whole code here:

\define view(fieldname)
<div class="viewbox"><$text text={{{ [<currentTiddler>get<__fieldname__>] }}}/><br/></div>
\end

\define edit(fieldname)
<$edit-text field=<<__fieldname__>> tag="textarea" class="editbox" focus="no"/>
\end

\define show(fieldname) 
<$list filter="[{$:/config/author-mode!!selected}match[yes]]" variable="none"
   emptyMessage="<<view $fieldname$>>"><<edit $fieldname$>>
</$list>
\end

\define toggle()
<$button set="$:/config/author-mode!!selected" setTo="yes">Author Mode</$button>
<$button set="$:/config/author-mode!!selected" setTo="no">Read Only</$button>
\end

\define tags()
<$list filter="[{$:/config/author-mode!!selected}match[yes]]" variable="none"
   emptyMessage="{{||$:/core/ui/ViewTemplate/tags}}">{{||$:/core/ui/EditTemplate/tags}}
</$list>
\end

<style>
.editbox { background:tomato !important; color:black; border:2px solid; padding:20px; width:100%; font-size:100%; }
.viewbox { background:gray; color:black; padding:20px; width:100%; font-size:125%; }
</style>

<<show description>>
<<tags>>

In my case this code is saved in a tiddler named NarrativeTextTemplate and is invoked by tranclusion like so:

 {{ ||NarrativeTextTemplate }}
#9

Can anyone say how to enable the tag selection dropdown to remain open to permit selecting multiple tags? In this case the dropdown closes on every click: