Broken on 2.5.268

[MoffKalast]

That being said, I started from a droplet on 2.4.something where it also didn't work, but then updated thinking I just had an unsupported old version.

First off this syntax is so odd, what's it supposed to be? I'm not sure if that's valid js in the first place:

And chrome seems to agree. Then again I can get it to work by just pasting the head script in directly into the head html injection field, the setup being as such right now (code copied to /code), as anything I try to save in the CSS injection field just disappears after a page reload:

<link rel="stylesheet" href="/code/mad-wikijs-customization.css">

<script>

var collapsibleMenu = true; //Enableordisablecollapsiblemenu
var slidingMenu = false; //Enableordisableslidingmenu
var hideDivider = true; //Enableordisable'Divider'elementinnavigation
var addSiteTitleNavigation = true; //AddlinktoSiteTitlenexttoSiteLogo
var removeBreadcrumbs = true; //Enableordisablebreadcrumbs
var removeTocCard = true; //Enableordisable'TableofContents'Card
var removeTagCard = true; //Enableordisable'Tags'Card
var removeHistoryCard = true; //Enableordisable'LastEditedBy'Card
var customizeVideoPlayer = true; //Enableordisablevideoplayercustomization
var removeBookmarkCard = true; //EnableordisableBookmark/Share/PrintCard
var sideColumnPosition = 'right'; //Sidecolumnposition.Options:'left'|'right'|false

var mouseLeftEdgeOpensMenu = true; //Whenmouseisclosetotheleftedge,revealsmenuifunpinned
const leftEdge = 2; //Distancefromtheleftedgeinpixelstotriggermenureveal

const COOKIE_NAME = "mad-nav-pinned"; //Nameofthecookie(usedformenupinstatus)
const COOKIE_DAYS = 365; //Cookievalidityindays

</script>

<script src="/code/mad-wikijs-customization.js"></script>

The odd thing is, it partially works. At least here's a list of things I can confirm working:

• logo title link
• removal of various cards, breadcrumbs, history, etc.
• sliding menu

What does not work:

• hiding dividers
• list accordion
• collapsible menu

The latter two being the only two things I was really installing this for, which is pretty ironic.

I'm pretty sure I've got the syntax right, I've copied the accordion directly from the example to the markdown editor and saved, the nav bar being set up the same as the example too:

The only thing I get in the console as a warning is the following, which is probably unrelated:

vendor.js?1640560983:435 There is a button with the key "copy-to-clipboard" registered already.

Any ideas? Thanks.

[madodig]

Hi!

1) the console warning you mentioned is due to Wiki.js code, so yes, this is not related to customization code. 2) regarding the syntax, maybe the guide in the README is not clear enough: you should copy the contents of the mentioned file (code/wjs_html-injection-code.head) and wrap it with <script> tag. So, just overwrite code/wjs_html-injection-code.head with the contents of that file.

I didn't test the code in this version, will try and get back. It's possible something has changed in the Wiki,js source code and the code doesn't work on this version.

[MoffKalast]

Ahh that makes more sense, it hadn't occurred to me to try that given that the whole code/filename would be a valid script src path for local assets. Figured the weird syntax may be a framework thing or whatever.

But as you say it does indeed note "wrap the contents". I'll check if that makes any difference, though it shouldn't be any different than just using the include I've done.

[madodig]

I've upgraded to 2.5.268 and I'm happy to say that it's working (I've checked sliding menu, list accordion and collapsible menu). If you took the Advanced steps, maybe you've made a mistake somewhere.

Can you try to set it up like this?

'CSS Override' field: empty 'Head HTML Injection' field: exact contents of the code/wjs_html-injection-code.head file (you can change the variable values to configure the behaviour)

<script>

    var collapsibleMenu        = true;      // Enable or disable collapsible menu
    ...
</script>

'Body HTML Injection' field:

<style>
/* https://github.com/madodig/wikijs-customization */
.contents summary{border:0!important;background-color:#fff!important;}
...
</style>
<script>
const CM_LNK_ACTIVE="mad-cm-lnk-active",
...
</script>

I'd recommend you to try to set it up on the file-system level, with the symbolic link under the assets folder.

[MoffKalast]

I've set it up exactly that way and I seem to be getting the same results. As an addition I've tried copying the css file into the css override box which does work and doesn't get deleted. I guess it checks for validity and clears it if it's not proper css in order to not break the entire page, makes sense.

All features work except for hiding dividers, list accordion and collapsible menu as mentioned before. At this point I'm sure I must be doing something wrong somewhere.

This is the correct setup, yes?

[madodig]

Regarding the collapsible menu: do you have "Static navigation" chosen under Administration / Navigation? It doesn't work with "Custom Navigation".

Which OS/Browser are you using? Are there any browser extensions? Have you tried opening it in an incognito window?

[MoffKalast]

Static navigation"

Ahhh yes that was the thing, it works after I set it to static. I really need to re-read the instructions 😅

Using chrome for testing, cache disabled of course. There must be another incompatible setting somewhere that prevents the accordion collapse from working, but I'll probably find it eventually.

This injection code is disabled when the site is accessed from mobile device. If navigation items are modified for collapsible menu feature, they will be rendered as native items in mobile view.

Going slightly off topic here, but is that a limitation of wiki.js ignoring the custom html field on mobile or an intended feature of the plugin? Not sure why it would be different for touchscreens, but I see it does render differently even in the chrome debug emulator.

Edit: Seems to work fine if I always return false from isMobileDevice?

Edit 2: Ah I see it breaks on an actual mobile browser...

[madodig]

Great, I'm glad it works! One down, two to go. 😎

Going slightly off topic here, but is that a limitation of wiki.js ignoring the custom html field on mobile or an intended feature of the plugin? Not sure why it would be different for touchscreens, but I see it does render differently even in the chrome debug emulator.

Yes, unfortunately it breaks when viewed on mobile devices. Since my focus at the time was on desktop, I've just implemented a way to disable the code when viewed from mobile device (but I still had to rewrite the menu elements to get rid of the "metadata" 🤦‍♂️). I'm not sure I'll be updating the code until v3 is out (I know some of these features will be available "natively").

Accordion: my bad. I've updated the code sometime in the past and haven't updated the README 🤦‍♂️ so the example doesn't work. Just replace id with class so the opening tag looks like this <div class="faccordion"> Sorry about that.

Showing/hiding dividers works for me. Don't know why it wouldn't work for you.

[MoffKalast]

<div class="faccordion">

Ah there we go, now it works perfectly 👍 I forgot to mention that the dividers started to work when I switched to static as well. I didn't really plan on using that anywhere, just figured I'd provide it as a debug point.

Yeah it's probably way too much effort to get it reworked for the mobile setup. There's already a conflict with the sliding menu I imagine, as the native one appears on mobile.

Anyhow, thanks for all the help, I hope this gets integrated into the stock version soon.