Skip to content

Instantly share code, notes, and snippets.

@jamesarosen
Last active October 31, 2016 17:10
Show Gist options
  • Save jamesarosen/ee304eeeae22c50cfe32b3a15d8c120c to your computer and use it in GitHub Desktop.
Save jamesarosen/ee304eeeae22c50cfe32b3a15d8c120c to your computer and use it in GitHub Desktop.
ember-i18n-demo
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);
}
}
});
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'section',
classNames: [ 'i18n-demo' ],
key: 'demo.dynamicKeys.dynamicKey',
suffix: 'dynamicSuffix'
});
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'); }
}
});
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');
}
}
});
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);
}
}
});
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');
}
};
export default {
header: {
title: 'ember-i18n Demo 🇺🇸 🎆 🎇'
}
};
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;
}
};
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 ⛵️ 🚣 ⚔ 🔫 🌊'
}
};
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)'
}
};
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; }
<div class='layout'>
<header class='layout__header'>
<h1>{{t 'header.title'}}</h1>
</header>
<main class='layout__main'>
{{outlet}}
</main>
{{page-footer}}
</div>
<div onclick={{action 'click'}}>
{{text}}
</div>
<h3>{{t 'demo.dynamicKeys.title'}}</h3>
<p>
{{t key}}
</p>
<p>
{{t (concat 'demo.dynamicKeys.' suffix)}}
</p>
<h3 class='i18n-demo__title'>{{t 'demo.pluralization.title'}}</h3>
{{t 'demo.pluralization.cats' count=catCount}}
<button {{action 'increment'}}>+</button>
<button {{action 'decrement'}}>-</button>
<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>
<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>
{{demo-simple}}
{{demo-dynamic-keys}}
{{demo-pluralization}}
{{demo-computed-translation}}
{{demo-switch-locale}}
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment