Add a fix to make locale and language work better independently

infor-design · Oct 15, 2019 · b43e320 · b43e320
1 parent dea3315
commit b43e320
Show file tree

Hide file tree

Showing 19 changed files with 636 additions and 44 deletions.
diff --git a/app/views/components/calendar/test-specific-locale-lang.html b/app/views/components/calendar/test-specific-locale-lang.html
@@ -0,0 +1,177 @@
+<div class="calendar" data-init="false">
+  <div class="calendar-events">
+    <div class="accordion" data-options="{'allowOnePane': false}">
+      <div class="accordion-header is-expanded">
+        <a href="#"><span data-translate="text">Legend</span></a>
+      </div>
+      <div class="accordion-pane">
+        <div class="calendar-event-types accordion-content">
+        </div>
+      </div>
+      <div class="accordion-header is-expanded">
+        <a href="#"><span data-translate="text">UpComing</span></a>
+      </div>
+      <div class="accordion-pane">
+        <div class="calendar-upcoming-events accordion-content">
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="calendar-monthview">
+  </div>
+  <div class="calendar-event-details accordion" data-init="false" data-options="{'allowOnePane': false}">
+  </div>
+</div>
+
+<ul id="calendar-actions-menu" class="popupmenu">
+  <li><a href="#" data-action="delete-event"><span data-translate="text">DeleteEvent</span></a></li>
+  <li><a href="#" data-action="show-event"><span data-translate="text">ShowEvent</span></a></li>
+</ul>
+
+<script>
+$('body').one('initialized', function () {
+  // Get the Event Type and Events to show in the calendar
+  var eventTypes = [];
+  var events = [];
+
+  $.getJSON('{{basepath}}api/event-types', function(res) {
+    eventTypes = res;
+
+    $.getJSON('{{basepath}}api/events', function(res) {
+      events = res;
+      $('.calendar').calendar({
+        month: 4,
+        year: 2019,
+        locale: 'de-DE',
+        language: 'es',
+        eventTypes: eventTypes,
+        events: events,
+        upcomingEventDays: 0,
+        template: 'tmpl-readonly',
+        modalTemplate: 'tmpl-modal',
+        menuId: 'calendar-actions-menu'
+      });
+    });
+  });
+});
+</script>
+
+{{={{{ }}}=}}
+<script id="tmpl-readonly" type="text/html">
+  {{#event}}
+  <div class="accordion-header is-expanded {{color}}">
+    <a href="#">{{subject}}</a>
+  </div>
+  <div class="accordion-pane is-expanded">
+    <div class="accordion-content">
+      {{#status}}
+      <div class="field">
+        <span class="label">Status</span>
+        <span class="data">
+          {{status}}
+          {{#icon}}
+          <svg class="icon {{icon}}" focusable="false" aria-hidden="true" role="presentation" data-status="{{status}}"><use xlink:href="#{{icon}}"></use></svg>
+          {{/icon}}
+        </span>
+      </div>
+      {{/status}}
+      <div class="field">
+        <span class="label">Date</span>
+        <span class="data">
+          {{startsLong}} to {{endsLong}}
+        </span>
+      </div>
+      <div class="field">
+        <span class="label">Event Type</span>
+        <span class="data">
+          {{typeLabel}}
+        </span>
+      </div>
+      <div class="field">
+        <span class="label">Duration</span>
+        {{#duration}}
+        <span class="data">
+          {{duration}} {{durationUnits}}
+        </span>
+        {{/duration}}
+        {{#durationHours}}
+        <span class="data">
+          {{durationHours}} {{durationUnits}}
+        </span>
+        {{/durationHours}}
+      </div>
+      <div class="field">
+        <span class="label">Comments</span>
+        <span class="data{{#noComments}} is-placeholder{{/noComments}}" >
+          {{comments}}
+        </span>
+      </div>
+    </div>
+  </div>
+  {{/event}}
+</script>
+
+<script id="tmpl-modal" type="text/html">
+  {{#event}}
+  <div class="form-responsive row">
+    <div class="twelve columns">
+      <div class="field">
+        <label for="subject" class="label">Subject</label>
+        <input id="subject" type="text" value="{{subject}}">
+      </div>
+    </div>
+  </div>
+  <div class="form-responsive row">
+    <div class="six columns">
+      <div class="field">
+        <label for="starts" class="label">From</label>
+        <input id="starts" class="datepicker" name="starts" type="text" value="{{startsLocale}}"/>
+      </div>
+    </div>
+    <div class="six columns">
+      <div class="field">
+        <label for="ends" class="label">To</label>
+        <input id="ends" class="datepicker" name="ends" type="text" value="{{endsLocale}}"/>
+      </div>
+    </div>
+  </div>
+  <div class="form-responsive row">
+    <div class="twelve columns">
+      <div class="field">
+        <label for="type" class="label">Type</label>
+        <select id="type" class="dropdown" name="type">
+          {{#eventTypes}}
+          <option value="{{id}}">{{label}}</option>
+          {{/eventTypes}}
+        </select>
+      </div>
+    </div>
+  </div>
+  <div class="form-responsive row">
+    <div class="six columns">
+      <div class="field">
+        <label for="durationHours">Hours</label>
+        <input id="durationHours" name="durationHours" type="text" class="spinbox"{{#isAllDay}}disabled="true"{{/isAllDay}}  data-options="{min: 0, max: 24}" value="8"/>
+      </div>
+    </div>
+    <div class="six columns">
+      <div class="field field-checkbox">
+        <input type="checkbox" class="checkbox" name="isAllDay" id="isAllDay" {{#isAllDay}}checked="true"{{/isAllDay}}>
+        <label for="isAllDay" class="checkbox-label">All Day</label>
+      </div>
+    </div>
+  </div>
+  <div class="form-responsive row">
+    <div class="twelve columns">
+      <div class="field">
+        <label for="comments" class="label">Comments</label>
+        <textarea id="comments" type="text" value="{{comments}}"></textarea>
+      </div>
+    </div>
+  </div>
+  {{/event}}
+  <div class="modal-buttonset">
+    <button id="cancel" data-cancel="submit" type="button" class="btn-modal-secondary"><span data-translate="text">Cancel</span></button>
+    <button id="submit" data-action="submit" type="button" class="btn-modal-primary hide-focus"><span data-translate="text">Submit</span></button>
+  </div>
+</script>
diff --git a/app/views/components/datepicker/test-two-locales-same-page.html b/app/views/components/datepicker/test-two-locales-same-page.html
@@ -12,6 +12,11 @@
       <input id="date-field-danish" class="datepicker" name="date-field-danish" type="text" data-options = "{ locale: 'da-DK' }"/>
     </div>
 
+    <div class="field">
+      <label for="date-field-sv-de" class="label">Date Field (Swedish Language / De locale)</label>
+      <input id="date-field-sv-de" class="datepicker" name="date-field-sv-de" type="text" data-options = "{ locale: 'de-DE', language: 'sv' }"/>
+    </div>
+
   </div>
 
 </div>
diff --git a/app/views/components/monthview/test-specific-locale-lang.html b/app/views/components/monthview/test-specific-locale-lang.html
@@ -0,0 +1,17 @@
+<div class="row">
+  <div class="twelve columns">
+    <div class="monthview" data-init="false">
+    </div>
+  </div>
+</div>
+
+<script>
+  $('body').on('initialized', function () {
+    $('.monthview').monthview({
+      locale: 'da-DK',
+      language: 'de',
+      month: 9,
+      year: 2019
+    });
+  });
+</script>
diff --git a/app/views/components/timepicker/test-specific-locale.html b/app/views/components/timepicker/test-specific-locale.html
@@ -1,8 +1,17 @@
 <div class="row">
   <div class="twelve columns">
     <div class="field">
-      <label for="timepicker-main" class="label">Timepicker (Danish Locale)</label>
-      <input id="timepicker-main" class="timepicker" type="text" data-options = "{ locale: 'da-DK' }"/>
+      <label for="timepicker-1" class="label">Timepicker (Danish Locale)</label>
+      <input id="timepicker-1" class="timepicker" type="text" data-options="{ locale: 'da-DK' }"/>
+    </div>
+  </div>
+</div>
+
+<div class="row">
+  <div class="twelve columns">
+    <div class="field">
+      <label for="timepicker-2" class="label">Timepicker (Swedish Language De locale)</label>
+      <input id="timepicker-2" class="timepicker" type="text" data-options="{ locale: 'de-DE', language: 'sv' }"/>
     </div>
   </div>
 </div>
diff --git a/src/behaviors/initialize/initialize.js b/src/behaviors/initialize/initialize.js
@@ -12,7 +12,8 @@ const COMPONENT_NAME = 'initialize';
 
 // Component Defaults
 const INITIALIZE_DEFAULTS = {
-  locale: 'en-US'
+  locale: 'en-US',
+  language: null // same as locale by default
 };
 
 // Contains excluded CSS selectors that prevent automatic initialization
@@ -420,6 +421,13 @@ function Initialize(element, settings) {
       locale: Locale.currentLocale.name
     };
   }
+
+  if (Locale.currentLanguage && Locale.currentLanguage.name
+    && Locale.currentLocale.name.substr(0, 2) !== Locale.currentLanguage.name
+    && !settings) {
+    newSettings.language = Locale.currentLanguage.name;
+  }
+
   this.settings = utils.mergeSettings(this.element[0], newSettings, INITIALIZE_DEFAULTS);
   debug.logTimeStart(COMPONENT_NAME);
   this.init();
@@ -437,6 +445,12 @@ Initialize.prototype = {
   init() {
     const self = this;
     Locale.set(this.settings.locale).done(() => {
+      if (this.settings.language) {
+        Locale.setLanguage(this.settings.language).done(() => {
+          self.initAll();
+        });
+        return;
+      }
       self.initAll();
     });
 

diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js
@@ -15,6 +15,7 @@ const COMPONENT_NAME_DEFAULTS = {
   ],
   events: [],
   locale: null,
+  language: null,
   month: new Date().getMonth(),
   year: new Date().getFullYear(),
   showViewChanger: true,
@@ -42,6 +43,7 @@ const COMPONENT_NAME_DEFAULTS = {
  * @param {array} [settings.eventTypes] An array of objects with data for the event types.
  * @param {array} [settings.events] An array of objects with data for the events.
  * @param {string} [settings.locale] The name of the locale to use for this instance. If not set the current locale will be used.
+ * @param {string} [settings.language] The name of the language to use for this instance. If not set the current locale will be used or the passed locale will be used.
  * @param {array} [settings.month] Initial month to show.
  * @param {array} [settings.year] Initial year to show.
  * @param {array} [settings.upcomingEventDays=14] How many days in advance should we show in the upcoming events pane.
@@ -105,6 +107,9 @@ Calendar.prototype = {
    * @returns {void}
    */
   setLocale() {
+    Locale.getLocale(this.settings.language);
+    this.language = this.settings.language;
+
     if (this.settings.locale && (!this.locale || this.locale.name !== this.settings.locale)) {
       Locale.getLocale(this.settings.locale).done((locale) => {
         this.locale = Locale.cultures[locale];
@@ -142,7 +147,7 @@ Calendar.prototype = {
     for (let i = 0; i < this.settings.eventTypes.length; i++) {
       const eventType = this.settings.eventTypes[i];
       eventTypeMarkup += `<input type="checkbox" class="checkbox ${eventType.color}07" name="${eventType.id}" id="${eventType.id}" checked="${eventType.checked ? 'true' : 'false'}" ${eventType.disabled ? 'disabled="true"' : ''} />
-        <label for="${eventType.id}" class="checkbox-label">${eventType.translationKey ? Locale.translate(eventType.translationKey, { locale: this.locale.name }) : eventType.label}</label><br/>`;
+        <label for="${eventType.id}" class="checkbox-label">${eventType.translationKey ? Locale.translate(eventType.translationKey, { locale: this.locale.name, language: this.language }) : eventType.label}</label><br/>`;
     }
     this.eventTypeContainer.innerHTML = eventTypeMarkup;
     return this;
@@ -224,12 +229,12 @@ Calendar.prototype = {
     if (!this.settings.showViewChanger) {
       return this;
     }
-    const viewChangerHtml = `<label for="calendar-view-changer" class="label audible">${Locale.translate('ChangeView', { locale: this.locale.name })}</label>
+    const viewChangerHtml = `<label for="calendar-view-changer" class="label audible">${Locale.translate('ChangeView', { locale: this.locale.name, language: this.language })}</label>
       <select id="calendar-view-changer" name="calendar-view-changer" class="dropdown">
-        <option value="month" selected>${Locale.translate('Month', { locale: this.locale.name })}</option>
-        <option value="week" disabled>${Locale.translate('Week', { locale: this.locale.name })}</option>
-        <option value="day" disabled>${Locale.translate('Day', { locale: this.locale.name })}</option>
-        <option value="schedule" disabled>${Locale.translate('Schedule', { locale: this.locale.name })}</option>
+        <option value="month" selected>${Locale.translate('Month', { locale: this.locale.name, language: this.language })}</option>
+        <option value="week" disabled>${Locale.translate('Week', { locale: this.locale.name, language: this.language })}</option>
+        <option value="day" disabled>${Locale.translate('Day', { locale: this.locale.name, language: this.language })}</option>
+        <option value="schedule" disabled>${Locale.translate('Schedule', { locale: this.locale.name, language: this.language })}</option>
       </select>
     </div>`;
     $(this.monthViewHeader).append(viewChangerHtml);
@@ -474,7 +479,7 @@ Calendar.prototype = {
       false,
       event.isFullDay
     ));
-    event.durationUnits = event.duration > 1 ? Locale.translate('Days', { locale: this.locale.name }) : Locale.translate('Day', { locale: this.locale.name });
+    event.durationUnits = event.duration > 1 ? Locale.translate('Days', { locale: this.locale.name, language: this.language }) : Locale.translate('Day', { locale: this.locale.name, language: this.language });
     event.daysUntil = event.starts ? this.dateDiff(new Date(event.starts), new Date()) : 0;
     event.durationHours = this.dateDiff(new Date(event.starts), new Date(event.ends), true);
     event.isDays = true;
@@ -486,18 +491,18 @@ Calendar.prototype = {
       event.isDays = false;
       event.isAllDay = false;
       delete event.duration;
-      event.durationUnits = event.durationHours > 1 ? Locale.translate('Hours', { locale: this.locale.name }) : Locale.translate('Hour', { locale: this.locale.name });
+      event.durationUnits = event.durationHours > 1 ? Locale.translate('Hours', { locale: this.locale.name, language: this.language }) : Locale.translate('Hour', { locale: this.locale.name, language: this.language });
     }
     if (event.isAllDay.toString() === 'true') {
       event.isDays = true;
       delete event.durationHours;
-      event.durationUnits = event.duration > 1 ? Locale.translate('Days', { locale: this.locale.name }) : Locale.translate('Day', { locale: this.locale.name });
+      event.durationUnits = event.duration > 1 ? Locale.translate('Days', { locale: this.locale.name, language: this.language }) : Locale.translate('Day', { locale: this.locale.name, language: this.language });
       event.duration = this.dateDiff(new Date(event.starts), new Date(event.ends));
     }
     if (event.duration === 0 && event.isAllDay.toString() === 'true') {
       event.isDays = true;
       event.duration = 1;
-      event.durationUnits = Locale.translate('Day', { locale: this.locale.name });
+      event.durationUnits = Locale.translate('Day', { locale: this.locale.name, language: this.language });
     }
     if (event.starts) {
       const startsLocale = Locale.parseDate(event.starts, { pattern: 'yyyy-MM-ddTHH:mm:ss.SSS', locale: this.locale.name });
@@ -537,7 +542,7 @@ Calendar.prototype = {
 
     if (eventCnt >= 2) {
       const moreSpan = container.querySelector('.calendar-event-more');
-      const moreText = Locale.translate('More', { locale: this.locale.name }).replace('...', '');
+      const moreText = Locale.translate('More', { locale: this.locale.name, language: this.language }).replace('...', '');
       if (!moreSpan) {
         node = document.createElement('span');
         DOM.addClass(node, 'calendar-event-more');
@@ -608,7 +613,7 @@ Calendar.prototype = {
           const iconStatus = icon ? icon.querySelector('.icon').getAttribute('data-status') : '';
 
           if (title.offsetWidth > ui[0].scrollWidth - (icon ? icon.offsetWidth : 0)) {
-            response(`${title.innerText}${iconStatus ? ` (${Locale.translate(iconStatus, { locale: this.locale.name }, false)})` : ''}`);
+            response(`${title.innerText}${iconStatus ? ` (${Locale.translate(iconStatus, { locale: this.locale.name, language: this.language }, false)})` : ''}`);
             return;
           }
           response(false);
@@ -1056,12 +1061,12 @@ Calendar.prototype = {
     }
 
     if (event.comments === undefined && addPlaceholder) {
-      event.comments = Locale.translate('NoCommentsEntered', { locale: this.locale.name });
+      event.comments = Locale.translate('NoCommentsEntered', { locale: this.locale.name, language: this.language });
       event.noComments = true;
     }
 
     if (!event.subject && addPlaceholder) {
-      event.subject = Locale.translate('NoTitle', { locale: this.locale.name });
+      event.subject = Locale.translate('NoTitle', { locale: this.locale.name, language: this.language });
     }
 
     if (!event.type) {
@@ -1077,7 +1082,7 @@ Calendar.prototype = {
     }
 
     if (event.title === 'NewEvent') {
-      event.title = Locale.translate('NewEvent', { locale: this.locale.name });
+      event.title = Locale.translate('NewEvent', { locale: this.locale.name, language: this.language });
     }
   },