Any examples of using the drop zone widget

[TonyM]

Folks,

Does anyone have any examples of using the drop zone widget.

The documentation is somewhat incomplete at https://tiddlywiki.com/#DropzoneWidget and it seem to use a method not used elsewhere.

I will contribute new documentation once I am competent at using the widget.

What I would like to do is create a tiddler(s) containing one or more drop zones with different responses to what is dropped on each zone.

Thanks in advance

Tony

[Xavier Cazin]

Hi Tony,

Here is little proof-of-concept for a YouTube video dropper that I never got completed but that might inspire you. Note that it only works with single videos, not playlists.

\define parseurl()
<$set name=url filter="[enlist<actionTiddler>first[]]">
<$set name=id filter="[<url>removeprefix[https://www.youtube.com/watch?v=]]">
<$set name=titre filter="[<actionTiddler>removeprefix<url>]" select="0">
<$action-setfield full=<<actionTiddler>>/>
<$action-setfield video=<<url>>/>
<$action-setfield titre=<<titre>>/>
<$action-setfield yt=<<id>>/>
</$set>
</$set>
</$set>
\end

\define newVideoButton()
<$reveal type="nomatch" state="!!titre" text="">
<$button>
<$action-sendmessage $message="tm-new-tiddler" title={{!!titre}} tags="[[selected yt videos]]" yt={{!!yt}} day=<<now YYYY.0MM.0DD>>/>
Click here to create a new video tiddler out of: ''{{!!titre}}''
</$button>
</$reveal>
<$reveal type="match" state="!!titre" text="">
<$button >
<$action-sendmessage $message="tm-new-tiddler" title="Title of the video" tags="[[selected yt videos]]" yt={{!!yt}} day=<<now YYYY.0MM.0DD>>/>
Click here to create a new video tiddler out of the video below.
</$button>
</$reveal>
\end

<$droppable actions="""<<parseurl>>""">
<div style="background-color: #44aa88; width: 40%;  text-align: center; ">
''Drag and drop <br/>the //~YouTube// video url <br/>onto this area''<br/>
<$reveal type="nomatch" state="$:/info/browser/is/firefox" text="yes">
__Note__ : had the drag and drop been issued within //Firefox//, the video title would have been retrieved at the same time as its ~YouTube ID!.
</$reveal>
<$reveal type="nomatch" state="!!yt" text="" style="width: 40%; text-align: center; margin: auto;">
<<newVideoButton>>
</$reveal>
</div>
</$droppable>

<$list filter="[<currentTiddler>get[yt]addprefix[https://www.youtube.com/embed/]]" variable=url>
<iframe width="560" height="315" src=<<url>> frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</$list>

Regards,

-- Xavier Cazin

--
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 tiddl...@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/5c0cebee-3530-43c0-bf7c-5f9ed7b5385c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.