emacs-orgmode
[Top][All Lists]
Advanced

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: [Orgmode] Re: Highlight current page in TOC


From: Sebastian Rose
Subject: Re: [Orgmode] Re: Highlight current page in TOC
Date: Wed, 24 Nov 2010 20:00:03 +0100
User-agent: Gnus/5.13 (Gnus v5.13) Emacs/24.0.50 (gnu/linux)

Sebastian Rose <address@hidden> writes:
> Benny Simonsen <address@hidden> writes:
>
>> 2010/11/14 Benny Simonsen <address@hidden>
>>>
>>> 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



reply via email to

[Prev in Thread] Current Thread [Next in Thread]