Activate/desactivate alternate CSS with javascript

[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

[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

[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

[cosminef]

Hello,

Thank you for the details.

You can implement a custom action [1] on the toolbar that triggers a custom operation. Inside this operation, you can use the following APIs from the IWebappAuthorEditorAccess interface to toggle your alternate CSS:

• Code: Select all

  getActiveCssGroupsTitles

  : to check which CSS groups are currently active. - https://www.oxygenxml.com/InstData/Edit ... psTitles()

• Code: Select all

  changeActiveCssGroups

  : to activate the desired CSS group(s). - https://www.oxygenxml.com/InstData/Edit ... .util.Set)

This setup allows you to toggle the alternate CSS when the toolbar button is clicked, based on whether your target group is currently active or not.

Best,
Cosmin

[1] https://www.oxygenxml.com/maven/com/oxy ... ction.html