code/org-info-js/index.html

   1 <?xml version="1.0" encoding="utf-8"?>
   2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   3                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   4 <html xmlns="http://www.w3.org/1999/xhtml"
   5 lang="en" xml:lang="en">
   6 <head>
   7 <title>EMACS ORG-INFO.JS</title>
   8 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
   9 <meta name="generator" content="Org-mode"/>
  10 <meta name="generated" content="2009-06-22 21:35:52 CEST"/>
  11 <meta name="author" content="Sebastian Rose"/>
  12 <meta name="description" content=""/>
  13 <meta name="keywords" content=""/>
  14 <style type="text/css">
  15  <!--/*--><![CDATA[/*><!--*/
  16   html { font-family: Times, serif; font-size: 12pt; }
  17   .title  { text-align: center; }
  18   .todo   { color: red; }
  19   .done   { color: green; }
  20   .tag    { background-color: #add8e6; font-weight:normal }
  21   .target { }
  22   .timestamp { color: #bebebe; }
  23   .timestamp-kwd { color: #5f9ea0; }
  24   p.verse { margin-left: 3% }
  25   pre {
  26         border: 1pt solid #AEBDCC;
  27         background-color: #F3F5F7;
  28         padding: 5pt;
  29         font-family: courier, monospace;
  30         font-size: 90%;
  31         overflow:auto;
  32   }
  33   table { border-collapse: collapse; }
  34   td, th { vertical-align: top; }
  35   dt { font-weight: bold; }
  36   div.figure { padding: 0.5em; }
  37   div.figure p { text-align: center; }
  38   .linenr { font-size:smaller }
  39   .code-highlighted {background-color:#ffff00;}
  40   .org-info-js_info-navigation { border-style:none; }
  41   #org-info-js_console-label { font-size:10px; font-weight:bold;
  42                                white-space:nowrap; }
  43   .org-info-js_search-highlight {background-color:#ffff00; color:#000000;
  44                                  font-weight:bold; }
  45   /*]]>*/-->
  46 </style><style type="text/css"></style>
  47 <link rel="stylesheet" type="text/css" href="stylesheet.css" />
  48 <script type="text/javascript" src="org-info.js"></script>
  49 <script type="text/javascript" >
  50 <!--/*--><![CDATA[/*><!--*/
  51 org_html_manager.set("TOC_DEPTH", "3");
  52 org_html_manager.set("LINK_HOME", "http://orgmode.org");
  53 org_html_manager.set("LINK_UP", "http://orgmode.org/worg/");
  54 org_html_manager.set("LOCAL_TOC", "above");
  55 org_html_manager.set("VIEW_BUTTONS", "0");
  56 org_html_manager.set("MOUSE_HINT", "underline");
  57 org_html_manager.set("FIXED_TOC", "0");
  58 org_html_manager.set("TOC", "0");
  59 org_html_manager.set("VIEW", "info");
  60 org_html_manager.setup();  // activate after the parameters are set
  61 /*]]>*///-->
  62 </script>
  63 <script type="text/javascript">
  64 <!--/*--><![CDATA[/*><!--*/
  65  function CodeHighlightOn(elem, id)
  66  {
  67    var target = document.getElementById(id);
  68    if(null != target) {
  69      elem.cacheClassElem = elem.className;
  70      elem.cacheClassTarget = target.className;
  71      target.className = "code-highlighted";
  72      elem.className   = "code-highlighted";
  73    }
  74  }
  75  function CodeHighlightOff(elem, id)
  76  {
  77    var target = document.getElementById(id);
  78    if(elem.cacheClassElem)
  79      elem.className = elem.cacheClassElem;
  80    if(elem.cacheClassTarget)
  81      target.className = elem.cacheClassTarget;
  82  }
  83 /*]]>*///-->
  84 </script>
  85 </head>
  86 <body>
  87 <div id="content">
  88 <h1 id="title">EMACS ORG-INFO.JS</h1>
  89
  90 <div id="table-of-contents">
  91 <h2>Table of Contents</h2>
  92 <div id="text-table-of-contents">
  93 <ul>
  94 <li><a href="#sec-1">1 The Name of the Game </a>
  95 <ul>
  96 <li><a href="#sec-1.1">1.1 Download </a></li>
  97 <li><a href="#sec-1.2">1.2 Terms used throughout this Document </a></li>
  98 </ul>
  99 </li>
 100 <li><a href="#sec-2">2 Features </a>
 101 <ul>
 102 <li><a href="#sec-2.1">2.1 Appearance </a></li>
 103 <li><a href="#sec-2.2">2.2 Keyboard navigation </a></li>
 104 <li><a href="#sec-2.3">2.3 Searching </a></li>
 105 <li><a href="#sec-2.4">2.4 Miscelaneous </a></li>
 106 </ul>
 107 </li>
 108 <li><a href="#shortcuts">3 Shortcuts </a></li>
 109 <li><a href="#setup">4 Setup </a>
 110 <ul>
 111 <li><a href="#the-new-way">4.1 Export-Setup - the new Way </a>
 112 <ul>
 113 <li><a href="#sec-4.1.1">4.1.1 Using customize </a></li>
 114 <li><a href="#sec-4.1.2">4.1.2 Per File Basis: #+INFOJS_OPT </a></li>
 115 </ul>
 116 </li>
 117 <li><a href="#the-old-way">4.2 Export-Setup - the old Way </a>
 118 <ul>
 119 <li><a href="#sec-4.2.1">4.2.1 Using a special * COMMENT Section </a></li>
 120 <li><a href="#sec-4.2.2">4.2.2 Using customize </a></li>
 121 <li><a href="#sec-4.2.3">4.2.3 Export-Setup per Project </a></li>
 122 </ul></li>
 123 </ul>
 124 </li>
 125 <li><a href="#sec-5">5 Linking to Files using the Script </a></li>
 126 <li><a href="#sec-6">6 CSS </a></li>
 127 <li><a href="#sec-7">7 Supported Browsers </a>
 128 <ul>
 129 <li><a href="#sec-7.1">7.1 People reported it works in </a></li>
 130 </ul>
 131 </li>
 132 <li><a href="#sec-8">8 Why Do I Need a T.O.C? </a></li>
 133 <li><a href="#xhtml">9 The XHTML </a>
 134 <ul>
 135 <li><a href="#using-set">9.1 Using Set() </a></li>
 136 </ul>
 137 </li>
 138 <li><a href="#sec-10">10 How it works </a></li>
 139 <li><a href="#sec-11">11 Presentations with org-info.js </a></li>
 140 <li><a href="#sec-12">12 History </a></li>
 141 <li><a href="#sec-13">13 Thanks </a></li>
 142 <li><a href="#sec-14">14 License </a></li>
 143 <li><a href="#sec-15">15 THE END </a></li>
 144 </ul>
 145 </div>
 146 </div>
 147
 148 <div id="outline-container-1" class="outline-2">
 149 <h2 id="sec-1"><span class="section-number-2">1</span> The Name of the Game </h2>
 150 <div class="outline-text-2" id="text-1">
 151
 152
 153 <p>
 154 org-info-js (subsequently called <i>the script</i>) implements part of Emacs Org-mode
 155 in it's XHTML-exported files, allowing them to be rendered and browsed in a
 156 linuxdoc/texinfo style.
 157 </p>
 158 <p>
 159 This documentation is one XHTML file, exported from one *.org file using a
 160 single keyboard shortcut. No additional postprocessing was done.  There are no
 161 external dependencies and the script is small and fast, even for large files.
 162 It is used on the <a href="http://orgmode.org/Changes.html">org-mode site</a> to display <code>ORGWEBPAGE/Changes.org</code> which
 163 consists of more than 220 sections.
 164 </p>
 165 <p>
 166 If you don't mind using it despite the <i>health warnings</i> we wish you good luck
 167 and hope the fun will outweigh your effort.
 168 </p>
 169 <p>
 170 There are some drawbacks though. It is currently not possible to
 171 open internal links in another tab (e.g. using middle click in
 172 Firefox) due my poor JavaScript knowledge. This is not very high on
 173 my TODO list since the history mechanism of the script is a good
 174 alternative to tab usage.
 175 </p>
 176 <p>
 177 Go to the next section by pressing '<code>n</code>'.
 178 </p>
 179 <p>
 180 Find out about shortcuts in section <a href="#shortcuts">Shortcuts</a> (and come back here
 181 pressing '<code>b</code>'). In addition, '<code>?</code>' will show all shortcuts available.
 182 </p>
 183
 184 </div>
 185
 186 <div id="outline-container-1.1" class="outline-3">
 187 <h3 id="sec-1.1"><span class="section-number-3">1.1</span> <span class="target">Download</span>  </h3>
 188 <div class="outline-text-3" id="text-1.1">
 189
 190
 191 <ul>
 192 <li>
 193 A list of Changes can be found <a href="changes.html">here</a> (separat file).
 194 </li>
 195 <li>
 196 <a href="#sec-1.1">Download</a> the <a href="org-info.js">minified version</a> or the <a href="org-info-src.js">sourc code</a>.
 197 </li>
 198 <li>
 199 Create the minified versions from the sources using the <a href="Makefile">Makefile</a> and a
 200 little <a href="sed.txt">sed script</a>.
 201
 202 </li>
 203 </ul>
 204
 205 <p>Development of the script takes place on github
 206 (<a href="http://github.com/SebastianRose/org-info-js/tree/master">http://github.com/SebastianRose/org-info-js/tree/master</a>), but every working
 207 release is published here on Worg synchronously. That said, you can follow
 208 the development by tracking the Worg repo as well, available at
 209 <a href="http://repo.or.cz/w/Worg.git">http://repo.or.cz/w/Worg.git</a>.
 210 </p>
 211 </div>
 212
 213 </div>
 214
 215 <div id="outline-container-1.2" class="outline-3">
 216 <h3 id="sec-1.2"><span class="section-number-3">1.2</span> <span class="target">Terms used throughout this Document</span>  </h3>
 217 <div class="outline-text-3" id="text-1.2">
 218
 219
 220 <p>
 221 The script knows three different so called <i>view modes</i>. One may toggle the
 222 view mode by pressing '<code>m</code>' or click the <i>toggle view</i> link the script adds to
 223 your pages. Currently three view modes exist:
 224 </p>
 225 <dl>
 226 <dt><b>info view mode</b></dt><dd>
 227
 228 <p>
 229 This mode displays the sections one by one, paged like the typical
 230 linuxdoc or texinfo files. This is the view mode you should face when
 231 first visiting this documentation.
 232 </p>
 233 </dd>
 234 <dt><b>plain view mode</b></dt><dd>
 235
 236 <p>
 237 This mode displays the entire file. In this mode the sections are foldable
 238 by clicking the headlines or pressing '<code>f</code>' (fold). The entire structure
 239 of the document my be (un-)folded using '<code>F</code>'. You may determin what's
 240 visible on pageload.
 241 </p>
 242 </dd>
 243 <dt><b>presentation mode</b></dt><dd>
 244
 245 <p>
 246 This mode displays sections one by as slides. Still
 247 very rustic and experimental. Rick Moynihan embarked and we plan a separat
 248 tool for presentations, but&hellip;
 249 </p>
 250 </dd>
 251 </dl>
 252
 253 <p>The table of contents (<b>TOC</b>) is required, albeit it may be hidden (CSS). The TOC may
 254 be visited using '<code>i</code>' (index) regardless of its visibility.
 255 </p>
 256 <p>
 257 A <b>section</b> is everything with a headline.
 258 </p>
 259
 260 </div>
 261 </div>
 262
 263 </div>
 264
 265 <div id="outline-container-2" class="outline-2">
 266 <h2 id="sec-2"><span class="section-number-2">2</span> <span class="target">Features</span>  </h2>
 267 <div class="outline-text-2" id="text-2">
 268
 269
 270
 271 </div>
 272
 273 <div id="outline-container-2.1" class="outline-3">
 274 <h3 id="sec-2.1"><span class="section-number-3">2.1</span> Appearance </h3>
 275 <div class="outline-text-3" id="text-2.1">
 276
 277
 278 <dl>
 279 <dt><b>Toggle plain view, info view and presentation</b></dt><dd>
 280
 281 <p>
 282 One can click the script-generated links in info view mode to read through
 283 the whole file page by page. By clicking on '<i>toggle view</i>' (or pressing
 284 `m´) you can switch between info and plain view mode. The presentation mode
 285 is very rudimentary and just a quick hack realy. Press 'x' to see it.
 286 </p></dd>
 287 <dt><b>Keep place in file when toggling</b></dt><dd>
 288
 289 <p>
 290 When changing the view mode via the '<i>toggle view</i>' links, the reader gets
 291 the same part of the document presented after the view change as he saw
 292 before.
 293 </p></dd>
 294 <dt><b>Cut the TOC</b></dt><dd>
 295
 296 <p>
 297 You may cut the table of contents to a certain depth. The splitting of the
 298 document is not affected by this option. Hence you might set the level of
 299 headlines to 4, but cut the TOC to show only the first two levels.
 300 </p></dd>
 301 <dt><b>Optional subindexes</b></dt><dd>
 302
 303 <p>
 304 The script optionally creates subindexes under the headline of a section
 305 containing subsections not exceeding <code>org-export-headline-levels</code>. This
 306 was done to get a more texinfo/linuxdoc kind of feel and a better
 307 orientaton.
 308 </p></dd>
 309 <dt><b>Startupview customizable</b></dt><dd>
 310
 311 <p>
 312 Choose how to display the document on load. Info-like or plain and more.
 313 </p></dd>
 314 <dt><b>Toggle links everywhere / only on top</b></dt><dd>
 315
 316 <p>
 317 You may choose to display the '<i>toggle view</i>' links above every headline
 318 or just next the current sections headline.
 319 </p></dd>
 320 <dt><b>Numbered pages</b></dt><dd>
 321
 322 <p>
 323 In info view mode every page gets a page number starting from one.
 324 </p></dd>
 325 <dt><b>Markright alike headings</b></dt><dd>
 326
 327 <p>
 328 Info view mode only. Similar to the <code>\markright</code> command in LaTeX
 329 the Title of the current sections parent appears on top of each page. In
 330 subsections this heading can be use as link up to start of the parent
 331 section (see top of this page when you're in info view mode). You can move
 332 to the parent section by pressing `u´ (up).
 333 </p></dd>
 334 <dt><b>Tooltips</b></dt><dd>
 335
 336 <p>
 337 Moving the mouse on the navigation links shows a tooltip with name of
 338 next/previous section.
 339 </p></dd>
 340 <dt><b>Hide TOC</b></dt><dd>
 341
 342 <p>
 343 The TOC can be hidden completly. Hitting '<code>i</code>' still will show it. When
 344 showing the TOC hitting '<code>i</code>' any navigation command ('<code>n</code>', '<code>p</code>',
 345 '<code>s</code>'&hellip;) will trigger an history-back. Thus the TOC will not get in your
 346 way when navigating the history later on.
 347 </p>
 348 </dd>
 349 </dl>
 350 </div>
 351
 352 </div>
 353
 354 <div id="outline-container-2.2" class="outline-3">
 355 <h3 id="sec-2.2"><span class="section-number-3">2.2</span> Keyboard navigation </h3>
 356 <div class="outline-text-3" id="text-2.2">
 357
 358
 359 <dl>
 360 <dt><b>Easy keyboard navigation</b></dt><dd>
 361
 362 <p>
 363 See Section <a href="#shortcuts">Shortcuts</a> for a list of shortcuts.
 364 </p></dd>
 365 <dt>Navigation history</dt><dd>
 366
 367 <p>
 368 Navigating a file through the keyboard shortcuts is recorded in an internal
 369 history. You may go back and forth in this history. Once an end is reached,
 370 org-info.js tries to go back/forth in the browsers history. If you move
 371 back to a previous visited file that uses the script, you will return to
 372 the place you left the file. Thus following links in published files feels
 373 like following footnotes.
 374 </p></dd>
 375 <dt><b>Customizable features</b></dt><dd>
 376
 377 <p>
 378 All features are customizable simply by setting up your export options
 379 template (see <a href="#setup">Setup</a>).
 380 </p></dd>
 381 <dt><b>Folding</b></dt><dd>
 382
 383 <p>
 384 Emulates the way of folding in emacs Org-mode. Mouse supported.
 385 </p>
 386 </dd>
 387 </dl>
 388 </div>
 389
 390 </div>
 391
 392 <div id="outline-container-2.3" class="outline-3">
 393 <h3 id="sec-2.3"><span class="section-number-3">2.3</span> Searching </h3>
 394 <div class="outline-text-3" id="text-2.3">
 395
 396
 397 <dl>
 398 <dt><b>Full text-search with highlighting</b></dt><dd>
 399 Search forward, backwards, repeated
 400 search&hellip; (experimental). Simple regular expressions are supported. Try to
 401 search for <code>a[e-h].*n</code> for example. All searches are case
 402 insensitive. Grouping is not supported. We couldn't search for round
 403 brackets otherwise. Supported are wildcards (e.g. <code>.*</code>) and ranges
 404 (e.g. <code>[a-g]</code>). Sometimes only one match is found between to HTML tags. The
 405 longer the expression, the better the matches.
 406 </dd>
 407 <dt><b>Occur mode</b></dt><dd>
 408
 409 <p>
 410 As experimental as the text-search, but I love this one. You may link to a
 411 file using this script like this: <code>index.html?OCCUR=java</code>. Use regular
 412 expressions likewise.
 413 </p></dd>
 414 <dt><b>Tags index</b></dt><dd>
 415
 416 <p>
 417 '<code>C</code>' shows a table of contents based on tags. Inherited tags are not
 418 supported yet. This was an <a href="http://lists.gnu.org/archive/html/emacs-orgmode/2008-07/msg00434.html">idea of Rick Moynihan</a>.
 419 </p>
 420 </dd>
 421 </dl>
 422 </div>
 423
 424 </div>
 425
 426 <div id="outline-container-2.4" class="outline-3">
 427 <h3 id="sec-2.4"><span class="section-number-3">2.4</span> Miscelaneous </h3>
 428 <div class="outline-text-3" id="text-2.4">
 429
 430
 431 <dl>
 432 <dt><b>Inter-linking</b></dt><dd>
 433
 434 <p>
 435 The exported pages can be linked to the homepage and an directory index or
 436 some other sort of parent file.
 437 </p></dd>
 438 <dt><b>Adjusted internal links</b></dt><dd>
 439
 440 <p>
 441 Internal links to section headings are automatically adjusted to work with
 442 this script. When following such internal links, one may go back again
 443 using '<code>b</code>'.
 444 </p></dd>
 445 <dt><b>Detect the target in the URL</b></dt><dd>
 446
 447 <p>
 448 If the URL is suffixed by '<code>#sec-x.y.z</code>' that section will be displayed
 449 after startup.
 450 </p></dd>
 451 <dt><b>Structure is taken from export preferences</b></dt><dd>
 452
 453 <p>
 454 The paging is done according to your setting of
 455 <code>org-export-headline-levels</code>. Scanning the TOC is a good way to get
 456 around browser detection. An option to hide the TOC exists.
 457 </p></dd>
 458 <dt><b>Startup information</b></dt><dd>
 459
 460 <p>
 461 Show a little message on page load to tell the visitor about the script
 462 usage.
 463 </p></dd>
 464 <dt><b>Wrap text before first headline</b></dt><dd>
 465 This is a temporary fix for the missing
 466 <code>&lt;p&gt;</code> element around the text before the first headline, available since
 467 version 0.0.7.3a (fixed in current Org-mode versions). If you export with
 468 <code>skip:nil</code>, you may add this to your stylesheet:
 469 <pre class="example">
 470 #text-before-first-headline {color:red;font-weight:bold;}
 471 </pre>
 472
 473
 474
 475 </dd>
 476 </dl>
 477 </div>
 478 </div>
 479
 480 </div>
 481
 482 <div id="outline-container-shortcuts" class="outline-2">
 483 <h2 id="shortcuts"><a name="sec-3" id="sec-3"></a><span class="section-number-2">3</span> Shortcuts </h2>
 484 <div class="outline-text-2" id="text-shortcuts">
 485
 486
 487 <p>
 488 The visitor of this file (and every XHTML-exported org file that includes the
 489 script) may use the mouse or the following keys to navigate. '<code>?</code>' should give
 490 you a list of shortcuts.
 491 </p>
 492 <p>
 493 The script always tries to keep the last selected section visible. This is
 494 somewhat strange when scrolling, but really helpfull for keyboard navigation.
 495 </p>
 496 <p>
 497 The TOC is handled specially, when hidden. If you press '<code>i</code>', the TOC is
 498 displayed. Any subsequent key press goes back to where you've been before. The
 499 TOC does not show up the history. Same applies to the keyboard help.
 500 </p>
 501 <table border="0" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
 502 <caption></caption>
 503 <colgroup><col align="left" /><col align="left" /></colgroup>
 504 <thead>
 505 <tr><th scope="col">Key</th><th scope="col">Function</th></tr>
 506 </thead>
 507 <tbody>
 508 <tr><td>? / ¿</td><td>show this help screen</td></tr>
 509 </tbody>
 510 <tbody>
 511 <tr><td></td><td><b>Moving around</b></td></tr>
 512 <tr><td>n / p</td><td>goto the next / previous section</td></tr>
 513 <tr><td>N / P</td><td>goto the next / previous sibling</td></tr>
 514 <tr><td>t / E</td><td>goto the first / last section</td></tr>
 515 <tr><td>g</td><td>goto section&hellip;</td></tr>
 516 <tr><td>u</td><td>go one level up (parent section)</td></tr>
 517 <tr><td>i / C</td><td>show table of contents / tags index</td></tr>
 518 <tr><td>b / B</td><td>go back to last / forward to next visited section.</td></tr>
 519 <tr><td>h / H</td><td>go to main index in this directory / link HOME page</td></tr>
 520 </tbody>
 521 <tbody>
 522 <tr><td></td><td><b>View</b></td></tr>
 523 <tr><td>m / x</td><td>toggle the view mode between info and plain / slides</td></tr>
 524 <tr><td>f / F</td><td>fold current section / whole document (plain view only)</td></tr>
 525 </tbody>
 526 <tbody>
 527 <tr><td></td><td><b>Searching</b></td></tr>
 528 <tr><td>s / r</td><td>search forward / backward&hellip;.</td></tr>
 529 <tr><td>S / R</td><td>search again forward / backward</td></tr>
 530 <tr><td>o</td><td>occur-mode</td></tr>
 531 <tr><td>c</td><td>clear search-highlight</td></tr>
 532 </tbody>
 533 <tbody>
 534 <tr><td></td><td><b>Misc</b></td></tr>
 535 <tr><td>l / L / U</td><td>display HTML link / Org link / Plain-URL</td></tr>
 536 <tr><td>v / V</td><td>scroll down / up</td></tr>
 537 </tbody>
 538 </table>
 539
 540
 541 <p>
 542 Thanks Carsten, for this beautifull table!
 543 </p>
 544 </div>
 545
 546 </div>
 547
 548 <div id="outline-container-setup" class="outline-2">
 549 <h2 id="setup"><a name="sec-4" id="sec-4"></a><span class="section-number-2">4</span> Setup </h2>
 550 <div class="outline-text-2" id="text-setup">
 551
 552
 553 <p>
 554 This section describes how to setup your org files to use the
 555 script. <a href="#the-new-way">Export-Setup - the new Way</a> covers setting up org XHTML
 556 export with Org-mode version &gt;= 6.02. For those using an older
 557 Org-mode version &lt; 6.02 the next section (<a href="#sec-4.2">Export-Setup - the old Way</a>)
 558 remains. <a href="#using-set">Using Set()</a> contains a list of all supported options for adjusting
 559 the <code>org_html_manager</code> to suit your needs.
 560 </p>
 561 <p>
 562 See the <a href="#sec-1.1">Download</a> section on how to obtain a version of the script.
 563 </p>
 564 <p>
 565 The first version of this document was created with the new XHTML exporter
 566 which was revised by Carsten Dominik in March 2008 (in Org-mode v5.23a+) to
 567 better support <code>XML</code>.  You can use <code>M-x org-version</code> to see which version of
 568 Org-mode you have installed.
 569 </p>
 570
 571 </div>
 572
 573 <div id="outline-container-the-new-way" class="outline-3">
 574 <h3 id="the-new-way"><a name="sec-4.1" id="sec-4.1"></a><span class="section-number-3">4.1</span> Export-Setup - the new Way </h3>
 575 <div class="outline-text-3" id="text-the-new-way">
 576
 577
 578 <p>
 579 The modern way of org export setup provides extra options to include and
 580 configure the script, as well as an emacs customize interface for this very
 581 purpose. Options set in customize may be overwritten on a per-file basis
 582 using one or more special <code>#+INFOJS_OPT:</code> lines in the head of your org file.
 583 </p>
 584 <p>
 585 As an example, the head of this org file looks like:
 586 </p>
 587
 588
 589
 590 <pre class="src src-org"><span class="org-meta-line">#+INFOJS_OPT: path:org-info.js</span>
 591 <span class="org-meta-line">#+INFOJS_OPT: toc:nil localtoc:t view:info mouse:underline buttons:nil</span>
 592 <span class="org-meta-line">#+INFOJS_OPT: up:http://orgmode.org/worg/</span>
 593 <span class="org-meta-line">#+INFOJS_OPT: home:http://orgmode.org</span>
 594 </pre>
 595
 596
 597
 598
 599
 600 </div>
 601
 602 <div id="outline-container-4.1.1" class="outline-4">
 603 <h4 id="sec-4.1.1"><span class="section-number-4">4.1.1</span> Using customize </h4>
 604 <div class="outline-text-4" id="text-4.1.1">
 605
 606
 607 <p>
 608 To use customize type
 609 </p><pre class="example">
 610 M-x customize-group RET org-export-html RET
 611 </pre>
 612
 613 <p>scroll to the bottom and click <code>Org Export HTML INFOJS</code>.
 614 </p>
 615 <p>
 616 On this page three main options may be configured. <i>Org Export Html Use     Infojs</i> is very good documented and <i>Org Infojs Template</i> should be
 617 perfect by default. So I'll concentrate on <i>Org Infojs Options</i> here.
 618 </p>
 619 <dl>
 620 <dt><code>path</code></dt><dd>
 621
 622 <p>
 623 Absolute or relative URL to the script as used in in XHTML
 624 links. '<code>org-info.js</code>' will find the file in the current
 625 directory. Keep in mind that this will be the directory of the
 626 exported file, eventually a directory on a server.
 627 </p>
 628 </dd>
 629 <dt><code>view</code></dt><dd>
 630
 631 <p>
 632 What kind of view mode should the script enter on startup? Possible
 633 values are
 634 </p><ul>
 635 <li>
 636 <code>info</code> &mdash; info view mode,
 637 </li>
 638 <li>
 639 <code>overview</code> &mdash; plain view mode, only first level headlines visible,
 640 </li>
 641 <li>
 642 <code>content</code> &mdash; plain view mode, all headlines visible,
 643 </li>
 644 <li>
 645 <code>showall</code> &mdash; plain view mode showing the entire document.
 646
 647 </li>
 648 </ul>
 649 </dd>
 650 <dt><code>toc</code></dt><dd>
 651
 652 <p>
 653 Show the table of contents? <br/>
 654 Possible values:
 655 </p><ul>
 656 <li>
 657 <code>t</code> &mdash; show the toc,
 658 </li>
 659 <li>
 660 <code>nil</code> &mdash; hide the toc (only show when '<code>i</code>' is pressed),
 661 </li>
 662 <li>
 663 <code>Publishing/Export property</code> &mdash; derivate this setting from another
 664 property like <code>org-export-with-toc</code>.
 665
 666 </li>
 667 </ul>
 668 </dd>
 669 <dt><code>localtoc</code></dt><dd>
 670
 671 <p>
 672 Should the script insert a local table of contents below the headings
 673 of sections containing subsections? The default is no.<br/>
 674 Possible values:
 675 </p><ul>
 676 <li>
 677 <code>t</code> &mdash; show the local toc below the first text in a section,
 678 </li>
 679 <li>
 680 <code>nil</code> &mdash; hide the toc (only show when '<code>i</code>' is pressed). This is
 681 the default, if this option is omitted.
 682 </li>
 683 <li>
 684 <code>above</code> &mdash; sho the toc directly under the sections heading.
 685
 686 </li>
 687 </ul>
 688 </dd>
 689 <dt><code>mouse</code></dt><dd>
 690
 691 <p>
 692 Highlight the headline under the mouse in plain view mode?
 693 </p><ul>
 694 <li>
 695 <code>underline</code> &mdash; underline the headline under mouse,
 696 </li>
 697 <li>
 698 <code>#dddddd</code> &mdash; or any valid XHTML/CSS color value like <code>red</code> to draw a
 699 colored background for the headline under the mouse.
 700
 701 </li>
 702 </ul>
 703 </dd>
 704 <dt><code>runs</code></dt><dd>
 705
 706 <p>
 707 <b>Obsolete</b>.
 708 Number of attempts to scan the document. It's no risk to set this to a
 709 higher value than the default. The <code>org_html_manager</code> will stop as
 710 soon as the entire document is scanned.
 711 </p>
 712 </dd>
 713 <dt><code>buttons</code></dt><dd>
 714
 715 <p>
 716 Affects plain view mode only. If '<code>t</code>', display the little
 717 <i>Up|HOME|HELP|Toggle view</i> links next to <span style="text-decoration:underline;">each</span> headline in plain view
 718 mode.
 719 </p>
 720 </dd>
 721 </dl>
 722 </div>
 723
 724 </div>
 725
 726 <div id="outline-container-4.1.2" class="outline-4">
 727 <h4 id="sec-4.1.2"><span class="section-number-4">4.1.2</span> Per File Basis: #+INFOJS_OPT </h4>
 728 <div class="outline-text-4" id="text-4.1.2">
 729
 730
 731 <p>
 732 A single file may overwrite the global options using a line like this:
 733 </p>
 734
 735
 736
 737 <pre class="src src-org"><span class="org-meta-line">#+INFOJS_OPT: view:info mouse:underline up:index.html home:http://www.mydomain.tpl toc:t</span>
 738 </pre>
 739
 740
 741
 742
 743 <p>
 744 Possible options are the same as in the previous section. Additional (?)
 745 options include:
 746 </p>
 747 <dl>
 748 <dt><code>home</code></dt><dd>
 749
 750 <p>
 751 An URL to link to the homepage. The text displayed is <code>HOME</code>.
 752 </p></dd>
 753 <dt><code>up</code></dt><dd>
 754
 755 <p>
 756 An URL pointing to some main page. The text displayed is <code>Up</code>.
 757 </p>
 758 </dd>
 759 </dl>
 760 </div>
 761 </div>
 762
 763 </div>
 764
 765 <div id="outline-container-the-old-way" class="outline-3">
 766 <h3 id="the-old-way"><a name="sec-4.2" id="sec-4.2"></a><span class="section-number-3">4.2</span> Export-Setup - the old Way </h3>
 767 <div class="outline-text-3" id="text-the-old-way">
 768
 769
 770 <p>
 771 This section describes the old way to setup the script using the
 772 <code>org-export-html-style</code> configuration. If you own a current version (6.00
 773 ++) of Org-mode you should better use <a href="#the-new-way">Export-Setup - the new Way</a> of setting
 774 up the export for script usage. You might want to read the sections <a href="#xhtml">The XHTML</a>
 775 for more information. <a href="#using-set">Using Set()</a> contains a list of all supported options
 776 recognised by the script.
 777 </p>
 778
 779 </div>
 780
 781 <div id="outline-container-4.2.1" class="outline-4">
 782 <h4 id="sec-4.2.1"><span class="section-number-4">4.2.1</span> Using a special * COMMENT Section </h4>
 783 <div class="outline-text-4" id="text-4.2.1">
 784
 785
 786 <p>
 787 The second possibility to include the script is to add a special section
 788 to the end of your org file (multiple lines possible):
 789 </p>
 790
 791
 792
 793 <pre class="src src-org"><span class="org-level-1">* </span><span class="org-special-keyword">COMMENT</span><span class="org-level-1"> html style specifications</span>
 794 <span class="comment"># Local Variables&#58;</span>
 795 <span class="comment"># org-export-html-style: "&lt;link rel=\"stylesheet\"</span>
 796 <span class="comment"># type=\"text/css\" href=\"styles.css\" /&gt;</span>
 797 <span class="comment"># &lt;script type=\"text/javascript\" src=\"org-info.js\"&gt;</span>
 798 <span class="comment"># &lt;/script&gt;</span>
 799 <span class="comment"># &lt;script type=\"text/javascript\"&gt;</span>
 800 <span class="comment">#  * &lt;![CDATA[ *</span>
 801 <span class="comment">#    org_html_manager.set(\"LOCAL_TOC\", 1);</span>
 802 <span class="comment">#    org_html_manager.set(\"VIEW_BUTTONS\", \"true\");</span>
 803 <span class="comment">#    org_html_manager.set(\"MOUSE_HINT\", \"underline\");</span>
 804 <span class="comment">#    org_html_manager.setup ();</span>
 805 <span class="comment">#  * ]]&gt; *</span>
 806 <span class="comment"># &lt;/script&gt;"</span>
 807 <span class="comment"># End:</span>
 808 </pre>
 809
 810
 811
 812
 813 <p>
 814 Ensure to precede all the verbatim double quotes with a backslash and
 815 include the whole value of <code>org-export-html-style</code> into double quotes
 816 itself.
 817 </p>
 818 </div>
 819
 820 </div>
 821
 822 <div id="outline-container-4.2.2" class="outline-4">
 823 <h4 id="sec-4.2.2"><span class="section-number-4">4.2.2</span> Using customize </h4>
 824 <div class="outline-text-4" id="text-4.2.2">
 825
 826
 827 <p>
 828 One could customize the option '<code>org-export-html-style</code>' globaly by
 829 :M-x cuomize-variable RET org-export-html-style RET
 830 and set it there.
 831 </p>
 832
 833
 834
 835 <pre class="src src-html">&lt;<span class="function-name">script</span> <span class="variable-name">type</span>=<span class="string">"text/javascript"</span> <span class="variable-name">src</span>=<span class="string">"org-info.js"</span>&gt;&lt;/<span class="function-name">script</span>&gt;
 836 &lt;<span class="function-name">script</span> <span class="variable-name">type</span>=<span class="string">"text/javascript"</span>&gt;
 837 /* &lt;![CDATA[ */
 838 org_html_manager.set(<span class="string">"LOCAL_TOC"</span>, 1);
 839 org_html_manager.set(<span class="string">"VIEW_BUTTONS"</span>, <span class="string">"true"</span>);
 840 org_html_manager.set(<span class="string">"MOUSE_HINT"</span>, <span class="string">"underline"</span>);
 841 org_html_manager.setup ();
 842 /* ]]&gt; */
 843 &lt;/<span class="function-name">script</span>&gt;
 844 </pre>
 845
 846
 847
 848
 849 <p>
 850 This way all your files will be exported using the script in the
 851 future. If you publish entire directories, supply an absolute URI to the
 852 <code>src</code> attribute of the first script tag above.
 853 </p>
 854 </div>
 855
 856 </div>
 857
 858 <div id="outline-container-4.2.3" class="outline-4">
 859 <h4 id="sec-4.2.3"><span class="section-number-4">4.2.3</span> Export-Setup per Project </h4>
 860 <div class="outline-text-4" id="text-4.2.3">
 861
 862
 863 <p>
 864 Last but not least and very handy is the possibility to setup the usage of
 865 the script per project. This is a taylor made passage of the org manual:
 866 </p>
 867
 868
 869
 870 <pre class="src src-emacs-lisp">(setq org-publish-project-alist
 871       &#8217;((<span class="string">"org"</span>
 872          <span class="builtin">:base-directory</span> <span class="string">"~/org/"</span>
 873          <span class="builtin">:publishing-directory</span> <span class="string">"~/public_html"</span>
 874          <span class="builtin">:section-numbers</span> nil
 875          <span class="builtin">:table-of-contents</span> nil
 876          <span class="builtin">:style</span> <span class="string">"&lt;link rel=stylesheet href=\"../other/mystyle.css\"
 877                 type=\"text/css\"&gt;
 878                 &lt;script type=\"text/javascript\" src=\"org-info.js\"&gt;&lt;/script&gt;
 879                 &lt;script type=\"text/javascript\"&gt;
 880                  /* &lt;![CDATA[ */
 881                     org_html_manager.setup ();
 882                  /* ]]&gt; */
 883                 &lt;/script&gt;"</span>)))
 884 </pre>
 885
 886
 887
 888
 889 <p>
 890 Don't forget to add an export target for the script itself ;-)
 891 </p>
 892 </div>
 893 </div>
 894 </div>
 895
 896 </div>
 897
 898 <div id="outline-container-5" class="outline-2">
 899 <h2 id="sec-5"><span class="section-number-2">5</span> <span class="target">Linking to Files using the Script</span>  </h2>
 900 <div class="outline-text-2" id="text-5">
 901
 902
 903 <p>
 904 Just use the ordinary link syntax to link to files that use the script. Append
 905 the section to the URL if neccessary:
 906 </p>
 907 <pre class="example">
 908 http://www.domain.tld/path/to/org.html#sec-3.4
 909 </pre>
 910
 911
 912 <p>
 913 One may overwrite the author's settings using special suffixes appended to the
 914 URL of the script. Here are some examples linking to this section and changing
 915 the intial view mode. Currently only the '<i>internal</i>' options are used (see
 916 <a href="#using-set">Using set()</a> for a list).
 917 </p>
 918
 919
 920     <ul>
 921     <li>
 922     <a href="index.html?TOC=1&amp;VIEW=info#sec-5"><code>index.html?TOC=1&amp;VIEW=info#sec-5</code></a>
 923     </li>
 924     <li>
 925     <a href="index.html?TOC=0&amp;VIEW=overview#sec-5"><code>index.html?TOC=0&amp;VIEW=overview#sec-5</code></a>
 926     </li>
 927     <li>
 928     <a href="index.html?VIEW=content&amp;TOC_DEPTH=1#sec-5"><code>index.html?VIEW=content&amp;TOC_DEPTH=1#sec-5</code></a>
 929     </li>
 930     <li>
 931     <a href="index.html?VIEW=showall&amp;MOUSE_HINT=rgb(255,133,0)#sec-5"><code>index.html?VIEW=showall&amp;MOUSE_HINT=rgb(255,133,0)#sec-5</code></a>
 932     </li>
 933     <li>
 934     <a href="index.html?OCCUR=java"><code><b>index.html?OCCUR=java</b></code></a>
 935     </li>
 936     </ul>
 937
 938 <p>
 939 <b>Note</b> that it is not possible to change the '<i>HOME</i>' and '<i>Up</i>' links.
 940 </p>
 941 <p>
 942 <b>Note</b> also that everything but <code>[0-9a-zA-Z\.-_]</code> should be URL encoded if used
 943 as an options value.
 944 </p>
 945 </div>
 946
 947 </div>
 948
 949 <div id="outline-container-6" class="outline-2">
 950 <h2 id="sec-6"><span class="section-number-2">6</span> <span class="target">CSS</span>  </h2>
 951 <div class="outline-text-2" id="text-6">
 952
 953
 954 <p>
 955 Here is an excerpt from the stylesheet for this file. Be carful not to mess
 956 things up when trying to position the console.
 957 </p>
 958
 959
 960
 961 <pre class="src src-css"><span class="comment-delimiter">/* </span><span class="comment">Styles for org-info.js </span><span class="comment-delimiter">*/</span>
 962
 963 <span class="css-selector">.org-info-js_info-navigation</span>
 964 {
 965   <span class="css-property">border-style</span>:none;
 966 }
 967
 968 <span class="css-selector">#org-info-js_console</span>
 969 {
 970   <span class="css-property">color</span>:#333333;
 971   <span class="css-property">margin</span>:0px;
 972   <span class="css-property">background-color</span>:#ffffff;
 973 }
 974
 975 <span class="css-selector">#org-info-js_console-input</span>
 976 {
 977   <span class="css-property">background-color</span>:#ffffff;
 978   <span class="css-property">border-style</span>:none;
 979   <span class="css-property">color</span>:#333333;
 980   <span class="css-property">padding-left</span>:10px;
 981   <span class="css-property">vertical-align</span>:middle;
 982 }
 983
 984 <span class="css-selector">#org-info-js_console-label</span>
 985 {
 986   <span class="css-property">font-size</span>:11px;
 987   <span class="css-property">font-weight</span>:bold;
 988   <span class="css-property">padding-left</span>:10px;
 989   <span class="css-property">font-family</span>:Verdana,Arial,sans-serif;
 990   <span class="css-property">vertical-align</span>:middle;
 991 }
 992
 993 <span class="css-selector">.org-info-js_console-label-warning</span>
 994 {
 995   <span class="css-property">color</span>:#cc0000;
 996 }
 997
 998 <span class="css-selector">#org-info-js_console-container</span>
 999 {
1000   <span class="css-property">border</span>:1px solid #cccccc;
1001 }
1002
1003 <span class="css-selector">.org-info-js_search-highlight</span>
1004 {
1005   <span class="css-property">background-color</span>:#adefef; <span class="comment-delimiter">/* </span><span class="comment">emacs default </span><span class="comment-delimiter">*/</span>
1006   <span class="css-property">color</span>:#000000;
1007   <span class="css-property">font-weight</span>:bold;
1008 }
1009 <span class="comment-delimiter">/* </span><span class="comment">END STYLES FOR org-info.js </span><span class="comment-delimiter">*/</span>
1010 </pre>
1011
1012
1013
1014
1015
1016 </div>
1017
1018 </div>
1019
1020 <div id="outline-container-7" class="outline-2">
1021 <h2 id="sec-7"><span class="section-number-2">7</span> <span class="target">Supported Browsers</span>  </h2>
1022 <div class="outline-text-2" id="text-7">
1023
1024
1025 <p>
1026 The functionality of the script is based on <code>DOM</code>. This leads to some
1027 incompatibility with legacy browsers. But hey, it's 2009, isn't it?
1028 </p>
1029 <p>
1030 So what browsers are supported then? Well - I don't know for
1031 sure. JavaScript™ 1.4 plus <code>DOM</code> should make
1032 </p><ul>
1033 <li>
1034 Netscape 6.0 and higher
1035 </li>
1036 <li>
1037 Internet Explorer 5.0 and up
1038 </li>
1039 <li>
1040 Firefox 1.0 ++  - 2.0.0.12 and 3.0 Beta tested
1041 </li>
1042 <li>
1043 Opera 7.0 and higher - v.9.26 tested.
1044 </li>
1045 <li>
1046 Safari 1.0
1047
1048 </li>
1049 </ul>
1050
1051 <p>I try to test the script before each release in Firefox 3.x.x and Opera 10 on
1052 Linux, and in FF 3, IE 6 and Safari on windows. Because of the number of
1053 features and browsers, some bugs might remain undiscovered. Please report bugs
1054 to the emacs-orgmode mailing list. In most cases we manage to fix them within
1055 the next 24 hours.
1056 </p>
1057
1058 </div>
1059
1060 <div id="outline-container-7.1" class="outline-3">
1061 <h3 id="sec-7.1"><span class="section-number-3">7.1</span> <span class="target">People reported it works in</span>  </h3>
1062 <div class="outline-text-3" id="text-7.1">
1063
1064
1065 <p>
1066 So let's gather the tested Browsers here. Problems are only listed, if they
1067 are Browser specific. Let me say it again: we don't wont to support legacy
1068 browsers, do we?
1069 </p>
1070 <table border="0" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
1071 <caption></caption>
1072 <colgroup><col align="left" /><col align="right" /></colgroup>
1073 <thead>
1074 <tr><th scope="col">Browser</th><th scope="col">Version</th></tr>
1075 </thead>
1076 <tbody>
1077 <tr><td>Opera</td><td>9.26+</td></tr>
1078 <tr><td>Firefox/Iceweasel</td><td>2.0.0.12</td></tr>
1079 <tr><td>Firefox/Iceweasel</td><td>3.0.2 Beta</td></tr>
1080 <tr><td>IE</td><td>5.5</td></tr>
1081 <tr><td>IE</td><td>6</td></tr>
1082 </tbody>
1083 </table>
1084
1085
1086 <p>
1087 If you manage to get this thingy working in any browser please let us know, so
1088 we can update the above table.
1089 </p>
1090 </div>
1091 </div>
1092
1093 </div>
1094
1095 <div id="outline-container-8" class="outline-2">
1096 <h2 id="sec-8"><span class="section-number-2">8</span> <span class="target">Why Do I Need a T.O.C?</span>  </h2>
1097 <div class="outline-text-2" id="text-8">
1098
1099
1100 <p>
1101 Currently the script depends on the table of contents in the resulting
1102 XHTML. The TOC can be hidden though.
1103 </p>
1104 <p>
1105 The main reason is the behaviour of browsers. There is no safe way to detect
1106 if the entire document is loaded at a certain point in time. Opera for example
1107 returns <code>true</code> if we ask it <code>if(document.body)</code>. The <code>init()</code> function of the
1108 <code>OrgHtmlManager</code> is aware of the possibility, that not even the TOC might
1109 be loaded when this function is called. Hence it should work for slow
1110 connections too.
1111 </p>
1112 </div>
1113
1114 </div>
1115
1116 <div id="outline-container-xhtml" class="outline-2">
1117 <h2 id="xhtml"><a name="sec-9" id="sec-9"></a><span class="section-number-2">9</span> The XHTML </h2>
1118 <div class="outline-text-2" id="text-xhtml">
1119
1120
1121 <p>
1122 End users may consider this section obsolete as of org version 6.00-pre-3,
1123 since there is a new configuration interface in org now to setup the script
1124 without dealing with JavaScript. It is still here to show the desired look
1125 of the head section of the XHTML. Also someone might be interested to use the
1126 script for XHTML files not exported from org.
1127 </p>
1128 <p>
1129 The script has to be included in the header of the resulting XHTML files. The
1130 document structure has to be exactly the one produced by the current XHTML
1131 export of emacs Org-mode.
1132 You may pass options to the <code>org_html_manager</code> by utilising its <code>set()</code>
1133 method. For a list of options see section <a href="#using-set">Using Set()</a>. This is what the
1134 head section should look like:
1135 </p>
1136
1137
1138
1139 <pre class="src src-html">&lt;<span class="function-name">script</span> <span class="variable-name">type</span>=<span class="string">"text/javascript"</span> <span class="variable-name">src</span>=<span class="string">"org-info.js"</span>&gt;&lt;/<span class="function-name">script</span>&gt;
1140 &lt;<span class="function-name">script</span> <span class="variable-name">type</span>=<span class="string">"text/javascript"</span>&gt;
1141 /* &lt;![CDATA[ */
1142 org_html_manager.set(<span class="string">"LOCAL_TOC"</span>, 1);
1143 org_html_manager.set(<span class="string">"TOC"</span>, 1);
1144 org_html_manager.set(<span class="string">"VIEW_BUTTONS"</span>, <span class="string">"1"</span>);
1145 org_html_manager.set(<span class="string">"MOUSE_HINT"</span>, <span class="string">"underline"</span>); // or background-color like '#eeeeee'
1146 org_html_manager.setup ();
1147 /* ]]&gt; */
1148 &lt;/<span class="function-name">script</span>&gt;
1149 </pre>
1150
1151
1152
1153
1154 <p>
1155 To just use the script with the defaults put this into the head section of the
1156 XHTML files:
1157 </p>
1158
1159
1160
1161 <pre class="src src-html">&lt;<span class="function-name">script</span> <span class="variable-name">type</span>=<span class="string">"text/javascript"</span> <span class="variable-name">src</span>=<span class="string">"org-info.js"</span>&gt;&lt;/<span class="function-name">script</span>&gt;
1162 &lt;<span class="function-name">script</span> <span class="variable-name">type</span>=<span class="string">"text/javascript"</span>&gt;
1163 /* &lt;![CDATA[ */
1164 org_html_manager.setup ();
1165 /* ]]&gt; */
1166 &lt;/<span class="function-name">script</span>&gt;
1167 </pre>
1168
1169
1170
1171
1172 <p>
1173 I recommend the use of
1174 </p>
1175
1176
1177
1178 <pre class="src src-html">&lt;<span class="function-name">script</span> <span class="variable-name">type</span>=<span class="string">"text/javascript"</span> <span class="variable-name">src</span>=<span class="string">"org-info.js"</span>&gt;&lt;/<span class="function-name">script</span>&gt;
1179 </pre>
1180
1181
1182
1183
1184 <p>
1185 instead of
1186 </p>
1187
1188
1189
1190 <pre class="src src-html">&lt;<span class="function-name">script</span> <span class="variable-name">type</span>=<span class="string">"text/javascript"</span> <span class="variable-name">src</span>=<span class="string">"org-info.js"</span> /&gt;
1191 </pre>
1192
1193
1194
1195
1196 <p>
1197 which is valid XHTML but not understood by all browsers. I'll use the first
1198 version throughout this document where ever the space allows to do so.
1199 </p>
1200
1201 </div>
1202
1203 <div id="outline-container-using-set" class="outline-3">
1204 <h3 id="using-set"><a name="sec-9.1" id="sec-9.1"></a><span class="section-number-3">9.1</span> Using Set() </h3>
1205 <div class="outline-text-3" id="text-using-set">
1206
1207
1208 <p>
1209 Before calling
1210 </p><pre class="example">
1211 org_html_manager.setup ();
1212 </pre>
1213
1214 <p>one may configure the script by using the <code>org_html_manager</code>'s function
1215 <code>set(key, val)</code>. There is one important rule for all of these options. If
1216 you set a string value containing single quotes, do it this way:
1217 </p><pre class="example">
1218 org_html_manager.set("key", "value with \\'single quotes\\'");
1219 </pre>
1220
1221
1222 <dl>
1223 <dt><code>VIEW</code></dt><dd>
1224 Set to a true value to start in textinfo kind of view. Note: you
1225 could also use <code>org_html_manager.INFO_VIEW</code>,
1226 <code>org_html_manager.PRESENTATION_VIEW</code> or
1227 <code>org_html_manager.PLAIN_VIEW</code>. Defaults to plain view mode.
1228 </dd>
1229 <dt><code>HIDE_TOC</code></dt><dd>
1230
1231 <p>
1232 If <code>1</code>, hide the table of contents.
1233 </p></dd>
1234 <dt><code>SUB_INDEXES</code></dt><dd>
1235
1236 <p>
1237 If set to a <code>true</code> (<code>1</code> or not empty string) value, create subindexes
1238 for sections containing subsections. See sections 1 2, or 3.1 of this
1239 document. The index below the headline (under 'Contents:') is generated
1240 by the script. This one is off by default.
1241 </p></dd>
1242 <dt><code>VIEW_BUTTONS</code></dt><dd>
1243
1244 <p>
1245 If <code>true</code>, include the small '<i>toggle view</i>' link above every headline in
1246 plain view too. The visitor can toggle the view every where in the file
1247 then. If <code>false</code>, only at the top of the file such a link is displayed
1248 when in plain view. Default is <code>false</code>.
1249 </p></dd>
1250 <dt><code>MOUSE_HINT</code></dt><dd>
1251
1252 <p>
1253 Highlight the heading under the mouse. This can be a background color
1254 (like '<code>#ff0000</code>', '<code>red</code>' or '<code>rgb(230,230,230)</code>') or the keyword
1255 '<code>underline</code>'.
1256 </p></dd>
1257 <dt><code>LINK_UP</code></dt><dd>
1258
1259 <p>
1260 May be set, to link to an other file, preferably the main index page of a
1261 subdirectory. You might consider using an absolute URL here. This link will be
1262 displayed as
1263 </p><pre class="example">
1264 &lt;a href="LINK_UP"&gt;Up&lt;/a&gt;
1265 </pre>
1266
1267 <p>This way we can link files into a tree, if all subdirectories in the
1268 project follow the same conventions. The '<code>h</code>' shortcut will
1269 bring you there as well.
1270 </p></dd>
1271 <dt><code>LINK_HOME</code></dt><dd>
1272
1273 <p>
1274 May be set, to link to an other file, preferably the main home page. This
1275 link will be displayed as
1276 </p><pre class="example">
1277 &lt;a href="LINK_HOME"&gt;Up&lt;/a&gt;
1278 </pre>
1279
1280 <p>The '<code>H</code>' shortcut will trigger this action.
1281 </p></dd>
1282 <dt><code>TOC_DEPTH</code></dt><dd>
1283
1284 <p>
1285 Cut the TOC at a certain level. This was done to support big big
1286 files and was requested by Carsten Dominik. If '<code>0</code>' or not provided at
1287 all the TOC will not be cut. If set to a number greater than '<code>0</code>',
1288 the TOC will cut to only show headlines down to that very level.
1289 </p></dd>
1290 <dt><code>HELP</code></dt><dd>
1291
1292 <p>
1293 Display a little message on page load? Defaults to no message. Set to <code>1</code>
1294 to display the startup message.
1295 </p>
1296 </dd>
1297 </dl>
1298 </div>
1299 </div>
1300
1301 </div>
1302
1303 <div id="outline-container-10" class="outline-2">
1304 <h2 id="sec-10"><span class="section-number-2">10</span> How it works </h2>
1305 <div class="outline-text-2" id="text-10">
1306
1307
1308 <p>
1309 First of all the script is included  in the header as described in <a href="#setup">Setup</a>.  The
1310 document has  to be exported with TOC  since the script depends  on it (See
1311 <a href="#sec-8">Why Do I Need a T.O.C?</a>).
1312 </p>
1313 <p>
1314 When   included,   it   creates    a   global   JavaScript™   variable   named
1315 <code>org_html_manager</code>.
1316 </p>
1317 <p>
1318 The  <code>org_html_manager::setup()</code>  function,  that  you  will  have  to  call
1319 yourself  (see examples in  <a href="#setup">Setup</a>), sets  up a  timeout function  calling it's
1320 <code>init()</code> function after  50ms. After those 50 ms  The <code>init()</code> function starts
1321 it's first attempt  to scan the document, using the TOC  as a guide. During
1322 this scan the  <code>org_html_manager</code> builds a tree of  nodes, each caching some
1323 data for later use. Once an element of the document is scanned it is marked by
1324 setting a property <code>scanned_for_org</code> to <code>1</code>. This way it will not be scanned
1325 a second time in  subsquent runs (it will be checked though,  but no work will
1326 be done for it).
1327 </p>
1328 <p>
1329 If the document  (or the TOC) is not  entirely loaded, <code>org_html_manager</code>
1330 stops  scanning,  sets  the  timeout  again  to start  an  other  scan  50  ms
1331 later. Once the  entire document is loaded and scanned no  new timeout will be
1332 set, and the document is displayed in the desired way (hopefully).
1333 </p>
1334 <p>
1335 Once the number of attempts to scan the  the document was configurable. This
1336 was dropped, since we can not know in advance how fast the document will be
1337 loaded on the client side.
1338 </p>
1339 <p>
1340 The <code>org_html_manager</code> also changes the document a bit to make it react on
1341 certain input events and follow your wishes. The old '<i>event handling</i>' was
1342 entirely based on the normal link functions using so called <code>accesskeys</code>. This
1343 has changed long ago, but the accesskeys will stay cause there is no reason to
1344 remove them.
1345 </p>
1346 </div>
1347
1348 </div>
1349
1350 <div id="outline-container-11" class="outline-2">
1351 <h2 id="sec-11"><span class="section-number-2">11</span> Presentations with org-info.js </h2>
1352 <div class="outline-text-2" id="text-11">
1353
1354
1355 <p>
1356 The script can handle all the sections as single slides. Press '<code>x</code>' to switch
1357 to the presentation mode. In this mode you may navigate the sections using the
1358 mouse. Currently a single click moves forward and a doubleclick backwards
1359 (will change this to right mouse button for backwards movement).
1360 </p>
1361 <p>
1362 The first plain list (i.e. an &lt;ul&gt; element) in a section is special. The items
1363 will be shown one by one when moving forward.
1364 </p>
1365 <p>
1366 If you're at the end of the presentation, a click does not trigger a
1367 warning. Same applies to a doubleclick when in the first section.
1368 </p>
1369 <p>
1370 There is no plan to extend this feature very much. A better plan might be to
1371 write a separate tool to handle slides.
1372 </p>
1373 </div>
1374
1375 </div>
1376
1377 <div id="outline-container-12" class="outline-2">
1378 <h2 id="sec-12"><span class="section-number-2">12</span> History </h2>
1379 <div class="outline-text-2" id="text-12">
1380
1381
1382 <p>
1383 The aim of this little script was to implement a part of emacs Org-mode
1384 facilities of folding. Oh, no - not originaly.
1385 </p>
1386 <p>
1387 My first idea was to view some of my larger org files without scrolling. I
1388 wanted to have them paged just like texinfo or linuxdoc files. In February
1389 2008 I came across Carsten Dominiks <i>ideas</i> page
1390 <a href="http://orgmode.org/todo.html">http://orgmode.org/todo.html</a>. And I could not resist to write him some of my
1391 thoughts about this great emacs mode including some little ideas and
1392 drawbacks. I don't know how, but it somehow these guys made me, lazy bone that
1393 I am, write this little script as an apetizer of <i>web 3.0 in Org-mode</i> (Phil
1394 Jackson).
1395 </p>
1396 <p>
1397 I did and since some people really liked it, worked a bit more on it and added
1398 features. Bastien Guerry was so kind to publish it on
1399 <a href="http://www.legito.net/org-info-js/">http://www.legito.net/org-info-js/</a> the first months. Thanks Bastien.
1400 </p>
1401 <p>
1402 In the first days of April Carsten Dominik added code to Org-mode to support
1403 the usage of this script. Hence the script may now be configured in a similar way
1404 to the other export options. Since then it is even possible to configure this
1405 script through customize.
1406 </p>
1407 </div>
1408
1409 </div>
1410
1411 <div id="outline-container-13" class="outline-2">
1412 <h2 id="sec-13"><span class="section-number-2">13</span> Thanks </h2>
1413 <div class="outline-text-2" id="text-13">
1414
1415
1416 <p>
1417 Very special thanks to Carsten Dominik, Bastien Guerry and Phil Jackson who
1418 have encouraged me to write and publish this little piece of (unfinished) work
1419 and all the hundrets of hours they spent on this fantastic emacs mode called
1420 Org-mode and the export modules.
1421 </p>
1422 <p>
1423 Org is a new working experience for me and there is nothing comparable to
1424 working with emacs AND Org-mode.
1425 </p>
1426 <p>
1427 An other big kiss to Gabi (<a href="http://www.emma-stil.de">www.emma-stil.de</a>) for being so patient while I was
1428 not working on our projects but playing with emacs.
1429 </p>
1430 <p>
1431 Thanks to Tobias Prinz for listening to my stupid JavaScript questions and all
1432 the usefull tips. Espacially the negative margin trick and key input.
1433 </p>
1434 <p>
1435 And again big thanks to Carsten Dominik for making the inclusion and
1436 configuration of the script so easy for the users, all the inspired ideas and
1437 the great org radio table trick. A lot of the power of the final make up is
1438 your merit! We all love to read the Org-mode mailing lists because of the
1439 kind and relaxed tone that is yours.
1440 </p>
1441 <p>
1442 Thanks a lot for OrgMode!
1443 </p>
1444 </div>
1445
1446 </div>
1447
1448 <div id="outline-container-14" class="outline-2">
1449 <h2 id="sec-14"><span class="section-number-2">14</span> License </h2>
1450 <div class="outline-text-2" id="text-14">
1451
1452
1453 <p>
1454 What I think about licenses? Well - I think licences and patents are not far
1455 from each other. Poor people (and poor countries!!!) stay poor because of both
1456 of them. But since I know where I live, in a world made of licenses and
1457 patents, I have to apply some license to my work to protect it and stay
1458 unprotected.
1459 </p>
1460 <p>
1461 Hence the script was originally licensed under <a href="http://www.gnu.org/licenses/old-licenses/gpl-2.0.html">GPL 2</a>. Since v.0.1.1.6 the
1462 license was changed to <a href="http://www.gnu.org/licenses/gpl-3.0.html">GPL version 3</a>. This document is subject to <a href="http://www.fsf.org/licensing/licenses/fdl.txt">GFDL</a>.
1463 </p>
1464 </div>
1465
1466 </div>
1467
1468 <div id="outline-container-15" class="outline-2">
1469 <h2 id="sec-15"><span class="section-number-2">15</span> THE END </h2>
1470 <div class="outline-text-2" id="text-15">
1471
1472
1473 <p>
1474 The original version of this document was written in emacs23 with Org-mode
1475 v. 5.22a+.  The visibilty of the contents of a individual section or
1476 subsection can be toggled by clicking the stars in front of the headlines or
1477 moving there and hitting <code>TAB</code>. The visibility of the entire document structure
1478 can be changed by pressing <code>SHIFT+TAB</code> anywhere. When on a headline, pressing
1479 <code>ALT+UP/DOWN</code> moves the entire subtree to different location in the tree,
1480 keeping it's level of indentation. <code>ALT+LEFT/RIGHT</code> promotes and demotes the
1481 subtree.
1482 </p>
1483
1484 <div class="figure">
1485 <p><img src="img/emacs23-org.js.org.png"  alt="img/emacs23-org.js.org.png" /></p>
1486 </div>
1487 </div>
1488 </div>
1489 <div id="postamble">
1490 <p class="author"> Author: Sebastian Rose
1491 <a href="mailto:sebastian_rose@gmx.de">&lt;sebastian_rose@gmx.de&gt;</a>
1492 </p>
1493 <p class="date"> Date: 2009-06-22 21:35:52 CEST</p>
1494 <p class="creator">HTML generated by org-mode 6.27trans in emacs 23</p>
1495 </div>
1496 </div>
1497 </body>
1498 </html>