add multi-language support (localization)

src/i18n/de_DE.ts

@@ -0,0 +1,11 @@
+export default {
+  buttons: {
+    next: "Weiter",
+    prev: "Zurück",
+    skip: "Überspringen",
+    done: "Fertig",
+  },
+  alerts: {
+    dontShowAgainLabel: "Nicht mehr anzeigen",
+  },
+};

src/i18n/en_US.ts

@@ -0,0 +1,11 @@
+export default {
+  buttons: {
+    next: "Next",
+    prev: "Back",
+    skip: "Skip",
+    done: "Done",
+  },
+  alerts: {
+    dontShowAgainLabel: "Don't show this again",
+  },
+};

src/i18n/es_ES.ts

@@ -0,0 +1,11 @@
+export default {
+  buttons: {
+    next: "Siguiente",
+    prev: "Atrás",
+    skip: "Saltar",
+    done: "Hecho",
+  },
+  alerts: {
+    dontShowAgainLabel: "No mostrar de nuevo",
+  },
+};

src/i18n/fa_IR.ts

@@ -0,0 +1,11 @@
+export default {
+  buttons: {
+    next: "بعدی",
+    prev: "قبلی",
+    skip: "رد کردن",
+    done: "پایان",
+  },
+  alerts: {
+    dontShowAgainLabel: "دیگه نشون نده",
+  },
+};

src/i18n/fr_FR.ts

@@ -0,0 +1,11 @@
+export default {
+  buttons: {
+    next: "Suivant",
+    prev: "Retour",
+    skip: "Passer",
+    done: "Terminé",
+  },
+  alerts: {
+    dontShowAgainLabel: "Ne plus afficher",
+  },
+};

src/i18n/language.ts

@@ -0,0 +1,52 @@
+import enUS from "./en_US";
+
+type MessageFormat = (...args: any[]) => string;
+type Message = string | MessageFormat;
+export type Language = { [key: string]: Message | Language };
+
+export class Translator {
+  private _language: Language;
+
+  constructor(language?: Language) {
+    if (language) {
+      this._language = language;
+    } else {
+      const browserLang = navigator.language.replace("-", "_");
+      try {
+        this._language = require(`./${browserLang}`).default;
+      } catch {
+        this._language = enUS;
+      }
+    }
+  }
+
+  setLanguage(language: Language) {
+    this._language = language;
+  }
+
+  private getString(message: string, lang: Language): MessageFormat | null {
+    if (!lang || !message) return null;
+
+    const splitted = message.split(".");
+    const key = splitted[0];
+
+    if (lang[key]) {
+      const val = lang[key];
+
+      if (typeof val === "string") {
+        return (): string => val;
+      } else if (typeof val === "function") {
+        return val;
+      } else {
+        return this.getString(splitted.slice(1).join("."), val);
+      }
+    }
+
+    return null;
+  }
+
+  translate(message: string, ...args: any[]): string {
+    const translated = this.getString(message, this._language);
+    return translated ? translated(...args) : message;
+  }
+}

src/packages/tour/option.ts

@@ -1,5 +1,6 @@
 import { TooltipPosition } from "../../packages/tooltip";
 import { TourStep, ScrollTo } from "./steps";
+import { Language } from "../../i18n/language";
 
 export interface TourOptions {
   steps: Partial<TourStep>[];
@@ -74,14 +75,17 @@ export interface TourOptions {
   progressBarAdditionalClass: string;
   /* Optional property to determine if content should be rendered as HTML */
   tooltipRenderAsHtml?: boolean;
+  /* Optional property to set the language of the tour.
+   Defaults to the user's browser language if not provided. */
+  lang?: Language;
 }
 
 export function getDefaultTourOptions(): TourOptions {
   return {
     steps: [],
     isActive: true,
     nextLabel: "Next",
-    prevLabel: "Back",
+    prevLabel: "Prev",
     skipLabel: "×",
     doneLabel: "Done",
     hidePrev: false,

src/packages/tour/tour.ts

@@ -22,6 +22,7 @@ import onKeyDown from "./onKeyDown";
 import dom from "../dom";
 import { TourRoot } from "./components/TourRoot";
 import { FloatingElement } from "./components/FloatingElement";
+import { Translator } from "../../i18n/language";
 
 /**
  * Intro.js Tour class
@@ -35,6 +36,7 @@ export class Tour implements Package<TourOptions> {
   private readonly _targetElement: HTMLElement;
   private _options: TourOptions;
   private _floatingElement: Element | undefined;
+  private _translator: Translator;
 
   private readonly callbacks: {
     beforeChange?: introBeforeChangeCallback;
@@ -64,6 +66,15 @@ export class Tour implements Package<TourOptions> {
     this._options = options
       ? setOptions(this._options, options)
       : getDefaultTourOptions();
+
+    this._translator = new Translator(this._options.lang);
+
+    this._options.nextLabel = this._translator.translate("buttons.next");
+    this._options.prevLabel = this._translator.translate("buttons.prev");
+    this._options.doneLabel = this._translator.translate("buttons.done");
+    this._options.dontShowAgainLabel = this._translator.translate(
+      "alerts.dontShowAgainLabel"
+    );
   }
 
   /**