Parsing text using the translation function - JavaScript - SitePoint Forums

I am working on a plugin. I have two basic types of options that developers can use

toggleButtonHTML: '', 
//toggleButtonHTML: '',

They can only choose one or the other. The suspension option has been completely taken care of. In other words, I have my plugin correctly highlighting the button text + any hidden extensions (fsStyleSROnly is a screen reader-only class – so it hides text visually). The translation is perfect. This use case is if your design has a button called “Translate” and it opens a drop-down list of languages ​​that you can click to translate.

The other design style is what I’m trying to focus on. There may be situations where instead of “Translate” as a button, the active language used by the user is displayed. So, if you load the page into English, you can show the two-character code “EN” (which data point will be {lang}) or “English” that should be generated if using {language}. I have some problems. For example, I have this function which I was using to replace {lang} and {language} but this function alone is not enough because upon initial rendering, it will replace {lang} and {language} which means future translations cannot be translated correctly. For example, it might translate English to “Ingles” instead of “Espanol”. So this function should be updated to check extensions or {lang}/{language}

getUpdatedToggleButtonHTML() {
    const { toggleButtonHTML } = this;

    // Replace {lang} and {language} with the appropriate values
    const updatedHTML = toggleButtonHTML
      .replace(/{lang}/g, Weglot.getCurrentLang())
      .replace(/{language}/g, () => {
        const currentLang = Weglot.getCurrentLang();
        return Weglot.getLanguageName(currentLang);
      });

    return updatedHTML;
  }

So the new try

getUpdatedToggleButtonHTML() {
  const { toggleButtonHTML } = this;
  const currentLang = Weglot.getCurrentLang();
  const translatedLanguageName = Weglot.getLanguageName(currentLang);

  // Check for the existence of {lang} or {language}
  const hasLangOrLanguage = /{lang}|{language}/.test(toggleButtonHTML);

  // Replace either {lang}/{language} or the spans with the appropriate values
  let updatedHTML = toggleButtonHTML;
  if (hasLangOrLanguage) {
    updatedHTML = updatedHTML
      .replace(/{lang}/g, `${currentLang}`)
      .replace(/{language}/g, `${translatedLanguageName}`);
  }

  return updatedHTML;
}

However, this new code has two problems: The toggle button will not be clicked to open the drop-down menu. I see that in the inspector something Happens for themes, but even if I open the dropdown manually (disabling some CSS), the button text remains “English”

The only other relevant function is addToggleButton() which is fired if you choose to output the toggleButton (it has it as a boolean value). So, the function is called, the addToggleButton is fired, and it’s off to the races… The accessibility function is irrelevant imo. It does things like support the arrow, escape, do attributes, etc

addToggleButton() {
    const toggleButton = $(this.target).prepend(this.getUpdatedToggleButtonHTML()).find('.fs-weglot-toggle');
    const dropdownList = $(this.target).find(".weglot-list");

    // Accessibility function
    this.toggleButtonAccessibility(toggleButton, dropdownList);

    // Store the original text and inner span text separately
    const originalButtonText = toggleButton.contents().filter(function () {
      return this.nodeType === 3; // Text node
    }).text().trim();

    const originalInnerSpanText = toggleButton.find("span.fsStyleSROnly").text().trim();

    // Update the toggle button text when the language changes
    Weglot.on("languageChanged", (newLang, prevLang) => {
      // Strip the inner span if it exists
      const innerSpan = toggleButton.find("span.fsStyleSROnly");
      if (innerSpan.length) {
        this.translateText(innerSpan.text(), newLang, (translatedText) => {
          innerSpan.text(`${translatedText}`);
        });
      }

      // Translate the button text using the stored original text
      this.translateText(originalButtonText, newLang, (translatedText) => {
        toggleButton.contents().filter(function () {
          return this.nodeType === 3; // Remove existing text nodes
        }).remove();

        // Insert the translated text as a new text node
        toggleButton.prepend(document.createTextNode(`${translatedText}`));

        // Translate the original inner span text
        this.translateText(originalInnerSpanText, newLang, (translatedInnerSpanText) => {
          // Remove existing inner span
          innerSpan.remove();

          // Append the translated inner span after translation only if it's not empty
          if (translatedInnerSpanText) {
            toggleButton.append(` ${translatedInnerSpanText}`);
          }
        });
        
      });
    });

    // Close dropdown when clicking outside
    $(document).on("click", (event) => {
      const isDropdownClick = dropdownList.is(event.target) || dropdownList.has(event.target).length > 0;
      const isToggleButtonClick = toggleButton.is(event.target);

      if (!isDropdownClick && !isToggleButtonClick) {
        dropdownList.removeClass("weglot-list-open");
        toggleButton.removeClass("active").attr('aria-expanded', 'false').focus();
      }
    });
  }

How can I make this command work so that it works if {lang} (“EN”) or {language} (“English”) is used? In my opinion, if toggleButtonHTML contains either of these, it should be replaced with With some kind of data language type attribute that we can then use to say “Hey, this shouldn’t be translated naturally, like English, but rather update it with the new {lang} or {language} (I have functions that can get me this information – I Just need to discover it)

Thank you.