fix(clock): show locale-formatted time (#651)

* fix(clock): show locale-formatted time

This makes clock directive use time formatting from the currently loaded
locale. Also refactored it to be a bit cleaner.

Also fallback to locale date for HEADER.DATE/DATETIME. But since the
example config has formatting explicitly defined, this will probably
have no effect on existing configurations.

* Use querySelector

scripts/directives/clock.js

@@ -1,52 +1,33 @@
-import { leadZero } from '../globals/utils';
-
 /**
  * @ngInject
  *
  * @type {angular.IDirectiveFactory}
+ * @param {angular.IFilterService} $filter
  */
-export default function ($interval) {
+export default function ($filter) {
    return {
-      restrict: 'AE',
-      replace: true,
-      link: function ($scope, $el, attrs) {
-         const $m = document.createElement('div');
-         const $h = document.createElement('div');
-         const $colon = document.createElement('div');
-         const $postfix = document.createElement('div');
-
-         $m.classList.add('clock--m');
-         $h.classList.add('clock--h');
-
-         $postfix.classList.add('clock--postfix');
-
-         $colon.classList.add('clock--colon');
-         $colon.textContent = ':';
+      restrict: 'E',
+      template: `
+         <div class="clock--h">{{ hour }}</div
+         ><div class="clock--colon">:</div
+         ><div class="clock--m">{{ minute }}</div
+         ><div class="clock--postfix">{{ postfix }}</div>
+      `,
+      link ($scope, $el, attrs) {
+         const hourEl = $el[0].querySelector('.clock--h');
+         const minuteEl = $el[0].querySelector('.clock--m');
+         const postfixEl = $el[0].querySelector('.clock--postfix');
 
          const updateTime = function () {
-            const d = new Date();
-            let h = d.getHours();
-            const m = d.getMinutes();
-            let postfix = '';
+            const localeTime = $filter('date')(Date.now(), 'shortTime');
+            const [hour, remainder] = localeTime.split(':');
+            const [minute, postfix] = remainder.split(' ');
 
-            if (window.CONFIG.timeFormat === 12) {
-               postfix = h >= 12 ? 'PM' : 'AM';
-
-               h = h % 12 || 12;
-            } else {
-               h = leadZero(h);
-            }
-
-            $h.textContent = h;
-            $m.textContent = leadZero(m);
-            $postfix.textContent = postfix;
+            hourEl.textContent = hour;
+            minuteEl.textContent = minute;
+            postfixEl.textContent = postfix;
          };
 
-         $el[0].appendChild($h);
-         $el[0].appendChild($colon);
-         $el[0].appendChild($m);
-         $el[0].appendChild($postfix);
-
          updateTime();
 
          const interval = setInterval(updateTime, 1000);

scripts/directives/date.js

@@ -1,18 +1,25 @@
 /**
  * @ngInject
  *
- * @type {angular.IDirectiveFactory}
+ * @typedef {{
+ *   format: string
+ *   date: Date
+ * }} Scope
+ *
+ * @type {angular.IDirectiveFactory<Scope & angular.IScope>}
+ * @param {angular.IIntervalService} $interval
+ * @param {angular.ILocaleService} $locale
  */
-export default function ($interval) {
+export default function ($interval, $locale) {
    return {
-      restrict: 'AE',
+      restrict: 'E',
       replace: true,
       scope: {
-         format: '=',
+         format: '<',
       },
-      template: '<div class="date" ng-bind="date|date:format"></div>',
-      link: function ($scope, $el, attrs) {
-         $scope.format = $scope.format || 'EEEE, LLLL dd';
+      template: '<div class="date">{{ date | date:format}}</div>',
+      link ($scope, $el, attrs) {
+         $scope.format = $scope.format || $locale.DATETIME_FORMATS.longDate;
          $scope.date = new Date();
 
          $interval(function () {

scripts/directives/headerItem.html

@@ -3,7 +3,7 @@
       <clock></clock>
    </div>
    <div ng-if="item.type === HEADER_ITEMS.DATE">
-      <date format="item.dateFormat || item.format"></date>
+      <date format="item.dateFormat"></date>
    </div>
    <div ng-if="item.type === HEADER_ITEMS.DATETIME">
       <clock></clock>

styles/main.less

@@ -1138,10 +1138,6 @@ body {
       vertical-align: middle;
    }
 
-   &--hour, &--minute {
-
-   }
-
    &--colon {
       animation: blink 2s step-start 0s infinite;
       font-size: 0.93em;