-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex_v1.html
executable file
·153 lines (128 loc) · 5.43 KB
/
index_v1.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
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="style_v1.css" />
<title>locize demo</title>
</head>
<body style="display: none;">
<div class="languageToggler" translated>
<a onClick="changeLanguage('en')">english</a>
|
<a onClick="changeLanguage('de')">deutsch</a>
|
<a onClick="changeLanguage('it')">italiano</a>
</div>
<h1 class="headline">Welcome to your locize demo project</h1>
<div id="mainAlert" class="alert" translated>
<p>This demo page will only work correctly if you load it passing querystring params "project_id" and "api_key"...</p>
</div>
<p class="subhead">We are happy to see you here...</p>
<!-- SECTION ONE -->
<a name="section1"></a>
<div class="info" translated>
<h4>Translation</h4>
<p>
Try out to change the values of the text segments below <small>(lng -> en; namespace -> translation)</small>.
On saving your changes locize will deploy the updated translation files. Refresh this page and see your changes.
</p>
</div>
<div class="center">
<p>Getting started can be very easy.</p>
<p>Go ahead and see how new keys flow into your project.</p>
</div>
<!-- SECTION TWO -->
<a name="section2"></a>
<div class="info" translated>
<h4>Missing segments</h4>
<p>Below are some text segments you won't find in your project <small>(lng -> en; namespace -> translation)</small>!
Setting saveMissing option to `true` will save submit them to your project.</p>
<button onclick="saveMissing()">Try out</button>
<p>After refresh give the site a few seconds and check your project for the new keys (reload) <small>(lng -> en; namespace -> translation)</small>.</p>
</div>
<div class="center">
<p>This is not yet translated.</p>
<p>Neither this can be found in your project.</p>
</div>
<!-- SECTION THREE -->
<a name="section3"></a>
<div class="info" translated>
<h4>Singlepage Application Demo</h4>
<p>To show the capabilities of locize not only handling static content translations we added a small reactjs application below. <small>(lng -> en; namespace -> app)</small></p>
<p>
All above was translated using our <a href="https://docs.locize.com/integration/instrumenting-your-code#locizify" target="_blank">locizify</a> script.
The very simple react.js application uses <a href="https://docs.locize.com/integration/instrumenting-your-code#i-18-next" target="_blank">locize</a> script with <a href="https://github.com/i18next/react-i18next" target="_blank">react-i18next</a>.
</p>
</div>
<!-- react app and entry point -->
<div id="app" translated></div>
<script src="app_v1.js"></script>
<!-- SECTION FOUR -->
<a name="section4"></a>
<div class="info" translated>
<h4>Your first own project</h4>
<p>Time to get started. Add your first project and start getting locized...</p>
<p>
You can delete the demo project if needed no longer.
</p>
</div>
<!-- demo script -->
<script src="https://cdn.locize.app/locizify.js"></script>
<script>
// manual init of locizify
var backend = {
referenceLng: 'en',
apiKey: getParameterByName('api_key'),
projectId: getParameterByName('project_id')
}
if (getParameterByName('dev')) {
backend.loadPath = 'https://api-dev.locize.app/{{projectId}}/latest/{{lng}}/{{ns}}';
backend.addPath = 'https://api-dev.locize.app/missing/{{projectId}}/latest/{{lng}}/{{ns}}';
}
window.locizify.init({
debug: true,
fallbackLng: 'en',
backend: backend
});
// get param
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// params not exist
var search = window.location.search;
var params = ['project_id', 'api_key'];
var alertEle = document.getElementById('mainAlert');
params.forEach(function(p) {
if (search.indexOf(p) < 0) alertEle.style.display = 'block';
});
// location change
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
}
else {
return uri + separator + key + "=" + value;
}
}
function changeLanguage(lng) {
window.location = updateQueryStringParameter(window.location.href, 'lng', lng);
}
function saveMissing() {
var loc = updateQueryStringParameter(window.location.href, 'lng', 'en');
loc = updateQueryStringParameter(loc, 'saveMissing', 'true');
window.location = loc + '#section2';
}
</script>
</body>
</html>