Highlight current page in TOC

Highlight current page in TOC

[Benny Simonsen]

[-- Attachment #1.1: Type: text/plain, Size: 242 bytes --]

Hi

With the org-info-js mode enabled each section is shown as a seperate page,
but then I would like to get current page marked in the TOC in some way
(e.g. class=current and then some CSS to make the markup) ... but is it
possible?

/Benny

[-- Attachment #1.2: Type: text/html, Size: 259 bytes --]

[-- Attachment #2: Type: text/plain, Size: 201 bytes --]

_______________________________________________
Emacs-orgmode mailing list
Please use `Reply All' to send replies to the list.
Emacs-orgmode@gnu.org
http://lists.gnu.org/mailman/listinfo/emacs-orgmode

Re: Highlight current page in TOC

[Benny Simonsen]

2010/11/14 Benny Simonsen <benny@slbs.dk>
>
> Hi
>
> With the org-info-js mode enabled each section is shown as a seperate page, but then I would like to get current page marked in the TOC in some way (e.g. class=current and then some CSS to make the markup) ... but is it possible?
>
> /Benny

Hi

I have made it.

The result can be seen on a example page I have made (in danish -
(translated org-info-src.js [1] it into danish)) -
http://slbs.dk/org/oensker.html

I have modified org-info-src.js [1] to include an extra function
setLinkClass + using this function at the end of showSection.
I have also added a small css script [2] with the extra content, which
could be included in the normal worg.css [3] without side effects, I
think.
I include one css - main.css [4] that includes the two css files
mentioed here + an extra file with my own site style.'

Except the changes in my site slbs.css, the only style changes I have made are:
- Current page/section are marked black and bold
- Visited pages are marked in different color

Anyone interested in a patch for the highlighting of the links?
Anyone interested in a patch for the danish org-info-src.js?

[1] http://slbs.dk/org/scripts/org-info-src.marklinks.js
     ... in danish: http://slbs.dk/org/scripts/org-info-src.da.marklinks.js
     ... in danish without modifications:
http://slbs.dk/org/scripts/org-info-src.da.js
[2] http://slbs.dk/org/style/marklink.css
[3] Copy from http://orgmode.org/worg/worg.css
[4] http://slbs.dk/org/style/main.css - Which includes the other css files

I have also included lightbox-2.04, and changed it so that a group is
limited to one visible page(one section)


Best regards
Benny Simonsen

Re: Re: Highlight current page in TOC

[Sebastian Rose]

Benny Simonsen <benny@slbs.dk> writes:

> 2010/11/14 Benny Simonsen <benny@slbs.dk>
>>
>> Hi
>>
>> With the org-info-js mode enabled each section is shown as a seperate
>> page, but then I would like to get current page marked in the TOC in
>> some way (e.g. class=current and then some CSS to make the markup)
>> ... but is it possible?
>>
>> /Benny
>
> Hi
>
> I have made it.
>
> The result can be seen on a example page I have made (in danish -
> (translated org-info-src.js [1] it into danish)) -
> http://slbs.dk/org/oensker.html
>
> I have modified org-info-src.js [1] to include an extra function
> setLinkClass + using this function at the end of showSection.
> I have also added a small css script [2] with the extra content, which
> could be included in the normal worg.css [3] without side effects, I
> think.
> I include one css - main.css [4] that includes the two css files
> mentioed here + an extra file with my own site style.'
>
> Except the changes in my site slbs.css, the only style changes I have made are:
> - Current page/section are marked black and bold
> - Visited pages are marked in different color
>
> Anyone interested in a patch for the highlighting of the links?
> Anyone interested in a patch for the danish org-info-src.js?
>
> [1] http://slbs.dk/org/scripts/org-info-src.marklinks.js
>      ... in danish: http://slbs.dk/org/scripts/org-info-src.da.marklinks.js
>      ... in danish without modifications:
> http://slbs.dk/org/scripts/org-info-src.da.js
> [2] http://slbs.dk/org/style/marklink.css
> [3] Copy from http://orgmode.org/worg/worg.css
> [4] http://slbs.dk/org/style/main.css - Which includes the other css files
>
> I have also included lightbox-2.04, and changed it so that a group is
> limited to one visible page(one section)
>
>
> Best regards
> Benny Simonsen


Hi Benny!


That's very beautiful with fixed T.O.C!


I have added a modified version of your patch (just the "className" part
of it).

The sections now reference their anchor HTML-Element in the TOC passed
as an additional parameter in the constructor OrgNode (in the function
`mkNodeFromHref()').  This might lead to problems in old Internet
Explorers when leaving the page - but in old ones.



I guess the cleanest way to add actions to org-info.js is to add hooks
and use them this way (e.g. in the HTML <head> section):


#+STYLE: <script type="text/javascript">
#+STYLE:   org_html_manager.onReady(
#+STYLE:      function(){alert("Page is loaded, setup finished.");});
#+STYLE:   org_html_manager.onShowSection(
#+STYLE:      function(sec){alert(sec.H);});
#+STYLE: </script>


That's what I'm working at currently:

Just gimme an hour.  You can then hook in your LightBox function.

Note: currently the names in sources and compressed scripts are
different (see `sed.txt').   We should change that in the future for
some widely used variables (like OrgNode.H <=> OrgNode.HEADING).


Best wishes

   Sebastian

Re: Re: Highlight current page in TOC

[Sebastian Rose]

Sebastian Rose <sebastian_rose@gmx.de> writes:
> Benny Simonsen <benny@slbs.dk> writes:
>
>> 2010/11/14 Benny Simonsen <benny@slbs.dk>
>>>
>>> Hi
>>>
>>> With the org-info-js mode enabled each section is shown as a seperate
>>> page, but then I would like to get current page marked in the TOC in
>>> some way (e.g. class=current and then some CSS to make the markup)
>>> ... but is it possible?
>>>
>>> /Benny
>>
>> Hi
>>
>> I have made it.
>>
>> The result can be seen on a example page I have made (in danish -
>> (translated org-info-src.js [1] it into danish)) -
>> http://slbs.dk/org/oensker.html
>>
>> I have modified org-info-src.js [1] to include an extra function
>> setLinkClass + using this function at the end of showSection.
>> I have also added a small css script [2] with the extra content, which
>> could be included in the normal worg.css [3] without side effects, I
>> think.
>> I include one css - main.css [4] that includes the two css files
>> mentioed here + an extra file with my own site style.'
>>
>> Except the changes in my site slbs.css, the only style changes I have made are:
>> - Current page/section are marked black and bold
>> - Visited pages are marked in different color
>>
>> Anyone interested in a patch for the highlighting of the links?
>> Anyone interested in a patch for the danish org-info-src.js?
>>
>> [1] http://slbs.dk/org/scripts/org-info-src.marklinks.js
>>      ... in danish: http://slbs.dk/org/scripts/org-info-src.da.marklinks.js
>>      ... in danish without modifications:
>> http://slbs.dk/org/scripts/org-info-src.da.js
>> [2] http://slbs.dk/org/style/marklink.css
>> [3] Copy from http://orgmode.org/worg/worg.css
>> [4] http://slbs.dk/org/style/main.css - Which includes the other css files
>>
>> I have also included lightbox-2.04, and changed it so that a group is
>> limited to one visible page(one section)
>>
>>
>> Best regards
>> Benny Simonsen
>
>
> Hi Benny!
>
>
> That's very beautiful with fixed T.O.C!
>
>
> I have added a modified version of your patch (just the "className" part
> of it).
>
> The sections now reference their anchor HTML-Element in the TOC passed
> as an additional parameter in the constructor OrgNode (in the function
> `mkNodeFromHref()').  This might lead to problems in old Internet
> Explorers when leaving the page - but in old ones.
>
>
>
> I guess the cleanest way to add actions to org-info.js is to add hooks
> and use them this way (e.g. in the HTML <head> section):
>
>
> #+STYLE: <script type="text/javascript">
> #+STYLE:   org_html_manager.onReady(
> #+STYLE:      function(){alert("Page is loaded, setup finished.");});
> #+STYLE:   org_html_manager.onShowSection(
> #+STYLE:      function(sec){alert(sec.H);});
> #+STYLE: </script>
>
>
> That's what I'm working at currently:
>
> Just gimme an hour.  You can then hook in your LightBox function.
>
> Note: currently the names in sources and compressed scripts are
> different (see `sed.txt').   We should change that in the future for
> some widely used variables (like OrgNode.H <=> OrgNode.HEADING).



OK.  That's how it works now:

There are two hooks (maybe more to come) for now.

1. The 'onReady' hook.
   You may add functions to that hook using

   #+STYLE: <script type="text/javascript">
   #+STYLE: org_html_manager.onReady(function(){alert("Ready");});
   #+STYLE: </script>

   The hook is called with exactly one parameter: the OrgHtmlManager
   object (which is the first parameter for every hook function).


2. The 'onShowSection' hook.
   You may add functions to that hook using

   #+STYLE: <script type="text/javascript">
   #+STYLE: org_html_manager.onShowSection(function(ohm, obj){
   #+STYLE:     alert("Showing "+ohm.rT(obj.current.H.innerHTML));
   #+STYLE: });
   #+STYLE: </script>

   The hook is called with two parameters: the OrgHtmlManager
   object (which is the first parameter for every hook function) and an
   object

      {last: OrgNodeObject, current: OrgNodeObject}




You may add several functions to a hook by calling the `onReady' method
several times.  Fist added, first executed.



So you would just add your LightBox stuff like this (untested):


org_html_manager.onShowSection(function(ohm, secs)
{
    var imgs = secs.current.D.getElementsByTagName("img");
    for(var i=0;i<imgs.length;++i) {
	if(imgs[i].parentNode.tagName == "A" && imgs[i].parentNode.rel == "lightboxGrp") {
	    parent = imgs[i].parentNode.parentNode;
	    div_id = "";
	    do {
		if(parent.tagName == "BODY") {
		    div_id = "NaN_body";
		}
		else if(parent.tagName == "DIV" && parent.className == "outline-text-2") {
		    div_id = parent.id;
		}
		else {
		    nxtParent = parent.parentNode;
		    parent = nxtParent;
		}
	    } while (div_id == "");
	    imgs[i].parentNode.rel = "lightbox["+div_id+"]";
	}
}




Best wishes

  Sebastian

Re: Re: Highlight current page in TOC

[Sebastian Rose]

Hi Benny,


I found the code did not work for org-export, since user-defined
#+STYLE: stuff is inserted _before_ all the automatically created
javascript stuff.

So I had to fall back on a global value, to make the hooks work.


This is in the docs on http://orgmode.org/worg/code/org-info-js/#hooks
once the page is republished:



   Currently two hooks are provided.  Each hook function is called with
   one or more parameters the first of which is the OrgHtmlManager
   object.

   - '~onReady~' :: This hook is run once the document is loaded, the
                    view is setup and the startup section is shown.  The
                    second parameter is the first section shown, i.e. an
                    OrgNode object.

   - '~onShowSection~' :: This one runs after showing a new section.
                          This hook is not called for the first section
                          shown.  Use the '~onReady~' hook for the first
                          section.  The second parameter is an object
                          with to OrgNodes: the previously shown section
                          and the current section.


   To add functions to the hooks, fill a global object ~orgInfoHooks~
   with the function objects you need.  This is necessary, because code
   added via the ~#+STYLE:~ option lines is executed before org-info.js
   is loaded.

#+begin_src org
  ,#+STYLE: <script type="text/javascript">
  ,#+STYLE: /* <![CDATA[ */
  ,#+STYLE:
  ,#+STYLE: var f = function(){ alert("I'll be removed :("); };
  ,#+STYLE:
  ,#+STYLE: orgInfoHooks = {
  ,#+STYLE:  'onReady': [
  ,#+STYLE:     function(ohm, sec){alert("I'm the only 'onReady' hook here.");}
  ,#+STYLE:   ],
  ,#+STYLE: 'onShowSection': [
  ,#+STYLE:     f,
  ,#+STYLE:     function (ohm, secs) {
  ,#+STYLE:       alert("You're looking at section "+secs['current']['I']+":\n"+
  ,#+STYLE:             "\n            <<< "+ohm.rT(secs['current']['H']['innerHTML'])+" >>>");},
  ,#+STYLE:     function(){
  ,#+STYLE:          alert("I'll now remove my f and myself, too.");
  ,#+STYLE:          org_html_manager.removeHook('onShowSection', f);
  ,#+STYLE:          org_html_manager.removeHook('onShowSection',
  ,#+STYLE:              orgInfoHooks['onShowSection'][ orgInfoHooks['onShowSection'].length - 1 ]);}
  ,#+STYLE:   ]};
  ,#+STYLE: /* ]]> */
  ,#+STYLE: </script>
#+end_src

   *Make sure to remove hook functions at the end of the hook*.  Strange
   things could happen otherwise (the hook loop will overlook a
   member. While the hook loop runs in first hook first, the remove loop
   removes the last hook first).



Your lightbox code would go in one of these hooks (you don't have to
supply all possible hooks):



orgInfoHooks = {

  // Actions on startup, after org_html_manager is done:

 'onReady': [
     function (ohm) {
       var root = ohm.R;    // R is the root of the OrgNode tree.
       var content = ohm.B; // B is the <div id="content">
         ...
       // Run for the first section:
       ohm.runHooks('onShowSection', { last: null, current: ohm.N });
       }],

  // Always, when the user navigates to a section:

 'onShowSection': [
     function (ohm, secs) {

       // You could test for (secs.last == null) to know your
       // called from the onReady hook.
       // A better alternative would be, to define a separate
       // function and call it from here and from onReady.

       var previous = secs['last'];
       var current  = secs['current'];
       if(current['F']) {
         // sec.F is the div that holds the contents of the section
         var imgs = sec.F.getElementsByTagName('img');
         ...
     }}
  ]};




Let me know if you run into problems.  Ideas welcome.


Sebastian