Skip to content

Commit 18ad30b

Browse files
GodofbrowserGodofbrowser
committed
Added Chinese translation.
1 parent bfa831d commit 18ad30b

File tree

12 files changed

+276
-47
lines changed

12 files changed

+276
-47
lines changed

‎docs/css/app.main.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8">
55
<title>VueJs Plugin usage example</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<link href="css/app.main.css?00525d5dedc44076e29a" rel="stylesheet"></head>
7+
<link href="css/app.main.css?a4a359c14680a1adcc68" rel="stylesheet"></head>
88
<body>
99

1010
<div id="app"></div>
@@ -21,5 +21,5 @@
2121
ga('send', 'pageview');
2222

2323
</script>
24-
<script type="text/javascript" src="js/app.main.js?00525d5dedc44076e29a"></script></body>
24+
<script type="text/javascript" src="js/app.main.js?a4a359c14680a1adcc68"></script></body>
2525
</html>

‎docs/js/app.main.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/docs/components/app.vue

+39-28
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,110 @@
11
<template>
22
<div style="padding-bottom: 25px">
3+
34
<header>
5+
<a href="?lang=en" class="lang-btn">English</a>
6+
<a href="?lang=zh" class="lang-btn">中文</a>
7+
48
<div class="header-cont centered">
59
<h1 class="title">Vuejs Dialog Plugin</h1>
610
</div>
711

812
</header>
913

1014
<section style="max-width: 350px; margin:auto; text-align: center">
11-
<h2>Usage as a method</h2>
15+
<h2 class="title-case">{{ trans('content.titles.method_usage')}}</h2>
1216
<hr/>
1317
<h4>
14-
<button @click="showAlertDialog()">Alert Dialog - one button</button>
18+
<button @click="showAlertDialog()">{{ trans('content.examples.method_usage.1') }}</button>
1519
</h4>
1620

1721
<h4>
18-
<button @click="showHtmlDialog()">Html Dialog - style/format content</button>
22+
<button @click="showHtmlDialog()">{{ trans('content.examples.method_usage.2') }}</button>
1923
</h4>
2024

2125
<h4>
22-
<button @click="showBasicDialog()">Basic confirm - close instantly</button>
26+
<button @click="showBasicDialog()">{{ trans('content.examples.method_usage.3') }}</button>
2327
</h4>
2428

2529
<h4>
26-
<button @click="showLoadingDialog()">Loading Dialog - Useful with ajax</button>
30+
<button @click="showLoadingDialog()">{{ trans('content.examples.method_usage.4') }}</button>
2731
</h4>
2832

2933
<h4>
30-
<button @click="showReversedDialog()">Reversed Dialog - switch buttons</button>
34+
<button @click="showReversedDialog()">{{ trans('content.examples.method_usage.5') }}</button>
3135
</h4>
3236

3337
<h4>
34-
<button @click="showAnimationFadeDialog()">Fade Dialog - Animation</button>
38+
<button @click="showAnimationFadeDialog()">{{ trans('content.examples.method_usage.6') }}</button>
3539
</h4>
3640

3741
<h4>
38-
<button @click="showAnimationBounceDialog()">Bounce Dialog - Animation</button>
42+
<button @click="showAnimationBounceDialog()">{{ trans('content.examples.method_usage.7') }}</button>
3943
</h4>
4044
</section>
4145

4246
<section style="max-width: 350px; margin:auto; font-family: 'Noto Sans', sans-serif; text-align: center">
43-
<h2>Usage as a directive</h2>
47+
<h2 class="title-case">{{ trans('content.titles.directive_usage')}}</h2>
4448
<hr/>
4549

4650
<h4>
47-
<button v-confirm="`This is a message`">
48-
Give it a string v-confirm="This is a message"
51+
<button v-confirm="trans('messages.directive_string')">
52+
{{ trans('content.examples.directive_usage.1') }} v-confirm="'{{ trans('messages.directive_string') }}'"
4953
</button>
5054
</h4>
5155

5256
<h4>
53-
<a href="http://example.com" v-confirm="'This will take you to &quot;http://example.com&quot;. Proceed with caution'">Go to example.com</a>
57+
<a href="http://example.com" v-confirm="trans('messages.directive_link')">
58+
{{ trans('content.examples.directive_usage.2') }}
59+
</a>
5460
</h4>
5561

5662
<h4>
5763
<button v-confirm="{
58-
message: 'This dialog was also triggered using a v-confirm directive. It has both OK and CANCEL callback',
64+
message: trans('messages.directive_object'),
5965
ok: clickOkHandler,
6066
cancel: clickCancelHandler}"
6167
>
62-
Give it an object v-confirm="messageAndCallback"
68+
{{ trans('content.examples.directive_usage.3') }}
6369
</button>
6470
</h4>
6571

6672
<h4>
6773
<form @submit.prevent="submitDemo1Form()">
6874
<fieldset>
69-
<input v-model="forms.demo1.name" type="text" name="name" placeholder="Your name"/>
70-
<button type="reset" v-confirm="'Changes would be discarded. Reset this form?'">Reset</button>
71-
<button type="submit" v-confirm="'Submit this form?'">submit</button>
75+
<input v-model="forms.demo1.name" type="text" name="name" :placeholder="trans('placeholders.your_name')"/>
76+
<button type="reset" v-confirm="trans('messages.form_reset')">
77+
{{ trans('content.words.reset') }}
78+
</button>
79+
<button type="submit" v-confirm="trans('messages.form_submit')">
80+
{{ trans('content.words.submit') }}
81+
</button>
7282
</fieldset>
7383
</form>
7484
</h4>
7585
</section>
7686

7787

7888
<section style="max-width: 350px; margin:auto; font-family: 'Noto Sans', sans-serif; text-align: center">
79-
<h2>Confirmation types</h2>
89+
<h2>{{ trans('content.titles.confirmation_types')}}</h2>
8090
<hr/>
8191

82-
<p>Sometimes, you may want to be more strict by making sure a user really wants to proceed.</p>
83-
<p>The SOFT and HARD confirmation dialogs helps with that.</p>
92+
<p>{{ trans('content.descriptions.confirmation_types.1')}}</p>
93+
<p>{{ trans('content.descriptions.confirmation_types.2')}}</p>
8494

8595
<h4>
86-
<button @click="showSoftConfirmDialog()">Soft confirm - multiple clicks required</button>
96+
<button @click="showSoftConfirmDialog()"> {{ trans('content.examples.confirmation_types.1') }}</button>
8797
</h4>
8898

8999
<h4>
90-
<button @click="showHardConfirmDialog()">Hard confirm - verification text required</button>
100+
<button @click="showHardConfirmDialog()">{{ trans('content.examples.confirmation_types.2') }}</button>
91101
</h4>
92102
</section>
93103

94104
<notifications position="bottom left"></notifications>
95105

96106
<a href="https://github.com/godofbrowser/vuejs-dialog"
97-
v-confirm:soft="{html: true, message: exitMessage, cancelText: `Stay on Page`, okText: `Source Code`}">
107+
v-confirm:soft="{html: true, message: exitMessage, cancelText: `Stay on Page`, okText: trans('content.words.source_code')}">
98108
<img style="position: absolute; top: 0; right: 0; border: 0;"
99109
src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67"
100110
alt="Fork me on GitHub"
@@ -128,9 +138,10 @@
128138
console.log('mounted app')
129139
},
130140
methods: {
141+
trans,
131142
submitDemo1Form(){
132-
let msg = "Form Submited. Your Name: "
133-
msg += this.forms.demo1.name || 'The name field is empty'
143+
let msg = trans('placeholders.your_name') + ": "
144+
msg += this.forms.demo1.name || trans('messages.empty_name')
134145
this.$notify(msg)
135146
},
136147
showAlertDialog(){
@@ -164,7 +175,7 @@
164175
})
165176
},
166177
showHtmlDialog(){
167-
this.$dialog.alert(trans('messages.html'), {html: true, okText: 'Dismiss'})
178+
this.$dialog.alert(trans('messages.html'), {html: true, okText: trans('content.words.dismiss')})
168179
},
169180
showAnimationBounceDialog(){
170181
this.$dialog.alert(trans('messages.html'), {html: true, animation: 'bounce'})
@@ -176,7 +187,7 @@
176187
showLoadingDialog(){
177188
this.$dialog.confirm(trans('messages.loading'), {
178189
html: true,
179-
okText: 'Proceed',
190+
okText: trans('content.words.proceed'),
180191
loader: true
181192
}).then((dialog) => {
182193
setTimeout(() => {
@@ -192,7 +203,7 @@
192203
showReversedDialog(){
193204
this.$dialog.confirm(trans('messages.reverse'), {
194205
html: true,
195-
okText: 'Proceed',
206+
okText: trans('content.words.proceed'),
196207
loader: true,
197208
reverse: true
198209
}).then((dialog) => {

‎src/docs/js/copy-to-docs.js

+2-6
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,8 @@ const source = './dist/vuejs-dialog.min.js';
44
const dest = './docs/js/vuejs-dialog.min.js';
55

66
fs.copy(source, dest, function (err) {
7-
8-
if (err)
9-
{
7+
if (err) {
108
return console.error(err);
119
}
12-
13-
console.log('Copied to ' + dest);
14-
10+
return console.log('Copied to ' + dest);
1511
});

‎src/docs/js/translations.js

+17-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,25 @@
11
// mini translator
22

3-
import en from './translations/en'
3+
const TRANSLATIONS = {
4+
en: require('./translations/en').default,
5+
zh: require('./translations/zh').default
6+
//es: require('./translations/es').default
7+
}
48

59

610
const Translator = function (translations, separator = '.') {
7-
let lang = window.navigator.language || window.navigator.userLanguage
8-
this.lang = typeof translations[lang] !== 'undefined' ? lang : 'en'
911
this.separator = separator
1012
this.translations = translations
13+
14+
let navigatorLang = window.navigator.language || window.navigator.userLanguage
15+
let selectedLang = window.location.search.match(/(?:[\?\&])(?:lang=)(\w{2})(?:&|$)/)
16+
let lang = selectedLang ? selectedLang[1] : navigatorLang
17+
18+
this.setLanguage(lang)
19+
}
20+
21+
Translator.prototype.setLanguage = function (lang) {
22+
this.lang = typeof this.translations[lang] !== 'undefined' ? lang : 'en'
1123
}
1224

1325
Translator.prototype.get = function (route) {
@@ -25,8 +37,8 @@ Translator.prototype.get = function (route) {
2537
return translation
2638
}
2739

28-
let T = new Translator({en})
40+
window.Translator = new Translator(TRANSLATIONS)
2941

3042
export default function (n) {
31-
return T.get(n)
43+
return window.Translator.get(n)
3244
}

‎src/docs/js/translations/en.js

+54
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,51 @@
11
// translations for English
22

33
export default {
4+
content: {
5+
words: {
6+
animation: "animation",
7+
fade: "fade",
8+
bounce: "bounce",
9+
submit: "submit",
10+
reset: "Reset",
11+
continue: "continue",
12+
proceed: "continue",
13+
dismiss: "dismiss",
14+
source_code: "Source Code"
15+
},
16+
titles: {
17+
method_usage: "Usage as a method",
18+
directive_usage: "Usage as a directive",
19+
confirmation_types: "Confirmation types",
20+
},
21+
descriptions: {
22+
confirmation_types: {
23+
1: "Sometimes, you may want to be more strict by making sure a user really wants to proceed.",
24+
2: "The SOFT and HARD confirmation dialogs helps with that."
25+
},
26+
},
27+
examples: {
28+
method_usage: {
29+
1: "Alert Dialog - one button",
30+
2: "Html Dialog - style/format content",
31+
3: "Basic confirm - close instantly",
32+
4: "Loading Dialog - Useful with ajax",
33+
5: "Reversed Dialog - switch buttons",
34+
6: "Fade Dialog - Animation",
35+
7: "Bounce Dialog - Animation"
36+
},
37+
directive_usage: {
38+
1: "Give it a string",
39+
2: "Go to example.com",
40+
3: "Give it an object v-confirm=\"messageAndCallback\""
41+
},
42+
confirmation_types: {
43+
1: "Soft confirm - multiple clicks required",
44+
2: "Hard confirm - verification text required"
45+
}
46+
}
47+
},
48+
449
messages: {
550
alert: 'This is an alert dialog. Click the button below to close.',
651
html: `This dialog has <b class="dg-highlight-1">HTML</b> enabled. Click the button below to close.`,
@@ -13,5 +58,14 @@ export default {
1358
click_cancel: `Closed because cancel was clicked`,
1459
loading_completed: `If you see me, then the loader has completed`,
1560
loading_canceled: `You clicked cancel, so there was no loading`,
61+
directive_object: "This dialog was also triggered using a v-confirm directive. It has both OK and CANCEL callback",
62+
directive_string: 'This is a message.',
63+
directive_link: 'This will take you to "http://example.com". Proceed with caution',
64+
form_reset: 'Changes would be discarded. Reset this form?',
65+
form_submit: 'Submit this form?',
66+
empty_name: "The name field is empty"
67+
},
68+
placeholders: {
69+
your_name: "Your name"
1670
}
1771
}

‎src/docs/js/translations/es.js

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
// translations for Spanish
2+
3+
export default {
4+
content: {
5+
words: {
6+
animation: "animación",
7+
fade: "descolorarse",
8+
bounce: "rebotar",
9+
submit: "enviar",
10+
reset: "Reiniciar",
11+
continue: "continuar",
12+
proceed: "proceder",
13+
dismiss: "despedir",
14+
source_code: "Código fuente"
15+
},
16+
titles: {
17+
method_usage: "Usage as a method",
18+
directive_usage: "Usage as a directive",
19+
confirmation_types: "Confirmation types",
20+
},
21+
descriptions: {
22+
confirmation_types: {
23+
1: "Sometimes, you may want to be more strict by making sure a user really wants to proceed.",
24+
2: "The SOFT and HARD confirmation dialogs helps with that."
25+
},
26+
},
27+
examples: {
28+
method_usage: {
29+
1: "Alert Dialog - one button",
30+
2: "Html Dialog - style/format content",
31+
3: "Basic confirm - close instantly",
32+
4: "Loading Dialog - Useful with ajax",
33+
5: "Reversed Dialog - switch buttons",
34+
6: "Fade Dialog - Animation",
35+
7: "Bounce Dialog - Animation"
36+
},
37+
directive_usage: {
38+
1: "Give it a string",
39+
2: "Go to example.com",
40+
3: "Give it an object v-confirm=\"messageAndCallback\""
41+
},
42+
confirmation_types: {
43+
1: "Soft confirm - multiple clicks required",
44+
2: "Hard confirm - verification text required"
45+
}
46+
}
47+
},
48+
49+
messages: {
50+
alert: 'Este es un cuadro de diálogo de alerta. Haga clic en el botón de abajo para cerrar.',
51+
html: `This dialog has <b class="dg-highlight-1">HTML</b> enabled. Click the button below to close.`,
52+
basic: 'Este es un diálogo de confirmación básico. Al hacer clic en cualquiera de los botones se descarta el cuadro de diálogo al instante',
53+
soft: 'Este es un diálogo de confirmación suave. Se necesitan varios clics para continuar.',
54+
hard: `This is a hard confirmation dialog. User\'s input must match <span class="dg-highlight-1">verification</span> <span class="dg-highlight-1">text</span> in order to proceed.`,
55+
loading: `Este es un diálogo de carga. El cargador se iniciará una vez que haga clic en el botón Continuar`,
56+
reverse: `El botón izquierdo es el botón Continuar en este cuadro de diálogo. Haga clic para tener una sensación de los botones de reversa`,
57+
click_continue: `Has hecho clic en continuar`,
58+
click_cancel: `Cerrado porque se hizo clic en cancelar`,
59+
loading_completed: `Si me ves, el cargador ha completado`,
60+
loading_canceled: `Hizo clic en cancelar, por lo que no hubo carga`,
61+
directive_object: "This dialog was also triggered using a v-confirm directive. It has both OK and CANCEL callback",
62+
directive_string: 'This is a message.',
63+
directive_link: 'This will take you to "http://example.com". Proceed with caution',
64+
form_reset: 'Changes would be discarded. Reset this form?',
65+
form_submit: 'Submit this form?',
66+
empty_name: "The name field is empty"
67+
},
68+
placeholders: {
69+
your_name: "Tu nombre"
70+
}
71+
}

0 commit comments

Comments
 (0)