Discussion:
[tw5] Creating inline editable fields
(too old to reply)
'Stuart Amor' via TiddlyWiki
2018-11-02 17:39:51 UTC
Permalink
By piecing together several code snipets, I came up with a macro that
allowed me to edit the summary field in line:

\define stateEditTid() $:/state/edit/$(parItem)$

\define tempTid() $:/temp/edit/$(parItem)$

\define createTemp() <$action-setfield $tiddler="$(tempTid)$"
$field="summary" $value={{$(parItem)$!!summary}}/>

\define saveTemp() <$action-setfield $tiddler="$(parItem)$"
$field="summary" $value={{$(tempTid)$!!summary}}/>

\define editsummary(filter titleclass:"" buttonsetclass:""
buttonclass:"tc-btn-invisible" textareaclass:"full-width")
<$list filter="$filter$" variable="parItem">
<div class="paragraph-wrapper">
<$reveal type="match" state=<<stateEditTid>> text="yes" tag="div"
class="$buttonsetclass$">
<$button class="$buttonclass$" tooltip="discard changes">
<$action-setfield $tiddler=<<tempTid>> text=""/>
<$action-deletetiddler $tiddler=<<tempTid>>/>
<$action-deletetiddler $tiddler=<<stateEditTid>>/>
{{$:/core/images/close-button}}
</$button>
<$button class="$buttonclass$" tooltip="commit changes">
<<saveTemp>>
<$action-deletetiddler $tiddler=<<tempTid>>/>
<$action-deletetiddler $tiddler=<<stateEditTid>>/>
{{$:/core/images/done-button}}
</$button>
</$reveal>
<$reveal type="nomatch" state=<<stateEditTid>> text="yes" tag="div"
class="$buttonsetclass$">
<$button class="$buttonclass$" set=<<stateEditTid>> setTo="yes"
tooltip="edit">
<<createTemp>> {{$:/core/images/edit-button}}
</$button>
</$reveal>
<div class="$titleclass$">
<h3>
<$transclude tiddler=<<parItem>> field="caption">
<$view tiddler=<<parItem>> field="title"/>
</$transclude>
</h3>
</div>
<$reveal type="match" state=<<stateEditTid>> text="yes">
<$edit-text tiddler=<<tempTid>> field=summary tag=textarea
class="$textareaclass$"/>
</$reveal>
<$reveal type="nomatch" state=<<stateEditTid>> text="yes">
<div class="paragraph-body">
<$transclude field=summary tiddler=<<parItem>>/>
</div>
</$reveal>
</div>
</$list>

<style>
.full-width { width: 100%; height: auto; }
.notitle { display: none; }
.paragraph-wrapper { position: relative; }
.paragraph-wrapper .float-left {
position: absolute;
left: -24px;
top: 0;
display: flex;
flex-direction: column;
opacity: 0;
transition: opacity 400ms;
font-size: 20px;
}
.paragraph-wrapper:hover .float-left { opacity: 1; }
</style>
\end

I then put the following line into a tiddler and marked it with the
"$:/tags/ViewTemplate" tag to provide a tiddler synopsis:

@@color:#00a223; <<editsummary "[all[current]has[summary]]" notitle
float-left>>@@

I have been extremely happy with how this macro has performed, although I
have to admit that I don't understand all the elements of how it works.
For example, I am not sure why the "notitle" and "float-left" need to be in
the marco call, but the don't work anywhere else. I tried to expand this
marco, so I could optionally select which field value I wanted to edit, so
I could create a tabular array. I had some difficulties with some
concatinated variables not resolving, but using Matabelle's SetFieldWidget
widget, I came up with the following variation - for some reason the
formatting is not as good, the hover buttons now overlap the edited text
and the textbox itself no longer extends the whole page width.

\define editfields(tiddlername fieldname titleclass:"" buttonsetclass:""
buttonclass:"tc-btn-invisible" textareaclass:"full-width")
<div class="paragraph-wrapper">
<$reveal type="match" state="$:/state/edit/$tiddlername$/$fieldname$"
text="yes" tag="div" class="$buttonsetclass$">
<$button tooltip="Cancel changes" >
<$action-deletetiddler
$tiddler="$:/state/edit/$tiddlername$/$fieldname$" />
{{$:/core/images/close-button}}
</$button>
<$setfield set="!!$fieldname$"
setTo={{$:/state/edit/$tiddlername$/$fieldname$!!$fieldname$}}>
<$button message="tw-set-field" param="$tiddlername$" tooltip="Save
changes" >
<$action-deletetiddler
$tiddler="$:/state/edit/$tiddlername$/$fieldname$"/>
{{$:/core/images/done-button}}
</$button>
</$setfield>
</$reveal>
<$reveal type="match" state="$:/state/edit/$tiddlername$/$fieldname$"
text="yes">
<$edit-text tiddler="$:/state/edit/$tiddlername$/$fieldname$"
field=$fieldname$ tag=textarea />
</$reveal>
<$reveal type="nomatch" state="$:/state/edit/$tiddlername$/$fieldname$"
text="yes" tag="div" class="$buttonsetclass$">
<$setfield set="!!$fieldname$" setTo={{$tiddlername$!!$fieldname$}}>
<$setfield set="!!text" setTo="yes">
<$button message="tw-set-field"
param="$:/state/edit/$tiddlername$/$fieldname$" tooltip="Edit field">
{{$:/core/images/edit-button}}
</$button>
</$setfield>
</$setfield>
</$reveal>
<$reveal type="nomatch" state="$:/state/edit/$tiddlername$/$fieldname$"
text="yes">
<div class="paragraph-body">
{{$tiddlername$!!$fieldname$}}
</div>
</$reveal>
</div>
<style>
.full-width { width: 100%; height: auto; }
.notitle { display: none; }
.paragraph-wrapper { position: relative; }
.paragraph-wrapper .float-left {
position: absolute;
left: -24px;
top: 0;
display: flex;
flex-direction: column;
opacity: 0;
transition: opacity 400ms;
font-size: 20px;
}
.paragraph-wrapper:hover .float-left { opacity: 1; }
</style>
\end

This is moving closer and works provided an actual tiddlername is provided
to the macro, but I can't seem to use it within a list function and the
following calling method doesn't work:

<<editfields "<<currentTiddler>>" "summary" notitle float-left>>

I have spent quite a bit of time on this, I really feel that it will be a
very neat and useful macro for many of us if it can be made to work.
Calling all Tiddlywiki geniuses...
--
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+***@googlegroups.com.
To post to this group, send email to ***@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/617703e6-a014-4a60-bbaf-527a112615a8%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
TonyM
2018-11-03 05:15:05 UTC
Permalink
Stuart

Without reviewing the macros have you tried calling differently

<<editfields "<<currentTiddler>>" "summary" notitle float-left>>

<$macrocall $name=editfields parm1=<<currentTiddler>> parm2="summary" parm3=notitle parm4=float-left/>

Replace each or the Parms with the correct name of the parameters in the macro define

Regards
Tony
--
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+***@googlegroups.com.
To post to this group, send email to ***@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/d95c0df6-8739-4212-9e7b-d89fd61b3b69%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
'Stuart Amor' via TiddlyWiki
2018-12-04 14:11:58 UTC
Permalink
Sorry for the late reply, but I wanted to double check first. I had tried
calling using this method, firstly the edit button is no longer popping up
and floating, but when I click the button its displaying "<$edit-text
tiddler="$:/state/edit//" field= tag=textarea />" also a tiddler called !!
is created
Post by TonyM
Stuart
Without reviewing the macros have you tried calling differently
<<editfields "<<currentTiddler>>" "summary" notitle float-left>>
<$macrocall $name=editfields parm1=<<currentTiddler>> parm2="summary"
parm3=notitle parm4=float-left/>
Replace each or the Parms with the correct name of the parameters in the macro define
Regards
Tony
--
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+***@googlegroups.com.
To post to this group, send email to ***@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/81eb1890-6546-4566-8a8e-1f47e48fac6d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Continue reading on narkive:
Loading...