Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Live translation updates #726

Open
wants to merge 1 commit into
base: development
Choose a base branch
from
Open

Live translation updates #726

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions client/assets/libs/i18n.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
};
6 changes: 3 additions & 3 deletions client/src/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,7 @@ _kiwi.global = {
var locale_promise, theme_promise,
that = this;

opts = opts || {};
this.opts = opts = opts || {};

this.initUtils();

Expand All @@ -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();
});
Expand Down
10 changes: 4 additions & 6 deletions client/src/applets/chanlist.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [];

Expand Down
11 changes: 6 additions & 5 deletions client/src/applets/scripteditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%');
Expand Down
9 changes: 9 additions & 0 deletions client/src/applets/settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
},
Expand Down
59 changes: 30 additions & 29 deletions client/src/index.html.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,22 +118,22 @@

<script type="text/html" id="tmpl_userbox">
<div class="userbox">
<a class="close_menu if_op op"><i class="fa fa-star"></i><%= op %></a>
<a class="close_menu if_op deop"><i class="fa fa-star-o"></i><%= de_op %></a>
<a class="close_menu if_op voice"><i class="fa fa-volume-up"></i><%= voice %></a>
<a class="close_menu if_op devoice"><i class="fa fa-volume-off"></i><%= de_voice %></a>
<a class="close_menu if_op kick"><i class="fa fa-times"></i><%= kick %></a>
<a class="close_menu if_op ban"><i class="fa fa-ban"></i><%= ban %></a>

<a class="close_menu query"><i class="fa fa-comment"></i><%= message %></a>
<a class="close_menu info"><i class="fa fa-info-circle"></i><%= info %></a>
<a class="close_menu ignore"><label><i><input type="checkbox" /></i><%= ignore %></label></a>
<a class="close_menu if_op op"><i class="fa fa-star"></i><span data-translate="client_views_userbox_op"></span></a>
<a class="close_menu if_op deop"><i class="fa fa-star-o"></i><span data-translate="client_views_userbox_deop"></span></a>
<a class="close_menu if_op voice"><i class="fa fa-volume-up"></i><span data-translate="client_views_userbox_voice"></span></a>
<a class="close_menu if_op devoice"><i class="fa fa-volume-off"></i><span data-translate="client_views_userbox_devoice"></span></a>
<a class="close_menu if_op kick"><i class="fa fa-times"></i><span data-translate="client_views_userbox_kick"></span></a>
<a class="close_menu if_op ban"><i class="fa fa-ban"></i><span data-translate="client_views_userbox_ban"></span></a>

<a class="close_menu query"><i class="fa fa-comment"></i><span data-translate="client_views_userbox_query"></span></a>
<a class="close_menu info"><i class="fa fa-info-circle"></i><span data-translate="client_views_userbox_whois"></span></a>
<a class="close_menu ignore"><label><i><input type="checkbox" /></i><span data-translate="client_views_userbox_ignore"></span></label></a>
</div>
</script>

<script type="text/html" id="tmpl_nickchange">
<form class="nickchange">
<label for="nickchange"><%= new_nick %>:</label> <input type="text" mozactionhint="done" autocomplete="off" spellcheck="false"/> <button><%= change %></button> <a class="cancel"><%= cancel %></a>
<label for="nickchange"><span data-translate="client_views_nickchangebox_new"></:</label> <input type="text" mozactionhint="done" autocomplete="off" spellcheck="false"/> <button><span data-translate="client_views_nickchangebox_change"></span></button> <a class="cancel"><span data-translate="client_views_nickchangebox_cancel"></span></a>
</form>
</script>

Expand All @@ -155,67 +155,67 @@
</div>

<div class="server_details" style="position:relative;width:320px;">
<div class="status"><%= think_nick %></div>
<div class="status"><span data-translate="client_views_serverselect_form_title"></span></div>

<form>
<div class="basic">
<table>
<tr class="nick">
<td><label for="server_select_nick"><%= nickname %></label></td>
<td><label for="server_select_nick"><span data-translate="client_views_serverselect_nickname"></span></label></td>
<td><input type="text" class="nick" id="server_select_nick"></td>
</tr>

<tr class="have_pass">
<td colspan="2">
<label for="server_select_show_pass"><%= have_password %></label> <input type="checkbox" id="server_select_show_pass" style="width:auto;" />
<label for="server_select_show_pass"><span data-translate="client_views_serverselect_enable_password"></span></label> <input type="checkbox" id="server_select_show_pass" style="width:auto;" />
</td>
</tr>

<tr class="pass">
<td><label for="server_select_password"><%= password %></label></td>
<td><label for="server_select_password"><span data-translate="client_views_serverselect_password"></span></label></td>
<td><input type="password" class="password" id="server_select_password"></td>
</tr>

<tr class="channel">
<td><label for="server_select_channel"><%= channel %></label></td>
<td><label for="server_select_channel"><span data-translate="client_views_serverselect_channel"></span></label></td>
<td>
<div style="position:relative;">
<input type="text" class="channel" id="server_select_channel">
<i class="fa fa-key" title="<%= channel_key %>"></i>
<i class="fa fa-key" data-translate-attr="title" data-translate-attr-key="client_views_serverselect_channelkey"></i>
</div>
</td>
</tr>

<tr class="have_key">
<td colspan="2">
<label for="server_select_show_channel_key"><%= require_key %></label> <input type="checkbox" id="server_select_show_channel_key" style="width:auto;" />
<label for="server_select_show_channel_key"><span data-translate="client_views_serverselect_channelkey_required"></span></label> <input type="checkbox" id="server_select_show_channel_key" style="width:auto;" />
</td>
</tr>

<tr class="key">
<td><label for="server_select_channel_key"><%= key %></label></td>
<td><label for="server_select_channel_key"><span data-translate="client_views_serverselect_key"></span></label></td>
<td><input type="password" class="channel_key" id="server_select_channel_key"></td>
</tr>

<tr class="start">
<td></td>
<td><button type="submit"><%= start %></button></td>
<td><button type="submit"><span data-translate="client_views_serverselect_connection_start"></span></button></td>
</tr>
</table>

<a href="" onclick="return false;" class="show_more"><%= server_network %> <i class="fa fa-caret-down"></i></a>
<a href="" onclick="return false;" class="show_more"><span data-translate="client_views_serverselect_server_and_network"></span> <i class="fa fa-caret-down"></i></a>
</div>


<div class="more">
<table>
<tr class="server">
<td><label for="server_select_server"><%= server %></label></td>
<td><label for="server_select_server"><span data-translate="client_views_serverselect_server"></span></label></td>
<td><input type="text" class="server" id="server_select_server"></td>
<tr>

<tr class="port">
<td><label for="server_select_port"><%= port %></label></td>
<td><label for="server_select_port"><span data-translate="client_views_serverselect_port"></span></label></td>
<td><input type="text" class="port" id="server_select_port"></td>
</tr>

Expand All @@ -228,7 +228,7 @@
</form>

<a class="kiwi_logo" href="https://kiwiirc.com/" target="_blank">
<h1><span><%= powered_by %></span> <img src="<%base_path%>/assets/img/ico.png" alt="KiwiIRC Logo" title="Kiwi IRC" /></h1>
<h1><span><span data-translate="client_views_serverselect_poweredby"></span></span> <img src="<%base_path%>/assets/img/ico.png" alt="KiwiIRC Logo" title="Kiwi IRC" /></h1>
</a>
</div>
</div>
Expand Down Expand Up @@ -381,9 +381,9 @@
<table>
<thead style="font-weight: bold;">
<tr>
<td><a class="channel_name_title"><%= channel_name %></a></td>
<td><a class="users_title"><%= users %></a></td>
<td style="padding-left: 2em;"><%= topic %></td>
<td><a class="channel_name_title"><span data-translate="client_applets_chanlist_channelname"></span></a></td>
<td><a class="users_title"><span data-translate="client_applets_chanlist_users"></span></a></td>
<td style="padding-left: 2em;"><span data-translate="client_applets_chanlist_topic"></span></td>
</tr>
</thead>
<tbody style="vertical-align: top;">
Expand All @@ -402,7 +402,7 @@
#kiwi .script_editor .se_toolbar button i { font-size:1.2em; margin-left:3px; }
</style>
<div class="script_editor" style="height:100%; position:relative;">
<div class="se_toolbar"><button class="btn_save"><%= save %><i class="fa fa-floppy-o"></i></button><span class="status"></span></div>
<div class="se_toolbar"><button class="btn_save"><span data-translate="#tmpl_channel_list"></span><i class="fa fa-floppy-o"></i></button><span class="status"></span></div>
<div class="editor" style="position:absolute;top:50px;bottom:0px;left:0px;right:0px;"></div>
</div>
</div>
Expand Down Expand Up @@ -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%>',
Expand Down
10 changes: 4 additions & 6 deletions client/src/views/nickchangebox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand Down
23 changes: 5 additions & 18 deletions client/src/views/serverselect.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
16 changes: 4 additions & 12 deletions client/src/views/userbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion server/settingsgenerator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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']
]
};

Expand Down