ed.brz9.dev/proj/map/asset/js/main.js

Vue.component('Accordeon', {
  template : `
  <section v-bind:id="this.list.id">
  <nav v-if="this.list.type === 'list'">

    <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 }">
      <Accordeon v-for="i in this.list.sub" v-bind:list="i"></Accordeon>
    </section>
  </nav>
    <section v-if="this.list.type === 'item'" class="lastlistitem">
      <aside>
        <img v-bind:src="this.list.img"></img>
      </aside>
      <aside>
        <h3>{{ this.list.name }}</h3>
        <p class="b9h-lang-fr">{{ this.list.txtFR }}</p>
        <p class="b9h-lang-en">{{ this.list.txtEN }}</p>
        <p class="b9h-lang-it">{{ this.list.txtIT }}</p>
      </aside>
    </section>
  </section>
  `,
  props : {
    list : Object
  },
  data () {
    return {
      isActive : false
    }
  },
  computed: {
    href: function () {
      return "#" + this.list.id;
    }
  },
  methods : {
    donothing () {

    },
    toggleActive () {
      this.isActive = !this.isActive
      document.getElementById(this.list.id).scrollIntoView(
        {
          behavior: "smooth",
          block: "end",
          inline: "nearest"}
      );
    }
  }
})


const jsonurl = "https://ed.brz9.dev/proj/map/asset/json/db.json"

/*
let jdnb

fetch(jsonurl)
  .then(res => res.json())
  .then(data => jdnb = data)
*/

let vm = new Vue({
  el: '#root',
  data: {
    currentLang: 'fr',
    db : {},
    dburl : "https://ed.brz9.dev/proj/map/asset/json/db.json",
    db : {
      restaurants : {
        id : "resto",
        type : "list",
        nameFR : "Restaurant",
        nameEN : "Restaurant",
        nameIT : "Ristoranti",
        sub : {
          italiens : {
            id: "restoital",
            type : "list",
            nameFR : "Italien",
            nameEN : "Italian",
            nameIT : "Italiano",
            sub : {
              SanTelmo : {
                id: "santelmo",
                type : "item",
                name: "San Telmo",
                img: "https://ed.brz9.dev/proj/map/asset/img/santelmo.jpg",
                txtFR: "Français Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies. DIY readymade brunch VHS small batch tofu eiusmod sartorial street art gastropub af minim. Yes plz hot chicken chartreuse irony church-key.",
                txtEN: "English Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies. DIY readymade brunch VHS small batch tofu eiusmod sartorial street art gastropub af minim. Yes plz hot chicken chartreuse irony church-key.",
                txtIT: "Italiano Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies. DIY readymade brunch VHS small batch tofu eiusmod sartorial street art gastropub af minim. Yes plz hot chicken chartreuse irony church-key.",
              },
              Salsamenteria : {
                id: "salsamenteria",
                type : "item",
                name: "Salsamenteria di Parma",
                img: "https://ed.brz9.dev/proj/map/asset/img/salsamentiera.jpg",
                txtFR: "Français Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies. DIY readymade brunch VHS small batch tofu eiusmod sartorial street art gastropub af minim. Yes plz hot chicken chartreuse irony church-key.",
                txtEN: "English Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies. DIY readymade brunch VHS small batch tofu eiusmod sartorial street art gastropub af minim. Yes plz hot chicken chartreuse irony church-key.",
                txtIT: "Italiano Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies. DIY readymade brunch VHS small batch tofu eiusmod sartorial street art gastropub af minim. Yes plz hot chicken chartreuse irony church-key.",
              },
            },
          },
          vege : {
            id : "restovege",
            type : "list",
            nameFR : "Végétarien",
            nameEN : "Vegan",
            nameIT : "Vegetariano",
            sub : {
              SanTelmo : {
                id: "santelmo",
                type : "item",
                name: "San Telmo",
              },
              Salsamenteria : {
                id: "salsamenteria",
                type : "item",
                name: "Salsamenteria di Parma",
              },
            }
          }
        }
      }
    }
  },
  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';
      }
    },
    async getJDB(){
      const res = await fetch(this.dburl);
      const data = await res.json();
      this.db = data;
    },
    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);
    },
  },
  created: function(){
    console.log("about to call getJDB")
//    this.getJDB();
    console.log("after getJDB call")
  },
  mounted: function() {
    console.log("mounting");
    this.setlang('fr');
    console.log("mounted");
  }

})