Re: [Orgmode] 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