tykayn/scripts
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

add translate ability

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
license-osm/index.html
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 d’auteur</a></li> 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/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 d’utiliser 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 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>
<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
d’une version dérivée, les conditions de l’ODbL s’appliquent d’une version dérivée, les conditions de l’ODbL s’appliquent
@ -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 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 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 d’OpenStreetMap, vous devez effectuer les deux choses Lorsque vous utilisez des données d’OpenStreetMap, vous devez effectuer les deux
choses
suivantes : suivantes :
Donnez crédit à OpenStreetMap en affichant notre avis des droits d’auteur. Donnez crédit à OpenStreetMap en affichant notre avis des droits d’auteur.
@ -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 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 peuvent
être être
bénévoles bénévoles
@ -434,11 +430,13 @@
</a> </a>
<!-- (en anglais ; sur le wiki d’OpenStreetMap)--> <!-- (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 du
contenu contenu
approuvent 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>
<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/">
l’ODbL 1.0 l’ODbL 1.0
</a>; une explication </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 de l’ODbL 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>

94
license-osm/script.js
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 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) 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()
}) })

5
license-osm/style.css
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;
}