From 0f4e745bef512f5b07b50bfd5bf7cfcb67159982 Mon Sep 17 00:00:00 2001 From: pmario Date: Tue, 16 Jul 2024 23:43:49 +0200 Subject: [PATCH 1/6] initial commit --- .../list-links-horizontal-draggable.tid | 69 +++++++++++++++++++ ...-horizontal-draggable Macro (Examples).tid | 6 ++ ...t-links-horizontal-draggable Procedure.tid | 45 ++++++++++++ themes/tiddlywiki/vanilla/base.tid | 61 +++++++++++++++- 4 files changed, 180 insertions(+), 1 deletion(-) create mode 100644 core/wiki/macros/list-links-horizontal-draggable.tid create mode 100644 editions/tw5.com/tiddlers/macros/examples/list-links-horizontal-draggable Macro (Examples).tid create mode 100644 editions/tw5.com/tiddlers/macros/list-links-horizontal-draggable Procedure.tid 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..6ef29793f --- /dev/null +++ b/core/wiki/macros/list-links-horizontal-draggable.tid @@ -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"> + + <$transclude field="caption"> + <$view field="title"/> + + + +\end + +\procedure list-links-horizontal-draggable(tiddler,field:"list",emptyMessage,type:"span",subtype:"span",class:"",itemTemplate,dragHandle:"yes",enable:"yes") + \procedure customSort() [getenlist-input[]] :sort:alphanumeric:caseinsensitive[subfilter{$:/config/Tags/CustomSort/subfilter}] + + + <$let targetTiddler=<> + targetField=<> + _enable={{{ [!match[no]thenelse[yes]] }}} + _dragHandle={{{ [<_enable>match[yes]thenelse[no]] }}} + > + <$log/> + <$genesis $type=<> class=<>> + <$list filter=<> emptyMessage=<>> + <$droppable + actions=<> + tag=<> + enable=<<_enable>> + > + + <% 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" + > + + <% if [is[variable]] %> + <$transclude $variable=<>> + <> + + <% else %> + <$transclude $tiddler=<>> + <> + + <% endif %> + + + + <% if [<_enable>match[yes]] %> + <$tiddler tiddler=""> + <$droppable + actions=<> + tag="span" + enable=<<_enable>> + > + + + + <% 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..810d7ff43 --- /dev/null +++ b/editions/tw5.com/tiddlers/macros/examples/list-links-horizontal-draggable Macro (Examples).tid @@ -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="""<>"""/> 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..b6b23e777 --- /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: 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`.
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 ca8d40aa7..2069424b4 100644 --- a/themes/tiddlywiki/vanilla/base.tid +++ b/themes/tiddlywiki/vanilla/base.tid @@ -528,10 +528,61 @@ 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::before { + content: '⠿'; + 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-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: <>) { + .tc-remove-tag-button { + padding-left: 14px; + margin-left: 6px; + } } .tc-tiddler-editor { From e184ca95001acfaf36328fa55b43cd10bb4f483d Mon Sep 17 00:00:00 2001 From: pmario Date: Wed, 17 Jul 2024 00:27:00 +0200 Subject: [PATCH 2/6] simplify code - make sure the item is visible when dragged --- .../macros/list-links-horizontal-draggable.tid | 17 ++++++++--------- .../Weekdays/Days of the Week.tid | 2 +- ...ks-horizontal-draggable Macro (Examples).tid | 8 +++++++- ...ist-links-horizontal-draggable Procedure.tid | 4 ++-- themes/tiddlywiki/vanilla/base.tid | 8 +------- 5 files changed, 19 insertions(+), 20 deletions(-) diff --git a/core/wiki/macros/list-links-horizontal-draggable.tid b/core/wiki/macros/list-links-horizontal-draggable.tid index 6ef29793f..8de193e67 100644 --- a/core/wiki/macros/list-links-horizontal-draggable.tid +++ b/core/wiki/macros/list-links-horizontal-draggable.tid @@ -12,14 +12,14 @@ tags: $:/tags/Macro $:/tags/Global \end -\procedure list-links-horizontal-draggable(tiddler,field:"list",emptyMessage,type:"span",subtype:"span",class:"",itemTemplate,dragHandle:"yes",enable:"yes") +\procedure list-links-horizontal-draggable(tiddler,field:"list",emptyMessage,type:"span",subtype:"span",class:"",itemTemplate,dragHandle:"⠿",enable:"yes") \procedure customSort() [getenlist-input[]] :sort:alphanumeric:caseinsensitive[subfilter{$:/config/Tags/CustomSort/subfilter}] <$let targetTiddler=<> targetField=<> _enable={{{ [!match[no]thenelse[yes]] }}} - _dragHandle={{{ [<_enable>match[yes]thenelse[no]] }}} + _dragHandle={{{ [<_enable>match[yes]thenelse[]] }}} > <$log/> <$genesis $type=<> class=<>> @@ -30,16 +30,15 @@ tags: $:/tags/Macro $:/tags/Global enable=<<_enable>> > - <% 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]] }}} + enable=<<_enable>> class="tc-horizontal-draggable-item" > - + <% if [<_dragHandle>!is[blank]] %> + + <<_dragHandle>> + + <% endif %> <% if [is[variable]] %> <$transclude $variable=<>> <> diff --git a/editions/tw5.com/tiddlers/demonstrations/Weekdays/Days of the Week.tid b/editions/tw5.com/tiddlers/demonstrations/Weekdays/Days of the Week.tid index 06e64ce85..f37b9d893 100644 --- a/editions/tw5.com/tiddlers/demonstrations/Weekdays/Days of the Week.tid +++ b/editions/tw5.com/tiddlers/demonstrations/Weekdays/Days of the Week.tid @@ -1,6 +1,6 @@ created: 20150117192110000 list: Monday Tuesday Wednesday Thursday Friday Saturday Sunday -modified: 20211116221246915 +modified: 20240716222620082 my-special-list: [[listed Operator (Examples)]] short: Mon Tue Wed Thu Fri Sat Sun tags: [[Operator Examples]] 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 index 810d7ff43..a963edcc1 100644 --- 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 @@ -1,6 +1,12 @@ created: 20240712134945885 -modified: 20240712135014913 +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 index b6b23e777..8651b9bb4 100644 --- a/editions/tw5.com/tiddlers/macros/list-links-horizontal-draggable Procedure.tid +++ b/editions/tw5.com/tiddlers/macros/list-links-horizontal-draggable Procedure.tid @@ -1,6 +1,6 @@ caption: list-links-horizontal-draggable created: 20240712134619467 -modified: 20240716135427247 +modified: 20240716221918196 tags: Macros [[Core Macros]] title: list-links-horizontal-draggable Procedure type: text/vnd.tiddlywiki @@ -33,7 +33,7 @@ The <<.def list-links-horizontal-draggable>> [[procedure|Procedures]] renders th : 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 +: 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 diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid index 2069424b4..cc2de6aab 100644 --- a/themes/tiddlywiki/vanilla/base.tid +++ b/themes/tiddlywiki/vanilla/base.tid @@ -543,8 +543,7 @@ a.tc-tiddlylink-external:hover { } /* content: braille pattern 283F */ -.tc-draggable-handle::before { - content: '⠿'; +.tc-draggable-handle { cursor: ew-resize; display: inline-block; } @@ -575,11 +574,6 @@ a.tc-tiddlylink-external:hover { display: block; min-height: 2em; } - .tc-draggable-handle::before { - content: '⠿'; - padding-left: 10px; - padding-right: 7px; - } } From cf6d81d592fc6bc78bcb4d5bd8278b09e9ca3898 Mon Sep 17 00:00:00 2001 From: pmario Date: Wed, 17 Jul 2024 00:46:10 +0200 Subject: [PATCH 3/6] tag field needs special handling --- core/wiki/macros/list-links-horizontal-draggable.tid | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/core/wiki/macros/list-links-horizontal-draggable.tid b/core/wiki/macros/list-links-horizontal-draggable.tid index 8de193e67..e22bb874c 100644 --- a/core/wiki/macros/list-links-horizontal-draggable.tid +++ b/core/wiki/macros/list-links-horizontal-draggable.tid @@ -13,7 +13,9 @@ tags: $:/tags/Macro $:/tags/Global \end \procedure list-links-horizontal-draggable(tiddler,field:"list",emptyMessage,type:"span",subtype:"span",class:"",itemTemplate,dragHandle:"⠿",enable:"yes") - \procedure customSort() [getenlist-input[]] :sort:alphanumeric:caseinsensitive[subfilter{$:/config/Tags/CustomSort/subfilter}] + \procedure tagSort() [getenlist-input[]] :sort:alphanumeric:caseinsensitive[subfilter{$:/config/Tags/CustomSort/subfilter}] + \procedure defaultSort() [getenlist-input[]] + \function tf.customSort() [match[tags]thenelse] <$let targetTiddler=<> @@ -21,9 +23,8 @@ tags: $:/tags/Macro $:/tags/Global _enable={{{ [!match[no]thenelse[yes]] }}} _dragHandle={{{ [<_enable>match[yes]thenelse[]] }}} > - <$log/> <$genesis $type=<> class=<>> - <$list filter=<> emptyMessage=<>> + <$list filter=<> emptyMessage=<>> <$droppable actions=<> tag=<> From 0b511417754edd88dd78d383d13ce230f3507ade Mon Sep 17 00:00:00 2001 From: pmario Date: Wed, 17 Jul 2024 14:16:19 +0200 Subject: [PATCH 4/6] remove redundant _enable --- core/wiki/macros/list-links-horizontal-draggable.tid | 1 - 1 file changed, 1 deletion(-) diff --git a/core/wiki/macros/list-links-horizontal-draggable.tid b/core/wiki/macros/list-links-horizontal-draggable.tid index e22bb874c..cbbfcbd1c 100644 --- a/core/wiki/macros/list-links-horizontal-draggable.tid +++ b/core/wiki/macros/list-links-horizontal-draggable.tid @@ -57,7 +57,6 @@ tags: $:/tags/Macro $:/tags/Global <$droppable actions=<> tag="span" - enable=<<_enable>> > From 2f9d0176a98f0fc28ed41ebd8c23b64e536b851d Mon Sep 17 00:00:00 2001 From: pmario Date: Wed, 17 Jul 2024 14:16:34 +0200 Subject: [PATCH 5/6] fix .from-version --- .../macros/list-links-horizontal-draggable Procedure.tid | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 index 8651b9bb4..b8e9de77c 100644 --- a/editions/tw5.com/tiddlers/macros/list-links-horizontal-draggable Procedure.tid +++ b/editions/tw5.com/tiddlers/macros/list-links-horizontal-draggable Procedure.tid @@ -1,11 +1,11 @@ caption: list-links-horizontal-draggable created: 20240712134619467 -modified: 20240716221918196 +modified: 20240717095358843 tags: Macros [[Core Macros]] title: list-links-horizontal-draggable Procedure type: text/vnd.tiddlywiki -<<.from-version "5.3.7">> +<<.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]]. From 98287e0c426a9131bbcf5fdacd58408236013f12 Mon Sep 17 00:00:00 2001 From: pmario Date: Wed, 17 Jul 2024 14:22:30 +0200 Subject: [PATCH 6/6] undo changes to Days of the Week tiddler --- .../tiddlers/demonstrations/Weekdays/Days of the Week.tid | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/editions/tw5.com/tiddlers/demonstrations/Weekdays/Days of the Week.tid b/editions/tw5.com/tiddlers/demonstrations/Weekdays/Days of the Week.tid index f37b9d893..06e64ce85 100644 --- a/editions/tw5.com/tiddlers/demonstrations/Weekdays/Days of the Week.tid +++ b/editions/tw5.com/tiddlers/demonstrations/Weekdays/Days of the Week.tid @@ -1,6 +1,6 @@ created: 20150117192110000 list: Monday Tuesday Wednesday Thursday Friday Saturday Sunday -modified: 20240716222620082 +modified: 20211116221246915 my-special-list: [[listed Operator (Examples)]] short: Mon Tue Wed Thu Fri Sat Sun tags: [[Operator Examples]]