Add start- and endactions to link-widget, list-links-draggable and list-tagged-draggable macros (#9621)

* Add start- endactions to link-widget + documentation

* Add start- endactions to list-links-draggable and list-tagged-draggable macros

* Add changenote

* Update docs with actionTiddler info
This commit is contained in:
Mario Pietsch 2026-02-06 14:23:42 +01:00 committed by GitHub
parent 599933c34d
commit 1bbb7fd53b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 83 additions and 28 deletions

View file

@ -86,7 +86,7 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
classes.push(this.linkClasses);
}
} else if(this.overrideClasses !== "") {
classes.push(this.overrideClasses)
classes.push(this.overrideClasses);
}
if(classes.length > 0) {
domNode.setAttribute("class",classes.join(" "));
@ -97,7 +97,7 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
if(wikilinkTransformFilter) {
// Use the filter to construct the href
wikiLinkText = this.wiki.filterTiddlers(wikilinkTransformFilter,this,function(iterator) {
iterator(self.wiki.getTiddler(self.to),self.to)
iterator(self.wiki.getTiddler(self.to),self.to);
})[0];
} else {
// Expand the tv-wikilink-template variable to construct the href
@ -121,12 +121,12 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
var tooltipWikiText = this.tooltip || this.getVariable("tv-wikilink-tooltip");
if(tooltipWikiText) {
var tooltipText = this.wiki.renderText("text/plain","text/vnd.tiddlywiki",tooltipWikiText,{
parseAsInline: true,
variables: {
currentTiddler: this.to
},
parentWidget: this
});
parseAsInline: true,
variables: {
currentTiddler: this.to
},
parentWidget: this
});
domNode.setAttribute("title",tooltipText);
}
if(this.role) {
@ -135,7 +135,7 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
this.assignAttributes(domNode,{
sourcePrefix: "aria-",
destPrefix: "aria-"
})
});
// Add a click event handler
$tw.utils.addEventListeners(domNode,[
{name: "click", handlerObject: this, handlerMethod: "handleClickEvent"},
@ -145,6 +145,8 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
$tw.utils.makeDraggable({
domNode: domNode,
dragTiddlerFn: function() {return self.to;},
startActions: self.startActions,
endActions: self.endActions,
widget: this
});
} else if(this.draggable === "no") {
@ -203,6 +205,8 @@ LinkWidget.prototype.execute = function() {
this.overrideClasses = this.getAttribute("overrideClass");
this.tabIndex = this.getAttribute("tabindex");
this.draggable = this.getAttribute("draggable","yes");
this.startActions = this.getAttribute("startactions");
this.endActions = this.getAttribute("endactions");
this.linkTag = this.getAttribute("tag","a");
// Determine the link characteristics
this.isMissing = !this.wiki.tiddlerExists(this.to);

View file

@ -22,7 +22,7 @@ tags: $:/tags/Macro
<$action-listops $tiddler=<<targetTiddler>> $field=<<targetField>> $subfilter="+[insertbefore<actionTiddler>,<currentTiddler>]"/>
\end
\define list-links-draggable(tiddler,field:"list",emptyMessage,type:"ul",subtype:"li",class:"",itemTemplate, displayField:"caption")
\define list-links-draggable(tiddler,field:"list",emptyMessage,type:"ul",subtype:"li",class:"",itemTemplate,displayField:"caption",startactions,endactions)
\whitespace trim
<$set name="_tiddler" value="""$tiddler$""" emptyValue=<<currentTiddler>> >
<$let field-reference={{{ [<_tiddler>] "!!" [[$field$]] +[join[]] }}}
@ -39,8 +39,11 @@ tags: $:/tags/Macro
>
<div class="tc-droppable-placeholder"/>
<div>
<$transclude tiddler="""$itemTemplate$""">
<$link to={{!!title}}>
<$transclude tiddler=<<__itemTemplate__>>>
<$link to={{!!title}}
startactions=<<__startactions__>>
endactions=<<__endactions__>>
>
<$let tv-wikilinks="no">
<$transclude field=<<__displayField__>>>
<$view field="title"/>
@ -92,7 +95,7 @@ tags: $:/tags/Macro
</$set>
\end
\define list-tagged-draggable(tag,subFilter,emptyMessage,itemTemplate,elementTag:"div",storyview:"",displayField:"title")
\define list-tagged-draggable(tag,subFilter,emptyMessage,itemTemplate,elementTag:"div",storyview:"",displayField:"title",startactions,endactions)
\whitespace trim
<span class="tc-tagged-draggable-list">
<$set name="tag" value=<<__tag__>>>
@ -108,8 +111,11 @@ tags: $:/tags/Macro
>
<$genesis $type=<<__elementTag__>> class="tc-droppable-placeholder"/>
<$genesis $type=<<__elementTag__>>>
<$transclude tiddler="""$itemTemplate$""">
<$link to={{!!title}}>
<$transclude tiddler=<<__itemTemplate__>>>
<$link to={{!!title}}
startactions=<<__startactions__>>
endactions=<<__endactions__>>
>
<$let tv-wikilinks="no">
<$transclude field=<<__displayField__>>>
<$view field="title"/>

View file

@ -1,6 +1,6 @@
caption: list-links-draggable
created: 20170328204925306
modified: 20211214141650488
modified: 20260206131823536
tags: Macros [[Core Macros]]
title: list-links-draggable Macro
type: text/vnd.tiddlywiki
@ -31,9 +31,16 @@ The <<.def list-links-draggable>> [[macro|Macros]] renders the ListField of a ti
; itemTemplate
: Optional title of a tiddler to use as the template for rendering list items
;displayField
: <<.from-version 5.4.0>> Optional name of the field to display when the list is rendered. Defaults to the "caption" field; if "caption" is not present, the "title" field is used instead
; displayField <<.from-version 5.4.0>>
: Optional name of the field to display when the list is rendered. Defaults to the "caption" field; if "caption" is not present, the "title" field is used instead
; startactions <<.from-version "5.4.0">>
: Optional action string that gets invoked when link ''dragging starts''
: <<.var actionTiddler>> variable is available in this action
; endactions <<.from-version "5.4.0">>
: Optional action string that gets invoked when link ''dragging ends''
: <<.var actionTiddler>> variable is available in this action
If the `itemTemplate` parameter is not provided then the list items are rendered as simple links. Within the `itemTemplate`, the [[currentTiddler Variable]] refers to the current list item.

View file

@ -1,6 +1,6 @@
caption: list-tagged-draggable
created: 20170329092723939
modified: 20180109171254045
modified: 20260206131803841
tags: Macros [[Core Macros]]
title: list-tagged-draggable Macro
type: text/vnd.tiddlywiki
@ -9,19 +9,30 @@ The <<.def list-tagged-draggable>> [[macro|Macros]] renders the tiddlers with a
!! Parameters
;tag
; tag
: The title of the tag
;subFilter
; subFilter
: An optional subfilter to filter out unwanted items (eg `!tag[done]`)
;itemTemplate
; itemTemplate
: Optional title of a tiddler to use as the template for rendering list items
;emptyMessage
; emptyMessage
: Optional wikitext to display if there are no tiddlers with the specified tag
;displayField
: <<.from-version 5.4.0>> Optional name of the field to display when the list is rendered. Defaults to `title` field.
; displayField <<.from-version 5.4.0>>
: Optional name of the field to display when the list is rendered. Defaults to `title` field
Note that the [[ordering|Order of Tagged Tiddlers]] is accomplished by assigning a new list to the `list` field of the tag tiddler. Any `list-before` or `list-after` fields on any of the other tiddlers carrying the tag are also removed to ensure the `list` field is respected.
; startactions <<.from-version "5.4.0">>
: Optional action string that gets invoked when link ''dragging starts''
: <<.var actionTiddler>> variable is available in this action.
; endactions <<.from-version "5.4.0">>
: Optional action string that gets invoked when link ''dragging ends''
: <<.var actionTiddler>> variable is available in this action
Note that the [[ordering|Order of Tagged Tiddlers]] is accomplished by assigning a new list to the `list` field of the tag tiddler. Any `list-before` or `list-after` fields on any of the other tiddlers carrying the tag are also removed to ensure the `list` field is respected
If the `itemTemplate` parameter is not provided then the list items are rendered as simple links. Within the `itemTemplate`, the [[currentTiddler Variable]] refers to the current list item.

View file

@ -0,0 +1,12 @@
change-category: usability
change-type: enhancement
created: 20260126125300
description: Add start- and endactions to link-widget, list-links-draggable and list-tagged-draggable macros
github-contributors: pmario
github-links: https://github.com/TiddlyWiki/TiddlyWiki5/pull/9621
modified: 20260126125300
release: 5.4.0
tags: $:/tags/ChangeNote
title: $:/changenotes/5.4.0/#9621
type: text/vnd.tiddlywiki

View file

@ -1,6 +1,6 @@
caption: link
created: 20131024141900000
modified: 20250720025154474
modified: 20260206131722044
tags: Widgets
title: LinkWidget
type: text/vnd.tiddlywiki
@ -27,6 +27,8 @@ The content of the link widget is rendered within the `<a>` tag representing the
|data-* |<<.from-version "5.3.2">> Optional [[data attributes|https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes]] to be assigned to the HTML element |
|style.* |<<.from-version "5.3.2">> Optional [[CSS properties|https://developer.mozilla.org/en-US/docs/Web/CSS/Reference]] to be assigned to the HTML element |
|aria-* |<<.from-version "5.4.0">> Optional [[ARIA attributes|https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes]] to be assigned to the HTML element |
|startactions |<<.from-version "5.4.0">> Optional action string that gets invoked when ''dragging starts''. The <<.var actionTiddler>> variable is available in this action.|
|endactions |<<.from-version "5.4.0">> Optional action string that gets invoked when ''dragging ends''. The <<.var actionTiddler>> variable is available in this action. |
The draggable functionality is equivalent to using the DraggableWidget with the ''tiddler'' attribute set to the link target.
@ -67,6 +69,19 @@ A useful convention is to set the tooltip like this:
This causes the tooltip to be the ''tooltip'' field of the target tiddler. If the field isn't present, then the title is used instead.
! Action Variables
<<.from-version "5.4.0">> The <<.var actionTiddler>> variable is available to <<.param startaction>> and <<.param endaction>>.
To see all variables available to an action you can use this code and see the variables in the browser dev-console (F12)
<<wikitext-example-without-html """\procedure endActions()
<$action-log/>
\end
<$link to=HelloThere endactions=<<endActions>>>drag me!</$link>
""">>
! CSS Classes
The link widget automatically determines and applies the following classes to links:
@ -95,7 +110,7 @@ The following process is used to generate the `href` attribute of the generated
# If <<.vlink tv-wikilink-template>> is defined it is treated as a specialised macro body that can perform limited conversion of the target tiddler title to the `href` value
# Otherwise, the target tiddler title is URI encoded to create the `href`
! Configuration variables
! Configuration Variables
* <<.vlink tv-wikilinks>>
* <<.vlink tv-filter-export-link>>