Table of Contents - Highlight the TOC entry

[Mohammad]

Is there any way to highlight the current toc entry in TW table of contents (outline)?

I mean when you use the table of contents (which is under Contents tab in sidebar of https://tiddlywiki.com/) and click on a topic (toc entry)

the background or color changes to show the current navigation position in the table of contents.

Now, it is difficult to keep track of your navigation and find your next previous position!

/Mohammad

[PMario]

Hi,

With the current implementation of the toc macros - NO!

At the moment the TOC tiddlers can be part of several "trees" in the TOC. So it's not clear which one to highlight. So if an "auto-highlighter" is implemented it is horribly slow!

have fun!

mario

[Mohammad]

Mario,

 Okay, but it is difficult to find the location in a long list of toc entry!

So, the solution seems to be developing a separate macro to do this not using the TW TOC.

/Mohammad

[TonyM]

Mohammad,

TWOutlier can show the toc within its own tiddler panel, and display the selected tiddler to the right, as with other outliner examples it does this by saving a selected tiddler value. If you were using such an outliner you could find the selected tiddler in its temporary field. But the outline itself is already highlighting the selected tiddler anyway.

It seems to me that it is in tiddlywikis nature to have multiple selected tiddlers (the open ones in the story) rather than a "single Selected tiddler.

If you were to clone an existing TOC macro one avenue may be to test each tiddler found in the TOC tree if it is displayed in the Story. Thus their would be multiple selected tiddlers. However the same can be achieved using the Open SideBar Tab.

Or could you use some kind of next previous process used in a slideshow yet displayed in the sidebar.?

Just some ideas for you

Tony

[Mohammad]

Yes, it seems a separate toc shall be used.I am using TWoutlier and it can be customized easily.

I will share the results.Thank you Tony.

Cheers

Mohammad

[Ton Gerner]

Mohammad,

If I remember correctly, Eric Shulman uses such a TOC in his "Inside TiddlyWiki: The Missing Manual"

See https://groups.google.com/d/msg/tiddlywiki/oP3r1yx4C14/UiT_yl48BQAJ

Cheers,

Ton

[Mohammad]

Thank you Ton!

I will follow it to see how it is possible to implement!

/Mohammad

[Mohammad]

Ton, It works! I have downloded the Eric book and it has this capability to highlight the location you are in!

Thank you again!

/Mohammad

On Friday, June 15, 2018 at 3:36:12 PM UTC+4:30, Ton Gerner wrote:

[David Gifford]

If you use this TOC (http://giffmex.org/noteslam/noteslam.online.mine.html) and hit the plus button, it creates an outline entry. The caption field is what shows in the TOC, not the title field, and the caption field can be used to add CSS classes like highlighting and color, etc. The entries will still be links even though they are not blue.

Dave

[David Gifford]

oops, I didn't read your question carefully enough, sorry.

[Mohammad]

No problem!

[barro...@gmail.com]

David Gifford wrote:

If you use this TOC (http://giffmex.org/noteslam/noteslam.online.mine.html) and hit the plus button, it creates an outline entry. The caption field is what shows in the TOC, not the title field, and the caption field can be used to add CSS classes like highlighting and color, etc. The entries will still be links even though they are not blue.

You'll have to forgive me, I'm still only 40% acquainted with TW.  Using css class in "caption" field for ToC entry names, wouldn't it show highlighting constantly regardless of the tiddlers state, such as open or active,   I use captions for ToC entries and they show the caption field text constantly, regardless of any factors.

I am also interested in some sort of indicator of position in an long ToC, but I'm looking for something more like a dot. Highlighting doesn't always work on my system's theme.

[David Gifford]

Yes barrowgloom, that was my goal, that by using  the caption field for the ToC, I could apply classes and they would show that way in the ToC. The ToC shows only caption fields, not titles. That is the way I set it up, so the ToC's could have styles in the entries. I am not sure what you are asking.

Perhaps you were hoping for a style applied to indicate within the ToC which tiddler is currently being viewed. I don't know how to do that. And in the case of my personal version of NoteSlam, that would be a moot point, since I don't put the ToC in the sidebar, so you have to look at the ToC and the tiddlers at separate times.

I am not sure what you mean by an "indicator of position in long ToCs." I will assume you meant 'a visual indicator in long ToCs to show what tiddler is being viewed'. Again, I don't know how to do that or if it can be done. Blessings.

David Gifford

Mexico team leader, Mexico City

Resonate Global Mission
Engaging People. Embracing Christ.
A Ministry of the Christian Reformed Church
resonateglobalmission.org

--
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/d2EyRIxCHB0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+unsubscribe@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/e8e88072-d9de-4ba2-8eff-cea404b7bb5d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Siniy-Kit]

long ago I make left menu for my TW5 site http://novye-podarki.ru/heeg.html#Figures

I put some code to http://novye-podarki.ru/heeg.html#%24%3A%2Fcore%2Fmodules%2Fstoryviews%2Fzoomin.js

[Mohammad]

Siniy

Wonderful!

 Is it possible without JS?

/Mohammad

[Mohammad]

Siniy,

 How it can be used in my own TW? Do I need import any CSS?

Or just importing the http://novye-podarki.ru/heeg.html#%24%3A%2Fcore%2Fmodules%2Fstoryviews%2Fzoomin.js it will work?

Is it only available in zoomin viewstory?

/Mohammad

[barro...@gmail.com]

Yes barrowgloom, that was my goal, that by using  the caption field for the ToC, I could apply classes and they would show that way in the ToC. The ToC shows only caption fields, not titles. That is the way I set it up, so the ToC's could have styles in the entries. I am not sure what you are asking.

I was figuring the class coding wouldn't appear but their style would effect the caption text displayed in the ToC.   I think the class style styling in the caption field is a nifty idea.

 

Perhaps you were hoping for a style applied to indicate within the ToC which tiddler is currently being viewed.

Right.

 

And in the case of my personal version of NoteSlam, that would be a moot point, since I don't put the ToC in the sidebar, so you have to look at the ToC and the tiddlers at separate times.

understood

 

I am not sure what you mean by an "indicator of position in long ToCs." I will assume you meant 'a visual indicator in long ToCs to show what tiddler is being viewed'. Again, I don't know how to do that or if it can be done. Blessings.

 

Right again, my apologies if I was unclear and no worries if you didn't have answers but your response was appreciated.  Your work like NoteSlam has been very  help in demostrating what can be done with TW.

[Siniy-Kit]

I wrote this code many years ago 

function findTitleDomNode(widget,targetClass) {

targetClass = targetClass || "tc-title";

var domNode = widget.findFirstDomNode();

if(domNode.querySelector('.tc-title') != null ){

var ttitle=domNode.querySelector('.tc-title').textContent.replace(/^\s+|\s+$/mg,'');

document.title=ttitle;

 var elements = document.querySelectorAll('ol  a,ol ol a,ol button,ol ol button') ;

  for (var i = 0; i < elements.length; i++) {

elements[i].id = '';

elements[i].style.color = 'inherit'; 

parentTag(elements[i]).style.backgroundColor = '';

parentTag(parentTag(elements[i])).id = '';

 if(~domNode.getAttribute('class').indexOf(encodeURI(elements[i].textContent.replace(/^\s+|\s+$/mg,'')))) {

elements[i].id = 'orange_text';

if( parentTag(elements[i]).tagName=="LI"){parentTag(elements[i]).style.backgroundColor = 'rgba(255, 255, 255, 0.4)';};

 };

 if( elements[i].textContent.replace(/^\s+|\s+$/mg,'')==ttitle){elements[i].style.color = '#fff'; 

    if( parentTag(elements[i]).tagName=="LI"){parentTag(elements[i]).style.backgroundColor = 'rgba(0, 0, 0, 0.2)';} ;  

    if( parentTag(parentTag(elements[i])).tagName=="LI"){parentTag(parentTag(elements[i])).id = 'orange';} ;  

   

   } ; 

 }

and it works very primitive. Every time when your open tiddler (you can put this code to render.js for classic variant) this script look for .title of current tiddler, an then look for this title in <<toc >> DOM tree and changes it's style.  I think it is better to modify TOC macros and compare all toc items with $:/StoryList!!list nth[1]  and highlight if tos item=$:/StoryList!!list nth[1]