How? List of all tiddlers in current tiddler's list field, as draggable transclusions

#1

I am really surprised that this is nowhere in either the documention or here.

I would like to transclude “child” tiddlers in a parent tiddler but in a way that is draggable. And I don’t want to use tags because my parent tiddler titles tend to be long.

So I thought about the list field. Have a list field in the parent tiddler with the titles of the child tiddlers. Then I created this:

<<list-links-draggable filter:"[is[current]list[]]" type:"none" class:"foofystyle" itemTemplate:"foofytemplate">>

The foostyle makes list-style = none. The footemplate has the transclude widget.

Everything appears correctly, but nothing is draggable.

When I wrap the transclude with a link widget, then it is draggable, but everything in the transcluded text is styled like a link.

Is there a way to have the best of both worlds? Only show the transclusions, but allow them to be draggable?

#2

Hi @DaveGifford

Maybe you can modify your template to first transclude the title as a (dragable) link, and then transclude the contents without wrapping it in a link?

Another idea (also not tested): wrap the transclusion of child tiddler within a div having the relevant classes of dragable links?

Fred

1 Like
#3

Hi Dave,

Note that the list-links-draggable macro does not accept a filter, but rather just the name of the tiddler whose list field to use.
So you want something more so along these lines:
<<list-links-draggable class:"foofystyle" itemTemplate:"foofytemplate">>
If that does not work you will need to use list-links-draggable via the macrocall widget.

The next part is to make the contents draggable, change the template as follows:

<$draggable tag="div" tiddler=<<currentTiddler>>>
<$transclude/> 
</$draggable>

Your next issue might be that you can no longer select text within the draggable text. This can be resolved with some extra HTML/CSS and using the selector attribute of the draggable widget. I suggest asking for assistance if you get that far and still find the approach appealing.

#4

Hi Saq

I modified the template to the following (mode=block was important)

<$draggable tag="div" tiddler=<<currentTiddler>>>
<$transclude mode="block"/> 
</$draggable>

Both of the following ‘work’ in the sense that they display correctly and a drag symbol appears and when I drag them a green dashed ‘target’ area appears. But neither works in the sense that they don’t actually move to the target area. They just stay in their current position in the list.

<<list-links-draggable class:"foofystyle" type:"none" itemTemplate:"foofytemplate">>

<$macrocall $name="list-links-draggable" type="none" class="foofystyle" itemTemplate="foofytemplate"/>

Requesting assistance as instructed to!

#5

That part is yet to come :wink:

Try this:

<$macrocall $name="list-links-draggable" type="none" class="foofystyle" itemTemplate="foofytemplate" tiddler=<<currentTiddler>>/>

The reason to use macrocall is to pass the currentTiddler as the tiddler for the list-links-draggable macro to use.

#6

Hey that works great! Um, so what is the other part for? I am quite happy with this the way it is. Answers the OP. Thanks a lot, Saq!

#7

Ah! I see what you mean. Now if I want to select text for copying and pasting, even in a static html, I can’t do that. Okay, yes, I would like the extra help, Saq! Definitely worth a donation to TW dev.

1 Like
#8

Let me get to my desk in a bit and I will try to assist.

1 Like
#9

I think there should be a “list-item” widget in TW that has a draggable parameter and whatever you cook up as part of it. That way anyone could make listwidgets with draggable list items that are not links, rather than have to resort to a macrocall of the list-links macro, and a stylesheet to undo the list style.

I really thought this would be easier.

#10

Whoa! This makes the items draggable between any tiddlers with this macrocall in them! That is fantastic! I created another tiddler and pasted the macrocall. I dragged Tuesday from Days of the week to the new tiddler, and Tuesday shows on both tiddlers. That is really cool and a pleasant unexpected surprise.

#11

You can accomplish that just the with the macro without any additional stylesheet:
<$macrocall $name="list-links-draggable" type="div" subtype="div" itemTemplate="foofytemplate" tiddler=<<currentTiddler>>/>

The tricky part is that to make text selectable, you want each transcluded blob to have a “drag handle” that you can drag, whereas the rest remains regular text.

Personally I would favour a button that toggles the draggable mode on and off to make it less fiddly, but that is a bit more work.

#12

Macrocall:

<$macrocall $name="list-links-draggable" type="div" subtype="div"  itemTemplate="foofytemplate" tiddler=<<currentTiddler>>/>

Template (foofytemplate):

<$draggable tag="div" tiddler=<<currentTiddler>> selector=".transclusion-handle">
<button class="transclusion-handle tc-draggable tc-btn-invisible" draggable="true" style="float:right;width:50px;clear:both;">{{$:/images/svg-icon/drag}}</button>
<div>
<$transclude mode="block"/> 
</div>
</$draggable>

Icon tiddler: $:/images/svg-icon/drag
(from TW Icons v1.10 — A large collection of icons for TiddlyWiki)


<svg class="tc-image-drag tc-image-button" width="22pt" height="22pt" viewBox="0 0 13.000627517700195 13.000626564025879"><path d="M12.9 6.28l-2.332-2.187A.329.329 0 0 0 10.334 4a.319.319 0 0 0-.234.093.282.282 0 0 0-.1.219V6H7V3h1.688a.289.289 0 0 0 .22-.1A.335.335 0 0 0 9 2.667a.338.338 0 0 0-.093-.234L6.72.1a.292.292 0 0 0-.44 0L4.092 2.433A.325.325 0 0 0 4 2.667c0 .09.03.169.093.234.061.068.134.1.22.1H6v3H3V4.313a.284.284 0 0 0-.1-.22A.322.322 0 0 0 2.666 4a.325.325 0 0 0-.234.093L.1 6.28a.293.293 0 0 0 0 .44L2.432 8.91a.342.342 0 0 0 .468-.001.287.287 0 0 0 .1-.22V7.002h3v3H4.312a.284.284 0 0 0-.22.1.322.322 0 0 0-.092.234c0 .089.03.167.093.234L6.28 12.9a.293.293 0 0 0 .441 0l2.188-2.332a.342.342 0 0 0 0-.468.287.287 0 0 0-.22-.1H7V7h3v1.688c0 .084.032.157.1.22.065.06.143.092.234.092a.338.338 0 0 0 .234-.093L12.9 6.72a.292.292 0 0 0 0-.441z"/></svg>

There is a lot more than can be done in terms of improving the styling etc and how you want it to look, but that should give you something workable.

Screenshot:

image
image882×820 65.3 KB

Drag the icons to move transclusions.

#13

This is how dragging and drop between the two story lists in the sidebar in Stroll works, except you see the titles only and not the content of the tiddlers.

#14

I made a couple style changes, and voila! Thanks again, Saq!

I have a visit to go to but will make a donation later today. And wow, this really opens up possibilities for writing, moving and nesting. I had no ieea what I was getting myself into…

1 Like
#15

You could also add a button to add new transclusions at the bottom or between existing transclusions, and the ability to edit transclusions in place. Pretty soon you will end up with a Streams alternative :slight_smile: