add translate ability

This commit is contained in:
tykayn 2023-08-28 23:36:26 +02:00
parent 69e1b8ca7b
commit cbd2a4a75b
3 changed files with 494 additions and 403 deletions

View File

@ -153,7 +153,8 @@
</li> </li>
<li> <li>
<a class="geolink editlink dropdown-item" data-editor="remote" <a class="geolink editlink dropdown-item" data-editor="remote"
="https://www.openstreetmap.org/edit?editor=remote">Modifier avec Éditeur externe (JOSM, ="https://www.openstreetmap.org/edit?editor=remote">Modifier avec Éditeur externe
(JOSM,
Potlatch, Potlatch,
Merkaartor)</a> Merkaartor)</a>
</li> </li>
@ -189,16 +190,20 @@
<button class="dropdown-toggle nav-link btn" data-bs-toggle="dropdown" type="button">Plus <button class="dropdown-toggle nav-link btn" data-bs-toggle="dropdown" type="button">Plus
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li class=""><a class="dropdown-item" ="https://www.openstreetmap.org/traces">Traces GPS</a> <li class=""><a class="dropdown-item" ="https://www.openstreetmap.org/traces">Traces
GPS</a>
</li> </li>
<li class=""><a class="dropdown-item" ="https://www.openstreetmap.org/diary">Journaux des <li class=""><a class="dropdown-item" ="https://www.openstreetmap.org/diary">Journaux
des
utilisateurs</a></li> utilisateurs</a></li>
<li class=""><a class="dropdown-item" ="https://www.openstreetmap.org/communities"> <li class=""><a class="dropdown-item" ="https://www.openstreetmap.org/communities">
Communautés</a></li> Communautés</a></li>
<li class="current"><a class="dropdown-item" ="https://www.openstreetmap.org/copyright"> <li class="current"><a class="dropdown-item" ="https://www.openstreetmap.org/copyright">
Droits dauteur</a></li> Droits dauteur</a></li>
<li class=""><a class="dropdown-item" ="https://www.openstreetmap.org/help">Aide</a></li> <li class=""><a class="dropdown-item" ="https://www.openstreetmap.org/help">Aide</a>
<li class=""><a class="dropdown-item" ="https://www.openstreetmap.org/about">À propos</a> </li>
<li class=""><a class="dropdown-item" ="https://www.openstreetmap.org/about">À
propos</a>
</li> </li>
</ul> </ul>
</li> </li>
@ -235,6 +240,7 @@
</nav> </nav>
</header> </header>
<div id="content_inner"> <div id="content_inner">
<div class="content-inner"> <div class="content-inner">
@ -252,7 +258,8 @@
<div class="px-5 py-4 bg-dark"> <div class="px-5 py-4 bg-dark">
<h1 id="head" class="text-white fw-light"> <h1 id="head" class="text-white fw-light">
<img alt="icon" class="custom-icon icon-noun" src="img/noun-heart-5454846.svg"> <img alt="icon" class="custom-icon icon-noun" src="img/noun-heart-5454846.svg">
<span class="user-name">OpenStreetMap</span> la base de données cartographique ouverte, collaborative et mondiale <span class="user-name">OpenStreetMap</span> la base de données cartographique
ouverte, collaborative et mondiale
</h1> </h1>
</div> </div>
</div> </div>
@ -263,11 +270,6 @@
<div class="heading-box"> <div class="heading-box">
<!-- <h1 id="head">-->
<!-- <img alt="icon" class="custom-icon icon-noun" src="img/noun-heart-5454846.svg">-->
<!-- noun-heart-5454846-->
<!-- OpenStreetMap : la base de données cartographique ouverte, collaborative et mondiale-->
<!-- </h1>-->
<p> <p>
<div class="lang-selector"> <div class="lang-selector">
@ -279,19 +281,7 @@
</select> </select>
</div> </div>
</p> </p>
Chacun est libre de contribuer et dutiliser les données à condition de protéger et de <div class="essai-translate wip" data-translate="main"></div>
contribuer à faire
grandir
OpenStreetMap.
Ceci est un résumé expliquant simplement (et en aucun cas un substitut à) la licence ODbL (en
anglais).
OpenStreetMap® est disponible en données libres, sous licence de base de données ouverte Open
Data Commons
(ODbL)
(ODbL) par la Fondation OpenStreetMap (OSMF).
Vous êtes autorisé à :
<ul class="allowances"> <ul class="allowances">
<li> <li>
@ -303,7 +293,8 @@
<!-- noun-build-3136692--> <!-- noun-build-3136692-->
<img alt="icon" class="custom-icon icon-noun" src="img/noun-build-3136692.svg"> <img alt="icon" class="custom-icon icon-noun" src="img/noun-build-3136692.svg">
Créer : produire des cartes (ou nimporte quoi dautre !) à partir de la base de données Créer : produire des cartes (ou nimporte quoi dautre !) à partir de la base de
données
</li> </li>
<li> <li>
@ -334,7 +325,8 @@
<!-- noun-refresh-1815798--> <!-- noun-refresh-1815798-->
<img alt="icon" class="custom-icon icon-noun" <img alt="icon" class="custom-icon icon-noun"
src="img/noun-refresh-1815798.svg"> src="img/noun-refresh-1815798.svg">
Partage sous les mêmes conditions : si vous faites un usage public de la base de Partage sous les mêmes conditions : si vous faites un usage public de la
base de
données ou données ou
dune version dérivée, les conditions de lODbL sappliquent dune version dérivée, les conditions de lODbL sappliquent
@ -344,7 +336,8 @@
<!-- noun-open-padlock-5336638--> <!-- noun-open-padlock-5336638-->
<img alt="icon" class="custom-icon icon-noun" <img alt="icon" class="custom-icon icon-noun"
src="img/noun-open-padlock-5336638.svg"> src="img/noun-open-padlock-5336638.svg">
Préserver louverture : si vous redistribuez la base de données ou une version Préserver louverture : si vous redistribuez la base de données ou une
version
dérivée dérivée
avec des mesures de protection (comme des DRM), vous devez alors également avec des mesures de protection (comme des DRM), vous devez alors également
fournir une version fournir une version
@ -396,7 +389,8 @@
Créditer Créditer
</h2> </h2>
Lorsque vous utilisez des données dOpenStreetMap, vous devez effectuer les deux choses Lorsque vous utilisez des données dOpenStreetMap, vous devez effectuer les deux
choses
suivantes : suivantes :
Donnez crédit à OpenStreetMap en affichant notre avis des droits dauteur. Donnez crédit à OpenStreetMap en affichant notre avis des droits dauteur.
@ -414,11 +408,13 @@
<h2 id="contributors"> <h2 id="contributors">
<!-- noun-together-3266241 --> <!-- noun-together-3266241 -->
<img alt="icon" class="custom-icon icon-noun" src="img/noun-together-3266241.svg"> <img alt="icon" class="custom-icon icon-noun"
src="img/noun-together-3266241.svg">
Contributeurs Contributeurs
</h2> </h2>
Les données dOpenStreetMap sont créées par des milliers de personnes. Ces contributeurs Les données dOpenStreetMap sont créées par des milliers de personnes. Ces
contributeurs
peuvent peuvent
être être
bénévoles bénévoles
@ -434,11 +430,13 @@
</a> </a>
<!-- (en anglais ; sur le wiki dOpenStreetMap)--> <!-- (en anglais ; sur le wiki dOpenStreetMap)-->
Linclusion de données dans OpenStreetMap nimplique pas que les fournisseurs dorigine Linclusion de données dans OpenStreetMap nimplique pas que les fournisseurs
dorigine
du du
contenu contenu
approuvent approuvent
OpenStreetMap, ni quils garantissent ou acceptent quelque responsabilité que ce soit. OpenStreetMap, ni quils garantissent ou acceptent quelque responsabilité que ce
soit.
</div> </div>
<div class="forbidden-imports-box tab-item" id="forbidden-imports-box"> <div class="forbidden-imports-box tab-item" id="forbidden-imports-box">
@ -477,7 +475,8 @@
Marque OpenStreetMap® Marque OpenStreetMap®
</h2> </h2>
Les termes OpenStreetMap et State of the Map ainsi que le logo en forme de loupe sont Les termes OpenStreetMap et State of the Map ainsi que le logo en forme de loupe
sont
des des
marques déposées marques déposées
de la de la
@ -538,7 +537,8 @@
href="https://opendatacommons.org/licenses/odbl/1-0/"> href="https://opendatacommons.org/licenses/odbl/1-0/">
lODbL 1.0 lODbL 1.0
</a>; une explication </a>; une explication
simplifiée du texte juridique complet. La licence ODbL nexiste quen anglais. Toute traduction simplifiée du texte juridique complet. La licence ODbL nexiste quen anglais. Toute
traduction
de lODbL ne de lODbL ne
pourrait avoir une quelconque valeur légale. Veuillez vous référer à la licence pourrait avoir une quelconque valeur légale. Veuillez vous référer à la licence
<a href="https://opendatacommons.org/licenses/odbl/1-0/"> <a href="https://opendatacommons.org/licenses/odbl/1-0/">
@ -555,6 +555,6 @@
</div> </div>
</div> </div>
</div> </div>
<script src="script.js"></script> <script src="script.js" type="application/javascript"></script>
</body> </body>
</html> </html>

View File

@ -1,8 +1,52 @@
let tab_choices = document.querySelectorAll('.tab-choice') const translations = {
let tabs_content = document.querySelectorAll('.tab-item') 'FR_fr': {
'head': 'la base de données cartographique ouverte, collaborative et mondiale',
'main': '\n' +
' Chacun est libre de contribuer et dutiliser les données à condition de protéger et de\n' +
' contribuer à faire\n' +
' grandir\n' +
' OpenStreetMap.\n' +
'\n' +
' Ceci est un résumé expliquant simplement (et en aucun cas un substitut à) la licence ODbL (en\n' +
' anglais).\n' +
'\n' +
' OpenStreetMap® est disponible en données libres, sous licence de base de données ouverte Open\n' +
' Data Commons\n' +
' (ODbL)\n' +
' (ODbL) par la Fondation OpenStreetMap (OSMF).\n' +
' Vous êtes autorisé à :\n' +
' '
},
'EN_en': {
'head': 'the open, collaborative, global cartographic database',
'main': '\n' +
' Everyone is free to contribute and use the data, provided that they protect and\n' +
' contribute to the\n' +
' grow\n' +
' OpenStreetMap.\n' +
'\n' +
' This is a summary explaining simply (and in no way a substitute for) the ODbL license.\n' +
' license.)\n' +
'\n' +
' OpenStreetMap® is available as free data, under the Open\n' +
' Data Commons\n' +
' (ODbL) open database license\n' +
' (ODbL) by the OpenStreetMap Foundation (OSMF).\n' +
' You are authorized to :'
}
}
let defaultLang = 'FR_fr'
// let defaultLang = 'EN_en'
console.log('tab_choices', tab_choices) window.addEventListener('load', (event) => {
tab_choices.forEach(element => { // console.log("La page est complètement chargée");
let tab_choices = document.querySelectorAll('.tab-choice')
let tabs_content = document.querySelectorAll('.tab-item')
/**
* choix de tab, onglets
*/
tab_choices.forEach(element => {
element.addEventListener('click', (event) => { element.addEventListener('click', (event) => {
console.log('clicked', event) console.log('clicked', event)
let attribut = element.getAttribute('data-activate-tab') let attribut = element.getAttribute('data-activate-tab')
@ -16,4 +60,46 @@ tab_choices.forEach(element => {
element.classList.add('active') element.classList.add('active')
document.querySelector(attribut).classList.add('active') document.querySelector(attribut).classList.add('active')
}) })
})
/**
changement de langue
*/
let langSelector = document.querySelectorAll('#lang')
console.log('langSelector', langSelector)
langSelector[0].addEventListener('click', (event) => {
console.log('event', event)
currentLang = document.querySelector('#lang').value
console.log('currentLang', currentLang)
applyTranslation()
})
let currentLang = defaultLang
let elementsToTranslate = []
let applyTranslation = () => {
elementsToTranslate.forEach((elem) => {
let dataKey = elem.getAttribute('data-translate')
let foundString = searchContentInJsonForCurrentLang(dataKey)
if (foundString) {
console.log('elem', elem)
elem.innerHTML = (foundString)
}
})
}
let searchContentInJsonForCurrentLang = (key) => {
console.log('translations[currentLang]', currentLang, translations[currentLang])
return translations[currentLang][key]
}
let detectAllTranslatedParts = () => {
elementsToTranslate = document.querySelectorAll('[data-translate]')
console.log('elementsToTranslate', elementsToTranslate)
}
detectAllTranslatedParts()
applyTranslation()
}) })

View File

@ -70,3 +70,8 @@ select {
padding-left: 1em; padding-left: 1em;
padding-top: 1em; padding-top: 1em;
} }
.wip{
border: dotted 2px #00e7eb;
padding: 1em;
}