From ac25b62fdc591ae4237a16bbd25f7b6d9eadbdfe Mon Sep 17 00:00:00 2001 From: Sam Lanning Date: Sun, 17 Jan 2016 10:54:34 +0000 Subject: [PATCH] Improve implementation of i18n for Install Flow following comments on #611 * Move install flow i18n logic to install_view.js (from options.js) * Switch to using placeholders (instead of jQuery) for i18n messages with html. * Switch to using moustache template instead of jQuery for i18n substitution. // FREEBIE --- _locales/en/messages.json | 18 +++++-- js/chromium.js | 4 +- js/options.js | 27 ---------- js/views/install_view.js | 22 ++++++++ js/views/whisper_view.js | 4 ++ options.html | 111 +++++++++++++++++++------------------- 6 files changed, 99 insertions(+), 87 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 1dcdbbda..48aec7f6 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -115,15 +115,27 @@ "message": "Get started" }, "installSignalLink": { - "message": "First, install Signal on your Android phone.
We'll link your devices and keep your messages in sync.", - "description": "Prompt the user to install Signal on Android before pairing" + "message": "First, install Signal on your Android phone.
We'll link your devices and keep your messages in sync.", + "description": "Prompt the user to install Signal on Android before pairing", + "placeholders": { + "a_params": { + "content": "$1", + "example": "href='http://example.com'" + } + } }, "installIHaveSignalButton": { "message": "I have Signal for Android", "description": "Button for the user to confirm that they have Signal for Android" }, "installFollowUs": { - "message": "Follow us for updates about multi-device support for iOS." + "message": "Follow us for updates about multi-device support for iOS.", + "placeholders": { + "a_params": { + "content": "$1", + "example": "href='http://example.com'" + } + } }, "installAndroidInstructions": { "message": "Open Signal on your phone and navigate to Settings > Devices. Tap the button to add a new device, then scan the code above." diff --git a/js/chromium.js b/js/chromium.js index 6d902164..abfc65f5 100644 --- a/js/chromium.js +++ b/js/chromium.js @@ -158,8 +158,8 @@ }; // Translate - window.i18n = function(message) { - return chrome.i18n.getMessage(message); + window.i18n = function(message, substitutions) { + return chrome.i18n.getMessage(message, substitutions); }; window.textsecure = window.textsecure || {}; diff --git a/js/options.js b/js/options.js index 6acdafba..b43401a1 100644 --- a/js/options.js +++ b/js/options.js @@ -58,31 +58,4 @@ }); }); }); - - // Apply i18n - $(document).ready(function(){ - // Basic Substitution - $('[data-i18n]').each(function(){ - var $this = $(this); - $this.text(i18n($this.data('i18n'))); - }); - - // Text with link to Play Store - var $installSignalLinkContent = $('' + i18n('installSignalLink') + ''); - $installSignalLinkContent.find('a').attr({ - class: 'link', - href: 'https://play.google.com/store/apps/details?id=org.thoughtcrime.securesms', - target: '_blank' - }); - $('#installSignalLink').append($installSignalLinkContent); - - // Text with link to Twitter - var $installFollowUsContent = $('' + i18n('installFollowUs') + ''); - $installFollowUsContent.find('a').attr({ - class: 'link', - href: 'https://twitter.com/whispersystems', - target: '_blank' - }); - $('#installFollowUs').append($installFollowUsContent); - }); })(); diff --git a/js/views/install_view.js b/js/views/install_view.js index 2ccba93a..518d4110 100644 --- a/js/views/install_view.js +++ b/js/views/install_view.js @@ -6,8 +6,30 @@ window.Whisper = window.Whisper || {}; Whisper.InstallView = Whisper.View.extend({ + templateName: 'install_flow_template', + render_attributes: function() { + var installSignalHref = 'https://play.google.com/store/apps/details?id=org.thoughtcrime.securesms'; + var twitterHref = 'https://twitter.com/whispersystems'; + return { + installWelcome: i18n('installWelcome'), + installTagline: i18n('installTagline'), + installGetStartedButton: i18n('installGetStartedButton'), + installSignalLink: this.i18n_with_link('installSignalLink', installSignalHref), + installIHaveSignalButton: i18n('installIHaveSignalButton'), + installFollowUs: this.i18n_with_link('installFollowUs', twitterHref), + installAndroidInstructions: i18n('installAndroidInstructions'), + installLinkingWithNumber: i18n('installLinkingWithNumber'), + installComputerName: i18n('installComputerName'), + installFinalButton: i18n('installFinalButton'), + installTooManyDevices: i18n('installTooManyDevices'), + ok: i18n('ok'), + }; + }, initialize: function(options) { this.counter = 0; + + this.render(); + this.$('#device-name').val(options.deviceName); this.$('#step1').show(); }, diff --git a/js/views/whisper_view.js b/js/views/whisper_view.js index 93a0a9b5..26bff2ee 100644 --- a/js/views/whisper_view.js +++ b/js/views/whisper_view.js @@ -56,6 +56,10 @@ }); this.$el.append(dialog.el); }.bind(this)); + }, + i18n_with_link: function(message, href){ + var attrs = 'class="link" href="' + encodeURI(href) + '" target="_blank"'; + return i18n(message, attrs); } },{ // Class attributes diff --git a/options.html b/options.html index f3283f5a..f6766986 100644 --- a/options.html +++ b/options.html @@ -8,72 +8,73 @@
-
- -
-

-

-
- - - +