'page turning' facility

[Bob Jansen]

I have a tiddlywiki file with 170 'pages' of information. Each tiddler corresponds to a physical page in a book. I would like a button to allow the user to 'turn the page', next or previous, without having to type its title into the search bar. Pages have a title of 'Page 001', 'Page 002', etc.

I have been searching for how to do this but can not find a way at present. I have gone through the info on macros, Lists, Mathematical functions and each offers a glimpse which quickly peters out.

Any one got any pointers?

http://cultconv.com/English/Conversations/MacQueen_Mary/TiddlyWiki/index.html

bobj

[Eric Shulman]

On Wednesday, July 22, 2020 at 10:19:08 PM UTC-7, Bob Jansen wrote:

I have a tiddlywiki file with 170 'pages' of information. Each tiddler corresponds to a physical page in a book. I would like a button to allow the user to 'turn the page', next or previous, without having to type its title into the search bar. Pages have a title of 'Page 001', 'Page 002', etc.

http://cultconv.com/English/Conversations/MacQueen_Mary/TiddlyWiki/index.html

OK... here you go...

1) Create a tiddler named "PageTurner"

2) Give it a tag of "$:/tags/ViewTemplate"

3) Create a field named "list-after" with a value of "$:/core/ui/ViewTemplate/title"

4) Enter the following content and save the tiddler

<$list filter="[<currentTiddler>tag[Pages]]">
<div style="float:right;">
   <$vars prev={{{ [tag[Pages]sort[]before<currentTiddler>] }}}>
   <$vars next={{{ [tag[Pages]sort[]after<currentTiddler>] }}}>
   <$reveal default=<<prev>> type="nomatch" text="">
   <$button tooltip=<<prev>>> {{$:/core/images/chevron-left}}
      <$action-sendmessage $message="tm-close-tiddler" param=<<currentTiddler>> />
      <$action-navigate $to=<<prev>>/>
   </$button>
   </$reveal>
   <$reveal default=<<next>> type="nomatch" text="">
   <$button tooltip=<<next>>> {{$:/core/images/chevron-right}}
      <$action-sendmessage $message="tm-close-tiddler" param=<<currentTiddler>> />
      <$action-navigate $to=<<next>>/>
   </$button>
   </$reveal>
   </$vars>
   </$vars>
</div>
</$list>

What it does:

1) Tagging it with $:/tags/ViewTemplate automatically adds the PageTurner content to every tiddler

2) Giving it a "list-after" field with value "$:/core/ui/ViewTemplate/title" places the PageTurner content after the tiddler title

Then, the PageTurner content does the following:

3) The $list widget checks to see if the current tiddler is tagged with "Pages".  This limits the output so it will only appear on tiddlers with that tag.

4) <div style="float:right;"> puts the content on the right side of the tiddler so it appears just below the regular tiddler toolbar.

5) The two $vars get the list of all tiddlers tagged with "Pages" and finds the one before and after the currentTiddler.

6) The first $reveal ensures that the "previous" button will only appear if there is a previous tiddler (i.e., not on the first page)

7) The first $button shows a "chevron-left" (double arrow), and a tooltip with the title of the previous tiddler.

8) When the "previous" $button is clicked, it closes the currentTiddler, and navigates to the previous tiddler.

9) The second $reveal ensures that the "next" button will only appear if there is a next tiddler (i.e, not on the last page)

10 The second $button shows a "chevron-right" (double arrow), and a tooltip with the title of the next tiddler.

11) When the "next" $button is clicked, it closes the currentTiddler, and navigates to the next tiddler.

That's it.  I've tested this on the TiddlyWiki that you posted online, and it works nicely.

Let me know how it goes...

enjoy,

-e

[Bob Jansen]

Fantastic Eric, just what I was wanting. I will study what you have provided and so upskill myself.

bobj

[TW Tones]

Bob,

I expect Erics solution will be full featured and more generic. I will however post my work in progress. I discovered Eric had answered while I was building a solution.

Since you provided the link to the wiki, I was able to build something knowing how the data was structured. Three different solutions are below (With a minor bug I will fix if desired)

Place one of these in a tiddler tagged  $:/tags/ViewTemplate and use the tag pill `<<tag $:/tags/ViewTemplate>>` to change the order and where the controls appear.

Simple

<$list filter="[all[current]prefix[Page ]removeprefix[Page ]]" variable=page-number>
   {{{ [<page-number>subtract[1]divide[1000]removeprefix[0.]addprefix[Page ]] }}} here {{{ [<page-number>add[1]divide[1000]removeprefix[0.]addprefix[Page ]] }}}
</$list>

Buttons

<$list filter="[all[current]prefix[Page ]removeprefix[Page ]]" variable=page-number>
   <$button to={{{ [<page-number>subtract[1]divide[1000]removeprefix[0.]addprefix[Page ]] }}} tooltip="last page">{{$:/core/images/left-arrow}}    </$button>
   <$button to= {{{ [<page-number>add[1]divide[1000]removeprefix[0.]addprefix[Page ]] }}} tooltip="next page">{{$:/core/images/right-arrow}}        </$button>
</$list>

Buttons with First and hard coded Last page as well

<$list filter="[all[current]prefix[Page ]removeprefix[Page ]]" variable=page-number>
   <$button to="Page 001" tooltip="First page">|{{$:/core/images/chevron-left}}</$button>
   <$button to={{{ [<page-number>subtract[1]divide[1000]removeprefix[0.]addprefix[Page ]] }}}>{{$:/core/images/left-arrow}}</$button>
   <$button to= {{{ [<page-number>add[1]divide[1000]removeprefix[0.]addprefix[Page ]] }}}>{{$:/core/images/right-arrow}}</$button>
   <$button to="Page 181" tooltip="Last page">{{$:/core/images/chevron-right}}|</$button>
</$list>

However previous does not work over 99, I will find a solution if you want, just ask.

• This is because your pages have leading zeros that need to be handled.

This solution does not close the previous like Eric does (I Think)  however Control Panel > Appearance > Story View > Zoomin does something similar.

• A range of other possibilities are available via the page tag you have used.

Regards

Tony

[Bob Jansen]

Tony,

thank you very much for your reply. I have implemented Eric's solution but will study what you have done to better understand how to program TW.

bobj

On Thursday, 23 July 2020 15:19:08 UTC+10, Bob Jansen wrote:

[Birthe C]

TW Tones,

Yes, please! I think this is a repeated question and sure we will have that question again. Also because I like your ideas of course.

Birthe

[TW Tones]

Birthe

Just to check, you would like me to extend my solution to handle a larger number of pages?

Personaly I believe there are better ways than tiddlers with page number titles. In fact an alternate solution is available by using the pages tag.

It does raise what do you call something that needs a name but the names not Importiant.

Regards
Tony

[Bob Jansen]

Just for the record, I chose to use the page number as the title so I can refer back to the original page in the scrapbook. Else I would need a table of tiddler titles and page numbers.

But Tony is right, what do you call something that has no natural name.

Bobj

Dr. Bob Jansen
122 Cameron St, Rockdale NSW 2216, Australia
Ph: +61 414 297 448
Skype: bobjtls

> --
> You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
> To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/e0QUh-6s7wA/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/cae8f8d7-302a-479b-9ae9-1408a16bd22eo%40googlegroups.com.

[Eric Shulman]

On Thursday, July 23, 2020 at 4:37:44 AM UTC-7, TW Tones wrote:

Personaly I believe there are better ways than tiddlers with page number titles. In fact an alternate solution is available by using the pages tag.

The solution I provided, which uses the "Pages" tag, could just as well have used the title, simply by changing "tag[Pages]" to "prefix[Page ]" in

the three places where a filter is used, like this:

<$list filter="[<currentTiddler>prefix[Page ]]">
<div style="float:right;">
   <$vars prev={{{ [prefix[Page ]sort[]before<currentTiddler>] }}}>
   <$vars next={{{ [prefix[Page ]sort[]after<currentTiddler>] }}}>

The rest of the code remains unchanged since it works with the values of <<prev>> and <<next>>.

Also, this approach handles *any* number of pages by using "before<currentTiddler>" and "after<currentTiddler>"

in the filters that find the previous/next tiddler titles.  Thus, there's no need to calculate a page number and it works

even if there are some gaps in the sequence.

-e

[Birthe C]

TW Tones,

After further thought I think it will get too complicated with larger number of pages. I do not have that many pages yet, so I will restructure my wiki instead.

No reason to search for rabbit holes, they are everywhere - especially where not expected.. ;-)

Please, forget that I asked and make better use of your time.

Birthe

[Ste]

Mohammed's slides might also be a solution.

http://tiddlyshow.tiddlyspot.com/

[Eric Shulman]

It's also possible to make the code navigate through an entire TOC, like this:

\define toc-list(here,max,exclude,level:"1")
<!-- SHOW ALL TOC TIDDLER TITLES AS A FLAT LIST (SIMPLE RECURSION) -->
<$list filter="""[tag[$here$]] $exclude$ -[[$here$]]""">
   <$text text="[["/><<currentTiddler>><$text text="]]"/><br>
   <$reveal default="$level$" type="nomatch" text="$max$">
      <$macrocall $name="toc-list" here=<<currentTiddler>> max="$max$" exclude="""$exclude$ -[[$here$]]""" level={{{ [[$level$]add[1]] }}}/>
   </$reveal>
</$list>
\end

<$wikify name="toc-pages" text=<<toc-list "Index">>>
<$list filter="[enlist<toc-pages>] +[<currentTiddler>]">
<div style="float:right;">
   <$vars prev={{{ [enlist<toc-pages>before<currentTiddler>] }}}>
   <$vars next={{{ [enlist<toc-pages>after<currentTiddler>] }}}>

   <$reveal default=<<prev>> type="nomatch" text="">
   <$button tooltip=<<prev>>> {{$:/core/images/chevron-left}}
      <$action-sendmessage $message="tm-close-tiddler" param=<<currentTiddler>> />
      <$action-navigate $to=<<prev>>/>
   </$button>
   </$reveal>
   <$reveal default=<<next>> type="nomatch" text="">
   <$button tooltip=<<next>>> {{$:/core/images/chevron-right}}
      <$action-sendmessage $message="tm-close-tiddler" param=<<currentTiddler>> />
      <$action-navigate $to=<<next>>/>
   </$button>
   </$reveal>
   </$vars>
   </$vars>
</div>
</$list>

</$wikify>

The above code does the following:

1) $wikify invokes the <<toc-list>> macro to do a *recursive tree walk* from the starting tag (in this case "Index"), and converts that output into a "flat list" of all tiddlers in the tree (<<toc-pages>>)

2) The first filter checks to see if the currentTiddler is in the list of <<toc-pages>>

3) The prev/next filters use the <<toc-pages>> to find the before<currentTiddler> and after<currentTiddler>

The rest of the code is still the same as before.

Note:

If there is a particularly large number of items in the TOC, then performance can be a bit slower.

This is because the entire list has to be computed each time a tiddler is displayed in order to

determine if that tiddler is actually in the list.  Thus, *every* tiddler gets the added overhead.

Even so, I tested this with Bob Jansen's posted TW document, which has several hundreds of

TOC entries, and it still performed adequately, though with a very minor noticeable delay in

rendering tiddlers.

enjoy,

-e