Edit-text widget popup text area question

14

Here’s a few changes to help get you on your way in the right direction… (see notes below)

\define input(fieldname,size)
\define delete() <$action-deletefield $tiddler=<<currentTiddler>> $field="$fieldname$"/>
\define save()   <$action-setfield $tiddler=<<currentTiddler>> $field="$fieldname$" $value={{{ [<popid>get[value]else<default>] }}} />
\define close()  <$action-deletetiddler $tiddler=<<popid>> />
<$let popid="$:/temp/state/$(currentTiddler)$/$fieldname$">
<span style="position:relative;"> <!-- ADDED -->
<$button popup=<<popid>> class="tc-btn-invisible">{{$:/core/images/edit-button}}</$button>
<$reveal type="popup" position="below" state=<<popid>> >
  <span class="popup tc-popup-keep tc-block-dropdown ADDED" style="padding:0.5em; ADDED">
    <$button class="tc-btn-invisible" style="float:right; ADDED" actions="<<close>>">{{$:/core/images/close-button}}</$button>
    $fieldname$  <!-- ADDED -->
    <div style="clear:both;"/> <!-- ADDED -->
    <$vars default={{{ [<currentTiddler>get[$fieldname$]] }}} placeholder="enter a value for $fieldname$">
      <$edit-text tag="input" tiddler=<<popid>> field="value" default=<<default>> placeholder=<<placeholder>> class="fieldinput" size=$size$ />
      <div style="float:right;"> <!-- ADDED -->
         <$button tooltip="delete field" actions="<<delete>><<close>>"> {{$:/core/images/delete-button}} </$button>
         <$button tooltip="cancel input" actions="<<close>>"          > {{$:/core/images/cancel-button}} </$button>
         <$button tooltip="save input"   actions="<<save>><<close>>"  > {{$:/core/images/done-button}}   </$button>
      </div> <!-- ADDED -->
    </$vars>
  </span>
</$reveal>
</span> <!-- ADDED -->
</$let>
\end

Notes:

  • The delete(), save(), and close() macros are “local” to the containing input(...) macro, and provide convenient abbreviations for the actions performed by the popup. This helps make your code more compact and easier to read.
  • Similarly, the <$let popid="..."> provides an abbreviation for referring to the popup state tiddler. This helps later on when you need to close the popup.
  • The really important change is to wrap the entire macro output within <span style="position:relative;">. This establishes a new “origin” for the popup position, relative to the top-left corner of the popup $button widget, and causes the popup to appear where you expected it.
  • There’s no need to surround the popup $button widget within a $reveal. By default, popup buttons will toggle the associated popup state tiddler. Thus, clicking it will automatically show/hide the associated popup.
  • The class for the span enclosing the popup content has “tc-block-dropdown”, which gives it a proper “background and frame” around the popup content.
  • The style for the span surrounding the popup content has “padding:0.5em;” to give a nice even padding around the popup content.
  • The “close” button has a style of “float:right;” so that it appears in the upper right corner of the popup content.
  • The $fieldname$ is displayed on the same line as the close button to give the popup a visible heading
  • <div style="clear:both;"/> follows the heading so the field input that follows starts on a new line
  • The $edit-text control uses a field named value within the popid state tiddler rather than using the text field in a separate $:/temp/volatile/$(currentTiddler)$/$fieldname$ tiddler. This ensures that the temporary input value is discarded when the popup is closed.
  • The 3 action buttons (“delete”, “cancel”, and “save”) are enclosed within a <div style="float:right;"> so that they appear below the field input, and are aligned with the right side of the popup.
  • Notice that the <<save>> action does all the work of getting the current temp input, without needing any of the surrounding $list widgets.
  • You can remove the ADDED and <!-- ADDED --> markers. I put them there just to make it easier for you to see what I added.

enjoy,
-e