Function initSettings

popup/index.js:732–922

()

}

function initSettings() {
  settingsBtn.onclick = () => {
    trackEvent("CLICK_SETTINGS");

    const body = document.createElement("div");
    body.classList.add("settings-body");

    // select language
    const langRow = document.createElement("div");
    const curLang = getLang();
    langRow.classList.add("row");
    langRow.innerHTML = `
      <div class="label">${t({ en: "Language", vi: "Ngôn ngữ" })}</div>
      <div class="right-container">
        <img src="${getFlag(curLang)}" />
        <select class="select">
        ${LANG_KEY.map(
          (key) =>
            `<option value="${key}" ${key === curLang ? "selected" : ""}>
                ${LANG[key]}
              </option>`
        ).join("")}
        </select>
      </div>
    `;
    const select = langRow.querySelector(".select");
    select.onchange = (event) => {
      let newLang = event.target.value;
      trackEvent("CHANGE-LANGUAGE-" + newLang);
      setLang(newLang);

      // reset UI
      createTabs();
      checkForUpdate();

      // re-open setting modal
      settingsBtn.click();
      initTooltip();
    };
    body.appendChild(langRow);

    // select themes
    let curThemeKey = getTheme();
    let curThem = THEME[curThemeKey];
    const themeRow = document.createElement("div");
    themeRow.classList.add("row");
    const author = curThem?.author
      ? `<a target="_blank" href="${curThem.author.link}" data-tooltip="${t({
          vi: "Tác giả: " + curThem.author.name,
          en: "Author: " + curThem.author.name,
        })}" data-flow="left">
        <img src="${curThem.author.avatar}" class="avatar" />
      </a>`
      : "";
    themeRow.innerHTML = `
      <div class="label">${t({ en: "Theme", vi: "Chủ đề" })}</div>
      <div class="right-container">
        ${author}