optionally display the current offset as short name after the time via the general plugin settings

source/connector-mobilizon/changelog.txt

@@ -1,5 +1,6 @@
 ### [Unreleased]
 #### Added
+- Optionally display the current offset as short name after the time via the general plugin settings
 #### Changed
 #### Deprecated
 #### Removed

source/connector-mobilizon/front/date-time-wrapper-test.js

@@ -51,3 +51,8 @@ test('#getCurrentDatetimeAsString correct format', t => {
   t.is(d[19], '.')
   t.is(d[d.length-3], ':')
 })
+
+test('#getShortOffsetName usual time', t => {
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
+  t.is(d.getShortOffsetName(), 'UTC')
+})

source/connector-mobilizon/front/date-time-wrapper.js

@@ -10,6 +10,10 @@ export default class DateTimeWrapper {
     return this.dateTime.toLocaleString(DateTime.DATE_SHORT)
   }
 
+  getShortOffsetName() {
+    return this.dateTime.offsetNameShort
+  }
+
   get24Time() {
     return this.dateTime.toLocaleString(DateTime.TIME_24_SIMPLE)
   }

source/connector-mobilizon/front/events-displayer.js

@@ -5,6 +5,7 @@ export function displayEvents({ data, document, list }) {
   const locale = list.getAttribute('data-locale')
   const maxEventsCount = list.getAttribute('data-maximum')
   const timeZone = list.getAttribute('data-time-zone')
+  const isShortOffsetNameShown = list.hasAttribute('data-is-short-offset-name-shown')
   const events = data.events ? data.events.elements : data.group.organizedEvents.elements
   const eventsCount = Math.min(maxEventsCount, events.length)
   for (let i = 0; i < eventsCount; i++) {
@@ -16,7 +17,13 @@ export function displayEvents({ data, document, list }) {
     const br = document.createElement('br')
     li.appendChild(br)
 
-    const date = Formatter.formatDate({ locale, start: events[i].beginsOn, end: events[i].endsOn, timeZone })
+    const date = Formatter.formatDate({
+      locale,
+      start: events[i].beginsOn,
+      end: events[i].endsOn,
+      timeZone,
+      isShortOffsetNameShown,
+    })
     const textnode = document.createTextNode(date)
     li.appendChild(textnode)
 

source/connector-mobilizon/front/formatter-test.js

@@ -6,11 +6,21 @@ test('#formatDate one date', t => {
   t.is(date, '15/04/2021 10:30 - 15:30')
 })
 
+test('#formatDate one date with short offset name', t => {
+  const date = Formatter.formatDate({ start: '2021-04-15T10:30:00Z', end: '2021-04-15T15:30:00Z', isShortOffsetNameShown: true })
+  t.is(date, '15/04/2021 10:30 - 15:30 (UTC)')
+})
+
 test('#formatDate two dates', t => {
   const date = Formatter.formatDate({ start: '2021-04-15T10:30:00Z', end: '2021-04-16T15:30:00Z' })
   t.is(date, '15/04/2021 10:30 - 16/04/2021 15:30')
 })
 
+test('#formatDate two dates with short offset name', t => {
+  const date = Formatter.formatDate({ start: '2021-04-15T10:30:00Z', end: '2021-04-16T15:30:00Z', isShortOffsetNameShown: true })
+  t.is(date, '15/04/2021 10:30 (UTC) - 16/04/2021 15:30 (UTC)')
+})
+
 test('#formatLocation both parameters', t => {
   const date = Formatter.formatLocation({ description: 'a', locality: 'b' })
   t.is(date, 'a, b')

source/connector-mobilizon/front/formatter.js

@@ -2,16 +2,24 @@ import DateTimeWrapper from './date-time-wrapper'
 
 export default class Formatter {
   
-  static formatDate({ locale, timeZone, start, end }) {
+  static formatDate({ locale, timeZone, start, end, isShortOffsetNameShown }) {
     const startDateTime = new DateTimeWrapper({ locale, text: start, timeZone })
     const endDateTime = new DateTimeWrapper({ locale, text: end, timeZone })
     let dateText = startDateTime.getShortDate()
     dateText += ' ' + startDateTime.get24Time()
-    dateText += ' - '
     if (!startDateTime.equalsDate(endDateTime)) {
+      if (isShortOffsetNameShown) {
+        dateText += ' (' + startDateTime.getShortOffsetName() + ')'
+      }
+      dateText += ' - '
       dateText += endDateTime.getShortDate() + ' '
+    } else {
+      dateText += ' - '
     }
     dateText += endDateTime.get24Time()
+    if (isShortOffsetNameShown) {
+      dateText += ' (' + endDateTime.getShortOffsetName() + ')'
+    }
     return dateText
   }
 

source/connector-mobilizon/includes/events-list-shortcut.php

@@ -30,6 +30,7 @@ class EventsListShortcut {
     $groupName = $atts_with_overriden_defaults['group-name'];
     $url = Settings::getUrl();
     $timeZone = get_option('timezone_string');
+    $isShortOffsetNameShown = Settings::isShortOffsetNameShown();
 
     ob_start();
     require dirname(__DIR__) . '/view/events-list.php';

source/connector-mobilizon/includes/events-list-widget.php

@@ -31,6 +31,7 @@ class EventsListWidget extends \WP_Widget {
     $groupName = isset($options['groupName']) ? $options['groupName'] : '';
     $url = Settings::getUrl();
     $timeZone = get_option('timezone_string');
+    $isShortOffsetNameShown = Settings::isShortOffsetNameShown();
 
     require dirname(__DIR__) . '/view/events-list.php';
 

source/connector-mobilizon/includes/settings.php

@@ -9,9 +9,12 @@ if (!defined('ABSPATH')) {
 class Settings {
 
   private static $DEFAULT_OPTION_URL = 'https://mobilizon.fr';
+  private static $DEFAULT_IS_SHORT_OFFSET_NAME_SHOWN = false;
   private static $PAGE_NAME = 'wordpress_mobilizon';
   private static $OPTIONS_GROUP_NAME = 'wordpress_mobilizon';
+  private static $OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN = 'wordpress_mobilizon_is_short_offset_name_shown';
   private static $OPTION_NAME_URL = 'wordpress_mobilizon_url';
+  private static $SETTING_FIELD_NAME_IS_SHORT_OFFSET_NAME_SHOWN = 'wordpress_mobilizon_field_is_short_offset_name_shown';
   private static $SETTING_FIELD_NAME_URL = 'wordpress_mobilizon_field_url';
   private static $SETTINGS_SECTION_NAME = 'wordpress_mobilizon_section_general';
 
@@ -21,6 +24,10 @@ class Settings {
   }
 
   public static function init_settings() {
+    register_setting(
+      self::$OPTIONS_GROUP_NAME,
+      self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN
+    );
     register_setting(
       self::$OPTIONS_GROUP_NAME,
       self::$OPTION_NAME_URL,
@@ -44,6 +51,21 @@ class Settings {
         'label_for' => self::$SETTING_FIELD_NAME_URL
       )
     );
+    add_settings_field(
+      self::$SETTING_FIELD_NAME_IS_SHORT_OFFSET_NAME_SHOWN,
+      __('Display named offset', 'connector-mobilizon'),
+      'MobilizonConnector\Settings::output_field_is_short_offset_name_shown',
+      self::$PAGE_NAME,
+      self::$SETTINGS_SECTION_NAME,
+      array(
+        'label_for' => self::$SETTING_FIELD_NAME_IS_SHORT_OFFSET_NAME_SHOWN
+      )
+    );
+  }
+
+  public static function output_field_is_short_offset_name_shown($args) {
+    $isShortOffsetNameShown = self::isShortOffsetNameShown();
+    require dirname(__DIR__) . '/view/settings/is-short-offset-name-shown-field.php';
   }
 
   public static function output_field_url($args) {
@@ -84,15 +106,21 @@ class Settings {
     require dirname(__DIR__) . '/view/settings/page.php';
   }
 
+  public static function isShortOffsetNameShown() {
+    return get_option(self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN);
+  }
+
   public static function getUrl() {
     return get_option(self::$OPTION_NAME_URL);
   }
 
   public static function setDefaultOptions() {
+    add_option(self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN, self::$DEFAULT_IS_SHORT_OFFSET_NAME_SHOWN);
     add_option(self::$OPTION_NAME_URL, self::$DEFAULT_OPTION_URL);
   }
 
   public static function deleteAllOptions() {
+    delete_option(self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN);
     delete_option(self::$OPTION_NAME_URL);
   }
 

source/connector-mobilizon/view/events-list.php

@@ -9,6 +9,7 @@ if (!defined('ABSPATH')) {
   data-locale="<?php echo esc_attr($locale); ?>"
   data-maximum="<?php echo esc_attr($eventsCount); ?>"
   data-group-name="<?php echo esc_attr($groupName); ?>"
-  data-time-zone="<?php echo esc_attr($timeZone); ?>">
+  data-time-zone="<?php echo esc_attr($timeZone); ?>"
+  <?php echo $isShortOffsetNameShown ? 'data-is-short-offset-name-shown' : ''; ?>>
   <li style="display: none;"><?php esc_html_e('The events could not be loaded!', 'connector-mobilizon'); ?></li>
 </ul>

source/connector-mobilizon/view/settings/is-short-offset-name-shown-field.php

@@ -0,0 +1,13 @@
+<?php
+// Exit if this file is called directly.
+if (!defined('ABSPATH')) {
+  exit;
+}
+?>
+<input id="<?php echo esc_attr($args['label_for']); ?>"
+  name="<?php echo esc_attr(self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN); ?>"
+  type="checkbox"
+  <?php echo $isShortOffsetNameShown == true ? 'checked' : ''; ?>>
+<p class="description">
+  <?php esc_html_e('The time zone of this WordPress installation is used. Whether the current offset should be displayed in brackets after the time, e.g. 10:00 (UTC)', 'connector-mobilizon'); ?>
+</p>