add translate ability
This commit is contained in:
parent
69e1b8ca7b
commit
cbd2a4a75b
|
|
@ -153,7 +153,8 @@
|
|||
</li>
|
||||
<li>
|
||||
<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,
|
||||
Merkaartor)</a>
|
||||
</li>
|
||||
|
|
@ -189,16 +190,20 @@
|
|||
<button class="dropdown-toggle nav-link btn" data-bs-toggle="dropdown" type="button">Plus
|
||||
</button>
|
||||
<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 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>
|
||||
<li class=""><a class="dropdown-item" ="https://www.openstreetmap.org/communities">
|
||||
Communautés</a></li>
|
||||
<li class="current"><a class="dropdown-item" ="https://www.openstreetmap.org/copyright">
|
||||
Droits d’auteur</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/about">À propos</a>
|
||||
<li class=""><a class="dropdown-item" ="https://www.openstreetmap.org/help">Aide</a>
|
||||
</li>
|
||||
<li class=""><a class="dropdown-item" ="https://www.openstreetmap.org/about">À
|
||||
propos</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
|
@ -235,6 +240,7 @@
|
|||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
<div id="content_inner">
|
||||
<div class="content-inner">
|
||||
|
||||
|
|
@ -252,7 +258,8 @@
|
|||
<div class="px-5 py-4 bg-dark">
|
||||
<h1 id="head" class="text-white fw-light">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -263,11 +270,6 @@
|
|||
|
||||
<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>
|
||||
<div class="lang-selector">
|
||||
|
|
@ -279,19 +281,7 @@
|
|||
</select>
|
||||
</div>
|
||||
</p>
|
||||
Chacun est libre de contribuer et d’utiliser les données à condition de protéger et de
|
||||
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é à :
|
||||
<div class="essai-translate wip" data-translate="main"></div>
|
||||
<ul class="allowances">
|
||||
<li>
|
||||
|
||||
|
|
@ -303,7 +293,8 @@
|
|||
|
||||
<!-- noun-build-3136692-->
|
||||
<img alt="icon" class="custom-icon icon-noun" src="img/noun-build-3136692.svg">
|
||||
Créer : produire des cartes (ou n’importe quoi d’autre !) à partir de la base de données
|
||||
Créer : produire des cartes (ou n’importe quoi d’autre !) à partir de la base de
|
||||
données
|
||||
</li>
|
||||
<li>
|
||||
|
||||
|
|
@ -334,7 +325,8 @@
|
|||
<!-- noun-refresh-1815798-->
|
||||
<img alt="icon" class="custom-icon icon-noun"
|
||||
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
|
||||
d’une version dérivée, les conditions de l’ODbL s’appliquent
|
||||
|
||||
|
|
@ -344,7 +336,8 @@
|
|||
<!-- noun-open-padlock-5336638-->
|
||||
<img alt="icon" class="custom-icon icon-noun"
|
||||
src="img/noun-open-padlock-5336638.svg">
|
||||
Préserver l’ouverture : si vous redistribuez la base de données ou une version
|
||||
Préserver l’ouverture : si vous redistribuez la base de données ou une
|
||||
version
|
||||
dérivée
|
||||
avec des mesures de protection (comme des DRM), vous devez alors également
|
||||
fournir une version
|
||||
|
|
@ -396,7 +389,8 @@
|
|||
Créditer
|
||||
</h2>
|
||||
|
||||
Lorsque vous utilisez des données d’OpenStreetMap, vous devez effectuer les deux choses
|
||||
Lorsque vous utilisez des données d’OpenStreetMap, vous devez effectuer les deux
|
||||
choses
|
||||
suivantes :
|
||||
|
||||
Donnez crédit à OpenStreetMap en affichant notre avis des droits d’auteur.
|
||||
|
|
@ -414,11 +408,13 @@
|
|||
<h2 id="contributors">
|
||||
<!-- 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
|
||||
</h2>
|
||||
|
||||
Les données d’OpenStreetMap sont créées par des milliers de personnes. Ces contributeurs
|
||||
Les données d’OpenStreetMap sont créées par des milliers de personnes. Ces
|
||||
contributeurs
|
||||
peuvent
|
||||
être
|
||||
bénévoles
|
||||
|
|
@ -434,11 +430,13 @@
|
|||
</a>
|
||||
<!-- (en anglais ; sur le wiki d’OpenStreetMap)-->
|
||||
|
||||
L’inclusion de données dans OpenStreetMap n’implique pas que les fournisseurs d’origine
|
||||
L’inclusion de données dans OpenStreetMap n’implique pas que les fournisseurs
|
||||
d’origine
|
||||
du
|
||||
contenu
|
||||
approuvent
|
||||
OpenStreetMap, ni qu’ils garantissent ou acceptent quelque responsabilité que ce soit.
|
||||
OpenStreetMap, ni qu’ils garantissent ou acceptent quelque responsabilité que ce
|
||||
soit.
|
||||
|
||||
</div>
|
||||
<div class="forbidden-imports-box tab-item" id="forbidden-imports-box">
|
||||
|
|
@ -477,7 +475,8 @@
|
|||
Marque OpenStreetMap®
|
||||
</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
|
||||
marques déposées
|
||||
de la
|
||||
|
|
@ -538,7 +537,8 @@
|
|||
href="https://opendatacommons.org/licenses/odbl/1-0/">
|
||||
l’ODbL 1.0
|
||||
</a>; une explication
|
||||
simplifiée du texte juridique complet. La licence ODbL n’existe qu’en anglais. Toute traduction
|
||||
simplifiée du texte juridique complet. La licence ODbL n’existe qu’en anglais. Toute
|
||||
traduction
|
||||
de l’ODbL ne
|
||||
pourrait avoir une quelconque valeur légale. Veuillez vous référer à la licence
|
||||
<a href="https://opendatacommons.org/licenses/odbl/1-0/">
|
||||
|
|
@ -555,6 +555,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
<script src="script.js" type="application/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,52 @@
|
|||
let tab_choices = document.querySelectorAll('.tab-choice')
|
||||
let tabs_content = document.querySelectorAll('.tab-item')
|
||||
const translations = {
|
||||
'FR_fr': {
|
||||
'head': 'la base de données cartographique ouverte, collaborative et mondiale',
|
||||
'main': '\n' +
|
||||
' Chacun est libre de contribuer et d’utiliser 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)
|
||||
tab_choices.forEach(element => {
|
||||
window.addEventListener('load', (event) => {
|
||||
// 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) => {
|
||||
console.log('clicked', event)
|
||||
let attribut = element.getAttribute('data-activate-tab')
|
||||
|
|
@ -16,4 +60,46 @@ tab_choices.forEach(element => {
|
|||
element.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()
|
||||
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -70,3 +70,8 @@ select {
|
|||
padding-left: 1em;
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.wip{
|
||||
border: dotted 2px #00e7eb;
|
||||
padding: 1em;
|
||||
}
|
||||
Loading…
Reference in New Issue