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

mozilla-b2g · Sep 24, 2015 · f13abd9 · f13abd9
1 parent aad942e
commit f13abd9
Show file tree

Hide file tree

Showing 29 changed files with 459 additions and 333 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,7 @@ define(function(require, exports, module) {
     var defaults = {
       id: null,
       registeredAlarms: {}, // keys: ('normal' or 'snooze') => mozAlarmID
-      repeat: {}, // Map like { "monday": true, "tuesday": false, ... }
+      repeat: {}, // Map like { "0": true, "1": false, ... }
       hour: now.getHours(),
       minute: now.getMinutes(),
       label: '',
@@ -76,7 +74,7 @@ define(function(require, exports, module) {
 
       while (nextFire <= now ||
              (this.isRepeating() &&
-              !this.repeat[DAYS_STARTING_SUNDAY[nextFire.getDay()]])) {
+              !this.repeat[nextFire.getDay()])) {
         nextFire.setDate(nextFire.getDate() + 1);
       }
       return nextFire;

diff --git a/apps/clock/js/alarm_database.js b/apps/clock/js/alarm_database.js
@@ -83,12 +83,10 @@ define(function(require) {
 
       // 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++) {
+        for (var i = 0; i < alarm.repeat.length; i++) {
           if (alarm.repeat[i] === '1') {
-            newRepeat[days[i]] = true;
+            newRepeat[i] = true;
           }
         }
         alarm.repeat = newRepeat;

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,7 +24,7 @@ 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
@@ -39,41 +38,33 @@ define(function(require) {
       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]
-        ];
+        localTimes = {
+          'days': tl.days,
+          'hours': tl.hours
+        };
       } else if (tl.hours > 0) {
         countdownType = 'countdown-moreThanAnHour';
-        localTimes = [
-          ['hours', 'nHours', tl.hours],
-          ['minutes', 'nRemainMinutes', tl.minutes]
-        ];
+        localTimes = {
+          'hours': tl.hours,
+          'minutes': tl.minutes
+        };
       } else {
         countdownType = 'countdown-lessThanAnHour';
-        localTimes = [
-          ['minutes', 'nMinutes', tl.minutes]
-        ];
+        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,21 @@ FormButton.prototype = {
    */
   refresh: function() {
     var value = this.value;
-    this.button.textContent = this.formatLabel(value);
+
+    var label = this.formatLabel(value);
+
+    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 {
+        navigator.mozL10n.setAttributes(this.button, l10nId.id, l10nId.args);
+      }
+    });
   },
 
   /**
@@ -158,7 +172,7 @@ FormButton.prototype = {
    *
    */
   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,22 @@ 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;
+        }
+      });
+    }
     return li;
   },
 

diff --git a/apps/clock/js/panels/alarm/clock_view.js b/apps/clock/js/panels/alarm/clock_view.js
@@ -1,12 +1,18 @@
 define(function(require) {
 'use strict';
+ /* global IntlHelper */
 
 var asyncStorage = require('shared/js/async_storage');
 var Utils = require('utils');
 var SETTINGS_CLOCKMODE = 'settings_clockoptions_mode';
-var mozL10n = require('l10n');
 var viewMode = null;
 
+IntlHelper.define('date-long', 'mozdatetime', {
+  weekday: 'long',
+  month: 'long',
+  day: 'numeric'
+});
+
 // Retrieve stored view mode data as early as possible.
 asyncStorage.getItem(SETTINGS_CLOCKMODE, function(value) {
 
@@ -89,7 +95,6 @@ var ClockView = {
     this.digital.addEventListener('click', handler, false);
     window.addEventListener('alarm-list-changed',
                             this.resizeAnalogClock.bind(this));
-    window.addEventListener('timeformatchange', this.update.bind(this));
 
     this.hands = {};
     ['second', 'minute', 'hour'].forEach(function(hand) {
@@ -98,6 +103,13 @@ var ClockView = {
     // Kick off the day date display (upper left string)
     this.updateDayDate();
 
+    // This will get fired on language change
+    IntlHelper.observe('date-long', this.updateDayDate.bind(this));
+
+    // Those two will get fired on language and timeformat changes
+    IntlHelper.observe('time-html', this.updateDigitalClock.bind(this));
+    IntlHelper.observe('time-text', this.updateAnalogClock.bind(this));
+
     // If the attempt to request and set the viewMode
     // closure early has failed to respond before the
     // call to ClockView.init(), make an async request,
@@ -116,19 +128,19 @@ var ClockView = {
 
   updateDayDate: function cv_updateDayDate() {
     var d = new Date();
-    var f = new mozL10n.DateTimeFormat();
-    var format = mozL10n.get('dateFormat');
-
-    // If the date of the month is part of the locale format as a
-    // number, insert bold tags to accentuate the number itself. %d
-    // and %e are strings that represent the day of the month (1-31).
-    format = format.replace(/(%d|%e)/g, '<b>$1</b>');
+    var f = IntlHelper.get('date-long');
 
     var remainMillisecond = (24 - d.getHours()) * 3600 * 1000 -
                             d.getMinutes() * 60 * 1000 -
                             d.getMilliseconds();
 
-    this.dayDate.innerHTML = f.localeFormat(d, format);
+    // If the date of the month is part of the locale format as a
+    // number, insert bold tags to accentuate the number itself.
+    var dateString = f.format(d, {
+      day: '<b>$&</b>'
+    });
+
+    this.dayDate.innerHTML = dateString;
 
     this.timeouts.dayDate = setTimeout(
       this.updateDayDate.bind(this), remainMillisecond
@@ -148,6 +160,8 @@ var ClockView = {
   updateDigitalClock: function cv_updateDigitalClock(opts) {
     opts = opts || {};
 
+    clearTimeout(this.timeouts.digital);
+
     var d = new Date();
     this.time.innerHTML = Utils.getLocalizedTimeHtml(d);
     this.timeouts.digital = setTimeout(
@@ -158,6 +172,8 @@ var ClockView = {
   updateAnalogClock: function cv_updateAnalogClock(opts) {
     opts = opts || {};
 
+    clearTimeout(this.timeouts.analog);
+
     if (opts.needsResize) {
       this.resizeAnalogClock();
     }
@@ -217,12 +233,8 @@ var ClockView = {
         } else if (!document.hidden) {
           // Refresh the view when app return to foreground.
           this.updateDayDate();
+          this.update();
 
-          if (this.mode === 'digital') {
-            this.updateDigitalClock();
-          } else if (this.mode === 'analog') {
-            this.updateAnalogClock();
-          }
         }
         break;
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>