-
Notifications
You must be signed in to change notification settings - Fork 2
/
demo.html
307 lines (304 loc) · 14.2 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Internation for Reveal.js</title>
<meta name="description" content="">
<meta name="author" content="Martinomagnifico">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="../dist/reset.css">
<link rel="stylesheet" href="../dist/reveal.css">
<link rel="stylesheet" href="../dist/theme/black.css">
<link rel="stylesheet" href="css/demo.css">
</head>
<body>
<div class="reveal"><a class="github-corner" href="https://github.com/Martinomagnifico/reveal.js-internation" target="blank" title="View source on GitHub">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55">
<path fill="currentColor" d="M27.5 11.2a16.3 16.3 0 0 0-5.1 31.7c.8.2 1.1-.3 1.1-.7v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.2-1 .6-1.8 1-2.2-3.5-.4-7.3-1.8-7.3-8 0-1.8.6-3.3 1.6-4.4-.1-.5-.7-2.1.2-4.4 0 0 1.4-.4 4.5 1.7a15.6 15.6 0 0 1 8.1 0c3.1-2 4.5-1.7 4.5-1.7.9 2.3.3 4 .2 4.4 1 1 1.6 2.6 1.6 4.3 0 6.3-3.8 7.7-7.4 8 .6.6 1.1 1.6 1.1 3v4.6c0 .4.3.9 1.1.7a16.3 16.3 0 0 0-5.2-31.7"></path>
</svg></a>
<div class="menubar right" id="menubar">
<div class="dropdown">
<input id="checkbox_toggle" type="checkbox">
<label for="checkbox_toggle" data-i18n="chooselanguage">Choose language</label>
<div class="langchooser">
<label>
<input type="radio" name="menulangradios" value="en" checked><span>English</span>
</label>
<label>
<input type="radio" name="menulangradios" value="fr"><span>Français</span>
</label>
<label>
<input type="radio" name="menulangradios" value="se"><span>Svenska</span>
</label>
<label>
<input type="radio" name="menulangradios" value="cn"><span>中文</span>
</label>
<label>
<input type="radio" name="menulangradios" value="nl"><span>Nederlands</span>
</label>
<label>
<input type="radio" name="menulangradios" value="ar"><span>العربية</span>
</label>
</div>
</div>
</div>
<div class="slides">
<section id="intro" data-state="hide-menubar">
<h1 class="lowercase" data-i18n="title">Internation</h1>
<h3 data-i18n="subtitle">for Reveal.js</h3>
<div class="langchooser flags" dir="ltr">
<label>
<input type="radio" name="langradios" value="en" checked><img src="img/en.png">
</label>
<label>
<input type="radio" name="langradios" value="fr"><img src="img/fr.png">
</label>
<label>
<input type="radio" name="langradios" value="se"><img src="img/se.png">
</label>
<label>
<input type="radio" name="langradios" value="cn"><img src="img/cn.png">
</label>
<label>
<input type="radio" name="langradios" value="nl"><img src="img/fr.png" style="transform: rotate(-90deg)">
</label>
<label>
<input type="radio" name="langradios" value="ar"><img src="img/ar.png">
</label>
</div>
</section>
<section>
<section id="examples">
<h2 data-i18n="title">Examples</h2>
</section>
<section id="fruit">
<h3 data-i18n="title">Fruit</h3>
<div class="row">
<div class="col"><img src="img/apple.png">
<p data-i18n="apple">An apple</p>
</div>
<div class="col"><img src="img/orange.png">
<p data-i18n="orange">An orange</p>
</div>
</div>
</section>
<section id="diner">
<h3 data-i18n="title">Diner</h3>
<div class="row">
<div class="col"><img src="img/pizza.png">
<p data-i18n="pizza">A pizza</p>
</div>
<div class="col"><img src="img/hamburger.png">
<p data-i18n="hamburger">A hamburger</p>
</div>
</div>
</section>
<section id="animals">
<h3 data-i18n="title">Animals</h3>
<div class="row">
<div class="col"><img src="img/dog.png">
<p data-i18n="dog">A dog</p>
</div>
<div class="col"><img src="img/cat.png">
<p data-i18n="cat">A cat</p>
</div>
</div>
</section>
<section id="html">
<h3 data-i18n="title">HTML Content</h3>
<p data-i18n="paragraph">This is a normal paragraph with text.</p>
<p data-i18n="htmlparagraph">This is a paragraph that has <a href="#">HTML</a> in it.</p>
</section>
</section>
<section data-state="hide-menubar">
<section>
<h2>Setup</h2>
</section>
<section>
<h3>Step 1. Define current language</h3>
<p class="small">Internation has English as default language. You can change it if you like in the options:</p>
<pre><code class="hljs">Reveal.initialize({
//
internation: {
locale: "en",
localename: 'English'
},
plugins: [ Internation ]
});
</code></pre>
</section>
<section>
<h3>Step 2. Adding data-attributes</h3>
<pre><code><section id="intro">
<h1 data-i18n="title">Hello!</h1>
<p data-i18n="paragraph1">There is a <a href="#">link</a> in the paragraph</p>
</section>
</code></pre>
<p class="small">Add a data-attribute of <code>data-i18n="something"</code> to the text you want to translate. Skip elements that are common in all languages.</p>
<p class="small">Internation reads HTML by default. If some text contains a span or link, it is better to take that whole piece for translation. If you turn the HTML setting off in the options (you can), you would need to make spans of every text that is not a link.</p>
</section>
<section>
<h3>Step 3. Creating JSON</h3>
<p class="small">Internation can automatically generate a JSON file for you based on the existing HTML content of the elements. First turn it on in the options (make sure you have added data-attributes in step 2):</p>
<pre><code>Reveal.initialize({
//
internation: {
makejson: true
},
plugins: [ Internation ]
});</code></pre>
<p class="small">Next, load the page with this URL parameter: <code>...index.html?makejson</code>. This will immediately download a JSON file of your current HTML. The URL step is a safeguard for if you accidentally publish with <code>makejson:true</code> in the options turned on.</p>
</section>
<section>
<h3>Step 4. Start translating</h3>
<p class="small">Make a copy of your first language JSON. Give the file a name that is obvious (so, fr.json for French). </p>
<p class="small"><b>Now start translating!</b> When you are finished, put the file in an obvious location on your website.</p>
<p class="small">Note: <em>If an element has the data-attribute, but is missing in the dictionary of your new language, it will stay in the original language.</em></p>
</section>
<section>
<h3>Step 5A. Refer to a language file</h3>
<pre><code>Reveal.initialize({
//
internation: {
languages: {
fr: {
name: "Français",
dictionary: "fr.json"
}
}
},
plugins: [ Internation ]
});
</code></pre>
<p class="small">A language in Internation contains both a name and a dictionary. This example shows that a JSON file is used for the dictionary. JSON files will only work if there is a server. It will not work with the file:// protocol.</p>
</section>
<section>
<h3>Step 5B. Or a language object</h3>
<pre><code>Reveal.initialize({
//
internation: {
languages: {
fr: {
name: "Français",
dictionary: {
"slides" : {
"intro":{"title":"Bonjour!"}
}
}
}
}
},
plugins: [ Internation ]
});
</code></pre>
<p class="small">If you really want to allow local file access, you can put the whole dictionary object in the specific language object in your options.</p>
</section>
<section>
<h3>The dictionary / JSON</h3>
<pre><code>{
"slides" : {
"intro":{
"title":"Bonjour!",
"paragraph1":"Ceci est un paragraphe"
},
"animals":{
"title":"Animaux",
"dog":"Chien",
"cat":"Chat",
}
},
"menubar" : {
"title":"Voici le titre",
}
}
</code></pre>
<p class="small">To get a human-readable structure, Internation looks for a 'slides' object for any sections with ID's. It will also look for any elements with an ID that are outside of the slides, like a menu bar that is visible on all slides.</p>
</section>
<section>
<h3>Switching languages</h3>
<p class="small">If you want multiple languages, you will probably also want users to choose. Internation listens to 'change' events of either a select or a set of radio buttons. By default, this is any element with the class <code>langchooser</code>, but that classname can be changed in the options.</p>
<p class="small">You can put these on a slide (like the first page with the flags) or outside them in an element that is visible on multiple slides (like the menubar in the examples).</p>
</section>
</section>
</div>
</div>
<script src="../dist/reveal.js"></script>
<script src="plugin/internation/internation.js"></script>
<script>
Reveal.initialize({
transition: "slide",
history: true,
internation: {
switchselector: ".langchooser",
languages: {
fr: {
name: "Français",
dictionary: "fr.json"
},
se: {
name: "Svenska",
dictionary: "se.json"
},
cn: {
name: "中文",
dictionary: "cn.json"
},
ar: {
name: "العربية",
dictionary: "ar.json",
direction: "rtl"
},
nl: {
name: "Nederlands",
dictionary: {
menubar: {
chooselanguage: "Kies een taal"
},
slides: {
examples: {
title: "Voorbeelden"
},
intro: {
subtitle: "voor Reveal.js"
},
fruit: {
title: "Vruchten",
apple: "Een appel",
orange: "Een sinaasappel"
},
diner: {
title: "Diner",
pizza: "Een pizza",
hamburger: "Een hamburger"
},
animals: {
title: "Dieren",
dog: "Een hond",
cat: "Een kat"
},
html: {
title: "HTML Inhoud",
paragraph: "Dit is een paragraaf.",
htmlparagraph: "Dit is een paragraaf die <a href=\"#\">HTML</a> bevat."
}
}
}
}
}
},
plugins: [
Internation
]
});
</script>
<!-- The script below closes the fake 'select' if an option is chosen;-->
<script>
let dropdown = document.querySelector('.menubar .langchooser');
let label = document.querySelector('.menubar .dropdown > label');
dropdown.addEventListener("click", function(e) {
label.click();
}, false);
</script>
</body>
</html>