Internationalization of ember application - ember.js

I'm using ember-i18n lib for Internationalisation and want to save current locale in route like:
domain.com - empty for default en
doman.com/es, doman.com/de- for another
For this I tried to use rootURL
Router.reopen({
rootURL: '/' ('es' or 'de')
});
Problem: When rootURL is not empty, app can't redirect and fail with error: ember.debug.js:4903 Uncaught Error: Assertion Failed: Path / does not start with the provided rootURL /es/
Question: What is the best solution to make redirect, all logic will be hold in emebr so I can't move this logic into nginx and etc.
Another option is Make a wrapper route, looks like this:
this.route(
'lang', { path: '/:lang' }, function (){..}
);
This solution looks like not good:
link-to helper will require lang param
lang can't be empty (for default language)
UPDATE: I understand how to dynamic change rootURL, but can't auto redirect.

Found the solution, describe this logic in instance-initializer
export function initialize(app) {
var router = app.lookup('router:main');
var i18n = app.lookup('service:i18n');
var path = window.location.pathname;
var currentLang = ENV.i18n.defaultLocale;
var newPath = '';
var LangFromPath = path.match('^/([a-z]{2})(?:/|$)');
if (LangFromPath && LangFromPath[1]){
currentLang = (ENV.i18n.allowedLocales.indexOf(LangFromPath[1]) > -1) ? LangFromPath[1] : currentLang;
}
if (currentLang != ENV.i18n.defaultLocale) {
var newPath = '/' + currentLang + '/';
}
router.rootURL = newPath;
i18n.set('locale', currentLang);
if (newPath && path.indexOf(newPath) === -1) {
window.location.pathname = newPath;
}
}

Related

Modify how ember-i18n localizations are loaded, split localization strings from main app.js

I am trying to modify the way ember-i18n localizations are loaded. What I want to do is have the localizations in a separate file from the main app javascript file.
Ideally, the structure would remain the same as now. So I would have app/locales/fr/translations.js and app/locales/de/translations.js , each having content similar to this:
export default {
key: "value"
}
So I thought I need to write a custom addon, which would alter the build process. This addon would need to:
Ignore app/locales from final build
Compile all the translation files into one
Transpile the new file with babel
Copy the file in dist/assets/translations.js
The combined translation file would look something like this:
export default {
fr: {
key: "value"
},
de: {
key: "value"
}
This way, I would be able to use and instance initializer and simply import and use this module:
import Translations from 'my-translations';
export function initialize(instance) {
const i18n = instance.lookup('service:i18n');
for(let lang in Translations) {
if(Translations.hasOwnProperty(tag)) {
i18n.addTranslations(tag, Translations[tag]);
}
}
}
Also, index.html would be:
<script src="assets/vendor.js"></script>
<script src="assets/translations.js"></script>
<script src="assets/my-app.js"></script>
Well, I started writing the custom addon, but I got stuck. I managed to ignore the locales, and I wrote code that parses all the localizations, but I do not know how to write the new translations file in dist. What hook do I neeed to use, to be able to write into dist? Any help? Thank you so much.
Here is the code I wrote:
Stuff I use
var Funnel = require('broccoli-funnel');
var stew = require('broccoli-stew');
var fs = require('fs');
var writeFile = require('broccoli-file-creator');
var mergeTrees = require('broccoli-merge-trees');
preprocessTree: function(type, tree) {
if(type !== 'js') {return tree;}
var treeWithoutLocales = new Funnel(tree, {
exclude: ['**/locales/*/translations.js']
});
var translations = {};
var files = fs.readdirSync('app/locales');
files.forEach((tag) => {
if(tag !== 'fr') {return;}
let contents = fs.readFileSync('app/locales/' + tag + '/translations.js', 'utf8');
contents = contents.replace(/^export default /, '');
contents = contents.replace(/;$/, '');
contents = JSON.parse(contents);
translations[tag] = contents;
});
// Should do something with this .. how to write in dist? and when? I need it compiled with babel
var fileTree = writeFile('/my-app/locales/translations.js', 'export default ' + JSON.stringify(translations) + ';');
return treeWithoutLocales;
}
I am not sure if you actually asked a question; but here goes some kind of answer.
Why complicate? Just use James Rosen's i18n addon used by a lot of projects.

Properly babel transpile a file in ember-cli-build withing additional tree

I have some files in my project that I would like to move out of the normal app tree and only load in certain situations. Currently I used broccoli-stew to move the file and broccoli-babel-transpiler to transpile the destination file. However when I do this I end up with an extra default object on the imported files.
this code gets added to the top
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _Ember = _interopRequireDefault(_ember);
and this causes me to have to write the source file with references to ember as Ember["default"].Object etc. Would like to not have any odd references in the source files that makes it harder for other developers to understand.
This is my current ember-cli-build.js file
/* global require, module */
var stew = require('broccoli-stew');
var esTranspiler = require('broccoli-babel-transpiler');
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
storeConfigInMeta: false
});
var additionalTrees = [];
var appTree = app.appAndDependencies();
if (EmberApp.env() !== "production") {
var jQuery = stew.find(appTree, "bower_components/jquery/dist/jquery.min.js");
jQuery = stew.mv(jQuery, "bower_components/jquery/dist/jquery.min.js", "assets/jquery.js");
additionalTrees.push(jQuery);
}
function extractRouter(fileName) {
var router = stew.find(appTree, 'mobile-web/'+ fileName + '.js');
router = esTranspiler(router, {
modules: "amd",
moduleIds: true,
moduleId: "mobile-web/router"
});
router = stew.mv(router, 'mobile-web/'+ fileName + '.js', 'assets/'+ fileName + '.js');
additionalTrees.push(router);
}
extractRouter('router');
extractRouter('secure-router');
return app.toTree(additionalTrees);
};
Try configure your esTranspiler to use modules: "amdStrict":
router = esTranspiler(router, {
modules: "amdStrict",// here
moduleIds: true,
moduleId: "mobile-web/router"
});
It's similar to "commonStrict" as described in the docs. The amdScrict exists in the source code here.

How to embed Wufoo form in Ember application

My client has asked me to integrate a Wufoo form into their Ember application, and provided the following JS (anonymized):
<script type="text/javascript">var abc123;(function(d, t) {
var s = d.createElement(t), options = {
'userName':'example',
'formHash':'abc123',
'autoResize':true,
'height':'491',
'async':true,
'host':'wufoo.com',
'header':'show',
'ssl':true};
s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'www.wufoo.com/scripts/embed/form.js';
s.onload = s.onreadystatechange = function() {
var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return;
try { abc123 = new WufooForm();abc123.initialize(options);abc123.display(); } catch (e) {}};
var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);
})(document, 'script');</script>
I've tried including it in index.html and also creating a custom component, but keep getting an error from Wufoo:
TypeError: Cannot set property 'innerHTML' of null
Is there a way to use the provided Wufoo JS in an Ember.js app?

Using connect-assets with Express to precompile Handlebar templates

I'm using Express, connect-assets on an Ember project. I'm stuck with making connect-assets to properly precompile the handlebar templates.
I've configured express like this:
app.use(assets({
src: app_root + 'app',
buildDir: './public',
jsCompilers: {
hbs: hbsAssets
}
}));
and with hbsAssets being:
module.exports = {
match: /\.js$/,
compileSync: function(sourcePath, source) {
var match = sourcePath.match(/^.*\/app\/js\/templates\/(.+)\.hbs/)
, templateName = match[1];
var filename = path.basename(sourcePath, '.hbs')
, js = handlebars.precompile(source).toString();
return 'Ember.TEMPLATES' + '["' + templateName + '"] = Handlebars.template(' + js + ');';
}
};
The problem is that the only the hbs layouts get rendered, the {{outlet}}s don't get inserted.
Any help would be appreciated
In the end I ended up using https://npmjs.org/package/ember-template-compiler . It worked out of the box.

#each iteration number in Ember.js or {{#index}}

According to this question, it was possible to do something like this with Handlebars rc1:
{{#each links}}
<li>{{#index}} - {{url}}</li>
{{/each}}
{{#index}} would basically give you the iteration index, which is really useful when creating tables.
When I try this with Ember.js rc3, I get an unexpected token error. Does this not work anymore? Did it ever work? Is there another way to get the iteration index?
It looks like it was possible. Can't get it to work with HBS RC3. Probably, is deprecated.
Here's a "hand written" HBS helper.
This can help you gettin the index with {{index}} and side by side you can know if the iteration in on first or last object of the Array with {{first}} and {{last}} respectively.
Ember.Handlebars.registerHelper("foreach", function(path, options) {
var ctx;
var helperName = 'foreach';
if (arguments.length === 4) {
Ember.assert("If you pass more than one argument to the foreach helper, it must be in the form #foreach foo in bar", arguments[1] === "in");
var keywordName = arguments[0];
options = arguments[3];
path = arguments[2];
helperName += ' ' + keywordName + ' in ' + path;
if (path === '') {
path = "this";
}
options.hash.keyword = keywordName;
} else if (arguments.length === 1) {
options = path;
path = 'this';
} else {
helperName += ' ' + path;
}
options.hash.dataSourceBinding = path;
// Set up emptyView as a metamorph with no tag
//options.hash.emptyViewClass = Ember._MetamorphView;
// can't rely on this default behavior when use strict
ctx = this || window;
var len = options.contexts[0][path].length;
options.helperName = options.helperName || helperName;
options.contexts[0][path].map(function(item, index) {
item.index = index;
item.first = index === 0;
item.last = index === len - 1;
})
if (options.data.insideGroup && !options.hash.groupedRows && !options.hash.itemViewClass) {
new GroupedEach(ctx, path, options).render();
} else {
return Ember.Handlebars.helpers.collection.call(ctx, Ember.Handlebars.EachView, options);
}
});
and this can be tested like
{{#foreach array}}
{{log index first last}}
{{/foreach}}
i had the same problem recently i finish by writing a bound helper and passing them objects via Binding for example item here is an ember DS.Store object and content is a 'content' of the controller. hope it
Ember.Handlebars.registerBoundHelper 'isPair', (content, options)->
item = options.hash.item
content_name = options.hash.content || 'content'
if #get(content_name).indexOf(item) % 2 == 0 then 'is-pair' else 'is-unpair'
and in you view you call it
{{isPair content itemBinding='order'}}
i don't know if it is what you looking for but it might give you some ideas how to use it in your project.
btw. Ember overwrites #each helper that's why there it no #index i suppose