* Highlight current page in TOC @ 2010-11-14 16:51 Benny Simonsen 2010-11-22 20:06 ` Benny Simonsen 0 siblings, 1 reply; 5+ messages in thread From: Benny Simonsen @ 2010-11-14 16:51 UTC (permalink / raw To: emacs-orgmode [-- 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 ^ permalink raw reply [flat|nested] 5+ messages in thread
* Re: Highlight current page in TOC 2010-11-14 16:51 Highlight current page in TOC Benny Simonsen @ 2010-11-22 20:06 ` Benny Simonsen 2010-11-24 17:13 ` Sebastian Rose 0 siblings, 1 reply; 5+ messages in thread From: Benny Simonsen @ 2010-11-22 20:06 UTC (permalink / raw To: emacs-orgmode 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 ^ permalink raw reply [flat|nested] 5+ messages in thread
* Re: Re: Highlight current page in TOC 2010-11-22 20:06 ` Benny Simonsen @ 2010-11-24 17:13 ` Sebastian Rose 2010-11-24 19:00 ` Sebastian Rose 0 siblings, 1 reply; 5+ messages in thread From: Sebastian Rose @ 2010-11-24 17:13 UTC (permalink / raw To: Benny Simonsen; +Cc: emacs-orgmode 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 ^ permalink raw reply [flat|nested] 5+ messages in thread
* Re: Re: Highlight current page in TOC 2010-11-24 17:13 ` Sebastian Rose @ 2010-11-24 19:00 ` Sebastian Rose 2010-11-30 20:27 ` Sebastian Rose 0 siblings, 1 reply; 5+ messages in thread From: Sebastian Rose @ 2010-11-24 19:00 UTC (permalink / raw To: Benny Simonsen; +Cc: emacs-orgmode 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 ^ permalink raw reply [flat|nested] 5+ messages in thread
* Re: Re: Highlight current page in TOC 2010-11-24 19:00 ` Sebastian Rose @ 2010-11-30 20:27 ` Sebastian Rose 0 siblings, 0 replies; 5+ messages in thread From: Sebastian Rose @ 2010-11-30 20:27 UTC (permalink / raw To: Benny Simonsen; +Cc: emacs-orgmode 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 ^ permalink raw reply [flat|nested] 5+ messages in thread
end of thread, other threads:[~2010-12-01 3:49 UTC | newest] Thread overview: 5+ messages (download: mbox.gz follow: Atom feed -- links below jump to the message on this page -- 2010-11-14 16:51 Highlight current page in TOC Benny Simonsen 2010-11-22 20:06 ` Benny Simonsen 2010-11-24 17:13 ` Sebastian Rose 2010-11-24 19:00 ` Sebastian Rose 2010-11-30 20:27 ` Sebastian Rose
Code repositories for project(s) associated with this external index https://git.savannah.gnu.org/cgit/emacs.git https://git.savannah.gnu.org/cgit/emacs/org-mode.git This is an external index of several public inboxes, see mirroring instructions on how to clone and mirror all data and code used by this external index.