Page 1 of 1
Activate/desactivate alternate CSS with javascript
Posted: Fri Jun 13, 2025 9:14 am
by NicoAMP
Hello,
Does someone know if it's possible to activate/desactivate an alternate CSS defined in an framework extension script directly with javascript (for Oxygen Web Author usage) ?
Code: Select all
<addCss path="css/my-alternate.less" position="before" alternate="true" title="+ My alternate"/>
Thanks for any help.
Regards,
Nicolas
Re: Activate/desactivate alternate CSS with javascript
Posted: Mon Jun 16, 2025 12:54 pm
by cosminef
Hello,
Sorry for the late reply.
Regarding your question about toggling an alternate CSS added via the framework extension script, one way to influence which stylesheets are loaded is by using the URL parameter
stylesheet-titles. This parameter can be set to specify which CSS styles (including alternate ones) are enabled when Web Author loads. For example:
Code: Select all
&stylesheet-titles=Basic,%2B%20Inline%20insertion%20actions
Note that the value here is URL-encoded. When decoded (you can use an online tool or decodeURIComponent() in JavaScript), it becomes: "Basic,+ Inline insertion actions". This corresponds to selecting the "Basic" stylesheet plus the "+ Inline insertion actions" alternate stylesheet that you have enabled in Web Author. This example corresponds to opening a topic from the Samples section on the Web Author Dashboard using the default styles.
You can also set this programmatically as a loading option [1]. For example:
Code: Select all
workspace.listen(sync.api.Workspace.EventType.BEFORE_EDITOR_LOADED, function(e) {
e.options["stylesheet-titles"] = "Basic,+ Hints,+ Full width";
});
Here, for example, the document is loaded with the Main style "Basic" and the Additional styles "Hints" and "Full width".
Best,
Cosmin
[1]
https://www.oxygenxml.com/maven/com/oxy ... tions.html
Re: Activate/desactivate alternate CSS with javascript
Posted: Mon Jun 16, 2025 4:35 pm
by NicoAMP
Thanks Cosmin for these information.
But it seems that once the editor is loaded you can't change this options with new values.
What I want to implement is a toolbar button that permit to toogle a specific alternate CSS.
I tried this, but nothing append:
Code: Select all
let length = workspace.currentEditor.options["stylesheet-titles"].length;
if (length === 1) {
workspace.currentEditor.options["stylesheet-titles"] = [];
workspace.currentEditor.options["stylesheet-titles"] = ["Basic", "+ Hints"];
} else {
workspace.currentEditor.options["stylesheet-titles"] = [];
workspace.currentEditor.options["stylesheet-titles"] = ["Basic"];
}
Once options are changes, is there a way to execute like a refresh to take into account new values ?
Thanks a lot.
Regards,
Nicolas