Linear navigation control

#1

I’m currently in the “concept of a plan” stage of a potential new TW.

What I’m thinking this new wiki will need is a way to display a sequence of tiddlers. I’m wanting to have a tiddler that is “host” to a sequence of other tiddlers selected via a filter and displayed like:

<-Link/button-to-previous-tiddler Title/Caption-of-displayed-tiddler Link/button-to-next-tiddler->

“current”-tiddler-displayed-here-via-transclusion

Bonus points: duplicate-of-top-navigation-controls-here

Clicking the “previous”/“next” buttons/links will change the transcluded tiddler, based on the order of tiddlers produced by the filter.

I’m wondering if something like this has already been done, to save me the trouble of figuring it out myself?

#2

Here is a generalized version of a switcher that I use. You can copy all the code below, go to TiddlyWiki.com, edit a new tiddler, paste the code, then play around with it in the preview pane.

\define state-tid() $:/state/appointment-view
\function state() [<state-tid>get[text]] :else[[DefaultTiddlers]]

\function filter.base() [tag[Concepts]!prefix[$:/]!has[draft.of]]
\function get.prev() [filter.base[]sort[title]before<state>is[tiddler]] :else[[]]
\function get.next() [filter.base[]sort[title]after<state>is[tiddler]] :else[[]]

\procedure switch-prev() <$action-setfield $tiddler=<<state-tid>> text=<<get.prev>> />
\procedure switch-next() <$action-setfield $tiddler=<<state-tid>> text=<<get.next>> />

<div class="session-switcher">
    <$tiddler tiddler=<<get.prev>>>
    <$button class="switch-prev"
        actions=<<switch-prev>>
        disabled={{{ [<get.prev>is[tiddler]then[no]else[yes]] }}}>
        {{$:/core/images/left-arrow|1em}}
        <<get.prev>>
    </$button>
    </$tiddler>
    <$tiddler tiddler=<<get.next>>>
    <$button class="switch-next"
        actions=<<switch-next>>
        disabled={{{ [<get.next>is[tiddler]then[no]else[yes]] }}}>
        {{$:/core/images/right-arrow|1em}}
        <<get.next>>
    </$button>
    </$tiddler>
</div>

<h1 style="text-align:center;">{{{ [<state>] :else[[DefaultTiddlers]] }}}</h1>
<blockquote style="margin: 1em 3em;">
<$transclude tiddler={{{ [<state>] :else[[DefaultTiddlers]] }}} mode=block />
</blockquote>

<style>
.session-switcher {
    min-width: 20ch;
    max-width: 60%;
    margin: 1em auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25em 1em;

    .switch-prev {
        grid-column: 1/2;
        border-radius: 0.25em 0 0 0.25em;
    }

    .switch-next {
        grid-column: -2/-1;
        flex-direction: row-reverse;
        border-radius: 0 0.25em 0.25em 0;
    }

    button {
        padding: 0.35em 0.5em;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: <<colour tab-background>>;
        box-shadow: 0 0 0 1px <<colour tab-border>>;
        border: 0;
        font-size: 0.8rem;

        &:not([disabled="true"]):hover,
        &:not([disabled="true"]):focus {
        background-color: <<colour tab-background>>80;
            box-shadow:
                0 0 0 1px <<colour tab-border>>,
                0 0 0 3px <<colour primary>>80;
        }

        &[disabled=true] {
            box-shadow: none;
            cursor: not-allowed;
        }

        svg { padding: 0; }
    }
}
</style>