Create custom template for language selector

[ciro207]

Hi,

I really appreciate what you did with this package.
It is really useful and very simple to use. I would like to create a custom template to display language selection in a different (and more complicated) way, for example with Bootstrap Button dropdowns
http://getbootstrap.com/components/#btn-dropdowns

I see I can create a static template, starting from this
https://github.com/TAPevents/tap-i18n-ui/blob/master/frameworks/i18n_ui_bootstrap.html

such as

<template name="i18n_custom_dropdown">
  <span class="tap-i18n-dropdown">
    {{#if i18n_enabled}}
    <!-- Split button -->
    <div class="btn-group">
      <button type="button" class="btn btn-danger"><i class="fa fa-flag"></i></button>
      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        {{#each i18n_sortedLanguages}}
          <li><a href="#" data-language="{{tag}}">{{name}}</a></li>
        {{/each}}
      </ul>
    </div>
    {{else}}
      <span class="i18n-not-found">No i18n files found</span>
    {{/if}}
  </span>
</template>

But I cannot understand I can bind language changing on click

Can you suggest me how to start?

Thanks!!

[ciro207]

For the moment I solved with this code

Template.i18n_custom_dropdown.events({
    'click a': function (event) {
      event.preventDefault();

      var requestedLanguage = event.target.getAttribute('data-language');
      if(requestedLanguage) {
        console.log("setting language as: " + requestedLanguage);
        TAPi18n.setLanguage(requestedLanguage);
      }
    }
  });

[IstoraMandiri]

Hi @ciro207 -- thanks for the issue.

Take a look at the following lines of code in coffee-script for how we're doing it:
https://github.com/TAPevents/tap-i18n-ui/blob/master/frameworks/i18n_ui_bootstrap.coffee#L5-L7

In other words, you can replace

var requestedLanguage = event.target.getAttribute('data-language');
if(requestedLanguage) {
    console.log("setting language as: " + requestedLanguage);
    TAPi18n.setLanguage(requestedLanguage);
}

with

TAPi18n.setLanguageAmplify(this.tag)

And it should work. The context of this (or @ in coffee) will contain all the information about the language, so this.tag is the language tab. We use setLanguageAmplify in order to make it 'sticky' so if a user navigates back at a later date it remembers the language.

By the way, feel free to submit a Pull Request if you add this and we can include it in the main package!

Cheers