127 lines
2.9 KiB
JavaScript
127 lines
2.9 KiB
JavaScript
Vue.component('Accordeon', {
|
|
template : `
|
|
<section v-bind:id="this.list.id">
|
|
<a v-bind:href="this.href">
|
|
<span
|
|
v-on:click="toggleActive()"
|
|
class="listname"
|
|
:class="{ active: isActive }">
|
|
|
|
<h3 class="b9h-lang-fr">{{ this.list.nameFR }}</h3>
|
|
<h3 class="b9h-lang-en">{{ this.list.nameEN }}</h3>
|
|
<h3 class="b9h-lang-it">{{ this.list.nameIT }}</h3>
|
|
<span class="byl-icon-chevron-down listicon">
|
|
|
|
</span>
|
|
</a>
|
|
<section class="listchild" :class="{ active: isActive }">
|
|
<h3 v-for="i in this.list.sub"> {{ i.nameFR }} </h3>
|
|
</section>
|
|
</section>
|
|
`,
|
|
props : {
|
|
list : Object
|
|
},
|
|
data () {
|
|
return {
|
|
isActive : false
|
|
}
|
|
},
|
|
computed: {
|
|
href: function () {
|
|
return "#" + this.list.id;
|
|
}
|
|
},
|
|
methods : {
|
|
donothing () {
|
|
},
|
|
toggleActive () {
|
|
this.isActive = !this.isActive
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
const jsonurl = "https://ed.brz9.dev/proj/map/asset/json/db.json"
|
|
|
|
let jdb
|
|
|
|
fetch(jsonurl)
|
|
.then(res => res.json())
|
|
.then(data => jdb = data)
|
|
|
|
let vm = new Vue({
|
|
el: '#root',
|
|
data: {
|
|
currentLang: 'fr',
|
|
db : this.jdb.db,
|
|
db2 : {
|
|
restaurants : {
|
|
id : "resto",
|
|
nameFR : "Restaurant",
|
|
nameEN : "Restaurant",
|
|
nameIT : "Ristoranti",
|
|
sub : {
|
|
italiens : {
|
|
id: "restoital",
|
|
nameFR : "Italien",
|
|
nameEN : "Italian",
|
|
nameIT : "Italiano",
|
|
SanTelmo : {
|
|
name: "San Telmo"
|
|
},
|
|
Salsamenteria : {
|
|
name: "Salsamenteria di Parma"
|
|
}
|
|
},
|
|
vege : {
|
|
id : "restovege",
|
|
nameFR : "Végétarien",
|
|
nameEN : "Vegan",
|
|
nameIT : "Vegetariano",
|
|
SanTelmo : {
|
|
name: "San Telmo"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
hidelang: function(lang) {
|
|
langClass = "b9h-lang-" + lang;
|
|
langElms = document.getElementsByClassName(langClass);
|
|
for (i = 0; i < langElms.length; i++) {
|
|
langElms[i].style.display = 'none';
|
|
}
|
|
},
|
|
hidelangs: function() {
|
|
this.hidelang('fr');
|
|
this.hidelang('en');
|
|
this.hidelang('it');
|
|
},
|
|
showlang: function(lang) {
|
|
this.hidelangs();
|
|
langClass = "b9h-lang-" + lang;
|
|
langElms = document.getElementsByClassName(langClass);
|
|
for (i = 0; i < langElms.length; i++) {
|
|
langElms[i].style.display = 'revert';
|
|
}
|
|
},
|
|
setlang: function (lang) {
|
|
target = document.querySelector("#"+"tab-"+lang);
|
|
marker = document.querySelector("#lang-marker");
|
|
marker.style.left = target.offsetLeft + "px";
|
|
marker.style.width = target.offsetWidth + "px";
|
|
this.showlang(lang);
|
|
},
|
|
},
|
|
mounted: function() {
|
|
console.log("mounting");
|
|
this.setlang('fr');
|
|
console.log("mounted");
|
|
}
|
|
|
|
})
|
|
|