Translating strings that weren't translated on the server

translation.js

jQuery(function ($) {

    function applyTranslation(stringInfo, currentLanguage) {
        const elements = $(stringInfo.selector);

        if (!elements.length) {
            return;
        }

        const translation = stringInfo.translations
            .find(t => t.language === currentLanguage)
            .translation;

        if (!translation) {
            return;
        }

        elements.each(function () {
            const element = stringInfo.selectParent ? $(this).parent() : $(this);
            switch (stringInfo.elementType) {
                case 'placeholder':
                    const placeholderValue = $(element).attr("placeholder");
                    if (placeholderValue) {
                        $(element).attr("placeholder", placeholderValue.replace(stringInfo.text, translation));
                    }
                    break;
                case 'title':
                    const titleValue = $(element).attr("title");
                    if (titleValue) {
                        $(element).attr("title", titleValue.replace(stringInfo.text, translation));
                    }
                    break;
                case 'value':
                    const elementValue = $(element).val();
                    if (elementValue) {
                        $(element).val(elementValue.replace(stringInfo.text, translation));
                    }
                    break;
                default:
                    if (stringInfo.hasSiblingHtml) {
                        const innerHtml = $(element).html();
                        if (innerHtml) {
                            $(element).html(innerHtml.replace(stringInfo.text, translation));
                        }
                    } else {
                        const innerText = $(element).text();
                        if (innerText) {
                            $(element).text(innerText.replace(stringInfo.text, translation));
                        }
                    }
            }
        });
    }

    $(document).ready(function () {
        const currentLanguage = "jp";
        const translationStrings = [
            {
                "text": "Get Directions",
                "elementType": "h2",
                "selector": "h2.wpgmza-directions-box__title",
                "translations": [
                    {
                        "language": "jp",
                        "translation": "ルート"
                    }
                ]
            },
            {
                "text": "Get Directions",
                "elementType": "a",
                "selector": "a.wpgmza_gd",
                "useInfoWindowOpenEvent": true,
                "translations": [
                    {
                        "language": "jp",
                        "translation": "ルート"
                    }
                ]
            },
            {
                "text": "From",
                "elementType": "placeholder",
                "selector": "input.wpgmza-address.wpgmza-directions-from",
                "translations": [
                    {
                        "language": "jp",
                        "translation": "出発地"
                    }
                ]
            },
            {
                "text": "Via",
                "elementType": "placeholder",
                "selector": "input.wpgmza-waypoint-via",
                "useMutationObserver": true,
                "mutationTarget": "div.wpgmza-directions-locations",
                "translations": [
                    {
                        "language": "jp",
                        "translation": "経由地"
                    }
                ]
            },
            {
                "text": "To",
                "elementType": "placeholder",
                "selector": "input.wpgmza-address.wpgmza-directions-to",
                "translations": [
                    {
                        "language": "jp",
                        "translation": "目的地"
                    }
                ]
            },
            {
                "text": "Add Waypoint",
                "elementType": "anchor",
                "hasSiblingHtml": true,
                "selector": "a.wpgmaps_add_waypoint",
                "translations": [
                    {
                        "language": "jp",
                        "translation": "経由地を追加"
                    }
                ]
            },
            {
                "text": "hide options",
                "elementType": "anchor",
                "hasSiblingHtml": true,
                "selector": "a.wpgmza-hide-directions-options",
                "translations": [
                    {
                        "language": "jp",
                        "translation": "オプションを閉じる"
                    }
                ]
            },
            {
                "text": "show options",
                "elementType": "anchor",
                "hasSiblingHtml": true,
                "selector": "a.wpgmza-show-directions-options",
                "translations": [
                    {
                        "language": "jp",
                        "translation": "オプション"
                    }
                ]
            },
            {
                "text": "Avoid Tolls",
                "elementType": "label",
                "hasSiblingHtml": true,
                "selectParent": true,
                "selector": "input.wpgmza-avoid-tolls",
                "translations": [
                    {
                        "language": "jp",
                        "translation": "有料道路を使わない"
                    }
                ]
            },
            {
                "text": "Avoid Highways",
                "elementType": "label",
                "hasSiblingHtml": true,
                "selectParent": true,
                "selector": "input.wpgmza-avoid-highways",
                "translations": [
                    {
                        "language": "jp",
                        "translation": "高速道路を使わない"
                    }
                ]
            },
            {
                "text": "Avoid Ferries",
                "elementType": "label",
                "hasSiblingHtml": true,
                "selectParent": true,
                "selector": "input.wpgmza-avoid-ferries",
                "translations": [
                    {
                        "language": "jp",
                        "translation": "フェリーを利用しない"
                    }
                ]
            },
            {
                "text": "Use my location",
                "elementType": "title",
                "selector": "button.wpgmza-use-my-location",
                "useMutationObserver": true,
                "mutationTarget": "div.wpgmza-directions-locations",
                "translations": [
                    {
                        "language": "jp",
                        "translation": "現在地"
                    }
                ]
            },
            {
                "text": "Go",
                "elementType": "value",
                "selector": "input.wpgmza-get-directions[value='Go']",
                "translations": [
                    {
                        "language": "jp",
                        "translation": "開始"
                    }
                ]
            },
            {
                "text": "Print directions",
                "elementType": "anchor",
                "selector": "a.wpgmza-print-directions",
                "translations": [
                    {
                        "language": "jp",
                        "translation": "印刷する"
                    }
                ]
            },
            {
                "text": "Reset directions",
                "elementType": "anchor",
                "selector": "a.wpgmza-reset-directions",
                "translations": [
                    {
                        "language": "jp",
                        "translation": "リセットする"
                    }
                ]
            }
        ];

        translationStrings.forEach(s => applyTranslation(s, currentLanguage));
        translationStrings.filter(s => s.useMutationObserver)
            .forEach(function (s) {
                const elementToObserve = $(s.mutationTarget)[0];
                if (elementToObserve) {
                    const observer = new MutationObserver(function () {
                        applyTranslation(s, currentLanguage);
                    });
                    observer.observe(elementToObserve, { childList: true });
                }
            });
        translationStrings.filter(s => s.useInfoWindowOpenEvent)
            .forEach(function (s) {
                $(document).on('infowindowopen.wpgmza', function (event) {
                    applyTranslation(s, currentLanguage);
                });
            });

    });
});