From 8e7653f4b7b7dc14cbdb5b8d930609c2da657c0c Mon Sep 17 00:00:00 2001 From: Jack Allnutt Date: Fri, 10 Jul 2015 22:09:52 +0100 Subject: [PATCH] First pass at live translation updates --- client/assets/libs/i18n.js | 45 +++++++++++++++++++++++ client/src/app.js | 6 +-- client/src/applets/chanlist.js | 10 ++--- client/src/applets/scripteditor.js | 11 +++--- client/src/applets/settings.js | 9 +++++ client/src/index.html.tmpl | 59 +++++++++++++++--------------- client/src/views/nickchangebox.js | 10 ++--- client/src/views/serverselect.js | 23 +++--------- client/src/views/userbox.js | 16 ++------ server/settingsgenerator.js | 2 +- 10 files changed, 111 insertions(+), 80 deletions(-) create mode 100644 client/assets/libs/i18n.js diff --git a/client/assets/libs/i18n.js b/client/assets/libs/i18n.js new file mode 100644 index 000000000..f64283422 --- /dev/null +++ b/client/assets/libs/i18n.js @@ -0,0 +1,45 @@ +function I18n(locale) { + this.update_locale(locale); +} + +I18n.prototype.update_locale = function(locale) { + this.jed = new Jed(locale); +}; + +I18n.prototype.translate = function(key) { + return this.jed.translate.call(this.jed, key); +}; + +I18n.prototype.translateDOM = function(el) { + var that = this, + parent, + nextSibling, + fragment; + + if (el.parent) { + parent = el.parent; + nextSibling = el.nextSibling; + fragment = parent.removeChild(el); + } else { + fragment = el; + } + + _.each(fragment.querySelectorAll('[data-translate]'), function (insertion_point) { + insertion_point.textContent = that.translate(insertion_point.getAttribute('data-translate')).fetch(); + }); + _.each(fragment.querySelectorAll('[data-translate-attr]'), function (insertion_point) { + var attr = insertion_point.getAttribute('data-translate-attr'), + key = insertion_point.getAttribute('data-translate-attr-key'); + insertion_point.setAttribute(attr, that.translate(key).fetch()); + }); + + if (parent) { + if (nextSibling) { + el = parent.insertBefore(el, nextSibling); + } else { + el = parent.appendChild(el); + } + } + + return el; +}; \ No newline at end of file diff --git a/client/src/app.js b/client/src/app.js index 4aedec780..0e13260fb 100644 --- a/client/src/app.js +++ b/client/src/app.js @@ -206,7 +206,7 @@ _kiwi.global = { var locale_promise, theme_promise, that = this; - opts = opts || {}; + this.opts = opts = opts || {}; this.initUtils(); @@ -222,9 +222,9 @@ _kiwi.global = { var locale = _kiwi.global.settings.get('locale') || opts.locale || opts.server_settings.client.settings.locale || 'magic'; $.getJSON(opts.base_path + '/assets/locales/' + locale + '.json', function (locale) { if (locale) { - that.i18n = new Jed(locale); + that.i18n = new I18n(locale); } else { - that.i18n = new Jed(); + that.i18n = new I18n(); } resolve(); }); diff --git a/client/src/applets/chanlist.js b/client/src/applets/chanlist.js index 39c63a635..85e747721 100644 --- a/client/src/applets/chanlist.js +++ b/client/src/applets/chanlist.js @@ -10,12 +10,10 @@ initialize: function (options) { - var text = { - channel_name: _kiwi.global.i18n.translate('client_applets_chanlist_channelname').fetch(), - users: _kiwi.global.i18n.translate('client_applets_chanlist_users').fetch(), - topic: _kiwi.global.i18n.translate('client_applets_chanlist_topic').fetch() - }; - this.$el = $(_.template($('#tmpl_channel_list').html().trim(), text)); + var tmp_el = document.createElement('div'); + tmp_el.innerHTML = $('#tmpl_channel_list').html().trim(); + _kiwi.global.i18n.translateDOM(tmp_el); + this.setElement(tmp_el.removeChild(tmp_el.firstChild)); this.channels = []; diff --git a/client/src/applets/scripteditor.js b/client/src/applets/scripteditor.js index e427fb303..21d2dc071 100644 --- a/client/src/applets/scripteditor.js +++ b/client/src/applets/scripteditor.js @@ -5,11 +5,12 @@ }, initialize: function (options) { - var that = this, - text = { - save: _kiwi.global.i18n.translate('client_applets_scripteditor_save').fetch() - }; - this.$el = $(_.template($('#tmpl_script_editor').html().trim(), text)); + var tmp_el = document.createElement('div'), + that = this; + + tmp_el.innerHTML = $('#tmpl_script_editor').html().trim(); + _kiwi.global.i18n.translateDOM(tmp_el); + this.setElement(tmp_el.removeChild(tmp_el.firstChild)); this.model.on('applet_loaded', function () { that.$el.parent().css('height', '100%'); diff --git a/client/src/applets/settings.js b/client/src/applets/settings.js index 44179f005..2161a85c1 100644 --- a/client/src/applets/settings.js +++ b/client/src/applets/settings.js @@ -106,6 +106,15 @@ settings.set($setting.data('setting'), value); settings.save(); + if ($setting.data('setting') === 'locale') { + $.getJSON(_kiwi.global.opts.base_path + '/assets/locales/' + value + '.json', function (locale) { + if (locale) { + _kiwi.global.i18n.update_locale(locale); + _kiwi.global.i18n.translateDOM(_kiwi.app.get('container')[0]); + } + }); + } + // Continue listening for setting changes _kiwi.global.settings.on('change', this.loadSettings, this); }, diff --git a/client/src/index.html.tmpl b/client/src/index.html.tmpl index f939581ba..14980b9c8 100644 --- a/client/src/index.html.tmpl +++ b/client/src/index.html.tmpl @@ -118,22 +118,22 @@ @@ -155,67 +155,67 @@
-
<%= think_nick %>
+
- + - + - + - + - +
- +
- +
- +
- <%= server_network %> +
- + - + @@ -228,7 +228,7 @@ @@ -381,9 +381,9 @@
- - - + + + @@ -402,7 +402,7 @@ #kiwi .script_editor .se_toolbar button i { font-size:1.2em; margin-left:3px; }
-
+
@@ -527,7 +527,8 @@ scripts.push(['assets/libs/lodash.min.js?t=<%build_time%>']); scripts.push([ 'assets/libs/backbone.min.js?t=<%build_time%>', - 'assets/libs/jed.js?t=<%build_time%>' + 'assets/libs/jed.js?t=<%build_time%>', + 'assets/libs/i18n.js?t=<%build_time%>' ]); scripts.push([ 'assets/kiwi.min.js?t=<%build_time%>', diff --git a/client/src/views/nickchangebox.js b/client/src/views/nickchangebox.js index a054949b4..f41054099 100644 --- a/client/src/views/nickchangebox.js +++ b/client/src/views/nickchangebox.js @@ -5,12 +5,10 @@ _kiwi.view.NickChangeBox = Backbone.View.extend({ }, initialize: function () { - var text = { - new_nick: _kiwi.global.i18n.translate('client_views_nickchangebox_new').fetch(), - change: _kiwi.global.i18n.translate('client_views_nickchangebox_change').fetch(), - cancel: _kiwi.global.i18n.translate('client_views_nickchangebox_cancel').fetch() - }; - this.$el = $(_.template($('#tmpl_nickchange').html().trim(), text)); + var tmp_el = document.createElement('div'); + tmp_el.innerHTML = $('#tmpl_nickchange').html().trim(); + _kiwi.global.i18n.translateDOM(tmp_el); + this.setElement(tmp_el.removeChild(tmp_el.firstChild)); }, render: function () { diff --git a/client/src/views/serverselect.js b/client/src/views/serverselect.js index dce9ddd86..755c4ad80 100644 --- a/client/src/views/serverselect.js +++ b/client/src/views/serverselect.js @@ -9,24 +9,11 @@ _kiwi.view.ServerSelect = Backbone.View.extend({ }, initialize: function () { - var that = this, - text = { - think_nick: _kiwi.global.i18n.translate('client_views_serverselect_form_title').fetch(), - nickname: _kiwi.global.i18n.translate('client_views_serverselect_nickname').fetch(), - have_password: _kiwi.global.i18n.translate('client_views_serverselect_enable_password').fetch(), - password: _kiwi.global.i18n.translate('client_views_serverselect_password').fetch(), - channel: _kiwi.global.i18n.translate('client_views_serverselect_channel').fetch(), - channel_key: _kiwi.global.i18n.translate('client_views_serverselect_channelkey').fetch(), - require_key: _kiwi.global.i18n.translate('client_views_serverselect_channelkey_required').fetch(), - key: _kiwi.global.i18n.translate('client_views_serverselect_key').fetch(), - start: _kiwi.global.i18n.translate('client_views_serverselect_connection_start').fetch(), - server_network: _kiwi.global.i18n.translate('client_views_serverselect_server_and_network').fetch(), - server: _kiwi.global.i18n.translate('client_views_serverselect_server').fetch(), - port: _kiwi.global.i18n.translate('client_views_serverselect_port').fetch(), - powered_by: _kiwi.global.i18n.translate('client_views_serverselect_poweredby').fetch() - }; - - this.$el = $(_.template($('#tmpl_server_select').html().trim(), text)); + var tmp_el = document.createElement('div'); + + tmp_el.innerHTML = $('#tmpl_server_select').html().trim(); + _kiwi.global.i18n.translateDOM(tmp_el); + this.setElement(tmp_el.removeChild(tmp_el.firstChild)); // Remove the 'more' link if the server has disabled server changing if (_kiwi.app.server_settings && _kiwi.app.server_settings.connection) { diff --git a/client/src/views/userbox.js b/client/src/views/userbox.js index 3bcd30cf8..fed01b8b3 100644 --- a/client/src/views/userbox.js +++ b/client/src/views/userbox.js @@ -13,18 +13,10 @@ _kiwi.view.UserBox = Backbone.View.extend({ }, initialize: function () { - var text = { - op: _kiwi.global.i18n.translate('client_views_userbox_op').fetch(), - de_op: _kiwi.global.i18n.translate('client_views_userbox_deop').fetch(), - voice: _kiwi.global.i18n.translate('client_views_userbox_voice').fetch(), - de_voice: _kiwi.global.i18n.translate('client_views_userbox_devoice').fetch(), - kick: _kiwi.global.i18n.translate('client_views_userbox_kick').fetch(), - ban: _kiwi.global.i18n.translate('client_views_userbox_ban').fetch(), - message: _kiwi.global.i18n.translate('client_views_userbox_query').fetch(), - info: _kiwi.global.i18n.translate('client_views_userbox_whois').fetch(), - ignore: _kiwi.global.i18n.translate('client_views_userbox_ignore').fetch() - }; - this.$el = $(_.template($('#tmpl_userbox').html().trim(), text)); + var tmp_el = document.createElement('div'); + tmp_el.innerHTML = $('#tmpl_userbox').html().trim(); + _kiwi.global.i18n.translateDOM(tmp_el); + this.setElement(tmp_el.removeChild(tmp_el.firstChild)); }, setTargets: function (user, channel) { diff --git a/server/settingsgenerator.js b/server/settingsgenerator.js index 243d41b91..66084f06d 100644 --- a/server/settingsgenerator.js +++ b/server/settingsgenerator.js @@ -59,7 +59,7 @@ function generateSettings(debug) { [ 'assets/libs/lodash.min.js' ], - ['assets/libs/backbone.min.js', 'assets/libs/jed.js'] + ['assets/libs/backbone.min.js', 'assets/libs/jed.js', 'assets/libs/i18n.js'] ] };
<%= channel_name %><%= users %><%= topic %>