[TW5] Is it possible to highlight current tiddler in TOC?

[Siniy-Kit]

Hi! I try to use TOC  (Table of Contents) as left menu on my zoomin site and want to highlight selected menu item if selected is current or if the current tiddler contain tag with the name of current menu item.

toc-tabbed-internal-nav looks very nice (as tabs macro), but it don't show the whole tiddler (only text area) and don't use history, so I can't use it.

first my problem was, how TOC will understand what tiddler is on top. <<currenttidler>> don't work in it and it is not first in $:/StoryList 

the second problem how to change style toc-selective-expandable of one item.

and the third how to compare list from TOC with "current" tiddler title. 

is it possible to make menu with highlight items?

my site http://uvakin.neocities.org/heeg.html

[Tobias Beer]

Hi Siniy-Kit,

 

is it possible to make menu with highlight items?

With the current ways of how the toc works, I don't think it is, as the recursion steps work entirely independently and there is no "after-render" dom manipulation that would find a "current tiddler" and then make sure that its parent items get highlighted (and are expanded).

On the other hand, I don't think the current implementation allows to defer the toc rendering until after the "currently active branch" has been properly identified, as its iterations render items independently, as already said.

So, this begs for a new / different approach to implementing a table of contents, one that does away with nested-macro+template-magic.

Best wishes,

— tb

[Jeremy Ruston]

Hi Siniy-Kit

is it possible to make menu with highlight items?

Eric has created an enhanced TOC that auto-expands the tree to show (and highlight) the currently selected tiddler; I’m not sure if it’s ready for prime time but it’s pretty slick.

Best wishes

Jeremy.

With the current ways of how the toc works, I don't think it is, as the recursion steps work entirely independently and there is no "after-render" dom manipulation that would find a "current tiddler" and then make sure that its parent items get highlighted (and are expanded).

On the other hand, I don't think the current implementation allows to defer the toc rendering until after the "currently active branch" has been properly identified, as it's iterations render items independently, as already said.

So, this begs for a new / different approach to implementing a table of content, one that does away with nested-macro+template-magic.

Best wishes,

— tb

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/49b1a43c-d3dc-4ecd-af9a-b3ceec63eb57%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[sini-Kit]

where I can see Eric's TOC? Is it TW5?

понедельник, 9 ноября 2015 г., 19:16:25 UTC+3 пользователь Jeremy Ruston написал:

[Siniy-Kit]

I made it in a very strange way... here is the demo with TOC highlight http://uvakin.neocities.org/heeg.html

I put some code zoomin.js

/*
Find the first child DOM node of a widget that has the class "tc-title"
*/

function parentTag(node) {
   return node.parentNode;
}

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].style.color = 'inherit';
parentTag(elements[i]).style.backgroundColor = '';
parentTag(parentTag(elements[i])).style.backgroundColor = '';


 if( elements[i].textContent.replace(/^\s+|\s+$/mg,'')==ttitle){elements[i].style.color = '#ff8400';
    if( parentTag(elements[i]).tagName=="LI"){parentTag(elements[i]).style.backgroundColor = 'rgba(0, 0, 0, 0.1)';} ;  
    if( parentTag(parentTag(elements[i])).tagName=="LI"){parentTag(parentTag(elements[i])).style.backgroundColor = 'rgba(0, 0, 0, 0.1)';} ;  
   
   } ;
 }
}





 if(domNode && domNode.querySelector) {
 return domNode.querySelector("." + targetClass);
 }
 return null;
}

I add one line to highlight item in TOC if current tiddler contain tag == item in TOC

if(~domNode.getAttribute('class').indexOf(encodeURI(elements[i].textContent.replace(/^\s+|\s+$/mg,'')))) {elements[i].style.color = '#ff8400'; };

it will work in all tw5

понедельник, 9 ноября 2015 г., 19:13:01 UTC+3 пользователь Tobias Beer написал: