From d919e3f7c4613dea03d802ab0d0a879012edd52c Mon Sep 17 00:00:00 2001 From: krzysztofmadejski Date: Sun, 9 Oct 2016 15:13:24 +0200 Subject: [PATCH 01/13] I18n support for reclin based on (backbone+moustache first draft. #459 https://github.com/yahoo/intl-messageformat/issues/145 --- _config.yml | 1 + _includes/recline-deps.html | 8 ++++++ make | 2 +- package.json | 4 ++- src/i18n/pl.js | 17 ++++++++++++ src/i18n/view.i18n.js | 52 +++++++++++++++++++++++++++++++++++++ src/view.multiview.js | 13 ++++++---- test/index.html | 3 +++ 8 files changed, 93 insertions(+), 7 deletions(-) create mode 100644 src/i18n/pl.js create mode 100644 src/i18n/view.i18n.js diff --git a/_config.yml b/_config.yml index f54edddd..d6aefa8a 100644 --- a/_config.yml +++ b/_config.yml @@ -3,3 +3,4 @@ markdown: kramdown title: Recline Data Explorer and Library +exclude: [] diff --git a/_includes/recline-deps.html b/_includes/recline-deps.html index 3e6d7360..c59c999a 100644 --- a/_includes/recline-deps.html +++ b/_includes/recline-deps.html @@ -46,6 +46,11 @@ + + + + + @@ -66,6 +71,9 @@ + + + diff --git a/make b/make index 324b840a..1a949d79 100755 --- a/make +++ b/make @@ -5,7 +5,7 @@ import os def cat(): print("** Combining js files") - cmd = 'ls src/*.js | grep -v couchdb | xargs cat > dist/recline.js' + cmd = '{ ls src/**/*.js & ls src/*.js; } | grep -v couchdb | xargs cat > dist/recline.js' os.system(cmd) cmd = 'cat src/model.js src/backend.memory.js > dist/recline.dataset.js' diff --git a/package.json b/package.json index 7fb7550d..27c039bf 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,9 @@ "backbone": ">=0.5", "jquery": ">=1.6", "mustache": ">=0.5.2", - "underscore": ">=1.0" + "underscore": ">=1.0", + "intl-messageformat": "1.3.x", + "intl-format-cache": "2.0.x" }, "homepage": "http://reclinejs.com/", "keywords": [ diff --git a/src/i18n/pl.js b/src/i18n/pl.js new file mode 100644 index 00000000..2bbeef6a --- /dev/null +++ b/src/i18n/pl.js @@ -0,0 +1,17 @@ +this.recline = this.recline || {}; +this.recline.View = this.recline.View || {}; +this.recline.View.translations = this.recline.View.translations || {}; + +this.recline.View.translations['pl'] = { + 'Grid': 'Tabela', + +} + +// +//(function(v) { +// "use strict"; +// +// +// +//})(recline.t); +// diff --git a/src/i18n/view.i18n.js b/src/i18n/view.i18n.js new file mode 100644 index 00000000..20857fe8 --- /dev/null +++ b/src/i18n/view.i18n.js @@ -0,0 +1,52 @@ +/*jshint multistr:true */ + +Backbone.I18nView = Backbone.View.extend({ + locale: 'en', + initialize: function() { + console.log("Call on me"); + // TODO implement cache + //memoizeFormatConstructor(Intl.NumberFormat).getNumberFormat(); + }, + t: function(key, values = {}, defaultMessage = null) { + // get the message from current locale + var msg = recline.View.translations['pl'][key]; + + // fallback to key or default message if no translation is defined + if (msg == null) { + console.warn("Missing locale for " + "pl" + "." + key); // TODO when dfault set and it's default locale then be quiet + msg = defaultMessage; + } + if (msg == null) { msg = key; } + + // TODO test fallback to key + // TODO test fallback to default message + // TODO test overriding messages in external apps + // TODO i18n documentation + + var mf = new IntlMessageFormat(msg, 'pl'); + return mf.format(values); + }, + MustacheFormatter: function() { + var property_formatter = new Proxy({}, { + get(target, name) { + // todo implement formatting + return "key: " + name; + }, + has(target, prop) { + return true; + } + }); + + var section_formatter = function() { + return function (text, render) { + // todo implement formatting + return "" + render(text) + ""; + } + }; + + return { + 't': property_formatter, + 'trans': section_formatter + }; + }, +}); diff --git a/src/view.multiview.js b/src/view.multiview.js index d5f9d315..319c81b2 100644 --- a/src/view.multiview.js +++ b/src/view.multiview.js @@ -94,7 +94,7 @@ this.recline.View = this.recline.View || {}; // of views in use -- e.g. those specified by the views argument -- but instead // expect either that the default views are fine or that the client to have // initialized the MultiView with the relevant views themselves. -my.MultiView = Backbone.View.extend({ +my.MultiView = Backbone.I18nView.extend({ template: ' \
\
\ @@ -108,6 +108,8 @@ my.MultiView = Backbone.View.extend({
\ \
\ + {{t.num_records}} -> t + getattr \ + {{#trans}}{{recordCount}} records{{/trans}} -- \ {{recordCount}} records\
\
\ @@ -138,28 +140,28 @@ my.MultiView = Backbone.View.extend({ } else { this.pageViews = [{ id: 'grid', - label: 'Grid', + label: this.t('Grid'), view: new my.SlickGrid({ model: this.model, state: this.state.get('view-grid') }) }, { id: 'graph', - label: 'Graph', + label: this.t('Graph'), view: new my.Graph({ model: this.model, state: this.state.get('view-graph') }) }, { id: 'map', - label: 'Map', + label: this.t('Map'), view: new my.Map({ model: this.model, state: this.state.get('view-map') }) }, { id: 'timeline', - label: 'Timeline', + label: this.t('Timeline'), view: new my.Timeline({ model: this.model, state: this.state.get('view-timeline') @@ -238,6 +240,7 @@ my.MultiView = Backbone.View.extend({ var tmplData = this.model.toTemplateJSON(); tmplData.views = this.pageViews; tmplData.sidebarViews = this.sidebarViews; + tmplData = _.extend(tmplData, this.MustacheFormatter()); var template = Mustache.render(this.template, tmplData); this.$el.html(template); diff --git a/test/index.html b/test/index.html index 5b748f29..8c7e2ec8 100644 --- a/test/index.html +++ b/test/index.html @@ -55,6 +55,9 @@ + + + From d871bc40b864f64fe3291d8b8139abcab5b16f2f Mon Sep 17 00:00:00 2001 From: krzysztofmadejski Date: Sun, 6 Nov 2016 10:48:17 +0100 Subject: [PATCH 02/13] #459 - next iteration --- src/i18n/view.i18n.js | 66 +++++++++++++++++++++++++++++++------------ 1 file changed, 48 insertions(+), 18 deletions(-) diff --git a/src/i18n/view.i18n.js b/src/i18n/view.i18n.js index 20857fe8..c20d123d 100644 --- a/src/i18n/view.i18n.js +++ b/src/i18n/view.i18n.js @@ -1,48 +1,78 @@ /*jshint multistr:true */ +// todo probably some kind of mixin would be better +//usage: (zamienic na extension) +// my.View - Backbone.View.extend({}); +//_.extend(my.View, Backbone.I18nView); + Backbone.I18nView = Backbone.View.extend({ locale: 'en', - initialize: function() { - console.log("Call on me"); + initializeI18n: function(locale) { + this.locale = locale; // TODO implement cache //memoizeFormatConstructor(Intl.NumberFormat).getNumberFormat(); }, + + formatMessage(key, values) { + this.cachedMsg.format(key, values); + }, + + // TODO how to use it from outside? an singleton instance of I18n? use case: pass translated strings into view initializer t: function(key, values = {}, defaultMessage = null) { // get the message from current locale - var msg = recline.View.translations['pl'][key]; + var msg = recline.View.translations[this.locale][key]; // fallback to key or default message if no translation is defined if (msg == null) { - console.warn("Missing locale for " + "pl" + "." + key); // TODO when dfault set and it's default locale then be quiet + console.warn("Missing locale for " + this.locale + "." + key); // TODO when dfault set and it's default locale then be quiet msg = defaultMessage; } if (msg == null) { msg = key; } - // TODO test fallback to key - // TODO test fallback to default message - // TODO test overriding messages in external apps // TODO i18n documentation - var mf = new IntlMessageFormat(msg, 'pl'); - return mf.format(values); + try { + var mf = new IntlMessageFormat(msg, 'pl'); + var formatted = mf.format(values); + + return formatted; + } catch (e) { + console.error("Got error while formatting \"" + msg + "\": " + e.message); + // todo {{ wywala Message format, trzeba by wyescapować i pwrzywrócic po podmianie + return msg; + } + + // TODO document below error (most probable variables ref hasn't ben changed in template) + /* 19:10:40.954 SyntaxError: