Skip to content

Localize example #2140

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Parvinmh wants to merge 2 commits into from
Closed

Localize example #2140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b401843
fix some tests and accessibilities
Parvinmh Sep 21, 2025
c0733f9
add example for localize
Parvinmh Sep 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions example/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ <h3 class="muted">Examples</h3>
<li><a href="hint/index.html" title='Basic hints usage'>Basic hints usage</a></li>
<li><a href="hint/withElement.html" title='Basic hints usage on an element'>Basic hints usage on an element</a></li>
<li><a href="programmatic/hint.html" title='Programmatic defining hints using JSON'>Programmatic defining hints using JSON</a></li>
<li><a href="language-import/index.html" title='Language Import Example'>Language Import Example</a></li>
</ul>
</div>
</body>
Expand Down
295 changes: 295 additions & 0 deletions example/language-import/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,295 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Intro.js Language Import Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Example showing how to import language files directly from intro.js">

<!-- Add IntroJs styles -->
<link href="../../dist/introjs.css" rel="stylesheet">

<style>
body {
font-family: Arial, sans-serif;
margin: 40px;
line-height: 1.6;
}

.container {
max-width: 800px;
margin: 0 auto;
}

.step-element {
background: #f0f0f0;
padding: 20px;
margin: 20px 0;
border-radius: 8px;
border: 2px solid #ddd;
}

.buttons {
margin: 30px 0;
}

.btn {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
margin: 5px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}

.btn:hover {
background: #0056b3;
}

.btn-spanish { background: #dc3545; }
.btn-spanish:hover { background: #c82333; }

.btn-french { background: #28a745; }
.btn-french:hover { background: #218838; }

.btn-german { background: #ffc107; color: #212529; }
.btn-german:hover { background: #e0a800; }

.btn-persian { background: #6f42c1; }
.btn-persian:hover { background: #5a32a3; }

.code-example {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 4px;
padding: 15px;
margin: 20px 0;
font-family: 'Courier New', monospace;
font-size: 14px;
overflow-x: auto;
}

h1 { color: #333; }
h2 { color: #666; margin-top: 30px; }
</style>
</head>

<body>
<div class="container">
<h1 id="step1" data-intro="Welcome to the language import example!" data-step="1">
Intro.js Language Import Example
</h1>

<p>This example demonstrates how to import language files directly from intro.js and use them in your tours.</p>

<div class="buttons">
<button class="btn" onclick="startEnglishTour()">English Tour</button>
<button class="btn btn-spanish" onclick="startSpanishTour()">Spanish Tour (Español)</button>
<button class="btn btn-french" onclick="startFrenchTour()">French Tour (Français)</button>
<button class="btn btn-german" onclick="startGermanTour()">German Tour (Deutsch)</button>
<button class="btn btn-persian" onclick="startPersianTour()">Persian Tour (فارسی)</button>
</div>

<div class="step-element" id="step2" data-intro="This is the second step of our tour" data-step="2">
<h2>Step 2: Content Area</h2>
<p>This area contains some sample content for the tour demonstration.</p>
</div>

<div class="step-element" id="step3" data-intro="Here you can see more features" data-step="3">
<h2>Step 3: Features Section</h2>
<p>This section showcases different features and capabilities.</p>
</div>

<div class="step-element" id="step4" data-intro="This is the final step" data-step="4">
<h2>Step 4: Final Section</h2>
<p>This is the last step of our tour. Thank you for following along!</p>
</div>

<h2>Code Examples</h2>

<h3>Method 1: ES6 Module Import (Recommended)</h3>
<div class="code-example">
// Import specific language files
import introJs, { es_ES, fr_FR, de_DE, fa_IR } from 'intro.js';

// Use imported language
function startSpanishTour() {
introJs.tour().setOptions({
language: es_ES,
showStepNumbers: true,
steps: [
{ element: '#step1', intro: 'Bienvenido al ejemplo' },
{ element: '#step2', intro: 'Este es el segundo paso' },
{ element: '#step3', intro: 'Aquí puedes ver más características' },
{ element: '#step4', intro: 'Este es el paso final' }
]
}).start();
}
</div>

<h3>Method 2: Dynamic Import (For Lazy Loading)</h3>
<div class="code-example">
// Dynamic import for lazy loading
async function startSpanishTour() {
const { es_ES } = await import('intro.js');

introJs.tour().setOptions({
language: es_ES,
steps: [/* your steps */]
}).start();
}
</div>

<h3>Method 3: CommonJS Require (Node.js)</h3>
<div class="code-example">
// CommonJS import
const introJs = require('intro.js');
const { es_ES, fr_FR } = require('intro.js');

// Use the imported language
introJs.tour().setOptions({
language: es_ES
}).start();
</div>
</div>

<!-- Add IntroJs script -->
<script type="module">
// Import intro.js and language files
import introJs, { en_US, es_ES, fr_FR, de_DE, fa_IR } from '../../dist/intro.module.js';

// Make functions available globally for button onclick handlers
window.startEnglishTour = function() {
introJs.tour().setOptions({
language: en_US,
showStepNumbers: true,
dontShowAgain: true,
steps: [
{
element: '#step1',
intro: 'Welcome to the Intro.js language import example! This demonstrates how to use imported language files.'
},
{
element: '#step2',
intro: 'This is the second step. Notice how all the button labels are in English.'
},
{
element: '#step3',
intro: 'Here you can see more features and how the step numbers work.'
},
{
element: '#step4',
intro: 'This is the final step. You can also see the "Don\'t show again" option.'
}
]
}).start();
};

window.startSpanishTour = function() {
introJs.tour().setOptions({
language: es_ES,
showStepNumbers: true,
dontShowAgain: true,
steps: [
{
element: '#step1',
intro: '¡Bienvenido al ejemplo de importación de idiomas de Intro.js! Esto demuestra cómo usar archivos de idioma importados.'
},
{
element: '#step2',
intro: 'Este es el segundo paso. Observa cómo todas las etiquetas de los botones están en español.'
},
{
element: '#step3',
intro: 'Aquí puedes ver más características y cómo funcionan los números de paso.'
},
{
element: '#step4',
intro: 'Este es el paso final. También puedes ver la opción "No mostrar esto de nuevo".'
}
]
}).start();
};

window.startFrenchTour = function() {
introJs.tour().setOptions({
language: fr_FR,
showStepNumbers: true,
dontShowAgain: true,
steps: [
{
element: '#step1',
intro: 'Bienvenue dans l\'exemple d\'importation de langues Intro.js ! Ceci démontre comment utiliser les fichiers de langue importés.'
},
{
element: '#step2',
intro: 'Ceci est la deuxième étape. Remarquez comment toutes les étiquettes de boutons sont en français.'
},
{
element: '#step3',
intro: 'Ici vous pouvez voir plus de fonctionnalités et comment les numéros d\'étapes fonctionnent.'
},
{
element: '#step4',
intro: 'Ceci est l\'étape finale. Vous pouvez aussi voir l\'option "Ne plus afficher ceci".'
}
]
}).start();
};

window.startGermanTour = function() {
introJs.tour().setOptions({
language: de_DE,
showStepNumbers: true,
dontShowAgain: true,
steps: [
{
element: '#step1',
intro: 'Willkommen zum Intro.js Sprach-Import-Beispiel! Dies zeigt, wie man importierte Sprachdateien verwendet.'
},
{
element: '#step2',
intro: 'Dies ist der zweite Schritt. Beachten Sie, wie alle Button-Labels auf Deutsch sind.'
},
{
element: '#step3',
intro: 'Hier können Sie weitere Funktionen sehen und wie die Schrittnummern funktionieren.'
},
{
element: '#step4',
intro: 'Dies ist der letzte Schritt. Sie können auch die Option "Nicht wieder anzeigen" sehen.'
}
]
}).start();
};

window.startPersianTour = function() {
introJs.tour().setOptions({
language: fa_IR,
showStepNumbers: true,
dontShowAgain: true,
steps: [
{
element: '#step1',
intro: 'به مثال وارد کردن زبان Intro.js خوش آمدید! این نشان می‌دهد که چگونه از فایل‌های زبان وارد شده استفاده کنید.'
},
{
element: '#step2',
intro: 'این مرحله دوم است. توجه کنید که همه برچسب‌های دکمه به فارسی هستند.'
},
{
element: '#step3',
intro: 'اینجا می‌توانید ویژگی‌های بیشتری ببینید و نحوه کارکرد شماره مراحل را مشاهده کنید.'
},
{
element: '#step4',
intro: 'این مرحله نهایی است. همچنین می‌توانید گزینه "دیگر این را نشان نده" را ببینید.'
}
]
}).start();
};
</script>
</body>
</html>
8 changes: 8 additions & 0 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,14 @@ import { version } from "../package.json";
import { Hint } from "./packages/hint";
import { Tour } from "./packages/tour";

// Export language files for direct import
export { default as en_US } from "./i18n/en_US";
export { default as es_ES } from "./i18n/es_ES";
export { default as fr_FR } from "./i18n/fr_FR";
export { default as de_DE } from "./i18n/de_DE";
export { default as fa_IR } from "./i18n/fa_IR";
export { Translator, type Language } from "./i18n/language";

class LegacyIntroJs extends Tour {
/**
* @deprecated introJs().addHints() is deprecated, please use introJs.hint().addHints() instead
Expand Down
4 changes: 1 addition & 3 deletions src/packages/tour/components/TourTooltip.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -331,13 +331,11 @@ const Buttons = ({
};

export const Header = ({
text,
title,
skipLabel,
renderAsHtml,
onSkipClick,
}: {
text: string;
title: string;
skipLabel: string;
renderAsHtml?: boolean;
Expand Down Expand Up @@ -468,7 +466,7 @@ export const TourTooltip = ({
const text = step.intro;
const position = step.position;

children.push(Header({ text, title, skipLabel, renderAsHtml, onSkipClick }));
children.push(Header({ title, skipLabel, renderAsHtml, onSkipClick }));

children.push(
TooltipContent({
Expand Down
5 changes: 4 additions & 1 deletion src/packages/tour/mock.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
dataPosition,
dataStepAttribute,
} from "./dataAttributes";
import { title } from "process";

const { div, b, a, h1 } = dom.tags;

Expand All @@ -23,7 +24,7 @@ export const appendMockSteps = (targetElement: HTMLElement = document.body) => {
"Mock element second to last"
);
mockElementThree.setAttribute(dataStepAttribute, "10");

mockElementThree.setAttribute(title, "this is title");
const mockElementFour = a();
mockElementFour.setAttribute(dataIntroAttribute, "Mock element last");
mockElementFour.setAttribute(dataStepAttribute, "20");
Expand Down Expand Up @@ -54,12 +55,14 @@ export const getMockPartialSteps = (): Partial<TourStep>[] => {
element: "h1",
},
{
title: "second title",
intro: "Step Four of the tour",
position: "right",
scrollTo: "off",
element: document.createElement("div"),
},
{
title: "third title",
element: ".not-found",
intro: "Element not found",
},
Expand Down
Loading
Loading