From f56bee76f2a9c007d5e46c4efe2ee2476bca8fe9 Mon Sep 17 00:00:00 2001 From: Jonathan Labreuille Date: Mon, 22 Feb 2016 15:21:23 +0100 Subject: [PATCH] MailPoet.Date to handle localized dates and times --- assets/js/src/date.js | 136 +++++++++++++++++++++++++++++ assets/js/src/forms/list.jsx | 2 +- assets/js/src/newsletters/list.jsx | 4 +- assets/js/src/segments/list.jsx | 2 +- assets/js/src/subscribers/form.jsx | 11 +-- assets/js/src/subscribers/list.jsx | 4 +- views/layout.html | 4 + views/subscribers/subscribers.html | 2 - webpack.config.js | 13 +-- 9 files changed, 158 insertions(+), 20 deletions(-) create mode 100644 assets/js/src/date.js diff --git a/assets/js/src/date.js b/assets/js/src/date.js new file mode 100644 index 0000000000..12ba06c449 --- /dev/null +++ b/assets/js/src/date.js @@ -0,0 +1,136 @@ +define('date', + [ + 'mailpoet', + 'jquery', + 'moment' + ], function( + MailPoet, + jQuery, + Moment +) { + 'use strict'; + + MailPoet.Date = { + version: 0.1, + options: {}, + defaults: { + offset: 0, + format: 'F, d Y H:i:s' + }, + init: function(options) { + options = options || {}; + + // set UTC offset + if ( + options.offset === undefined + && window.mailpoet_date_offset !== undefined + ) { + options.offset = window.mailpoet_date_offset; + } + // set date format + if ( + options.format === undefined + && window.mailpoet_date_format !== undefined + ) { + options.format = window.mailpoet_date_format; + } + // merge options + this.options = jQuery.extend({}, this.defaults, options); + + return this; + }, + format: function(date, options) { + this.init(options); + return Moment.utc(date) + .local() + .format(this.convertFormat(this.options.format)); + }, + short: function(date) { + return this.format(date, { + format: 'F, j Y' + }); + }, + full: function(date) { + return this.format(date, { + format: 'F, j Y H:i:s' + }); + }, + time: function(date) { + return this.format(date, { + format: 'H:i:s' + }); + }, + convertFormat: function(format) { + const format_mappings = { + date: { + D: 'ddd', + l: 'dddd', + d: 'DD', + j: 'D', + z: 'DDDD', + N: 'E', + S: '', + M: 'MMM', + F: 'MMMM', + m: 'MM', + n: '', + t: '', + y: 'YY', + Y: 'YYYY', + H: 'HH', + h: 'hh', + g: 'h', + A: 'A', + i: 'mm', + s: 'ss', + T: 'z', + O: 'ZZ', + w: 'd', + W: 'WW' + }, + strftime: { + a: 'ddd', + A: 'dddd', + b: 'MMM', + B: 'MMMM', + d: 'DD', + e: 'D', + F: 'YYYY-MM-DD', + H: 'HH', + I: 'hh', + j: 'DDDD', + k: 'H', + l: 'h', + m: 'MM', + M: 'mm', + p: 'A', + S: 'ss', + u: 'E', + w: 'd', + W: 'WW', + y: 'YY', + Y: 'YYYY', + z: 'ZZ', + Z: 'z' + } + }; + + const replacements = format_mappings['date']; + + let outputFormat = ''; + + Object.keys(replacements).forEach(function (key) { + if (format.contains(key)) { + format = format.replace(key, '%'+key); + } + }); + outputFormat = format; + Object.keys(replacements).forEach(function(key) { + if (outputFormat.contains('%'+key)) { + outputFormat = outputFormat.replace('%'+key, replacements[key]); + } + }); + return outputFormat; + } + }; +}); \ No newline at end of file diff --git a/assets/js/src/forms/list.jsx b/assets/js/src/forms/list.jsx index 3b88a25901..b19c5e3360 100644 --- a/assets/js/src/forms/list.jsx +++ b/assets/js/src/forms/list.jsx @@ -146,7 +146,7 @@ const FormList = React.createClass({ { segments } - { form.created_at } + { MailPoet.Date.full(form.created_at) } ); diff --git a/assets/js/src/newsletters/list.jsx b/assets/js/src/newsletters/list.jsx index 28f9ab3cae..5babb353ed 100644 --- a/assets/js/src/newsletters/list.jsx +++ b/assets/js/src/newsletters/list.jsx @@ -229,10 +229,10 @@ define( { segments } - { newsletter.created_at } + { MailPoet.Date.full(newsletter.created_at) } - { newsletter.updated_at } + { MailPoet.Date.full(newsletter.updated_at) } ); diff --git a/assets/js/src/segments/list.jsx b/assets/js/src/segments/list.jsx index a98ebb0260..2246ffa520 100644 --- a/assets/js/src/segments/list.jsx +++ b/assets/js/src/segments/list.jsx @@ -190,7 +190,7 @@ const SegmentList = React.createClass({ { segment.subscribers_count.unsubscribed || 0 } - { segment.created_at } + { MailPoet.Date.full(segment.created_at) } ); diff --git a/assets/js/src/subscribers/form.jsx b/assets/js/src/subscribers/form.jsx index 94293250ae..f1bfb3e4f7 100644 --- a/assets/js/src/subscribers/form.jsx +++ b/assets/js/src/subscribers/form.jsx @@ -3,15 +3,13 @@ define( 'react', 'react-router', 'mailpoet', - 'form/form.jsx', - 'moment' + 'form/form.jsx' ], function( React, Router, MailPoet, - Form, - Moment + Form ) { var fields = [ { @@ -69,9 +67,8 @@ define( label = segment.name; if (subscription.status === 'unsubscribed') { - const unsubscribed_at = Moment(subscription.updated_at) - .utcOffset(parseInt(mailpoet_date_offset)) - .format('ddd, D MMM YYYY HH:mm:ss'); + const unsubscribed_at = MailPoet.Date + .format(subscription.updated_at); label += ' (Unsubscribed on '+unsubscribed_at+')'; } } diff --git a/assets/js/src/subscribers/list.jsx b/assets/js/src/subscribers/list.jsx index a6c5120e73..015b919030 100644 --- a/assets/js/src/subscribers/list.jsx +++ b/assets/js/src/subscribers/list.jsx @@ -331,10 +331,10 @@ const SubscriberList = React.createClass({ { segments } - { subscriber.created_at } + { MailPoet.Date.full(subscriber.created_at) } - { subscriber.updated_at } + { MailPoet.Date.full(subscriber.updated_at) } ); diff --git a/views/layout.html b/views/layout.html index 801b4469d5..b27a8794c9 100644 --- a/views/layout.html +++ b/views/layout.html @@ -32,6 +32,10 @@ 'admin.js' )%> + + <% endblock %> diff --git a/webpack.config.js b/webpack.config.js index 624a847ee3..9a0bb065dc 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -91,10 +91,14 @@ baseConfig = { config.push(_.extend({}, baseConfig, { name: 'admin', entry: { - vendor: ['handlebars', 'handlebars_helpers'], + vendor: [ + 'handlebars', + 'handlebars_helpers' + ], mailpoet: [ 'mailpoet', 'ajax', + 'date', 'modal', 'notice', 'jquery.serialize_object', @@ -129,7 +133,6 @@ config.push(_.extend({}, baseConfig, { 'blob', 'filesaver', 'velocity-animate', - 'newsletter_editor/communicationsFix.js', 'newsletter_editor/App', 'newsletter_editor/components/config.js', @@ -156,11 +159,11 @@ config.push(_.extend({}, baseConfig, { 'newsletter_editor/blocks/header.js', 'newsletter_editor/blocks/automatedLatestContent.js', 'newsletter_editor/blocks/posts.js', - 'newsletter_editor/blocks/social.js', - ], + 'newsletter_editor/blocks/social.js' + ] }, plugins: [ - new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'), + new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js') ], externals: { 'jquery': 'jQuery',