diff --git a/core/wiki/macros/list-links-horizontal-draggable.tid b/core/wiki/macros/list-links-horizontal-draggable.tid new file mode 100644 index 000000000..cbbfcbd1c --- /dev/null +++ b/core/wiki/macros/list-links-horizontal-draggable.tid @@ -0,0 +1,68 @@ +title: $:/core/macros/list-links-horizontal-draggable +tags: $:/tags/Macro $:/tags/Global + +\whitespace trim +\procedure list-links-horizontal-draggable-caption() +<$let tv-wikilinks="no"> + + <$transclude field="caption"> + <$view field="title"/> + + + +\end + +\procedure list-links-horizontal-draggable(tiddler,field:"list",emptyMessage,type:"span",subtype:"span",class:"",itemTemplate,dragHandle:"⠿",enable:"yes") + \procedure tagSort() [getenlist-input[]] :sort:alphanumeric:caseinsensitive[subfilter{$:/config/Tags/CustomSort/subfilter}] + \procedure defaultSort() [getenlist-input[]] + \function tf.customSort() [match[tags]thenelse] + + + <$let targetTiddler=<> + targetField=<> + _enable={{{ [!match[no]thenelse[yes]] }}} + _dragHandle={{{ [<_enable>match[yes]thenelse[]] }}} + > + <$genesis $type=<> class=<>> + <$list filter=<> emptyMessage=<>> + <$droppable + actions=<> + tag=<> + enable=<<_enable>> + > + + <$draggable tiddler={{!!title}} tag="span" + enable=<<_enable>> + class="tc-horizontal-draggable-item" + > + <% if [<_dragHandle>!is[blank]] %> + + <<_dragHandle>> + + <% endif %> + <% if [is[variable]] %> + <$transclude $variable=<>> + <> + + <% else %> + <$transclude $tiddler=<>> + <> + + <% endif %> + + + + <% if [<_enable>match[yes]] %> + <$tiddler tiddler=""> + <$droppable + actions=<> + tag="span" + > + + + + <% endif %> + + + +\end diff --git a/editions/tw5.com/tiddlers/macros/examples/list-links-horizontal-draggable Macro (Examples).tid b/editions/tw5.com/tiddlers/macros/examples/list-links-horizontal-draggable Macro (Examples).tid new file mode 100644 index 000000000..a963edcc1 --- /dev/null +++ b/editions/tw5.com/tiddlers/macros/examples/list-links-horizontal-draggable Macro (Examples).tid @@ -0,0 +1,12 @@ +created: 20240712134945885 +modified: 20240716222408892 +title: list-links-horizontal-draggable Macro (Examples) +type: text/vnd.tiddlywiki + +<$macrocall $name=".example" n="1" eg="""<>"""/> + +<$macrocall $name=".example" n="2" eg="""<>"""/> + +<$macrocall $name=".example" n="3" eg="""<>"""/> + +<$macrocall $name=".example" n="4" eg="""<>"""/> diff --git a/editions/tw5.com/tiddlers/macros/list-links-horizontal-draggable Procedure.tid b/editions/tw5.com/tiddlers/macros/list-links-horizontal-draggable Procedure.tid new file mode 100644 index 000000000..b8e9de77c --- /dev/null +++ b/editions/tw5.com/tiddlers/macros/list-links-horizontal-draggable Procedure.tid @@ -0,0 +1,45 @@ +caption: list-links-horizontal-draggable +created: 20240712134619467 +modified: 20240717095358843 +tags: Macros [[Core Macros]] +title: list-links-horizontal-draggable Procedure +type: text/vnd.tiddlywiki + +<<.from-version "5.3.6">> + +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: `⠿`. It shows ⠿ in front of every item. If set to an ''empty string'' 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`.
See: [[Hidden Setting: Disable Drag and Drop]]""">> + +<<.macro-examples "list-links-horizontal-draggable">> diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid index c795ad362..29b42bb25 100644 --- a/themes/tiddlywiki/vanilla/base.tid +++ b/themes/tiddlywiki/vanilla/base.tid @@ -553,10 +553,55 @@ a.tc-tiddlylink-external:hover { border: 2px dashed <>; } +.tc-droppable.tc-dragover .tc-horizontal-draggable-placeholder { + outline: 2px dashed <>; +} + +.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 { + cursor: ew-resize; + display: inline-block; +} + .tc-draggable { cursor: move; } +.tc-horizontal-draggable .tc-draggable { + cursor: ew-resize; +} + +@media (max-width: <>) { + .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 <>; + display: block; + min-height: 2em; + } + + .tc-droppable.tc-dragover > .tc-horizontal-draggable-placeholder-last { + display: block; + min-height: 2em; + } +} + + .tc-sidebar-tab-open .tc-droppable-placeholder, .tc-tagged-draggable-list .tc-droppable-placeholder, .tc-links-draggable-list .tc-droppable-placeholder { line-height: 2em; @@ -1616,7 +1661,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: <>) { + .tc-remove-tag-button { + padding-left: 14px; + margin-left: 6px; + } } .tc-tiddler-editor {