#21 js based time format output

inc/classes/BxDolTemplate.php

@@ -315,6 +315,7 @@ class BxDolTemplate extends BxDol implements iBxDolSingleton {
             'jquery.dolPopup.js',
             'jquery.ui.position.min.js',
             BX_DOL_URL_PLUGINS . 'spin.min.js',
+            BX_DOL_URL_PLUGINS . 'moment/moment+langs.min.js',
         ));
 
         //--- Load injection's cache ---//
@@ -906,6 +907,9 @@ class BxDolTemplate extends BxDol implements iBxDolSingleton {
                 if(!empty($this->aPage['width']))
                     $sRet = bx_html_attribute($this->aPage['width']);
                 break;
+            case 'lang':
+                $sRet = bx_lang_name();
+                break;
             case 'main_logo':
                 bx_import('BxTemplFunctions');
                 $sRet = BxTemplFunctions::getInstance()->getMainLogo();

inc/design.inc.php

@@ -49,6 +49,24 @@ define('BX_DB_PADDING_DEF', 11);
  */
 define('BX_DB_PADDING_NO_CAPTION', 13);
 
+
+/**
+ * Date format identifier for use in @see bx_time_js function
+ */
+define('BX_FORMAT_DATE', 'sys_format_date');
+
+/**
+ * Time format identifier for use in @see bx_time_js function
+ */
+define('BX_FORMAT_TIME', 'sys_format_time');
+
+/**
+ * Datetime format identifier for use in @see bx_time_js function
+ */
+define('BX_FORMAT_DATE_TIME', 'sys_format_datetime');
+
+
+
 /**
  * Display "design box" HTML code
  *
@@ -307,6 +325,28 @@ function getMemberLoginFormCode($sID = 'member_login_form', $sParams = '')
     trigger_error ("Replace getMemberLoginFormCode with BxDolService::call('system', 'login_form', array(), 'TemplServiceLogin')", E_USER_ERROR);
 }
 
+/**
+ * Output time wrapped in <time> tag
+ * @param $iUnixTimestamp time as unixtimestamp
+ * @param $sFormatIdentifier output format identifier
+ *     @see BX_FORMAT_DATE
+ *     @see BX_FORMAT_TIME
+ *     @see BX_FORMAT_DATE_TIME
+ */
+function bx_time_js ($iUnixTimestamp, $sFormatIdentifier = BX_FORMAT_DATE) {
+    bx_import('BxTemplFunctions');
+    return BxTemplFunctions::getInstance()->timeForJs ($iUnixTimestamp, $sFormatIdentifier);
+}
+
+/**
+ * Get UTC/GMT time string in ISO8601 date format from provided unix timestamp
+ * @param $iUnixTimestamp - unix timestamp
+ * @return ISO8601 formatted date/time string
+ */
+function bx_time_utc ($iUnixTimestamp) {
+    return gmdate(DATE_ISO8601, $iUnixTimestamp);
+}
+
 bx_import('BxDolAlerts');
 $oZ = new BxDolAlerts('system', 'design_included', 0);
 $oZ->alert();

inc/js/functions.js

@@ -287,3 +287,41 @@ function validateLoginForm(eForm) {
     return false;
 }
 
+/**
+ * convert <time> tags to human readable format
+ * @param sLang - use sLang localization
+ * @param isAutoupdate - for internal usage only
+ */
+function bx_time(sLang, isAutoupdate) {
+    var iAutoupdate = 22*60*60; // autoupdate time in realtime if less than 22 hours
+    var sSel = 'time';
+
+    if ('undefined' != typeof(isAutoupdate) && isAutoupdate)
+        sSel += '.bx-time-autoupdate';
+
+    $(sSel).each(function () {
+        var s;
+        var sTime = $(this).attr('datetime');
+        var iSecondsDiff = moment(sTime).unix() - moment().unix();
+        if (iSecondsDiff < 0)
+            iSecondsDiff = -iSecondsDiff;
+
+        if (iSecondsDiff < $(this).attr('data-bx-autoformat'))
+            s = moment(sTime).lang(sLang).fromNow(); // 'time ago' format
+        else
+            s = moment(sTime).lang(sLang).format($(this).attr('data-bx-format')); // custom format
+
+        if (iSecondsDiff < iAutoupdate)
+            $(this).addClass('bx-time-autoupdate');
+        else
+            $(this).removeClass('bx-time-autoupdate');
+
+        $(this).html(s);
+    });
+
+    if ($('time.bx-time-autoupdate').size()) {
+        setTimeout(function () {
+            bx_time(sLang, true);
+        }, 30000);
+    }
+}

install/sql/v70.sql

@@ -466,6 +466,18 @@ INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `ex
 (@iCategoryId, 'sys_template_page_width_min', 'Min page width(in pixels)', '774', 'digit', '', '', '', 9),
 (@iCategoryId, 'sys_template_page_width_max', 'Max page width(in pixels)', '1600', 'digit', '', '', '', 10);
 
+--
+-- CATEGORY: date/time format
+--
+INSERT INTO `sys_options_categories`(`type_id`, `name`, `caption`, `hidden`, `order`) VALUES (@iTypeId, 'date_time_format', '_adm_stg_cpt_category_datetime_format', 0, 25);
+SET @iCategoryId = LAST_INSERT_ID();
+
+INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `extra`, `check`, `check_error`, `order`) VALUES
+(@iCategoryId, 'sys_format_date', 'Date Format', 'MMMM Do YYYY', 'digit', '', '', '', 10),
+(@iCategoryId, 'sys_format_time', 'Time Format', 'HH:mm', 'digit', '', '', '', 12),
+(@iCategoryId, 'sys_format_datetime', 'Datetime Format', 'MMMM Do YYYY, h:mm:ss a', 'digit', '', '', '', 14),
+(@iCategoryId, 'sys_format_timeago', 'Use \'time ago\' format for dates less than this number of seconds', 432000, 'digit', '', '', '', 20);
+
 -- --------------------------------------------------------
 
 --

modules/boonex/english/data/langs/system.xml

@@ -1589,6 +1589,7 @@ Please click "Continue" below to navigate to the home page of the site.]]></stri
 	<string name="_adm_stg_cpt_category_categories"><![CDATA[Categories]]></string>
 	<string name="_adm_stg_cpt_category_storage"><![CDATA[Storage]]></string>
 	<string name="_adm_stg_cpt_category_languages"><![CDATA[Languages]]></string>
+	<string name="_adm_stg_cpt_category_datetime_format"><![CDATA[Date/time format]]></string>
 	<string name="_adm_stg_err_save"><![CDATA[Cannot save settings]]></string>
 	<string name="_adm_stg_scs_save"><![CDATA[Settings were successfully saved]]></string>
 

modules/boonex/notes/classes/BxNotesTemplate.php

@@ -93,7 +93,7 @@ class BxNotesTemplate extends BxDolModuleTemplate {
             'author_url' => $oProfile->getUrl(),
             'author_thumb_url' => $oProfile->getThumb(),
             'author_title' => $oProfile->getDisplayName(),
-            'entry_posting_date' => defineTimeInterval($aData['added']),
+            'entry_posting_date' =>  bx_time_js($aData['added'], BX_FORMAT_DATE),
         );
         return $this->parseHtmlByName($sTemplateName, $aVars);
     }

template/_header.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="__lang__" lang="__lang__">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=__page_charset__" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
@@ -55,6 +55,7 @@
         }); 
 
         $(document).ready(function () {
+            bx_time('__lang__');
             $('#bx-toolbar').css({opacity: 1});
         });
 

template/scripts/BxBaseFunctions.php

@@ -654,6 +654,19 @@ EOF;
         return $sRet;
     }
 
+    /**
+     * Output time wrapped in <time> tag
+     * @param $iUnixTimestamp time as unixtimestamp
+     * @param $sFormatIdentifier output format identifier
+     *     @see BX_FORMAT_DATE
+     *     @see BX_FORMAT_TIME
+     *     @see BX_FORMAT_DATE_TIME
+     */
+    function timeForJs ($iUnixTimestamp, $sFormatIdentifier = BX_FORMAT_DATE) {
+        $sDateUTC = bx_time_utc ($iUnixTimestamp);
+        return '<time datetime="' . $sDateUTC . '" data-bx-format="' . getParam($sFormatIdentifier) . '" data-bx-autoformat="' . getParam('sys_format_timeago') . '">' . $sDateUTC . '</time>';
+    }
+
 }
 
 /** @} */