Bug 1207044 - Refactor L10n/Intl in Clock to prepare for NGA

mozilla-b2g · Sep 25, 2015 · 3f7eb20 · 3f7eb20
1 parent aad942e
commit 3f7eb20
Show file tree

Hide file tree

Showing 47 changed files with 1,124 additions and 784 deletions.
diff --git a/apps/clock/index.html b/apps/clock/index.html
@@ -20,6 +20,17 @@
 
     <link rel="stylesheet" type="text/css" href="style/hacks.css">
 
+    <!-- Localization -->
+    <meta name="defaultLanguage" content="en-US">
+    <meta name="availableLanguages" content="en-US">
+    <link rel="localization" href="/shared/locales/date/date.{locale}.properties">
+    <link rel="localization" href="locales/clock.{locale}.properties">
+    <link rel="localization" href="locales/alarms.{locale}.properties">
+    <script defer src="/shared/js/l10n.js"></script>
+    <script defer src="/shared/js/date_time_helper.js"></script>
+    <script defer src="/shared/js/moz_intl.js"></script>
+    <script defer src="/shared/js/intl_helper.js"></script>
+
     <!-- These are lazy loaded. Need to be included here so the build picks them up
     <link rel="stylesheet" type="text/css" href="shared/style/input_areas.css" >
     <link rel="stylesheet" type="text/css" href="shared/style/buttons.css" >
@@ -29,8 +40,6 @@
       The following scripts are lazy loaded but left here to ensure
       they get copied over from shared during the build
     -->
-    <!-- <script defer src="/shared/js/l10n.js"></script> -->
-    <!-- <script defer src="/shared/js/l10n_date.js"></script> -->
     <!-- <script defer src="/shared/js/async_storage.js"></script> -->
     <!-- <script defer src="/shared/js/gesture_detector.js"></script> -->
     <!-- <script defer src="/shared/js/accessibility_helper.js"></script> -->
@@ -46,14 +55,6 @@
 
     <!-- Shared sounds -->
     <link rel="resources" type="directory" href="shared/resources/media/alarms/">
-
-    <!-- Localization -->
-    <meta name="defaultLanguage" content="en-US">
-    <meta name="availableLanguages" content="en-US">
-    <link rel="localization" href="/shared/locales/date/date.{locale}.properties">
-    <link rel="localization" href="locales/clock.{locale}.properties">
-    <link rel="localization" href="locales/alarms.{locale}.properties">
-    <script defer src="/shared/js/date_time_helper.js"></script>
   </head>
 
   <body class="theme-media">

diff --git a/apps/clock/js/alarm.js b/apps/clock/js/alarm.js
@@ -1,8 +1,6 @@
 define(function(require, exports, module) {
   'use strict';
 
-  var DAYS_STARTING_SUNDAY = require('constants').DAYS_STARTING_SUNDAY;
-
   /**
    * Alarm represents one alarm instance. It tracks any mozAlarms it
    * has registered, its IndexedDB ID, and any other properties
@@ -14,7 +12,9 @@ define(function(require, exports, module) {
     var defaults = {
       id: null,
       registeredAlarms: {}, // keys: ('normal' or 'snooze') => mozAlarmID
-      repeat: {}, // Map like { "monday": true, "tuesday": false, ... }
+      // Map of weekdays { "0": true, "1": false, ... }
+      // "0" is for Sunday in Gregorian calendar
+      repeat: {},
       hour: now.getHours(),
       minute: now.getMinutes(),
       label: '',
@@ -76,7 +76,7 @@ define(function(require, exports, module) {
 
       while (nextFire <= now ||
              (this.isRepeating() &&
-              !this.repeat[DAYS_STARTING_SUNDAY[nextFire.getDay()]])) {
+              !this.repeat[nextFire.getDay().toString()])) {
         nextFire.setDate(nextFire.getDate() + 1);
       }
       return nextFire;

diff --git a/apps/clock/js/alarm_database.js b/apps/clock/js/alarm_database.js
@@ -81,19 +81,33 @@ define(function(require) {
         delete alarm.snoozeAlarmId;
       }
 
+      var newRepeat = {};
+      var i;
+
       // Map '1111100' string bitmap to a repeat object with day properties.
       if (typeof alarm.repeat === 'string') {
-        var days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday',
-                    'saturday', 'sunday'];
-        var newRepeat = {};
-        for (var i = 0; i < alarm.repeat.length && i < days.length; i++) {
-          if (alarm.repeat[i] === '1') {
-            newRepeat[days[i]] = true;
+        for (i = 0; i < alarm.repeat.length; i++) {
+          if (alarm.repeat[i.toString()] === '1') {
+            newRepeat[i.toString()] = true;
           }
         }
         alarm.repeat = newRepeat;
+      } else if (typeof alarm.repeat === 'object') {
+        var keys = Object.keys(alarm.repeat);
+        if (keys.length !== 0 && Number.isNaN(parseInt(keys[0]))) {
+          var oldKeys = ['sunday', 'monday', 'tuesday', 'wednesday',
+            'thursday', 'friday', 'saturday'];
+
+          for (i = 0; i < keys.length; i++) {
+            var index = oldKeys.indexOf(keys[i]);
+            if (index !== -1) {
+              newRepeat[index] = alarm.repeat[keys[i]];
+            }
+          }
+          alarm.repeat = newRepeat;
+        }
       } else {
-        alarm.repeat = alarm.repeat || {};
+        alarm.repeat = newRepeat;
       }
 
       // Pre-April-2014 code may have stored 'vibrate' and 'sound' as

diff --git a/apps/clock/js/banner/banner.html b/apps/clock/js/banner/banner.html
@@ -1 +1 @@
-<p>${notice}</p>
+<p data-l10n-id="${noticeId}" data-l10n-args="${noticeArgs}"></p>
diff --git a/apps/clock/js/banner/main.js b/apps/clock/js/banner/main.js
@@ -3,7 +3,6 @@ define(function(require) {
 
   var Template = require('template');
   var Utils = require('utils');
-  var mozL10n = require('l10n');
   var html = require('text!banner/banner.html');
 
   function Banner(node) {
@@ -25,55 +24,43 @@ define(function(require) {
     constructor: Banner,
 
     render: function bn_render(alarmTime) {
-      var timeLeft, tl, countdownType, localTimes, unitObj;
+      var timeLeft, tl, countdownType, localTimes;
 
       timeLeft = +alarmTime - Date.now();
       // generate human readable numbers to pass to localization function
       tl = Utils.dateMath.fromMS(timeLeft, {
         unitsPartial: ['days', 'hours', 'minutes']
       });
 
-      // Match properties to localizations string types
-      // e.g. minutes maps to nMinutes if there are no hours but
-      // nRemainMinutes if hours > 0
       if (tl.days) {
-        //countdown-moreThanADay localized only for en-US while 913466 is open
-        countdownType = 'countdown-moreThanADay';
-        localTimes = [
-          ['days', 'nRemainDays', tl.days],
-          ['hours', 'nAndRemainHours', tl.hours]
-        ];
+        countdownType = 'countdown_moreThanADay';
+        localTimes = {
+          'days': tl.days,
+          'hours': tl.hours
+        };
       } else if (tl.hours > 0) {
-        countdownType = 'countdown-moreThanAnHour';
-        localTimes = [
-          ['hours', 'nHours', tl.hours],
-          ['minutes', 'nRemainMinutes', tl.minutes]
-        ];
+        countdownType = 'countdown_moreThanAnHour';
+        localTimes = {
+          'hours': tl.hours,
+          'minutes': tl.minutes
+        };
       } else {
-        countdownType = 'countdown-lessThanAnHour';
-        localTimes = [
-          ['minutes', 'nMinutes', tl.minutes]
-        ];
+        countdownType = 'countdown_lessThanAnHour';
+        localTimes = {
+          'minutes': tl.minutes
+        };
       }
 
-      // Create an object to pass to mozL10n.get
-      // e.g. {minutes: mozL10n.get('nMinutes', {n: 3})}
-      unitObj = localTimes.reduce(function(lcl, time) {
-        lcl[time[0]] = mozL10n.get(time[1], {n: time[2]});
-        return lcl;
-      }, {});
-
-      // mozL10n.get interpolates the units in unitObj inside the
-      // localization string for countdownType
-      return mozL10n.get(countdownType, unitObj);
+      return {
+        noticeId: countdownType,
+        noticeArgs: JSON.stringify(localTimes)
+      };
     },
 
     show: function bn_show(alarmTime) {
       // Render the Banner notice
       this.notice.innerHTML = this.tmpl.interpolate(
-        {notice: this.render(alarmTime)},
-        // Localization strings contain <strong> tags
-        {safe: ['notice']}
+        this.render(alarmTime)
       );
       // 'visible' class controls the animation
       this.notice.classList.add('visible');

diff --git a/apps/clock/js/constants.js b/apps/clock/js/constants.js
@@ -4,22 +4,6 @@ define(function(require, exports) {
   // ---------------------------------------------------------
   // Constants
 
-  exports.DAYS_STARTING_MONDAY = [
-    'monday', 'tuesday', 'wednesday', 'thursday', 'friday',
-    'saturday', 'sunday'];
-
-  exports.DAYS_STARTING_SUNDAY = [
-    'sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday',
-    'saturday'];
-
-  exports.DAY_STRING_TO_L10N_ID = {
-    'sunday': 'weekday-0-short',
-    'monday': 'weekday-1-short',
-    'tuesday': 'weekday-2-short',
-    'wednesday': 'weekday-3-short',
-    'thursday': 'weekday-4-short',
-    'friday': 'weekday-5-short',
-    'saturday': 'weekday-6-short'
-  };
-
+  // Random day that happens to be Sunday
+  exports.KNOWN_SUNDAY = new Date(2015, 8, 20);
 });
diff --git a/apps/clock/js/form_button.js b/apps/clock/js/form_button.js
@@ -91,7 +91,22 @@ FormButton.prototype = {
    */
   refresh: function() {
     var value = this.value;
-    this.button.textContent = this.formatLabel(value);
+
+    var label = this.formatLabel(value);
+
+    // In some cases formatLabel returns a Promise that returns l10nId
+    var labelPromise = label.then ? label : Promise.resolve(label);
+
+    return labelPromise.then((l10nId) => {
+      if (typeof l10nId === 'string') {
+        this.button.setAttribute('data-l10n-id', l10nId);
+      } else if (l10nId.raw) {
+        this.button.removeAttribute('data-l10n-id');
+        this.button.textContent = l10nId.raw;
+      } else if (l10nId.id) {
+        navigator.mozL10n.setAttributes(this.button, l10nId.id, l10nId.args);
+      }
+    });
   },
 
   /**
@@ -154,11 +169,11 @@ FormButton.prototype = {
    * An overrideable method that is called when updating the textContent
    * of the button.
    *
-   * @return {String} The formatted text to display in the label.
+   * @return {L10nId} The formatted text to display in the label.
    *
    */
   formatLabel: function(value) {
-    return value;
+    return { raw: value };
   },
 
   /**

diff --git a/apps/clock/js/l10n.js b/apps/clock/js/l10n.js
diff --git a/apps/clock/js/panels/alarm/alarm_list.js b/apps/clock/js/panels/alarm/alarm_list.js
@@ -1,10 +1,10 @@
 define(function(require) {
 'use strict';
+/* global IntlHelper */
 
 var Banner = require('banner/main');
 var alarmDatabase = require('alarm_database');
 var Utils = require('utils');
-var _ = require('l10n').get;
 var App = require('app');
 var alarmTemplate = require('tmpl!panels/alarm/list_item.html');
 var AsyncQueue = require('async_queue');
@@ -29,7 +29,8 @@ function AlarmListPanel(element) {
     App.alarmListLoaded();
   });
 
-  window.addEventListener('timeformatchange', this.refreshDisplay.bind(this));
+  // This will be fired on language and timeformat changes
+  IntlHelper.observe('time-html', this.refreshDisplay.bind(this));
 
   window.addEventListener('alarm-changed', (evt) => {
     var alarm = evt.detail.alarm;
@@ -100,10 +101,25 @@ AlarmListPanel.prototype = {
     link.dataset.id = alarm.id;
 
     li.querySelector('.time').innerHTML = Utils.getLocalizedTimeHtml(d);
-    li.querySelector('.label').textContent = alarm.label || _('alarm');
-    li.querySelector('.repeat').textContent =
-      (alarm.isRepeating() ? Utils.summarizeDaysOfWeek(alarm.repeat) : '');
-
+    if (alarm.label) {
+      li.querySelector('.label').removeAttribute('data-l10n-id');
+      li.querySelector('.label').textContent = alarm.label;
+    } else {
+      li.querySelector('.label').setAttribute('data-l10n-id', 'alarm');
+    }
+    if (alarm.isRepeating()) {
+      Utils.summarizeDaysOfWeek(alarm.repeat).then(l10nId => {
+        if (typeof l10nId === 'string') {
+          li.querySelector('.repeat').setAttribute('data-l10n-id', l10nId);
+        } else if (l10nId.raw) {
+          li.querySelector('.repeat').removeAttribute('data-l10n-id');
+          li.querySelector('.repeat').textContent = l10nId.raw;
+        }
+      });
+    } else {
+      li.querySelector('.repeat').removeAttribute('data-l10n-id');
+      li.querySelector('.repeat').textContent = '';
+    }
     return li;
   },
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<p>${notice}</p>
		<p data-l10n-id="${noticeId}" data-l10n-args="${noticeArgs}"></p>