Hi, I also really love the sprintdoc template! BIG THANKS to the creators! It's awesome!
So, I had the same problem as x-root:
x-root If not, how can I force the default TOC behavior to be open ? Like when user go to admin page?
because I think on a wiki page one just expects the TOC to be displayed by default (as common in wikis), or at least on mouse-over (as responsive menus do in many web pages). In the SprintDoc template the TOC tab can always be closed by mouse-click, if it gets in the way, which is really neat! And of course the sticky box feature (when scrolling) is just gorgeous!
So, I wanted to keep all the good things and only tweak the Javascript to display an expanded TOC tab by default, which I found the following attribute to be responsible for: tab.attr('aria-expanded')
.
The according event handler is actually located in:
dokuwiki\lib\tpl\sprintdoc\js\meta-box.js
(current dokuwiki-on-a-stick version).
As x-root pointed out, the desired behavior of the TOC tab (expanded) is already the default for the admin page. So, indeed, there is a good starting point to do the tweak!
According to the programmer's comments in meta-box.js, the following snippet is a function which does the following:
// in admin templates switch on TOC tab, if available:
if($('body').hasClass('do-admin')) {
var $tocLink = $metaBox.find('a[href="#spr__tab-toc"]');
if($tocLink.length === 1) {
$tocLink.trigger('click');
}
}
Actually, after checking if the page is an admin page and checking if a TOC is available, it triggers tab-toc to expand (by virtually clicking on it). All that has to be done now, is to remove the requirement to be of the "admin page class" so that the algorithm may apply this function to any page and always expand the TOC, if available, as so:
if($('body')) {
var $tocLink = $metaBox.find('a[href="#spr__tab-toc"]');
if($tocLink.length === 1) {
$tocLink.trigger('click');
}
}
So, in essence, all that has to be removed is the string .hasClass('do-admin') !
Now, by new default, the TOC is displayed in any wiki page, if available.
However, now, the behavior is such that the TOC gets collapsed (closed) each time, any item of the TOC list is clicked. If you want the TOC to stay open until you intentionally close it by clicking on the actual tab (top button), you have to comment out two more lines of code, which I call the:
// Function to disable (close) tab by a click on any TOC item:
}).find('.meta-content').on('click', 'a[href*="#"]', function (e) {
disableExistingTabs($metaBox);
which is responsible for disabling (closing) existing tabs upon clicking on any of their content.
This is what it should look like, after you commented it out:
// **** COMMENT OUT ****: Function to disable (close) tab by a click on any TOC item
// }).find('.meta-content').on('click', 'a[href*="#"]', function (e) {
// disableExistingTabs($metaBox);
Now, the TOC is displayed on all wiki pages by default (if available), stays open even when clicking on TOC list items (thus serving as a 2nd sidebar) and is closed only when you intentionally click on the tab button, which is how I want it to behave.
Save meta-box.js, don't forget to clear the cache in your dokuwiki\data\cache and refresh your browser!
This might not be update save, so keep a copy of your tweaked meta-box.js in your conf folder!
By the way,
If you want mouse-over responsive behavior for your SprintDoc TOC tab metabox (contents menu), like you may find in many websites, this can also be achieved by tinkering with the Javascript in meta-box.js:
In the first function, the // ... Click Handler ... you would have to replace the click
argument by the mouseenter
argument, as so:
var registerClickForTabsInMetaBox = function($metaBox) {
$metaBox.on('mouseenter', '.meta-tabs a', function (e) {
e.preventDefault();
var $tab = $(this),
isopen = $tab.attr('aria-expanded') === 'true';
Furthermore, you would have to completely comment out the function:
// in admin templates show toc tab, if available (see above)
and de-outcomment the:
// Function to disable (close) tab by a click on any TOC item (see above).
To round things up, you may want to add two lines of code right before the:
// Function to disable (close) tab by a click on any TOC item,
as a shortcut, just to make sure you can always close the TOC meta-box by clicking on the tab button, as so:
// **** NEW **** Function to disable (close) TOC by a click on the tab button
}).on('click', '.meta-tabs a', function (e) {
disableExistingTabs($metaBox);
Now, the TOC is collapsed by default and opens up on mouse-over (thus serving as a responsive menu). Following a click on any TOC list item the TOC closes down again. As a shortcut, you can also close it at any time by clicking on the tab button, in case you only wanted to have a quick look at the TOC list.
Save meta-box.js, don't forget to clear the cache in your dokuwiki\data\cache and refresh your browser!
This might not be update save, so keep a copy of your tweaked meta-box.js in your conf folder!
A big SHOUT OUT to the developers! Keep up the great work! Yours, Chris