The last batch of drag and drop docs
This commit is contained in:
Jermolene
parent
b9a8c3c01d
commit
40a61ff2e7
|
|
@ -0,0 +1,15 @@
|
|||
caption: insertbefore
|
||||
created: 20170406090122441
|
||||
modified: 20170406091248994
|
||||
op-input: a [[selection of titles|Title Selection]]
|
||||
op-output: the input tiddler list with the new entry inserted
|
||||
op-parameter: the title of the tiddler to insert
|
||||
op-parameter-name: T
|
||||
op-purpose: insert an item <<.place T>> into a list immediately before an item <<.place B>>
|
||||
op-suffix: the name of a variable containing the title of the tiddler before which this one should be inserted
|
||||
op-suffix-name: B
|
||||
tags: [[Filter Operators]] [[Order Operators]] [[Listops Operators]]
|
||||
title: insertbefore Operator
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
If the item <<.place B>> isn't present in the input list then the new item is inserted at the end of the list.
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
created: 20170328161210552
|
||||
modified: 20170328204148733
|
||||
modified: 20170406085836682
|
||||
tags: [[Importing Tiddlers]] [[Drag and Drop]] Mechanisms
|
||||
title: DragAndDropMechanism
|
||||
type: text/vnd.tiddlywiki
|
||||
|
|
@ -23,15 +23,3 @@ The general sequence of a drag and drop operation is as follows:
|
|||
# The draggable element moves with the mouse pointer until the click is released
|
||||
# Moving the pointer over droppable elements such as the DroppableWidget displays a highlight indicating that the item can be dropped
|
||||
# The configured actions are performed if the drag ends on a droppable element
|
||||
|
||||
There is an additional complexity in the shape of "[[drop effects|https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#drageffects]]":
|
||||
|
||||
* The available effects and their meanings are:
|
||||
** ''move'': the item will be moved from the source location to the the drop location
|
||||
** ''copy'': the item will be copied from the source location to the the drop location
|
||||
** ''link'': some form of relationship or connection will be created between the source and drop locations
|
||||
* Draggable items can indicate which effects are allowed when they are dragged
|
||||
* Browsers choose which effect to use from those allowed, typically according to modifier keys:
|
||||
** the ''control'' key switches to a link operation
|
||||
** the ''shift'' key switches to a move operation
|
||||
* Droppable items can indicate which effects they will accept
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
created: 20170406083917224
|
||||
modified: 20170406084026289
|
||||
tags: Variables [[Core Variables]]
|
||||
title: actionTiddler Variable
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
Within the ''action'' string of the DroppableWidget, the <<.def actionTiddler>> [[variable|Variables]] contains the title of the tiddler being dropped.
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
caption: button
|
||||
created: 20131024141900000
|
||||
modified: 20160429175044822
|
||||
modified: 20170406085706139
|
||||
tags: Widgets
|
||||
title: ButtonWidget
|
||||
type: text/vnd.tiddlywiki
|
||||
|
|
@ -30,14 +30,16 @@ The content of the `<$button>` widget is displayed within the button.
|
|||
|param |The optional parameter to the message |
|
||||
|set |A TextReference to which a new value will be assigned |
|
||||
|setTo |The new value to assign to the TextReference identified in the `set` attribute |
|
||||
|selectedClass |An optional additional CSS class to be assigned if the popup is triggered or the tiddler specified in `set` already has the value specified in `setTo` |
|
||||
|default |Default value if `set` tiddler is missing for testing against `setTo` to determine `selectedClass` |
|
||||
|popup |Title of a state tiddler for a popup that is toggled when the button is clicked |
|
||||
|aria-label |Optional [[Accessibility]] label |
|
||||
|tooltip |Optional tooltip |
|
||||
|class |An optional CSS class name to be assigned to the HTML element|
|
||||
|style |An optional CSS style attribute to be assigned to the HTML element |
|
||||
|selectedClass |An optional additional CSS class to be assigned if the popup is triggered or the tiddler specified in `set` already has the value specified in `setTo` |
|
||||
|tag |An optional html tag to use instead of the default "button" |
|
||||
|default |Default value if `set` tiddler is missing for testing against `setTo` to determine `selectedClass` |
|
||||
|dragTiddler |An optional tiddler title making the button draggable and identifying the payload tiddler. See DraggableWidget for details |
|
||||
|dragFilter |An optional filter making the button draggable and identifying the list of payload tiddlers. See DraggableWidget for details |
|
||||
|
||||
''Note:'' In almost all other cases where a TextReference is used as a widget attribute, it will be placed between curly brackets, to [[transclude|Transclusion in WikiText]] the value currently stored there. However, when we use a TextReference as the value of a button widget's `set` attribute, we are referencing //the storage location itself//, rather than the value stored there, so we do ''not'' use curly brackets there. //Example:// we could code a button widget that sets the `caption` field of TiddlerA to be the same as that of TiddlerB as:
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
caption: draggable
|
||||
created: 20170406081938627
|
||||
modified: 20170406083157871
|
||||
tags: Widgets
|
||||
title: DraggableWidget
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
The `draggable` widget creates a DOM element that can be dragged by the user. It only works on browsers that support drag and drop, which typically means desktop browsers, but [[there are workarounds|Mobile Drag And Drop Shim Plugin]].
|
||||
|
||||
The draggable element can be assigned a list of tiddlers that are used as the payload. See DragAndDropMechanism for an overview.
|
||||
|
||||
! Content and Attributes
|
||||
|
||||
|!Attribute |!Description |
|
||||
|tiddler |Optional title of the payload tiddler for the drag |
|
||||
|filter |Optional filter defining the payload tiddlers for the drag |
|
||||
|class |Optional CSS classes to assign to the draggable element. The class `tc-draggable` is added automatically, and the class `tc-dragging` is applied while the element is being dragged |
|
||||
|tag |Optional tag to override the default "div" element |
|
||||
|
||||
Either or both of the ''tiddler'' and ''filter'' attributes must be specified in order for there to be a payload to drag.
|
||||
|
||||
The LinkWidget incorporates the functionality of the DraggableWidget via the ''draggable'' attribute.
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
caption: droppable
|
||||
created: 20170406082820317
|
||||
modified: 20170406085304387
|
||||
tags: Widgets
|
||||
title: DroppableWidget
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
\define droppable-image-actions()
|
||||
<$action-setfield $tiddler=<<actionTiddler>> $field="icon" $value=<<currentTiddler>>/>
|
||||
\end
|
||||
|
||||
\define colour-demo-body()
|
||||
<$droppable actions=<<droppable-colour-actions>>>
|
||||
<span style="display: inline-block; width: 1em; height: 1em;background-color: $(currentTiddler)$;">
|
||||
</span>
|
||||
</$droppable>
|
||||
\end
|
||||
|
||||
\define droppable-colour-actions()
|
||||
<$action-setfield $tiddler=<<actionTiddler>> $field="color" $value=<<currentTiddler>>/>
|
||||
\end
|
||||
|
||||
The `droppable` widget creates a DOM element onto which dragged items can be dropped by the user, triggering the specified actions. It only works on browsers that support drag and drop, which typically means desktop browsers, but [[there are workarounds|Mobile Drag And Drop Shim Plugin]].
|
||||
|
||||
See DragAndDropMechanism for an overview.
|
||||
|
||||
! Content and Attributes
|
||||
|
||||
|!Attribute |!Description |
|
||||
|actions |Actions to be performed when items are dropped |
|
||||
|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 |
|
||||
|
||||
Within the action string, the [[actionTiddler Variable]] contains the title of the item being dropped.
|
||||
|
||||
If multiple items are dropped then the actions are performed repeatedly, once for each dropped item.
|
||||
|
||||
! Examples
|
||||
|
||||
This example displays a palette of icons. Dragging a tiddler onto one of the icons assigns that icon to the tiddler.
|
||||
|
||||
<$list filter="[all[tiddlers+shadows]tag[$:/tags/Image]sort[title]]">
|
||||
<$droppable actions=<<droppable-image-actions>>>
|
||||
<$transclude/>
|
||||
</$droppable>
|
||||
</$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.
|
||||
|
||||
<$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>>
|
||||
</$list>
|
||||
|
||||
Loading…
Reference in New Issue