1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-10-29 22:26:17 +00:00

Add action tiddler list to droppable widget (#8256)

* initial POC

* clean up the code

* Add documentation changes

* Improve docs
This commit is contained in:
Mario Pietsch 2024-10-24 18:51:19 +02:00 committed by GitHub
parent b68de0d69f
commit 8b9723f6c7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 69 additions and 20 deletions

View File

@ -125,11 +125,23 @@ DroppableWidget.prototype.handleDropEvent = function(event) {
// Remove highlighting // Remove highlighting
$tw.utils.removeClass(this.domNodes[0],"tc-dragover"); $tw.utils.removeClass(this.domNodes[0],"tc-dragover");
// Try to import the various data types we understand // Try to import the various data types we understand
$tw.utils.importDataTransfer(dataTransfer,null,function(fieldsArray) { if(this.droppableActions) {
fieldsArray.forEach(function(fields) { $tw.utils.importDataTransfer(dataTransfer,null,function(fieldsArray) {
self.performActions(fields.title || fields.text,event); fieldsArray.forEach(function(fields) {
self.performActions(fields.title || fields.text,event);
});
}); });
}); }
// Send a TitleList to performListActions
if(this.droppableListActions) {
$tw.utils.importDataTransfer(dataTransfer,null,function(fieldsArray) {
var titleList = [];
fieldsArray.forEach(function(fields) {
titleList.push(fields.title || fields.text);
});
self.performListActions($tw.utils.stringifyList(titleList),event);
});
}
// Tell the browser that we handled the drop // Tell the browser that we handled the drop
event.preventDefault(); event.preventDefault();
// Stop the drop ripple up to any parent handlers // Stop the drop ripple up to any parent handlers
@ -137,6 +149,13 @@ DroppableWidget.prototype.handleDropEvent = function(event) {
return false; return false;
}; };
DroppableWidget.prototype.performListActions = function(titleList,event) {
if(this.droppableListActions) {
var modifierKey = $tw.keyboardManager.getEventModifierKeyDescriptor(event);
this.invokeActionString(this.droppableListActions,this,event,{actionTiddlerList: titleList, modifier: modifierKey});
}
};
DroppableWidget.prototype.performActions = function(title,event) { DroppableWidget.prototype.performActions = function(title,event) {
if(this.droppableActions) { if(this.droppableActions) {
var modifierKey = $tw.keyboardManager.getEventModifierKeyDescriptor(event); var modifierKey = $tw.keyboardManager.getEventModifierKeyDescriptor(event);
@ -149,6 +168,7 @@ Compute the internal state of the widget
*/ */
DroppableWidget.prototype.execute = function() { DroppableWidget.prototype.execute = function() {
this.droppableActions = this.getAttribute("actions"); this.droppableActions = this.getAttribute("actions");
this.droppableListActions = this.getAttribute("listActions");
this.droppableEffect = this.getAttribute("effect","copy"); this.droppableEffect = this.getAttribute("effect","copy");
this.droppableTag = this.getAttribute("tag"); this.droppableTag = this.getAttribute("tag");
this.droppableEnable = (this.getAttribute("enable") || "yes") === "yes"; this.droppableEnable = (this.getAttribute("enable") || "yes") === "yes";
@ -168,7 +188,8 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
*/ */
DroppableWidget.prototype.refresh = function(changedTiddlers) { DroppableWidget.prototype.refresh = function(changedTiddlers) {
var changedAttributes = this.computeAttributes(); var changedAttributes = this.computeAttributes();
if(changedAttributes.tag || changedAttributes.enable || changedAttributes.disabledClass || changedAttributes.actions || changedAttributes.effect) { if(changedAttributes.tag || changedAttributes.enable || changedAttributes.disabledClass ||
changedAttributes.actions|| changedAttributes.listActions || changedAttributes.effect) {
this.refreshSelf(); this.refreshSelf();
return true; return true;
} else { } else {

View File

@ -0,0 +1,9 @@
created: 20240612115323606
modified: 20240612115535069
tags: [[Core Variables]] Variables
title: actionTiddlerList Variable
type: text/vnd.tiddlywiki
The variable `actionTiddlerList` is used:
* Within the ''listActions'' string of the DroppableWidget, the <<.def actionTiddlerList>> [[variable|Variables]] contains a [[Title List]] of the tiddlers being dropped.

View File

@ -1,5 +1,5 @@
created: 20170406083917224 created: 20170406083917224
modified: 20190118084621046 modified: 20240612115232524
tags: Variables [[Core Variables]] tags: Variables [[Core Variables]]
title: actionTiddler Variable title: actionTiddler Variable
type: text/vnd.tiddlywiki type: text/vnd.tiddlywiki
@ -7,4 +7,4 @@ type: text/vnd.tiddlywiki
The variable `actionTiddler` is used in subtly different ways by different widgets: The variable `actionTiddler` is used in subtly different ways by different widgets:
* Within the ''actions'' string of the DroppableWidget, the <<.def actionTiddler>> [[variable|Variables]] contains the title of the tiddler being dropped. * Within the ''actions'' string of the DroppableWidget, the <<.def actionTiddler>> [[variable|Variables]] contains the title of the tiddler being dropped.
* Within the ''startactions'' and ''endactions'' string of the DroppableWidget, the <<.def actionTiddler>> [[variable|Variables]] contains a quoted [[Title List]] of all of the titles being dragged. * Within the ''startactions'' and ''endactions'' string of the DraggableWidget, the <<.def actionTiddler>> [[variable|Variables]] contains a quoted [[Title List]] of all of the titles being dragged.

View File

@ -1,22 +1,27 @@
caption: droppable caption: droppable
created: 20170406082820317 created: 20170406082820317
modified: 20231121101447359 modified: 20240612125454153
tags: Widgets TriggeringWidgets tags: Widgets TriggeringWidgets
title: DroppableWidget title: DroppableWidget
type: text/vnd.tiddlywiki type: text/vnd.tiddlywiki
\define droppable-image-actions() \procedure drop-on-tags-actions()
<$action-log actionTiddlerList=<<actionTiddlerList>>/>
<$action-setfield $tiddler="$:/temp/drop/TitleList" $field="text" text=<<actionTiddlerList>> type="text/plain"/>
\end
\procedure droppable-image-actions()
<$action-setfield $tiddler=<<actionTiddler>> $field="icon" $value=<<currentTiddler>>/> <$action-setfield $tiddler=<<actionTiddler>> $field="icon" $value=<<currentTiddler>>/>
\end \end
\define colour-demo-body() \procedure colour-demo-body()
<$droppable actions=<<droppable-colour-actions>>> <$droppable actions=<<droppable-colour-actions>>>
<span style="display: inline-block; width: 1em; height: 1em;background-color: $(currentTiddler)$;"> <span style=`display: inline-block; width: 1em; height: 1em;background-color: $(currentTiddler)$;`>
</span> </span>
</$droppable> </$droppable>
\end \end
\define droppable-colour-actions() \procedure droppable-colour-actions()
<$action-setfield $tiddler=<<actionTiddler>> $field="color" $value=<<currentTiddler>>/> <$action-setfield $tiddler=<<actionTiddler>> $field="color" $value=<<currentTiddler>>/>
\end \end
@ -26,22 +31,23 @@ See DragAndDropMechanism for an overview.
! Content and Attributes ! Content and Attributes
|!Attribute |!Description | |! Attribute |! Description |
|actions |Actions to be performed when items are dropped | |actions |Actions to be performed when items are dropped. It activates ''1 action per item'' |
|listActions |<<.from-version "5.3.4">> Actions to be performed when items are dropped. It activates ''1 action for'' a the whole ''list of items'' |
|class |Optional CSS classes to assign to the draggable element. The class `tc-droppable` is added automatically, and the class `tc-dragover` is applied while an item is being dragged over the droppable element | |class |Optional CSS classes to assign to the draggable element. The class `tc-droppable` is added automatically, and the class `tc-dragover` is applied while an item is being dragged over the droppable element |
|tag |Optional tag to override the default of a "div" element when the widget is rendered in block mode, or a "span" element when it is rendered in inline mode | |tag |Optional tag to override the default of a "div" element when the widget is rendered in block mode, or a "span" element when it is rendered in inline mode |
|enable |<<.from-version "5.1.22">> Optional value "no" to disable the droppable functionality (defaults to "yes") | |enable |<<.from-version "5.1.22">> Optional value "no" to disable the droppable functionality (defaults to "yes") |
|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 | |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 | |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 |
Within the action string, there are two Variables generated by the DroppableWidget: ''Within the action string'', the following variables are generated by the DroppableWidget:
* The [[actionTiddler Variable]] contains the title of the item being dropped |!Variables |!Description |
* The [[modifier Variable]] contains the Modifier Key held while dragging (can be normal, ctrl, shift or ctrl-shift) |`actionTiddler` |For parameter <<.param actions>>, the [[actionTiddler Variable]] contains the title of the item being dropped |
|`actionTiddlerList` |For parameter <<.param listActions>> the [[actionTiddlerList Variable]] contains a [[Title List]] of all the items being dropped |
|`modifier` |The [[modifier Variable]] contains the modifier key held while dragging (can be normal, ctrl, shift or ctrl-shift) |
If multiple items are dropped then the actions are performed repeatedly, once for each dropped item. <<.note """Note that the <<.var actionTiddler>> variable holds a single, unquoted title. This is unlike the DraggableWidget which uses the same variable to pass a quoted [[Title List]].""">>
<<.tip """Note that the [[actionTiddler Variable]] holds a single, unquoted title. This is unlike the DraggableWidget which uses the same variable to pass a quoted [[Title List]].""">>
! Examples ! Examples
@ -53,9 +59,22 @@ This example displays a palette of icons. Dragging a tiddler onto one of the ico
</$droppable> </$droppable>
</$list> </$list>
---
Similarly, this example shows a palette of colours. Dragging a tiddler onto one of the colours assigns that colour to be used for rendering the icon of the tiddler. Similarly, this example shows a palette of colours. Dragging a tiddler onto one of the colours assigns that colour to be used for rendering the icon of the tiddler.
<$list filter="LightPink Pink Crimson LavenderBlush PaleVioletRed HotPink DeepPink MediumVioletRed Orchid Thistle Plum Violet Magenta Fuchsia DarkMagenta Purple MediumOrchid DarkViolet DarkOrchid Indigo BlueViolet MediumPurple MediumSlateBlue SlateBlue DarkSlateBlue Lavender GhostWhite Blue MediumBlue MidnightBlue DarkBlue Navy RoyalBlue CornflowerBlue LightSteelBlue LightSlateGrey SlateGrey DodgerBlue AliceBlue SteelBlue LightSkyBlue SkyBlue DeepSkyBlue LightBlue PowderBlue CadetBlue Azure LightCyan PaleTurquoise Cyan Aqua DarkTurquoise DarkSlateGrey DarkCyan Teal MediumTurquoise LightSeaGreen Turquoise Aquamarine MediumAquamarine MediumSpringGreen MintCream SpringGreen MediumSeaGreen SeaGreen Honeydew LightGreen PaleGreen DarkSeaGreen LimeGreen Lime ForestGreen Green DarkGreen Chartreuse LawnGreen GreenYellow DarkOliveGreen YellowGreen OliveDrab Beige LightGoldenrodYellow Ivory LightYellow Yellow Olive DarkKhaki LemonChiffon PaleGoldenrod Khaki Gold Cornsilk Goldenrod DarkGoldenrod FloralWhite OldLace Wheat Moccasin Orange PapayaWhip BlanchedAlmond NavajoWhite AntiqueWhite Tan BurlyWood Bisque DarkOrange Linen Peru PeachPuff SandyBrown Chocolate SaddleBrown Seashell Sienna LightSalmon Coral OrangeRed DarkSalmon Tomato MistyRose Salmon Snow LightCoral RosyBrown IndianRed Red Brown FireBrick DarkRed Maroon White WhiteSmoke Gainsboro LightGrey Silver DarkGrey Grey DimGrey Black"> <$list filter="LightPink Pink Crimson LavenderBlush PaleVioletRed HotPink DeepPink MediumVioletRed Orchid Thistle Plum Violet Magenta Fuchsia DarkMagenta Purple MediumOrchid DarkViolet DarkOrchid Indigo BlueViolet MediumPurple MediumSlateBlue SlateBlue DarkSlateBlue Lavender GhostWhite Blue MediumBlue MidnightBlue DarkBlue Navy RoyalBlue CornflowerBlue LightSteelBlue LightSlateGrey SlateGrey DodgerBlue AliceBlue SteelBlue LightSkyBlue SkyBlue DeepSkyBlue LightBlue PowderBlue CadetBlue Azure LightCyan PaleTurquoise Cyan Aqua DarkTurquoise DarkSlateGrey DarkCyan Teal MediumTurquoise LightSeaGreen Turquoise Aquamarine MediumAquamarine MediumSpringGreen MintCream SpringGreen MediumSeaGreen SeaGreen Honeydew LightGreen PaleGreen DarkSeaGreen LimeGreen Lime ForestGreen Green DarkGreen Chartreuse LawnGreen GreenYellow DarkOliveGreen YellowGreen OliveDrab Beige LightGoldenrodYellow Ivory LightYellow Yellow Olive DarkKhaki LemonChiffon PaleGoldenrod Khaki Gold Cornsilk Goldenrod DarkGoldenrod FloralWhite OldLace Wheat Moccasin Orange PapayaWhip BlanchedAlmond NavajoWhite AntiqueWhite Tan BurlyWood Bisque DarkOrange Linen Peru PeachPuff SandyBrown Chocolate SaddleBrown Seashell Sienna LightSalmon Coral OrangeRed DarkSalmon Tomato MistyRose Salmon Snow LightCoral RosyBrown IndianRed Red Brown FireBrick DarkRed Maroon White WhiteSmoke Gainsboro LightGrey Silver DarkGrey Grey DimGrey Black">
<<colour-demo-body>> <<colour-demo-body>>
</$list> </$list>
---
Drag the tag pill <<tag HelloThere>> or a single tiddler link [[HelloThere]] into the "Drop Area" below. It will show the "Title List" stored in $:/temp/drop/TitleList
<<.note title:""
_:"""<$droppable listActions=<<drop-on-tags-actions>> >
''Drop'' the tagpill or a link into this ''area''.<br>
~TitleList: <$transclude $tiddler="$:/temp/drop/TitleList"/>
</$droppable>""">>