How to Provide Localized Strings for Custom Action Implemented in JavaScript API

[dreifsnider]

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:

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"
                        }
                    ]
                });
            }
        });
    }
})();

This results in the following toolbar button drop-down:

image.png (77.87 KiB) Viewed 173 times

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

[Bogdan Dumitru]

Hi,

To localize actions messages you have to use the Translation JavaScript API:

1. register your messages via sync.Translation.addTranslations like this:

   Code: Select all

   let msgs={
   	YES_KEY_ : {
   		"en_US" : "Yes",
   		"de_DE" : "Ja",
   		"fr_FR" : "Oui",
   		"ja_JP" : "はい",
   		"nl_NL" : "Ja",
   		"zh_CN" : "是的"
   	}
   };
   sync.Translation.addTranslations(msgs);
   

2. and use the message key instead of the hardcoded "Yes" string:

   Code: Select all

   tr(msgs["YES_KEY_"])

Notice that this allows just to add new messages for the default languages set, you cannot add a new language.