How to Provide Localized Strings for Custom Action Implemented in JavaScript API
Posted: Sat Nov 02, 2024 3:22 am
Hi Oxygen Support,
I've implemented several custom actions using the JavaScript API that display in a drop-down and contributes links to our internal documentation for Web Author users, for example:
This results in the following toolbar button drop-down:
I would now like to localize the strings so that our Japanese Web Author users can easily read the items in this button drop-down. Do you have any guidance for how I can provide localized strings for each of these actions as well as on the button name (DITA Map Help)?
For what it's worth, I used the Implementing a Custom Action tutorial in the Web Author JavaScript API documentation [1].
[1] https://www.oxygenxml.com/maven/com/oxy ... ction.html
Thanks!
Daniel
I've implemented several custom actions using the JavaScript API that display in a drop-down and contributes links to our internal documentation for Web Author users, for example:
Code: Select all
(function () {
class moveTopicsHelp extends sync.actions.AbstractAction {
constructor() {
super();
};
/** @override */
getDisplayName() {
return "Moving topics in the DITA Map";
};
actionPerformed() {
window.open('<url-removed-for-security>', '_blank').focus()
};
}
class moveSectionsHelp extends sync.actions.AbstractAction {
constructor() {
super();
};
/** @override */
getDisplayName() {
return "Moving entire sections in the DITA Map";
};
actionPerformed() {
window.open('<url-removed-for-security>', '_blank').focus()
};
}
class removeSectionsTopicsHelp extends sync.actions.AbstractAction {
constructor() {
super();
};
/** @override */
getDisplayName() {
return "Removing sections or topics in the DITA Map";
};
actionPerformed() {
window.open('<url-removed-for-security>', '_blank').focus()
};
}
goog.events.listen(workspace, sync.api.Workspace.EventType.EDITOR_LOADED, function(e) {
let editor = e.editor;
editor.getActionsManager().registerAction('ditamap-help-move-topics', new moveTopicsHelp(editor))
editor.getActionsManager().registerAction('ditamap-help-move-sections', new moveSectionsHelp(editor))
editor.getActionsManager().registerAction('ditamap-help-remove-sections-topics', new removeSectionsTopicsHelp(editor))
addToDitaToolbarDropdown(editor);
});
function addToDitaToolbarDropdown(editor) {
let helpIcon = document.createElement('div');
helpIcon.style.cssText = 'background-image:url("../plugin-resources/custom-ditamap-help-button-plugin/Image24.png")';
helpIcon.className = 'ui-action-large-icon';
editor.listen(sync.api.Editor.EventTypes.ACTIONS_LOADED, function(e) {
var actionsConfig = e.actionsConfiguration;
var ditaToolbar = null;
if (actionsConfig.toolbars) {
for (var i = 0; i < actionsConfig.toolbars.length; i++) {
var toolbar = actionsConfig.toolbars[i];
if (toolbar.name === "DITA Map") {
ditaToolbar = toolbar;
}
}
}
if (ditaToolbar) {
ditaToolbar.children.push({
type: 'list',
name: 'DITA Map Help',
iconDom: helpIcon,
children: [
{
id: "ditamap-help-move-topics",
type: "action"
},
{
id: "ditamap-help-move-sections",
type: "action"
},
{
id: "ditamap-help-remove-sections-topics",
type: "action"
}
]
});
}
});
}
})();
For what it's worth, I used the Implementing a Custom Action tutorial in the Web Author JavaScript API documentation [1].
[1] https://www.oxygenxml.com/maven/com/oxy ... ction.html
Thanks!
Daniel