I do have a function set should set two css properties very early:
(function() {
const percent = localStorage.getItem("leftPanelWidthPercent");
if (percent) {
document.documentElement.style.setProperty("--left-panel-width", percent + "%");
document.documentElement.style.setProperty("--main-width", 100 - percent + "%");
} else {
document.documentElement.style.setProperty("--left-panel-width", "16.7%");
document.documentElement.style.setProperty("--main-width", "83.3%");
}
})();
I do set the width of the navigation panel with this proporties:
@media (min-width: 992px) {
#body.hideright.panel-left-width-Medium .main {
left: var(--left-panel-width, 16.7%);
width: var(--main-width, 83.3%);
}
#body.hideright.panel-left-width-Medium #leftPanels {
width: var(--left-panel-width, 16.7%);
right: var(--main-width, 83.3%);
}
}
If both are in the JSX and SSX that is managing the whole code I always have a big jump of the navigation panel because it is first using the default values found somewhere in style sheets.
How and where can I execute this js code to set the css properties very early?
Regards, Simpel
You could use the HTML head UIX to inject a <script>
-tag directly into the HTML.
Even if reading the linked page carefully I couldn’t find a hint where to find those extension. But I remembered a section in administration where to set <meta> tags in the <head>:
XWiki/XWikiPreferences?editor=globaladmin§ion=Presentation&space=XWiki
in the HTTP-Meta-Info section. Maybe you mean this?
Anyway, putting the function above in <script> tags there works like charm.
1 Like
It’s similar to a JSX or SSX, you just add a UI extension object to any page. See this tutorial for more information about UI extensions.
1 Like
Thank you. Now I found it. I even did look into the object part but didn’t find it because of my spelling. Looked for ‘uix’ or ‘user…’. It’s spelled ‘UIExtensionClass’. And there it is.
Thanks for the tutorial. For all readers later be aware that you need an extension point. The place where you insert it. There is (of course) a list of extension points in the wiki: Available Extension Points.
The extension point I suggested is org.xwiki.platform.html.head
which is the one I linked to in my first answer. I agree that the page layout isn’t the best to convey this information.
But indeed, just editing the meta-info in the administration has basically the same effect, it just might be harder to maintain.