TOC on mobile

If you set the following settings, then the toc is created inline below the first h1 header. (Unless already present on the page).

  features:
    styling: 
      add_toc: True    # add "[TOC]" (Table of Contents) when missing
      toc_pane: False   # removes table of contents from the note and puts it in the right pane (not supported for layout:tabs)

This results in an inline TOC like this:

At page load the function obsidian_core_footer.js/LoadTableOfContents() is run. When toc_pane: True this function loads the contents of the toc div, puts them in the side pane. If it is false, it will show the toc div (which is hidden by default by the css).

If we want to show the inline toc when the sidepanel toc is hidden, then adding this css will do the trick:

@media (max-width: 840px) {
    .toc {
        display: block;
    }

Also, we need to reenable the toc_pane of course:

  features:
    styling: 
      add_toc: True    # add "[TOC]" (Table of Contents) when missing
      toc_pane: True   # removes table of contents from the note and puts it in the right pane (not supported for layout:tabs)

That will give this behavior:

Let me know if this is what you meant. I think this is a good default setting, I'll add it regardless.

Is it possible to show TOC on mobile devices, for every modes?

Adding a TOC inline is available for every mode, so the fix above should work for every mode

Is there a better way to implement TOC for mobile on documentation mode?

Let me know what you think of my solution :)

Do you have any plan to refactor codes like JS event binding / CSS class names and ids , any plan to find a better way to arrage JS codes ?

Yes, I'll be the first to say that it is all quite a mess on the frontend side. I've already restructured the backend code many times, and that is pretty well organized now, but I've only just started with the frontend code. The first work was done going from 2.2.0 to 2.3.0. A lot of duplicate css has been removed, templates and different layouts now are more similar and share more code, and all the core js code has been put in the two core files, where the rest have been split off. This should give some more structure.

But any tips / proposals for renaming CSS class names / function calls / event bindings is welcome.

Refactors

On this process, I found some onload=func() onclick=func() inside HTML codes, maybe we can refactor those to JS codes by document.querySelector(selector).addEventListener('load or click or others', afunc)

What would the benefit of this be? I kind of like looking at the html code and seeing what onclicks are active on which elements.

The only onload is on the body tag, I guess we can change that to:

document.addEventListener('DOMContentLoaded', load_page); 

we can limit some JS functions only have effect on some limited pages, like using

useful pattern, thanks, that will come in handy

we can also prevent global variable name pollution by wrap all JS codes to a function, like

Everything that is global was intended to be global, we will need to look at a var by var basis what can be removed from the global scope and why that would be necessary.

we can also modify onload to a jquery $.ready() like function, because ready is much earlier than load event, so our pages can render faster

So if I change this code:

// Onloads
// ----------------------------------------------------------------------------
document.addEventListener('DOMContentLoaded', load_theme);  //set theme as quickly as possible to avoid flickering
document.addEventListener('DOMContentLoaded', load_page);   // all the code that needs to be run when everything is loaded

to:

(function(){
  function ready(fn) {
    if (document.readyState != 'loading'){
      fn();
    } else {
      document.addEventListener('DOMContentLoaded', fn);
    }
  }
  function someOnLoadFunction(){
    load_theme();
    load_page();
  };
  ready(someOnLoadFunction);
})();

Then it should be faster? 🤔

I've tried this out with some very basic performance testing, and this solution actually seems to be a bit slower. (On Firefox at least).