EMACS ORG-INFO.JS

org-info-js (subsequently called the script) implements part of Emacs Org-mode in it's XHTML-exported files, allowing them to be rendered and browsed in a linuxdoc/texinfo style.

This documentation is one XHTML file, exported from one *.org file using a single keyboard shortcut. No additional postprocessing was done. There are no external dependencies and the script is small and fast, even for large files. It is used on the org-mode site to display ORGWEBPAGE/Changes.org which consists of more than 220 sections.

If you don't mind using it despite the health warnings we wish you good luck and hope the fun will outweigh your effort.

There are some drawbacks though. It is currently not possible to open internal links in another tab (e.g. using middle click in Firefox) due my poor JavaScript knowledge. This is not very high on my TODO list since the history mechanism of the script is a good alternative to tab usage.

Go to the next section by pressing 'n'.

Find out about shortcuts in section Shortcuts (and come back here pressing 'b'). In addition, '?' will show all shortcuts available.

The visitor of this file (and every XHTML-exported org file that includes the script) may use the mouse or the following keys to navigate. '?' should give you a list of shortcuts.

The script always tries to keep the last selected section visible. This is somewhat strange when scrolling, but really helpfull for keyboard navigation.

The TOC is handled specially, when hidden. If you press 'i', the TOC is displayed. Any subsequent key press goes back to where you've been before. The TOC does not show up the history. Same applies to the keyboard help.

Key	Function
? / ¿	show this help screen
	Moving around
n / p	goto the next / previous section
N / P	goto the next / previous sibling
t / E	goto the first / last section
g	goto section…
u	go one level up (parent section)
i / C	show table of contents / tags index
b / B	go back to last / forward to next visited section.
h / H	go to main index in this directory / link HOME page
	View
m / x	toggle the view mode between info and plain / slides
f / F	fold current section / whole document (plain view only)
	Searching
s / r	search forward / backward….
S / R	search again forward / backward
o	occur-mode
c	clear search-highlight
	Misc
l / L / U	display HTML link / Org link / Plain-URL
v / V	scroll down / up

Thanks Carsten, for this beautifull table!

This section describes how to setup your org files to use the script. Export-Setup - the new Way covers setting up org XHTML export with Org-mode version >= 6.02. For those using an older Org-mode version < 6.02 the next section (Export-Setup - the old Way) remains. Using Set() contains a list of all supported options for adjusting the org_html_manager to suit your needs.

See the Download section on how to obtain a version of the script.

The first version of this document was created with the new XHTML exporter which was revised by Carsten Dominik in March 2008 (in Org-mode v5.23a+) to better support XML. You can use M-x org-version to see which version of Org-mode you have installed.

#+INFOJS_OPT: path:org-info.js
#+INFOJS_OPT: toc:nil localtoc:t view:info mouse:underline buttons:nil
#+INFOJS_OPT: up:http://orgmode.org/worg/
#+INFOJS_OPT: home:http://orgmode.org

M-x customize-group RET org-export-html RET

#+INFOJS_OPT: view:info mouse:underline up:index.html home:http://www.mydomain.tpl toc:t

* COMMENT html style specifications
# Local Variables:
# org-export-html-style: "<link rel=\"stylesheet\"
# type=\"text/css\" href=\"styles.css\" />
# <script type=\"text/javascript\" src=\"org-info.js\">
# </script>
# <script type=\"text/javascript\">
#  * <![CDATA[ *
#    org_html_manager.set(\"LOCAL_TOC\", 1);
#    org_html_manager.set(\"VIEW_BUTTONS\", \"true\");
#    org_html_manager.set(\"MOUSE_HINT\", \"underline\");
#    org_html_manager.setup ();
#  * ]]> *
# </script>"
# End:

<script type="text/javascript" src="org-info.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
org_html_manager.set("LOCAL_TOC", 1);
org_html_manager.set("VIEW_BUTTONS", "true");
org_html_manager.set("MOUSE_HINT", "underline");
org_html_manager.setup ();
/* ]]> */
</script>

(setq org-publish-project-alist
      ’(("org"
         :base-directory "~/org/"
         :publishing-directory "~/public_html"
         :section-numbers nil
         :table-of-contents nil
         :style "<link rel=stylesheet href=\"../other/mystyle.css\"
                type=\"text/css\">
                <script type=\"text/javascript\" src=\"org-info.js\"></script>
                <script type=\"text/javascript\">
                 /* <![CDATA[ */
                    org_html_manager.setup ();
                 /* ]]> */
                </script>")))

Just use the ordinary link syntax to link to files that use the script. Append the section to the URL if neccessary:

http://www.domain.tld/path/to/org.html#sec-3.4

One may overwrite the author's settings using special suffixes appended to the URL of the script. Here are some examples linking to this section and changing the intial view mode. Currently only the 'internal' options are used (see Using set() for a list).

• index.html?TOC=1&VIEW=info#sec-5
• index.html?TOC=0&VIEW=overview#sec-5
• index.html?VIEW=content&TOC_DEPTH=1#sec-5
• index.html?VIEW=showall&MOUSE_HINT=rgb(255,133,0)#sec-5
• index.html?OCCUR=java

Note that it is not possible to change the 'HOME' and 'Up' links.

Note also that everything but [0-9a-zA-Z\.-_] should be URL encoded if used as an options value.

Here is an excerpt from the stylesheet for this file. Be carful not to mess things up when trying to position the console.

/* Styles for org-info.js */

.org-info-js_info-navigation
{
  border-style:none;
}

#org-info-js_console
{
  color:#333333;
  margin:0px;
  background-color:#ffffff;
}

#org-info-js_console-input
{
  background-color:#ffffff;
  border-style:none;
  color:#333333;
  padding-left:10px;
  vertical-align:middle;
}

#org-info-js_console-label
{
  font-size:11px;
  font-weight:bold;
  padding-left:10px;
  font-family:Verdana,Arial,sans-serif;
  vertical-align:middle;
}

.org-info-js_console-label-warning
{
  color:#cc0000;
}

#org-info-js_console-container
{
  border:1px solid #cccccc;
}

.org-info-js_search-highlight
{
  background-color:#adefef; /* emacs default */
  color:#000000;
  font-weight:bold;
}
/* END STYLES FOR org-info.js */

The functionality of the script is based on DOM. This leads to some incompatibility with legacy browsers. But hey, it's 2009, isn't it?

So what browsers are supported then? Well - I don't know for sure. JavaScript™ 1.4 plus DOM should make

• Netscape 6.0 and higher
• Internet Explorer 5.0 and up
• Firefox 1.0 ++ - 2.0.0.12 and 3.0 Beta tested
• Opera 7.0 and higher - v.9.26 tested.
• Safari 1.0

I try to test the script before each release in Firefox 3.x.x and Opera 10 on Linux, and in FF 3, IE 6 and Safari on windows. Because of the number of features and browsers, some bugs might remain undiscovered. Please report bugs to the emacs-orgmode mailing list. In most cases we manage to fix them within the next 24 hours.

Currently the script depends on the table of contents in the resulting XHTML. The TOC can be hidden though.

The main reason is the behaviour of browsers. There is no safe way to detect if the entire document is loaded at a certain point in time. Opera for example returns true if we ask it if(document.body). The init() function of the OrgHtmlManager is aware of the possibility, that not even the TOC might be loaded when this function is called. Hence it should work for slow connections too.

End users may consider this section obsolete as of org version 6.00-pre-3, since there is a new configuration interface in org now to setup the script without dealing with JavaScript. It is still here to show the desired look of the head section of the XHTML. Also someone might be interested to use the script for XHTML files not exported from org.

The script has to be included in the header of the resulting XHTML files. The document structure has to be exactly the one produced by the current XHTML export of emacs Org-mode. You may pass options to the org_html_manager by utilising its set() method. For a list of options see section Using Set(). This is what the head section should look like:

<script type="text/javascript" src="org-info.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
org_html_manager.set("LOCAL_TOC", 1);
org_html_manager.set("TOC", 1);
org_html_manager.set("VIEW_BUTTONS", "1");
org_html_manager.set("MOUSE_HINT", "underline"); // or background-color like '#eeeeee'
org_html_manager.setup ();
/* ]]> */
</script>

To just use the script with the defaults put this into the head section of the XHTML files:

<script type="text/javascript" src="org-info.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
org_html_manager.setup ();
/* ]]> */
</script>

I recommend the use of

<script type="text/javascript" src="org-info.js"></script>

instead of

<script type="text/javascript" src="org-info.js" />

which is valid XHTML but not understood by all browsers. I'll use the first version throughout this document where ever the space allows to do so.

org_html_manager.setup ();

org_html_manager.set("key", "value with \\'single quotes\\'");

First of all the script is included in the header as described in Setup. The document has to be exported with TOC since the script depends on it (See Why Do I Need a T.O.C?).

When included, it creates a global JavaScript™ variable named org_html_manager.

The org_html_manager::setup() function, that you will have to call yourself (see examples in Setup), sets up a timeout function calling it's init() function after 50ms. After those 50 ms The init() function starts it's first attempt to scan the document, using the TOC as a guide. During this scan the org_html_manager builds a tree of nodes, each caching some data for later use. Once an element of the document is scanned it is marked by setting a property scanned_for_org to 1. This way it will not be scanned a second time in subsquent runs (it will be checked though, but no work will be done for it).

If the document (or the TOC) is not entirely loaded, org_html_manager stops scanning, sets the timeout again to start an other scan 50 ms later. Once the entire document is loaded and scanned no new timeout will be set, and the document is displayed in the desired way (hopefully).

Once the number of attempts to scan the the document was configurable. This was dropped, since we can not know in advance how fast the document will be loaded on the client side.

The org_html_manager also changes the document a bit to make it react on certain input events and follow your wishes. The old 'event handling' was entirely based on the normal link functions using so called accesskeys. This has changed long ago, but the accesskeys will stay cause there is no reason to remove them.

The script can handle all the sections as single slides. Press 'x' to switch to the presentation mode. In this mode you may navigate the sections using the mouse. Currently a single click moves forward and a doubleclick backwards (will change this to right mouse button for backwards movement).

The first plain list (i.e. an <ul> element) in a section is special. The items will be shown one by one when moving forward.

If you're at the end of the presentation, a click does not trigger a warning. Same applies to a doubleclick when in the first section.

There is no plan to extend this feature very much. A better plan might be to write a separate tool to handle slides.

The aim of this little script was to implement a part of emacs Org-mode facilities of folding. Oh, no - not originaly.

My first idea was to view some of my larger org files without scrolling. I wanted to have them paged just like texinfo or linuxdoc files. In February 2008 I came across Carsten Dominiks ideas page http://orgmode.org/todo.html. And I could not resist to write him some of my thoughts about this great emacs mode including some little ideas and drawbacks. I don't know how, but it somehow these guys made me, lazy bone that I am, write this little script as an apetizer of web 3.0 in Org-mode (Phil Jackson).

I did and since some people really liked it, worked a bit more on it and added features. Bastien Guerry was so kind to publish it on http://www.legito.net/org-info-js/ the first months. Thanks Bastien.

In the first days of April Carsten Dominik added code to Org-mode to support the usage of this script. Hence the script may now be configured in a similar way to the other export options. Since then it is even possible to configure this script through customize.

Very special thanks to Carsten Dominik, Bastien Guerry and Phil Jackson who have encouraged me to write and publish this little piece of (unfinished) work and all the hundrets of hours they spent on this fantastic emacs mode called Org-mode and the export modules.

Org is a new working experience for me and there is nothing comparable to working with emacs AND Org-mode.

An other big kiss to Gabi (www.emma-stil.de) for being so patient while I was not working on our projects but playing with emacs.

Thanks to Tobias Prinz for listening to my stupid JavaScript questions and all the usefull tips. Espacially the negative margin trick and key input.

And again big thanks to Carsten Dominik for making the inclusion and configuration of the script so easy for the users, all the inspired ideas and the great org radio table trick. A lot of the power of the final make up is your merit! We all love to read the Org-mode mailing lists because of the kind and relaxed tone that is yours.

Thanks a lot for OrgMode!

What I think about licenses? Well - I think licences and patents are not far from each other. Poor people (and poor countries!!!) stay poor because of both of them. But since I know where I live, in a world made of licenses and patents, I have to apply some license to my work to protect it and stay unprotected.

Hence the script was originally licensed under GPL 2. Since v.0.1.1.6 the license was changed to GPL version 3. This document is subject to GFDL.

The original version of this document was written in emacs23 with Org-mode v. 5.22a+. The visibilty of the contents of a individual section or subsection can be toggled by clicking the stars in front of the headlines or moving there and hitting TAB. The visibility of the entire document structure can be changed by pressing SHIFT+TAB anywhere. When on a headline, pressing ALT+UP/DOWN moves the entire subtree to different location in the tree, keeping it's level of indentation. ALT+LEFT/RIGHT promotes and demotes the subtree.