Creating inline editable fields

[Stuart Amor]

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

[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

[Stuart Amor]

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