IndexMenu JS Treenew isn't being used to navigation

[eduardomozart]

IndexMenu now uses Fancytree and the legacy tree (#78) will be deprecated into the future. I added a commit to the IndexMenu code that was already commited (samuelet/indexmenu#292) that adds the "data-wiki-id" attr to IndexMenu Fancytree (Treenew), but it isn't enable navigation (Next/Prev buttons) on this template.
I believe it happens because now IndexMenu uses AJAX to load the sidebar and it isn't completed loaded when the page is loaded and the "Next/Prev" buttons are gathered by the template. Maybe if the template detects the presence of the .indexmenu_js2 it could wait it fully load (.fancytree-plain) before attempt to gather the "Next/Prev" button, or we can discuss with IndexMenu devs if we could trigger custom events after Fancytree is fully loaded.

[my17560]

I don't think It is possible to use next/previous button with Treenew because it only retrieves child nodes when the node is opened.

When you are on "2. 3CX" namespace, the child node doesn't exist yet. It gets the child node when you open the namespace by clicking a triangle icon. So unless you open the namespace, this theme can't know if there is a child.

If you can expand all the menu items like this "{{indexmenu>..|js treenew nsort}}" it'll work.

[eduardomozart]

Hello,
I can confirm that it's working on child pages (when I access ":3cx" namespace it shows the "Next" and "Previous" buttons), but it didn't seem to work on Start page, but I'm not sure why.

Maybe the template could be updated to fetch namespace directly from DokuWiki PHP internal functions and build navigation through there (please remember to respect ACL)?

[my17560]

Sorry, I was wrong that expanding all the children at start could solve the problem.

As you said, since IndexMenu uses AJAX, I need to know when it finishes creating the index. I believe the problem could be solved if IndexMenu triggers a Javascript event when it finishes. Then this theme re-reads the index when the event is fired in the event-hander.

[eduardomozart]

I added the following code to conf/userscript.js and it seems I was able to hook an event to tree load itself, maybe the template could be updated to handle those events too:

jQuery(document).ready(function() {
  jQuery(".indexmenu_js2").each(function(){
        jQuery(this).fancytree({
            init: function(event, data){
                alert("test");
            }
        });
  });
});

[my17560]

Hi, thanks for your research. That helped me!
I've fixed the theme and updated it. Could you try?

Be noted, that it won't follow pages unless the folder is opened like I said before.

[eduardomozart]

I commited the PR #82 to add a missing comma that throws an error on JS.php minify.

[eduardomozart]

Hello @my17560,
I noticed that on your commit db34d7d you enabled the trigger of "fancytreexpand" event, but I'm not sure why.
Every time I expand an item it scrolls to the TOC, as can be seen below:

[eduardomozart]

There's also this odd behavior that I'm not sure if it's intended.
When the page has no child, it seems to be attached to the sidebar as expected:

But when it has child pages, the TOC isn't attached to the sidebar itself, instead it shows on the "TOC" section of the sidebar.

[my17560]

For the first issue, I'm sorry my last fix was sloppy. I refactored and fixed the script. Could you try it?
For the second issue, does the element have "data-wiki-id"? If not, the theme can't embed the TOC in place.

[eduardomozart]

Hello @my17560,
Thank you for your response. I can confirm that now the first issue seems to be fixed.
The later issue I'm not sure why the TOC is above, it has the "data-wiki-id" parameter on it, as can be seen below:

Here's my sidebar file content:

** Ferramentas do Wiki **

  * [[this>doku.php?id=start|Página principal]]
  * [[this>doku.php?id=wiki:plugin:addnewpage:newpage|Criar página]]

** Barra de Navegação **

{{indexmenu>..:#1|js#awesome navbar nsort nogroup treenew}}

[my17560]

Ok, I understand the situation. The reason the TOC is not embedded is that your current ID on URL "3cx:phone" is different from data-wiki-id "3cx:phone:" (notice the last colon).

I want to re-create the situation on my PC. What's the simplest directory structure that can confirm your situation? I'm not familiar with the indexmenu and I can't create it on my own.

like this?

pages/
    sidebar.txt
    3cx/
        dashboard.txt
        users.txt
        voicechat.txt
        phones/
            (I want to know what's inside this directory)

[eduardomozart]

Here is it:

pages/
    sidebar.txt
    3cx/
        system_status.txt
        extensions.txt
        siptrunks.txt
        phones.txt
        phones/
            add.txt
            add/
               templates.txt

[my17560]

I can't make "4. Phones" appear in the sidebar although I created the folders and files as you said. Am I missing something?

[eduardomozart]

Hello,
I'm providing in the file below the files structure on my data/pages/ wiki subfolder.
pages_demo.zip

[my17560]

Thanks for you demo pages. I fixed the theme and committed. Could you try?

[eduardomozart]

Now it seems to be working as expected.

Thank you!

[my17560]

Thank you for testing! I'll fix the CSS also.

[eduardomozart]

Thank you for testing! I'll fix the CSS also.

I believe you're looking for

dokuwiki-template-readthedokus/css/sidebar.css

Line 156 in e0aba49

min-width: 12em;

, right? Maybe it should be 100% to fit the sidebar width.

[my17560]

On my computer, it looks like this.

I want to move the TOC slightly to the left, make the TOC width 100%, and make scroll bars disappear.

[eduardomozart]

Oh, I see. This issue was caused by me. I wasn't able to reproduce it on my machine but I was able to reproduce it on my boss PC. This is the root cause:

dokuwiki-template-readthedokus/css/sidebar.css

Line 347 in e0aba49

overflow-y: scroll;

I want to troubleshoot this issue but I wasn't able to troubleshoot it yet, but removing that line, the following issue happens:

[my17560]

Hello, I updated the CSS. But be careful I bet it'll break your styles. I changed only sidebar.css, so please take a backup before updating.

[eduardomozart]

I created the PR to fix a regression on template in #84.
Before the fix:

After the fix:

[eduardomozart]

I'm not sure if it's fixable, but I can't scroll to read full text as seen in:

If it's not possible to fix it, I'll close this issue, no problem. Anyway, I'll create a PR on IndexMenu and DokuWiki TOC source code to add "title" attr to "a" tag as an workaround, so user can hover the text to read title if needed.

[eduardomozart]

There also seems another regression introduced by your fixes. It seems that the dropdown button for namespaces that contains child items isn't shown. I created the PR #86 that fixes this issue.
Before the fix:

After the fix:

It keeps the negative margin left only if the it's a page (there's no child pages on namespace aka. isn't a folder):

[eduardomozart]

I noticed a strange issue when editing directly the "Plano de rede" section from the file below and clicking on [Preview] button. It seems that the .fancytreetitle class width breaks the IndexMenu TreeNew ns titles, but I was unable to reproduce it on other pages, it only happens on conceitos:rede page while editing any section and previewing them (not only "Plano de rede" section.

The affect file content is in attachment:
rede.txt
It seems that it only happens when this file is a child page of an existing namespace (e.g. :playground:rede) and while editing and previewing a section (not the full page).

[my17560]

Hi, thank you for pull request. I merged them and committed the new style. Could you try?

As for the horizontal scroll, I don't have a plan to add scrollbars to the sidebar, but you can add the below style to show the scrollbar in userall.css.

#dokuwiki__aside #sidebar .indexmenu_js2 .li {
	overflow-x: auto;
}

[eduardomozart]

It seems great, no issues to report so far. Closing this issue.