Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

✨ amp-date-display: Support timeZoneName and timeZoneNameShort #35828

Merged
merged 10 commits into from
Aug 27, 2021
Merged

✨ amp-date-display: Support timeZoneName and timeZoneNameShort #35828

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c33d53c
✨ `amp-date-display`: Support `timeZoneName`
alanorozco Aug 26, 2021
b88de69
type
alanorozco Aug 26, 2021
978f71b
optional value
alanorozco Aug 26, 2021
db6c7f4
can simply ignore value not found
alanorozco Aug 26, 2021
cb4e348
Merge branch 'main' of github.com:ampproject/amphtml into timezonename
alanorozco Aug 26, 2021
47ba726
shared/test
alanorozco Aug 26, 2021
d964583
docs, timeZoneNameShort
alanorozco Aug 26, 2021
528835f
dep-check-config
alanorozco Aug 26, 2021
23c7cef
sort table
alanorozco Aug 26, 2021
222cd8e
Merge branch 'main' of github.com:ampproject/amphtml into timezonename
alanorozco Aug 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions build-system/compile/sources.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,8 @@ const CLOSURE_SRC_GLOBS = [
'extensions/amp-lightbox/1.0/*.js',
// For amp-bind in the web worker (ww.js).
'extensions/amp-bind/**/*.js',
// amp-date-display 0.1 and 1.0 share this file.
'extensions/amp-date-display/format.js',
// Needed to access to Variant interface from other extensions
'extensions/amp-experiment/**/*.js',
// Needed to access form impl from other extensions
Expand Down
3 changes: 3 additions & 0 deletions build-system/test-configs/dep-check-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,9 @@ exports.rules = [
'extensions/amp-lightbox-gallery/1.0/base-element.js->extensions/amp-lightbox/1.0/component.jss.js',
'extensions/amp-lightbox-gallery/1.0/base-element.js->extensions/amp-base-carousel/1.0/component.jss.js',

// <amp-date-display> versions share these date format helpers
'extensions/amp-date-display/**->extensions/amp-date-display/format.js',

// Facebook components
'extensions/amp-facebook/1.0/amp-facebook.js->extensions/amp-facebook/0.1/facebook-loader.js',
'extensions/amp-facebook-page/0.1/amp-facebook-page.js->extensions/amp-facebook/0.1/facebook-loader.js',
Expand Down
12 changes: 12 additions & 0 deletions extensions/amp-date-display/0.1/amp-date-display.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {Services} from '#service';

import {createCustomEvent} from '../../../src/event-helper';
import {dev, devAssert, user, userAssert} from '../../../src/log';
import {getTimeZoneName} from '../format';

/** @const {string} */
const TAG = 'amp-date-display';
Expand Down Expand Up @@ -38,6 +39,8 @@ const DEFAULT_DATETIME_OPTIONS = {
minute: number,
second: number,
iso: string,
timeZoneName: string,
timeZoneNameShort: string,
}} */
let VariablesDef;

Expand Down Expand Up @@ -268,6 +271,8 @@ export class AmpDateDisplay extends AMP.BaseElement {
second: date.getSeconds(),
iso: date.toISOString(),
localeString: this.getLocaleString_(date, locale, localeOptions),
timeZoneName: getTimeZoneName(date, locale, localeOptions),
timeZoneNameShort: getTimeZoneName(date, locale, localeOptions, 'short'),
};
}

Expand Down Expand Up @@ -308,6 +313,13 @@ export class AmpDateDisplay extends AMP.BaseElement {
second: date.getUTCSeconds(),
iso: date.toISOString(),
localeString: this.getLocaleString_(date, locale, localeOptionsInUTC),
timeZoneName: getTimeZoneName(date, locale, localeOptionsInUTC),
timeZoneNameShort: getTimeZoneName(
date,
locale,
localeOptionsInUTC,
'short'
),
};
}

Expand Down
48 changes: 25 additions & 23 deletions extensions/amp-date-display/0.1/amp-date-display.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,29 +39,31 @@ for rendering. Refer to the

This table lists the format you can specify in your Mustache template:

| Format | Meaning |
| -------------- | ------------------------------------------------------------- |
| day | 1, 2, ...12, 13, etc. |
| dayName | string, |
| dayNameShort | string, |
| dayPeriod | string, |
| dayTwoDigit | 01, 02, 03, ..., 12, 13, etc. |
| hour | 0, 1, 2, 3, ..., 12, 13, ..., 22, 23 |
| hour12 | 1, 2, 3, ..., 12, 1, 2, ..., 11, 12 |
| hour12TwoDigit | 01, 02, ..., 12, 01, 02, ..., 11, 12 |
| hourTwoDigit | 00, 01, 02, ..., 12, 13, ..., 22, 23 |
| iso | A standard ISO8601 date string e.g. 2019-01-23T15:31:21.213Z, |
| minute | 0, 1, 2, ..., 58, 59 |
| minuteTwoDigit | 00, 01, 02, ..., 58, 59 |
| month | 1, 2, 3, ..., 12 |
| monthName | Internationalized month name string. |
| monthNameShort | Internationalized abbreviated month name string., |
| monthTwoDigit | 01, 02, ..., 11, 12 |
| second | 0, 1, 2, ..., 58, 59 |
| secondTwoDigit | 00, 01, 02, ..., 58, 59 |
| year | 0, 1, 2, ..., 1999, 2000, 2001, etc. |
| yearTwoDigit | 00, 01, 02, ..., 17, 18, 19, ..., 98, 99 |
| localeString | A string with a language sensitive representation. |
| Format | Meaning |
| ----------------- | ------------------------------------------------------------- |
| day | 1, 2, ...12, 13, etc. |
| dayName | string, |
| dayNameShort | string, |
| dayPeriod | string, |
| dayTwoDigit | 01, 02, 03, ..., 12, 13, etc. |
| hour | 0, 1, 2, 3, ..., 12, 13, ..., 22, 23 |
| hour12 | 1, 2, 3, ..., 12, 1, 2, ..., 11, 12 |
| hour12TwoDigit | 01, 02, ..., 12, 01, 02, ..., 11, 12 |
| hourTwoDigit | 00, 01, 02, ..., 12, 13, ..., 22, 23 |
| iso | A standard ISO8601 date string e.g. 2019-01-23T15:31:21.213Z, |
| localeString | A string with a language sensitive representation. |
| minute | 0, 1, 2, ..., 58, 59 |
| minuteTwoDigit | 00, 01, 02, ..., 58, 59 |
| month | 1, 2, 3, ..., 12 |
| monthName | Internationalized month name string. |
| monthNameShort | Internationalized abbreviated month name string., |
| monthTwoDigit | 01, 02, ..., 11, 12 |
| second | 0, 1, 2, ..., 58, 59 |
| secondTwoDigit | 00, 01, 02, ..., 58, 59 |
| timeZoneName | Internationalized timezone, like `Pacific Daylight Time` |
| timeZoneNameShort | Internationalized timezone, abbreviated, like `PST` |
| year | 0, 1, 2, ..., 1999, 2000, 2001, etc. |
| yearTwoDigit | 00, 01, 02, ..., 17, 18, 19, ..., 98, 99 |

## Attributes

Expand Down
37 changes: 37 additions & 0 deletions extensions/amp-date-display/0.1/test/test-amp-date-display.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,8 @@ describes.realWin(
expect(data.secondTwoDigit).to.equal('06');
expect(data.dayPeriod).to.equal('am');
expect(data.localeString).to.equal('Feb 3, 2001, 4:05 AM');
expect(data.timeZoneName).to.equal('Coordinated Universal Time');
expect(data.timeZoneNameShort).to.equal('UTC');
});

it('provides all variables in local and English (default)', async () => {
Expand Down Expand Up @@ -98,8 +100,43 @@ describes.realWin(
expect(data.secondTwoDigit).to.equal('06');
expect(data.dayPeriod).to.equal('am');
expect(data.localeString).to.equal('Feb 3, 2001, 4:05 AM');
// default timezone is affected by running platform, so we just verify
// that both timezone values are present, and that they differ.
// (Another set of tests below verify that the timezone is labelled
// properly in different locales.)
expect(data.timeZoneName).to.be.ok;
expect(data.timeZoneNameShort).to.be.ok;
expect(data.timeZoneName).to.not.equal(data.timeZoneNameShort);
});

const expectedTimeZoneNamesAmericaNewYork = {
'en': {
timeZoneName: 'Eastern Standard Time',
timeZoneNameShort: 'EST',
},
'ja-JP': {
timeZoneName: 'アメリカ東部標準時',
timeZoneNameShort: 'GMT-5',
},
'ar-EG': {
timeZoneName: 'التوقيت الرسمي الشرقي لأمريكا الشمالية',
timeZoneNameShort: 'غرينتش-٥',
},
};
for (const locale in expectedTimeZoneNamesAmericaNewYork) {
const {timeZoneName, timeZoneNameShort} =
expectedTimeZoneNamesAmericaNewYork[locale];
it(`provides timeZoneName and timeZoneNameShort with specified TZ (${locale})`, async () => {
element.setAttribute('datetime', '2001-02-03T04:05:06.007Z');
element.setAttribute('locale', locale);
element.setAttribute('data-options-time-zone', 'America/New_York');
await element.buildInternal();
const data = impl.getDataForTemplate_();
expect(data.timeZoneName).to.equal(timeZoneName);
expect(data.timeZoneNameShort).to.equal(timeZoneNameShort);
});
}

describe('correctly parses', () => {
it('now keyword', async () => {
element.setAttribute('datetime', 'now');
Expand Down
10 changes: 10 additions & 0 deletions extensions/amp-date-display/1.0/component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {Wrapper, useRenderer} from '#preact/component';
import {useResourcesNotify} from '#preact/utils';

import {user} from '../../../src/log';
import {getTimeZoneName} from '../format';

/** @const {string} */
const TAG = 'amp-date-display';
Expand Down Expand Up @@ -200,6 +201,8 @@ function getVariablesInLocal(
'second': date.getSeconds(),
'iso': date.toISOString(),
'localeString': getLocaleString_(date, locale, localeOptions),
'timeZoneName': getTimeZoneName(date, locale, localeOptions),
'timeZoneNameShort': getTimeZoneName(date, locale, localeOptions, 'short'),
};
}

Expand Down Expand Up @@ -243,5 +246,12 @@ function getVariablesInUTC(
'second': date.getUTCSeconds(),
'iso': date.toISOString(),
'localeString': getLocaleString_(date, locale, localeOptionsInUTC),
'timeZoneName': getTimeZoneName(date, locale, localeOptionsInUTC),
'timeZoneNameShort': getTimeZoneName(
date,
locale,
localeOptionsInUTC,
'short'
),
};
}
39 changes: 39 additions & 0 deletions extensions/amp-date-display/1.0/test/test-amp-date-display.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,8 @@ describes.realWin(
dayPeriod: '{{dayPeriod}}',
iso: '{{iso}}',
localeString: '{{localeString}}',
timeZoneName: '{{timeZoneName}}',
timeZoneNameShort: '{{timeZoneNameShort}}',
});
element.appendChild(template);
element.setAttribute('layout', 'nodisplay');
Expand Down Expand Up @@ -95,6 +97,8 @@ describes.realWin(
expect(data.secondTwoDigit).to.equal('06');
expect(data.dayPeriod).to.equal('am');
expect(data.localeString).to.equal('Feb 3, 2001, 4:05 AM');
expect(data.timeZoneName).to.equal('Coordinated Universal Time');
expect(data.timeZoneNameShort).to.equal('UTC');
});

it('renders mustache template with "timestamp-ms"', async () => {
Expand Down Expand Up @@ -127,8 +131,43 @@ describes.realWin(
expect(data.secondTwoDigit).to.equal('06');
expect(data.dayPeriod).to.equal('am');
expect(data.localeString).to.equal('Feb 3, 2001, 4:05 AM');
// default timezone is affected by running platform, so we just verify
// that both timezone values are present, and that they differ.
// (Another set of tests below verify that the timezone is labelled
// properly in different locales.)
expect(data.timeZoneName).to.be.ok;
expect(data.timeZoneNameShort).to.be.ok;
expect(data.timeZoneName).to.not.equal(data.timeZoneNameShort);
});

const expectedTimeZoneNamesAmericaNewYork = {
'en': {
timeZoneName: 'Eastern Standard Time',
timeZoneNameShort: 'EST',
},
'ja-JP': {
timeZoneName: 'アメリカ東部標準時',
timeZoneNameShort: 'GMT-5',
},
'ar-EG': {
timeZoneName: 'التوقيت الرسمي الشرقي لأمريكا الشمالية',
timeZoneNameShort: 'غرينتش-٥',
},
};
for (const locale in expectedTimeZoneNamesAmericaNewYork) {
const {timeZoneName, timeZoneNameShort} =
expectedTimeZoneNamesAmericaNewYork[locale];
it(`provides timeZoneName and timeZoneNameShort with specified TZ (${locale}})`, async () => {
element.setAttribute('datetime', '2001-02-03T04:05:06.007Z');
element.setAttribute('locale', locale);
element.setAttribute('data-options-time-zone', 'America/New_York');
win.document.body.appendChild(element);
const data = await getRenderedData();
expect(data.timeZoneName).to.equal(timeZoneName);
expect(data.timeZoneNameShort).to.equal(timeZoneNameShort);
});
}

it('render localeString with data-options-time-style', async () => {
element.setAttribute('datetime', '2001-02-03T04:05:06.007Z');
element.setAttribute('display-in', 'UTC');
Expand Down
44 changes: 44 additions & 0 deletions extensions/amp-date-display/1.0/test/test-component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,13 @@ describes.sandboxed('DateDisplay 1.0 preact component', {}, (env) => {
expect(data.second).to.equal('6');
expect(data.secondTwoDigit).to.equal('06');
expect(data.dayPeriod).to.equal('am');
// default timezone is affected by running platform, so we just verify
// that both timezone values are present, and that they differ.
// (Another set of tests below verify that the timezone is labelled
// properly in different locales.)
expect(data.timeZoneName).to.be.ok;
expect(data.timeZoneNameShort).to.be.ok;
expect(data.timeZoneName).to.not.equal(data.timeZoneNameShort);
});

it('provides variables in Czech when "cs" locale is passed', () => {
Expand All @@ -193,6 +200,8 @@ describes.sandboxed('DateDisplay 1.0 preact component', {}, (env) => {
expect(data.monthNameShort).to.equal('úno');
expect(data.dayName).to.equal('sobota');
expect(data.dayNameShort).to.equal('so');
expect(data.timeZoneName).to.equal('Koordinovaný světový čas');
expect(data.timeZoneNameShort).to.equal('UTC');
});

it('shows custom locale string when localeOptions is passed', () => {
Expand All @@ -211,6 +220,41 @@ describes.sandboxed('DateDisplay 1.0 preact component', {}, (env) => {
expect(data.localeString).to.equal('上午4:05');
});

const expectedTimeZoneNamesAmericaNewYork = {
'en': {
timeZoneName: 'Eastern Standard Time',
timeZoneNameShort: 'EST',
},
'ja-JP': {
timeZoneName: 'アメリカ東部標準時',
timeZoneNameShort: 'GMT-5',
},
'ar-EG': {
timeZoneName: 'التوقيت الرسمي الشرقي لأمريكا الشمالية',
timeZoneNameShort: 'غرينتش-٥',
},
};
for (const locale in expectedTimeZoneNamesAmericaNewYork) {
const {timeZoneName, timeZoneNameShort} =
expectedTimeZoneNamesAmericaNewYork[locale];
it(`shows timeZoneName and timeZoneNameShort with specified TZ (${locale})`, () => {
const jsx = (
<DateDisplay
render={render}
datetime={Date.parse('2001-02-03T04:05:06.007Z')}
locale={locale}
localeOptions={{
timeZone: 'America/New_York',
}}
/>
);
const wrapper = mount(jsx);
const data = JSON.parse(wrapper.text());
expect(data.timeZoneName).to.equal(timeZoneName);
expect(data.timeZoneNameShort).to.equal(timeZoneNameShort);
});
}

describe('invalid data-options-* settings', () => {
it('throws error when invalid localeOptions is passed', () => {
const spy = env.sandbox.stub(user(), 'error');
Expand Down
48 changes: 25 additions & 23 deletions extensions/amp-date-display/amp-date-display.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,29 +41,31 @@ for rendering. Refer to the

This table lists the format you can specify in your Mustache template:

| Format | Meaning |
| -------------- | ------------------------------------------------------------- |
| day | 1, 2, ...12, 13, etc. |
| dayName | string, |
| dayNameShort | string, |
| dayPeriod | string, |
| dayTwoDigit | 01, 02, 03, ..., 12, 13, etc. |
| hour | 0, 1, 2, 3, ..., 12, 13, ..., 22, 23 |
| hour12 | 1, 2, 3, ..., 12, 1, 2, ..., 11, 12 |
| hour12TwoDigit | 01, 02, ..., 12, 01, 02, ..., 11, 12 |
| hourTwoDigit | 00, 01, 02, ..., 12, 13, ..., 22, 23 |
| iso | A standard ISO8601 date string e.g. 2019-01-23T15:31:21.213Z, |
| minute | 0, 1, 2, ..., 58, 59 |
| minuteTwoDigit | 00, 01, 02, ..., 58, 59 |
| month | 1, 2, 3, ..., 12 |
| monthName | Internationalized month name string. |
| monthNameShort | Internationalized abbreviated month name string., |
| monthTwoDigit | 01, 02, ..., 11, 12 |
| second | 0, 1, 2, ..., 58, 59 |
| secondTwoDigit | 00, 01, 02, ..., 58, 59 |
| year | 0, 1, 2, ..., 1999, 2000, 2001, etc. |
| yearTwoDigit | 00, 01, 02, ..., 17, 18, 19, ..., 98, 99 |
| localeString | A string with a language sensitive representation. |
| Format | Meaning |
| ----------------- | ------------------------------------------------------------- |
| day | 1, 2, ...12, 13, etc. |
| dayName | string, |
| dayNameShort | string, |
| dayPeriod | string, |
| dayTwoDigit | 01, 02, 03, ..., 12, 13, etc. |
| hour | 0, 1, 2, 3, ..., 12, 13, ..., 22, 23 |
| hour12 | 1, 2, 3, ..., 12, 1, 2, ..., 11, 12 |
| hour12TwoDigit | 01, 02, ..., 12, 01, 02, ..., 11, 12 |
| hourTwoDigit | 00, 01, 02, ..., 12, 13, ..., 22, 23 |
| iso | A standard ISO8601 date string e.g. 2019-01-23T15:31:21.213Z, |
| localeString | A string with a language sensitive representation. |
| minute | 0, 1, 2, ..., 58, 59 |
| minuteTwoDigit | 00, 01, 02, ..., 58, 59 |
| month | 1, 2, 3, ..., 12 |
| monthName | Internationalized month name string. |
| monthNameShort | Internationalized abbreviated month name string., |
| monthTwoDigit | 01, 02, ..., 11, 12 |
| second | 0, 1, 2, ..., 58, 59 |
| secondTwoDigit | 00, 01, 02, ..., 58, 59 |
| timeZoneName | Internationalized timezone, like `Pacific Daylight Time` |
| timeZoneNameShort | Internationalized timezone, abbreviated, like `PST` |
| year | 0, 1, 2, ..., 1999, 2000, 2001, etc. |
| yearTwoDigit | 00, 01, 02, ..., 17, 18, 19, ..., 98, 99 |

### Standalone use outside valid AMP documents

Expand Down
Loading