Vue - Language Selector

by Ben Clayton

HTML

<script src="https://unpkg.com/vue"></script>
<div id="div1">
  <div class="menu">
    <div v-for="item in items">
      <h5><input type="checkbox" v-bind:checked="langs.indexOf(item.lang)>-1" @change="mychange(item)" v-bind:value="item.lang" name="lang-selector" v-model="langs" />{{item.language}} </h5>
    </div>
  </div>
  
  <div class="right">
  <pre>
    translation: {
        sourceLanguage: '{{sourcelng}}'; 
        showSourceText: {{langs.indexOf(sourcelng)>-1}}; 
        targetLanguages:{{otherlangs()}}; 
        translations: { [langCode: string]: string }; 
    };
    </pre>
    </div>
    <div class="clear" />
  <input v-bind:value="heading" disabled />
  <input v-bind:value="body" disabled />
  <hr>
  <hr>


  <div v-for="item in items">
    <div v-bind:class="item.lang" v-if="langs.indexOf(item.lang)>-1">
      <h1>
        {{translate(heading,item.lang)}}
      </h1>
      <div>
        {{translate(body,item.lang)}}
      </div>
    </div>

  </div>

</div>

CSS

.menu {
  border: 1px solid red;
  padding: 10px;
  width: 20%;
  float: left;
}

.clear {
  clear: both;
}
.fr {
  color: rgb(155, 100, 100);
}
.de {
  color: rgb(155, 100, 150);  
}
.right{
  float: right;
  width: 70%;
   border: 1px solid red;
}

JavaScript

//---------------------------------------------------------

var myData = [{
  lang: "en",
  language: "English"
}, {
  lang: "fr",
  language: "French"
}, {
  lang: "de",
  language: "German"
}];

var vm1 = new Vue({
  el: '#div1',
  data: {
    items: myData,
    langs: [],
    sourcelng: 'en',
    heading: "Hello World",
    body: "This is the body text for the article"
  },
  created: function() {
    var language = window.navigator.userLanguage || window.navigator.language;
    alert("Browser Language is '" + language + "'");
    var lang = language.split('-').shift(); // en-GB > en
    myData = myData.sort(function(a, b) {
      if (b.lang == lang) return 1;
      if (a.lang == lang) return -1;
      return 0;
    });
    this.sourcelng = lang;
    this.langs.push(lang);
  },
  methods: {
    mychange: function(item) {
      console.log(item.lang);
      if (this.langs.length == 0) this.langs.push('en')
    },

    otherlangs: function() {
      var s = [];
      for (var i = 0; i < this.langs.length; i++) {
        var lng = this.langs[i];
        if (lng != 'en') s.push('"' + lng + '"');
      }
      return '[' + s.join(',') + ']';
    },
    translate: function(str, lng) {
      if (lng == 'en') return str;
      if (str == this.heading && lng == 'fr') return 'Bonjour le monde';
      if (str == this.heading && lng == 'de') return 'Hallo Welt';
      if (str == this.body && lng == 'fr') return "Ceci est le corps du texte de l'article";
      if (str == this.body && lng == 'de') return 'Dies ist der Haupttext für den Artikel';
    }
  }
});