mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2025-09-05 04:18:01 +00:00
initial commit
This commit is contained in:
pmario
69
core/wiki/macros/list-links-horizontal-draggable.tid
Normal file
69
core/wiki/macros/list-links-horizontal-draggable.tid
Normal file
@@ -0,0 +1,69 @@
|
||||
title: $:/core/macros/list-links-horizontal-draggable
|
||||
tags: $:/tags/Macro $:/tags/Global
|
||||
|
||||
\whitespace trim
|
||||
\procedure list-links-horizontal-draggable-caption()
|
||||
<$let tv-wikilinks="no">
|
||||
<span class="tc-small-gap-right">
|
||||
<$transclude field="caption">
|
||||
<$view field="title"/>
|
||||
</$transclude>
|
||||
</span>
|
||||
</$let>
|
||||
\end
|
||||
|
||||
\procedure list-links-horizontal-draggable(tiddler,field:"list",emptyMessage,type:"span",subtype:"span",class:"",itemTemplate,dragHandle:"yes",enable:"yes")
|
||||
\procedure customSort() [<tiddler>get<field>enlist-input[]] :sort:alphanumeric:caseinsensitive[subfilter{$:/config/Tags/CustomSort/subfilter}]
|
||||
|
||||
<span class="tc-horizontal-draggable tc-tiny-gap-right">
|
||||
<$let targetTiddler=<<tiddler>>
|
||||
targetField=<<field>>
|
||||
_enable={{{ [<tv-enable-drag-and-drop>!match[no]then<enable>else[yes]] }}}
|
||||
_dragHandle={{{ [<_enable>match[yes]then<dragHandle>else[no]] }}}
|
||||
>
|
||||
<$log/>
|
||||
<$genesis $type=<<type>> class=<<class>>>
|
||||
<$list filter=<<customSort>> emptyMessage=<<emptyMessage>>>
|
||||
<$droppable
|
||||
actions=<<list-links-draggable-drop-actions>>
|
||||
tag=<<subtype>>
|
||||
enable=<<_enable>>
|
||||
>
|
||||
<span class="tc-horizontal-draggable-placeholder"/>
|
||||
<% if [<_dragHandle>match[yes]] %>
|
||||
<$draggable tiddler={{!!title}} tag="span"
|
||||
class="tc-draggable-handle"
|
||||
/>
|
||||
<% endif %>
|
||||
<$draggable tiddler={{!!title}} tag="span"
|
||||
enable={{{ [<_dragHandle>!match[yes]then<_enable>else[no]] }}}
|
||||
class="tc-horizontal-draggable-item"
|
||||
>
|
||||
<span class="tc-draggable-item"/>
|
||||
<% if [<itemTemplate>is[variable]] %>
|
||||
<$transclude $variable=<<itemTemplate>>>
|
||||
<<list-links-horizontal-draggable-caption>>
|
||||
</$transclude>
|
||||
<% else %>
|
||||
<$transclude $tiddler=<<itemTemplate>>>
|
||||
<<list-links-horizontal-draggable-caption>>
|
||||
</$transclude>
|
||||
<% endif %>
|
||||
</$draggable>
|
||||
</$droppable>
|
||||
</$list>
|
||||
<% if [<_enable>match[yes]] %>
|
||||
<$tiddler tiddler="">
|
||||
<$droppable
|
||||
actions=<<list-links-draggable-drop-actions>>
|
||||
tag="span"
|
||||
enable=<<_enable>>
|
||||
>
|
||||
<span class="tc-horizontal-draggable-placeholder tc-horizontal-draggable-placeholder-last"></span>
|
||||
</$droppable>
|
||||
</$tiddler>
|
||||
<% endif %>
|
||||
</$genesis>
|
||||
</$let>
|
||||
</span>
|
||||
\end
|
||||
@@ -0,0 +1,6 @@
|
||||
created: 20240712134945885
|
||||
modified: 20240712135014913
|
||||
title: list-links-horizontal-draggable Macro (Examples)
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
<$macrocall $name=".example" n="1" eg="""<<list-links-horizontal-draggable tiddler:"Days of the Week">>"""/>
|
||||
@@ -0,0 +1,45 @@
|
||||
caption: list-links-horizontal-draggable
|
||||
created: 20240712134619467
|
||||
modified: 20240716135427247
|
||||
tags: Macros [[Core Macros]]
|
||||
title: list-links-horizontal-draggable Procedure
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
<<.from-version "5.3.7">>
|
||||
|
||||
The <<.def list-links-horizontal-draggable>> [[procedure|Procedures]] renders the ListField of a tiddler as a list that can be reordered via [[drag and drop|Drag and Drop]].
|
||||
|
||||
!! Parameters
|
||||
|
||||
; tiddler
|
||||
: The title of the tiddler containing the list
|
||||
|
||||
; field
|
||||
: The name of the field containing the list (defaults to `list`)
|
||||
|
||||
; emptyMessage
|
||||
: Optional wikitext to display if there is no output (tiddler is not existed, field is not existed or empty)
|
||||
|
||||
; type
|
||||
: The element tag to use for the list wrapper (defaults to `span`)
|
||||
|
||||
; subtype
|
||||
: The element tag to use for the list items (defaults to `span`)
|
||||
|
||||
; class
|
||||
: Optional space separated classes to add to the wrapper element
|
||||
|
||||
; itemTemplate
|
||||
: Optional title of a tiddler to use as the template for rendering list items
|
||||
|
||||
; dragHandle
|
||||
: Defaults to: ''yes''. If shows a drag handle: `⠿` in front of every item. If set to ''no'' the handle is removed
|
||||
|
||||
; enable
|
||||
: Defaults to: ''yes''. If set to ''no'' the draggability function and the handles are removed
|
||||
|
||||
If the `itemTemplate` parameter is not provided then the list items are rendered as simple text. Within the `itemTemplate`, the [[currentTiddler Variable]] refers to the current list item.
|
||||
|
||||
<<.warning """Be ware, that the macro internally respects the global variable `tv-enable-drag-and-drop`.<br>See: [[Hidden Setting: Disable Drag and Drop]]""">>
|
||||
|
||||
<<.macro-examples "list-links-horizontal-draggable">>
|
||||
@@ -528,10 +528,61 @@ a.tc-tiddlylink-external:hover {
|
||||
border: 2px dashed <<colour dropzone-background>>;
|
||||
}
|
||||
|
||||
.tc-droppable.tc-dragover .tc-horizontal-draggable-placeholder {
|
||||
outline: 2px dashed <<colour dropzone-background>>;
|
||||
}
|
||||
|
||||
.tc-horizontal-draggable-placeholder {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.tc-horizontal-draggable-placeholder-last {
|
||||
display: inline-block;
|
||||
min-width: 1em;
|
||||
min-height: 1em;
|
||||
}
|
||||
|
||||
/* content: braille pattern 283F */
|
||||
.tc-draggable-handle::before {
|
||||
content: '⠿';
|
||||
cursor: ew-resize;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tc-draggable {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.tc-horizontal-draggable .tc-draggable {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
@media (max-width: <<sidebarbreakpoint-minus-one>>) {
|
||||
.tc-droppable.tc-dragover > .tc-horizontal-draggable-placeholder-last,
|
||||
.tc-droppable.tc-dragover > .tc-horizontal-draggable-placeholder {
|
||||
display: inline-block;
|
||||
min-width: 4em;
|
||||
min-height: 1em;
|
||||
}
|
||||
|
||||
.tc-horizontal-draggable-placeholder-last {
|
||||
outline: 1px dashed <<colour foreground>>;
|
||||
display: block;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
.tc-droppable.tc-dragover > .tc-horizontal-draggable-placeholder-last {
|
||||
display: block;
|
||||
min-height: 2em;
|
||||
}
|
||||
.tc-draggable-handle::before {
|
||||
content: '⠿';
|
||||
padding-left: 10px;
|
||||
padding-right: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tc-sidebar-tab-open .tc-droppable-placeholder, .tc-tagged-draggable-list .tc-droppable-placeholder,
|
||||
.tc-links-draggable-list .tc-droppable-placeholder {
|
||||
line-height: 2em;
|
||||
@@ -1581,7 +1632,15 @@ html body.tc-body.tc-single-tiddler-window {
|
||||
}
|
||||
|
||||
.tc-remove-tag-button {
|
||||
padding-left: 4px;
|
||||
padding-left: 6px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: <<sidebarbreakpoint-minus-one>>) {
|
||||
.tc-remove-tag-button {
|
||||
padding-left: 14px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.tc-tiddler-editor {
|
||||
|
||||
Reference in New Issue
Block a user