Draggable widget, requesting examples

[DaveGifford]

Hi everyone,

There is a Draggable widget, but no examples in the documentation.

I am thinking of how it might be used in my sectionlist macro (link) to drag list items to reorder them. But I don’t have a clue how it would work in that case since I don’t even know how to set it up normally. Any ideas or examples?

This sectionlist project has become very exciting to me. Combined with other tools it is speeding up my notetaking workflow and opening up other possibilities. Making the items draggable would be a fantastic improvement, but if it is not possible, so be it.

[EricShulman]

Give this a try:

1. Re-write the sectionlist macro (in $:/.giffmex/macro/sectionlist) with the following:

\define sectionlist(headertext:"" itemlabel:"")
<$vars here="$(currentTiddler)$" itemlabel="$itemlabel$" >
<details>
<summary>
   $headertext$
   <$button class='tc-btn-invisible'>
      <$action-createtiddler $basetitle=<<now "YYYY / 0MM / 0DD / 0hh:0mm:0ss /">>
         itemlabel="$itemlabel$" source={{{ [[$:/.giffmex/Current.source.text]get[text]] }}}
         order="" pagenumber="" text="X <<mysource&link>>">
         <$action-sendmessage $message="tm-edit-tiddler" $param=<<createTiddler-title>> />
         <$action-listops $field='$itemlabel$' $subfilter="[insertbefore<createTiddler-title>]"/>
      </$action-createtiddler>
      <span class='hideprint'>+</span>
   </$button> 
</summary>
<<list-links-draggable tiddler:"$(currentTiddler)$" field:"$itemlabel$"
   type:"ol" subtype:"li" itemTemplate:"$:/.giffmex/macro/sectionlist/showitem">>
</details>
\end

2. Add a new “itemTemplate” tiddler named $:/.giffmex/macro/sectionlist/showitem, containing:

<$draggable tiddler=<<currentTiddler>>>
   <$button class="tc-btn-invisible">
      {{$:/core/images/delete-button}}
      <$action-listops $tiddler=<<here>> $field=<<itemlabel>> $subfilter="-[{!!title}]"/>
      <$action-deletetiddler $tiddler={{!!title}}/>
      <$action-sendmessage $message="tm-close-tiddler" $param={{!!title}}/>
   </$button>
   {{!!text}}
</$draggable>

Notes:

• Replacing
  <$action-sendmessage $message="tm-new-tiddler" title=<<now ...>> ...>
  with
  <$action-createtiddler $basetitle=<<now ...>> ...>
  allows you to invoke actions after the tiddler is created. Specifically, open it for editing, and also add it to a list field contained in the “section” tiddler. Note that the list field is named using the itemlabel value.
• Then, you can use this list field with the TWCore standard <<list-links-draggable>>. To make the list items draggable, you need to also create a separate “itemTemplate” definition that wraps the display text for each item ({{!!text}}) within a <$draggable>...</$draggable> widget.
• In addition, this “itemTemplate” also provides a “delete item” button to make it easy to remove an “item” from an itemlabel list field and delete the corresponding tiddler. It also closes it if is was displayed in the StoryRiver, so it’s completely gone.

Let me know how it goes…

enjoy,
-e

[DaveGifford]

Hi Eric

1. Wow! Thank you! Victory is so close I can taste it. This is awesome.

2. I had four issues, three of which I fixed:
   a) I removed the delete and trash can, as I already have a link built into the tiddlers to edit or delete them.
   b) I used <$transclude field=‘text’ mode=‘block’/> so list items would appear block.
   c) I removed some of the spaces so the header text would not drop a line below the arrow of the header.

3. The fourth issue is that the list items drop below the ol li number. I tried removing spacing to the other tiddler, with no success. Any ideas on how to remove that? (see photo below)

Thanks again for this work. Amazing.

[EricShulman]

a) I removed the delete and trash can, as I already have a link built into the tiddlers to edit or delete them.

Note that in addition to deleting the tiddler itself, the trashcan button I provided also removes the tiddler’s title from the corresponding list field. You may want to add that functionality to your existing “delete” button.

The code to do this needs to be slightly different than I previously wrote, so it can work without having the <<here>> and <<itemlabel>> variables defined. Instead of <<here>>, you’ll need to use {{{ [all[tiddlers]has{!!itemlabel}] }}} to find the corresponding section tiddler, and instead of <<itemlabel>>, you’ll need to use {{!!itemlabel}} (from the current tiddler).

Something like this:

<$action-listops $tiddler={{{ [all[tiddlers]has{!!itemlabel}] }}}
   $field={{!!itemlabel}} $subfilter="-[{!!title}]"/>

3. The fourth issue is that the list items drop below the ol li number. I tried removing spacing to the other tiddler, with no success. Any ideas on how to remove that? (see photo below)

I’m not seeing output like that. Please create a demo test case that I can examine online so I can understand what how you are defining these items to produce the results you showed.

-e

[DaveGifford]

Hi Eric, thanks for your patient assistance.

I don’t want the tiddler titles, just the transclusions of the text field in the ordered list. Thanks for the explanation, though.

I uploaded to My TiddlyWiki — a non-linear personal web notebook so you can see the output. It was an empty.html and I added a few stylesheets.

[DaveGifford]

Now I see what I did wrong. I deleted only two lines of the button but not the entire button. I deleted the entire button and it is working perfectly now. Draggable works, and the list looks right, and the details works, and the new buttons work. Thank you so much for this, Eric!

[DaveGifford]

Hi @EricShulman

I discovered a bug: when you delete a tiddler in a given section list, its title stays lodged in the field for that list. So then a list number (2. or 3., etc) will remain, with no text to transclude. The only way to correct the list is to know beforehand the title of the tiddler, go into the field for that list, and delete that title. But if you have already deleted the tiddler and the titles are all date and times, you won’t likely be able to tell which is which, especially if you have a lot.

I reverted my own file back to the previous version. I am just about ready to give up on this for good and just use what I have for me and not offer it to others. Any suggestions for fixing it?

[TW_Tones]

Hint only:

In the actions that deletes the tiddler from a given section list, that is where you need to include Eric’s listops action.

[DaveGifford]

@EricShulman

to make it easy to remove an “item” from an itemlabel list field and delete the corresponding tiddler. It also closes it if is was displayed in the StoryRiver, so it’s completely gone.

Ah, yes Tones, I had misinterpreted the fine print.

I think I am going to give up on the draggable idea and revert to the version I had on 4-18. The present solution is brilliant, but has too many downsides:

1. A trash can intrudes on what was a clean note area.
2. It makes the transclusion become inline, or else bumps it down a line.
3. Adding more sections in the parent tiddler adds more fields. That could become cluttery. Even with one or two it becomes confusing for a new user.

Thanks Eric and Tones for your help.