1

I am trying to have basic collapsing/folding functionality for sections in the HTML file that has been exported from org-mode, since the files I want to share are very large. I am using Emacs 26.2 (9.0) and Org 9.1.9 on a Mac. I am not able to get this previous solution to work in 2019.

This seems like a built in feature but it seems like the underlying javascript code has a bug. I also saw another tool mentioned on the mailing lists, but without any examples I don't know how apply it to a specific org file I have.

For example, the following file is converted to HTML here 

#+Title+: JS test
#+INFOJS_OPT: path:/~ksb/js/org-info.js
#+INFOJS_OPT: toc:nil ltoc:nil view:overview mouse:underline
#+INFOJS_OPT: home:https://orgmode.org buttons:nil
* Chapter 1
** Section 1
*** Part 1
 - csp
** Section 2
 - cs2p

I have a freshly-downloaded copy of js/org-info.js.

UPDATE: there is a javascript error being raised by org-info.js

Uncaught TypeError: Cannot read property 'cloneNode' of undefined
    at Object.initFromTOC (org-info.js:82)
    at Object.init (org-info.js:49)
    at OrgHtmlManagerLoadCheck (org-info.js:289)
    at <anonymous>:1:1
ksb
  • 13
  • 3

3 Answers3

0

The path to your org-info.js file does not seem to match where the file actually is.

You have the file at: http://web.stanford.edu/~ksb/js/org-info.js

But your example page is expecting it to be at: http://web.stanford.edu/~ksb/docs/js/org-info.js

If you move the js folder to the docs folder, or change

#+INFOJS_OPT: path:js/org-info.js

to 

 #+INFOJS_OPT: path:/js/org-info.js

it should work.

ngm
  • 291
  • 1
  • 6
  • Thanks! though when I add the forward slash, I see no change in behavior (the hyperlinked files have been updated). Normally, whenever "path" does not point to the actual `org-info.js` file (e.g. I add an arbitrary typo), the .html file just looks empty, so perhaps `path:js/org-info.js` and `path:/js/org-info.js` are actually both pointing to the correct path. – ksb Nov 15 '19 at 06:09
  • Oh, hmm, how about if you try `#+INFOJS_OPT: path:/~ksb/js/org-info.js`? – ngm Nov 15 '19 at 14:17
  • When I do that, I get the same behavior as any incorrect path to `org-info.js` (e.g. the same result as `#+INFOJS_OPT: path:/js/ooo-oooo.js`). The page is basically blank ([html](http://web.stanford.edu/~ksb/docs/minimal_org.html),[org](http://web.stanford.edu/~ksb/docs/minimal.org)). – ksb Nov 15 '19 at 15:32
  • Hmm, it looks as if it's finding the file now, but it's resulting in a JavaScript error. `TypeError: k.T is undefined`. Not sure what that problem would be! I might have a try at recreating it later on. – ngm Nov 15 '19 at 15:41
  • I see now from inspecting the webpage. The error I see in "console" is `Uncaught TypeError: Cannot read property 'cloneNode' of undefined` - I'm a bit clueless about javascript but this brings me much closer to a solution, thanks! – ksb Nov 15 '19 at 15:58
0

There is a related discussion over at the org-mode mailing list: https://lists.gnu.org/archive/html/emacs-orgmode/2015-11/msg00702.html

In brief, this is probably a bug in org-mode, and a workaround is possible by putting #+TITLE: some_title at the top of your org file.

xyttyxy
  • 1
0

Ideally, Org mode would export HTML with <details> and <summary> tags. That would result in the functionality you want without the need for JavaScript.

<details>
<summary>Heading</summary>
The visibility of this text will be toggled when you click on "Heading"
</details>

Because Org mode does not export HTML code this way, you need to add some simple JavaScript to the page:

document.querySelectorAll("h2, h3, h4, h5, h6").forEach(function(heading) {
  heading.addEventListener("click", function() {
    var content = this.nextElementSibling
    content.style.display = content.style.display === "none" ? "block" : "none"
  })
})
Zaz
  • 123
  • 6