ember-i18n-demo

components.demo-computed-translation.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'section',
  classNames: [ 'i18n-demo' ],
  
  i18n: Ember.inject.service(),
  beenClicked: false,
  text: Ember.computed('i18n.locale', function() 
{
    const i18n = this.get('i18n');
    if (this.get('beenClicked')) {
      return i18n.t('demo.computedTranslation.clicked');
    } else {
      return i18n.t('demo.computedTranslation.notClicked');
    }
  }),
  
  actions: {
    click() {
      this.set('beenClicked', true);
    }
  }
});

components.demo-dynamic-keys.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'section',
  classNames: [ 'i18n-demo' ],
  
  key: 'demo.dynamicKeys.dynamicKey',
  suffix: 'dynamicSuffix'
});

components.demo-pluralization.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'section',
  classNames: [ 'i18n-demo' ],
  catCount: 0,
  
  actions: {
    increment() { this.incrementProperty('catCount'); },
    decrement() { this.decrementProperty('catCount'); }
  }
});

components.demo-simple.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'section',
  classNames: [ 'i18n-demo' ],
  
  aProperty: 'computed properties…',
  
  actions: {
    changeComputed() {
      this.set('aProperty', 'computed properties… that change');
    }
  }
});

components.demo-switch-locale.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'section',
  classNames: [ 'i18n-demo' ],
  
  i18n: Ember.inject.service(),
  
  supportedLocales: Ember.computed('i18n.locales', 'i18n.locale', function() {
    const i18n = this.get('i18n');
    const current = i18n.get('locale');
    const all = i18n.get('locales');
    
    return all.map((code) => {
      return {
        code,
        isCurrent: code === current,
        text: i18n.t(`languages.${code}`)
      };
    })
  }),
  
  actions: {
    switchLocale(event) {
      this.set('i18n.locale', event.target.value);
    }
  }
});

components.page-footer.js

import Ember from 'ember';
const { htmlSafe } = Ember.String;

export default Ember.Component.extend({
  tagName: 'footer',
  classNames: [ 'layout__footer' ],
  
  authorLink: htmlSafe('<a href="https://twitter.com/jamesarosen" target="_blank">James A Rosen</a>'),
  
  emberI18nLink: htmlSafe('<a href="https://github.com/jamesarosen/ember-i18n" target="_blank">ember-i18n</a>'),
  
  emberTwiddleLink: htmlSafe('<a href="ember-twiddle.com" target="_blank">Ember Twiddle</a>')
});

instance-initializers.i18n.js

import Ember from 'ember';

export default {
  name: 'i18n',
  
  initialize(app) {
    const i18n = app.lookup('service:i18n');
    const supported = i18n.get('locales');
    const preferred = Ember.getWithDefault(window, 'navigator.languages', []);
    const found = preferred.find((p) => supported.contains(p.toLowerCase()));
    i18n.set('locale', found || 'en');
  }
};

locales.en-us.translations.js

export default {
  header: {
    title: 'ember-i18n Demo 🇺🇸 🎆 🎇'
  }
};

locales.en-x-pirate.config.js

import { ZERO, ONE, OTHER } from "ember-i18n/config/constants";

export default {
  rtl: false,

  pluralForm: function(n) {
    if (n === 0) { return ZERO; }
    if (n === 1) { return ONE; }
    return OTHER;
  }
};

locales.en-x-pirate.translations.js

export default {
  demo: {
    pluralization: {
      cats: {
        zero: 'Where did all the cats go?',
        one: 'Avast! A cat!',
        other: 'Ahoy! {{count}} cats'
      }
    }
  },
  
  footer: {
    created: 'Arr. This be created by {{author}} with {{emberI18n}}, {{emberTwiddle}}, and 🗡' 
  },
  
  header: {
    title: 'ember-i18n Demo ⛵️ 🚣 ⚔ 🔫 🌊'
  }
};

locales.en.translations.js

export default {
  demo: {
    dynamicKeys: {
      dynamicKey: 'Translation keys can computed properties',
      dynamicSuffix: 'Or you can use the concat helper and make just part of the key dynamic',
      title: 'Dynamic Keys'
    },
    computedTranslation: {
      clicked: 'Poof!',
      notClicked: 'You can translate text in JavaScript-land. Click me.'
    },
    pluralization: {
      cats: {
        one: 'One cat',
        other: '{{count}} cats'
      },
      title: 'Pluralization'
    },
    simple: {
      interpolate: 'Translations can interpolate {{interpolated}}',
      hasTooltip: 'Hover over me!',
      otherTranslatedStrings: 'the output of other translations',
      title: 'Simple Translations',
      tooltip: 'Attributes can be translated too'
    },
    switchLocale: {
      title: 'Switch Locale'
    }
  },
  
  footer: {
    created: 'Created by {{author}} with {{emberI18n}}, {{emberTwiddle}}, and 💚' 
  },
  
  header: {
    title: 'ember-i18n Demo'
  },
  
  languages: {
    en: 'English',
    'en-us': 'English (US)',
    'en-x-pirate': 'English (Pirate)'
  }
};

styles.app.css

body {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10pt;
}

.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.layout__main {
  flex: 1;
}

.layout__header, .layout__footer {
  background: #abcdef;
  padding: 10px 20px;
}

.i18n-demo {
  border: 2px solid #ccc;
  border-radius: 5px;
  margin: 1rem;
  padding: 1rem;
}

.i18n-demo__title { margin-top: 0; }

templates.application.hbs

<div class='layout'>
  <header class='layout__header'>
  	<h1>{{t 'header.title'}}</h1>
  </header>

  <main class='layout__main'>
    {{outlet}}
  </main>

  {{page-footer}}
</div>

templates.components.demo-computed-translation.hbs

<div onclick={{action 'click'}}>
  {{text}}
</div>

templates.components.demo-dynamic-keys.hbs

<h3>{{t 'demo.dynamicKeys.title'}}</h3>

<p>
  {{t key}}
</p>

<p>
  {{t (concat 'demo.dynamicKeys.' suffix)}}
</p>

templates.components.demo-pluralization.hbs

<h3 class='i18n-demo__title'>{{t 'demo.pluralization.title'}}</h3>
{{t 'demo.pluralization.cats' count=catCount}}
<button {{action 'increment'}}>+</button>
<button {{action 'decrement'}}>-</button>

templates.components.demo-simple.hbs

<h3>{{t 'demo.simple.title'}}</h3>

<div title={{t 'demo.simple.tooltip'}}>
  {{t 'demo.simple.hasTooltip'}}
</div>

<p>
  {{t 'demo.simple.interpolate' interpolated='values from templates'}}
</p>

<p onclick={{action 'changeComputed'}}>
  {{t 'demo.simple.interpolate' interpolated=aProperty}}
</p>

<p>
  {{t 'demo.simple.interpolate' interpolated=(t 'demo.simple.otherTranslatedStrings')}}
</p>

templates.components.demo-switch-locale.hbs

<h3 class='i18n-demo__title'>{{t 'demo.switchLocale.title'}}</h3>
<select onchange={{action 'switchLocale'}}>
  {{#each supportedLocales as |loc|}}
    <option value={{loc.code}} selected={{if loc.isCurrent 'selected' ''}}>{{loc.text}}</option>
  {{/each}}
</select>

templates.components.page-footer.hbs

{{t 'footer.created' author=authorLink emberI18n=emberI18nLink emberTwiddle=emberTwiddleLink}}

templates.index.hbs

{{demo-simple}}
{{demo-dynamic-keys}}
{{demo-pluralization}}
{{demo-computed-translation}}
{{demo-switch-locale}}

twiddle.json

{
  "version": "0.10.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.6.0",
    "ember-data": "2.6.1",
    "ember-template-compiler": "2.6.0"
  },
  "addons": {
    "ember-i18n": "4.2.2"
  }
}