* 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.