Add the node_modules anyway
This commit is contained in:
Родитель
fe31942fcb
Коммит
c4505ab4af
20
samples/webcomponents/node_modules/@github/time-elements/LICENSE
сгенерированный
поставляемый
Normal file
20
samples/webcomponents/node_modules/@github/time-elements/LICENSE
сгенерированный
поставляемый
Normal file
|
@ -0,0 +1,20 @@
|
|||
Copyright (c) 2014-2018 GitHub, Inc.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
"Software"), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
155
samples/webcomponents/node_modules/@github/time-elements/README.md
сгенерированный
поставляемый
Normal file
155
samples/webcomponents/node_modules/@github/time-elements/README.md
сгенерированный
поставляемый
Normal file
|
@ -0,0 +1,155 @@
|
|||
# <time> element extensions
|
||||
|
||||
Formats a timestamp as a localized string or as relative text that auto-updates in the user's browser.
|
||||
|
||||
This allows the server to cache HTML fragments containing dates and lets the browser choose how to localize the displayed time according to the user's preferences. For example, the server may have cached the following generated markup:
|
||||
|
||||
```html
|
||||
<local-time datetime="2014-04-01T16:30:00-08:00">
|
||||
April 1, 2014 4:30pm
|
||||
</local-time>
|
||||
```
|
||||
|
||||
Every visitor is served the same markup from the server's cache. When it reaches the browser, the custom `local-time` JavaScript localizes the element's text into the local timezone and formatting.
|
||||
|
||||
```html
|
||||
<local-time datetime="2014-04-01T16:30:00-08:00">
|
||||
1 Apr 2014 21:30
|
||||
</local-time>
|
||||
```
|
||||
|
||||
Dates are displayed before months, and a 24-hour clock is used, according to the user's browser settings.
|
||||
|
||||
If the browser's JavaScript is disabled, the default text served in the cached markup is still displayed.
|
||||
|
||||
## Installation
|
||||
|
||||
Available on [npm](https://www.npmjs.com/) as [**@github/time-elements**](https://www.npmjs.com/package/@github/time-elements).
|
||||
|
||||
```
|
||||
$ npm install @github/time-elements
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
This component provides three custom subtypes of the standard HTML `<time>` element. All custom time elements MUST have a `datetime` attribute set to an ISO 8601 formatted timestamp.
|
||||
|
||||
### relative-time
|
||||
|
||||
A relative time-ago-in-words description can be generated by using the `relative-time` element extension.
|
||||
|
||||
Add a `<relative-time>` element to your markup. Provide a default formatted date as the element's text content (e.g. April 1, 2014).
|
||||
|
||||
``` html
|
||||
<relative-time datetime="2014-04-01T16:30:00-08:00">
|
||||
April 1, 2014
|
||||
</relative-time>
|
||||
```
|
||||
|
||||
Depending on how far in the future this is being viewed, the element's text will be replaced with one of the following formats:
|
||||
|
||||
- 6 years from now
|
||||
- 20 days from now
|
||||
- 4 hours from now
|
||||
- 7 minutes from now
|
||||
- just now
|
||||
- 30 seconds ago
|
||||
- a minute ago
|
||||
- 30 minutes ago
|
||||
- an hour ago
|
||||
- 20 hours ago
|
||||
- a day ago
|
||||
- 20 days ago
|
||||
- on Apr 1, 2014
|
||||
|
||||
So, a relative date phrase is used for up to a month and then the actual date is shown.
|
||||
|
||||
### time-until
|
||||
|
||||
You can use `time-until` to always display a relative date that's in the future. It operates much like `<relative-time>`, except in the reverse, with past events shown as `just now` and future events always showing as relative:
|
||||
|
||||
- 10 years from now
|
||||
- 20 days from now
|
||||
- 6 hours from now
|
||||
- 20 minutes from now
|
||||
- 30 seconds from now
|
||||
- just now
|
||||
|
||||
Add a `<time-until>` element to your markup. Provide a default formatted date as the element's text content (e.g. April 1, 2024).
|
||||
|
||||
``` html
|
||||
<time-until datetime="2024-04-01T16:30:00-08:00">
|
||||
April 1, 2024
|
||||
</time-until>
|
||||
```
|
||||
|
||||
### time-ago
|
||||
|
||||
An *always* relative time-ago-in-words description can be generated by using the `time-ago` element extension. This is similar to the `relative-time` extension. However, this will never switch to displaying the date. It strictly shows relative date phrases, even after a month has passed.
|
||||
|
||||
``` html
|
||||
<time-ago datetime="2012-04-01T16:30:00-08:00">
|
||||
April 1, 2014
|
||||
</time-ago>
|
||||
```
|
||||
|
||||
For example, if this markup is viewed two years in the future, the element's text will read `2 years ago`.
|
||||
|
||||
#### Micro format
|
||||
|
||||
The optional `format="micro"` attribute shortens the descriptions to 1m, 1h, 1d, 1y.
|
||||
|
||||
``` html
|
||||
<time-ago datetime="2012-04-01T16:30:00-08:00" format="micro">
|
||||
April 1, 2014
|
||||
</time-ago>
|
||||
```
|
||||
|
||||
### local-time
|
||||
|
||||
This custom time extension is useful for formatting a date and time in the user's preferred locale format.
|
||||
|
||||
``` html
|
||||
<local-time datetime="2014-04-01T16:30:00-08:00"
|
||||
month="short"
|
||||
day="numeric"
|
||||
year="numeric"
|
||||
hour="numeric"
|
||||
minute="numeric">
|
||||
April 1, 2014 4:30PM PDT
|
||||
</local-time>
|
||||
```
|
||||
|
||||
When this markup is viewed in a CDT timezone, it will show `Apr 1, 2014 6:30PM`. If it's viewed in a browser with European date preferences, it will read `1 Apr 2014 18:30`.
|
||||
|
||||
### Options
|
||||
|
||||
Attribute | Options | Description
|
||||
--- | --- | ---
|
||||
`datetime` | ISO 8601 date | Required date of element `2014-06-01T13:05:07Z`
|
||||
`year` | 2-digit, numeric | Format year as `14` or `2014`
|
||||
`month` | short, long | Format month as `Jun` or `June`
|
||||
`day` | 2-digit, numeric | Format day as `01` or `1`
|
||||
`weekday` | short, long | Format weekday as `Sun` or `Sunday`
|
||||
`hour` | 2-digit, numeric | Format hour as `01` or `1`
|
||||
`minute` | 2-digit, numeric | Format minute as `05` or `5`
|
||||
`second` | 2-digit, numeric | Format second as `07` or `7`
|
||||
`time-zone-name` | short, long | Display time zone as `GMT+1` or by its full name
|
||||
|
||||
## Browser Support
|
||||
|
||||
Browsers without native [custom element support][support] require a [polyfill][].
|
||||
|
||||
- Chrome
|
||||
- Firefox
|
||||
- Safari
|
||||
- Microsoft Edge
|
||||
|
||||
[support]: https://caniuse.com/#feat=custom-elementsv1
|
||||
[polyfill]: https://github.com/webcomponents/custom-elements
|
||||
|
||||
## See Also
|
||||
|
||||
Most of this implementation is based on Basecamp's [local_time](https://github.com/basecamp/local_time) component. Thanks to @javan for open sourcing that work and allowing for others to build on top of it.
|
||||
|
||||
@rmm5t's [jquery-timeago](https://github.com/rmm5t/jquery-timeago) is one of the old time-ago-in-words JS plugins.
|
833
samples/webcomponents/node_modules/@github/time-elements/dist/time-elements-legacy.js
сгенерированный
поставляемый
Normal file
833
samples/webcomponents/node_modules/@github/time-elements/dist/time-elements-legacy.js
сгенерированный
поставляемый
Normal file
|
@ -0,0 +1,833 @@
|
|||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
|
||||
typeof define === 'function' && define.amd ? define(['exports'], factory) :
|
||||
(global = global || self, factory(global.TimeElements = {}));
|
||||
}(this, function (exports) { 'use strict';
|
||||
|
||||
const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
||||
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
||||
|
||||
function pad(num) {
|
||||
return "0".concat(num).slice(-2);
|
||||
}
|
||||
|
||||
function strftime(time, formatString) {
|
||||
const day = time.getDay();
|
||||
const date = time.getDate();
|
||||
const month = time.getMonth();
|
||||
const year = time.getFullYear();
|
||||
const hour = time.getHours();
|
||||
const minute = time.getMinutes();
|
||||
const second = time.getSeconds();
|
||||
return formatString.replace(/%([%aAbBcdeHIlmMpPSwyYZz])/g, function (_arg) {
|
||||
let match;
|
||||
const modifier = _arg[1];
|
||||
|
||||
switch (modifier) {
|
||||
case '%':
|
||||
return '%';
|
||||
|
||||
case 'a':
|
||||
return weekdays[day].slice(0, 3);
|
||||
|
||||
case 'A':
|
||||
return weekdays[day];
|
||||
|
||||
case 'b':
|
||||
return months[month].slice(0, 3);
|
||||
|
||||
case 'B':
|
||||
return months[month];
|
||||
|
||||
case 'c':
|
||||
return time.toString();
|
||||
|
||||
case 'd':
|
||||
return pad(date);
|
||||
|
||||
case 'e':
|
||||
return String(date);
|
||||
|
||||
case 'H':
|
||||
return pad(hour);
|
||||
|
||||
case 'I':
|
||||
return pad(strftime(time, '%l'));
|
||||
|
||||
case 'l':
|
||||
if (hour === 0 || hour === 12) {
|
||||
return String(12);
|
||||
} else {
|
||||
return String((hour + 12) % 12);
|
||||
}
|
||||
|
||||
case 'm':
|
||||
return pad(month + 1);
|
||||
|
||||
case 'M':
|
||||
return pad(minute);
|
||||
|
||||
case 'p':
|
||||
if (hour > 11) {
|
||||
return 'PM';
|
||||
} else {
|
||||
return 'AM';
|
||||
}
|
||||
|
||||
case 'P':
|
||||
if (hour > 11) {
|
||||
return 'pm';
|
||||
} else {
|
||||
return 'am';
|
||||
}
|
||||
|
||||
case 'S':
|
||||
return pad(second);
|
||||
|
||||
case 'w':
|
||||
return String(day);
|
||||
|
||||
case 'y':
|
||||
return pad(year % 100);
|
||||
|
||||
case 'Y':
|
||||
return String(year);
|
||||
|
||||
case 'Z':
|
||||
match = time.toString().match(/\((\w+)\)$/);
|
||||
return match ? match[1] : '';
|
||||
|
||||
case 'z':
|
||||
match = time.toString().match(/\w([+-]\d\d\d\d) /);
|
||||
return match ? match[1] : '';
|
||||
}
|
||||
|
||||
return '';
|
||||
});
|
||||
}
|
||||
function makeFormatter(options) {
|
||||
let format;
|
||||
return function () {
|
||||
if (format) return format;
|
||||
|
||||
if ('Intl' in window) {
|
||||
try {
|
||||
format = new Intl.DateTimeFormat(undefined, options);
|
||||
return format;
|
||||
} catch (e) {
|
||||
if (!(e instanceof RangeError)) {
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
let dayFirst = null;
|
||||
const dayFirstFormatter = makeFormatter({
|
||||
day: 'numeric',
|
||||
month: 'short'
|
||||
}); // Private: Determine if the day should be formatted before the month name in
|
||||
// the user's current locale. For example, `9 Jun` for en-GB and `Jun 9`
|
||||
// for en-US.
|
||||
//
|
||||
// Returns true if the day appears before the month.
|
||||
|
||||
function isDayFirst() {
|
||||
if (dayFirst !== null) {
|
||||
return dayFirst;
|
||||
}
|
||||
|
||||
const formatter = dayFirstFormatter();
|
||||
|
||||
if (formatter) {
|
||||
const output = formatter.format(new Date(0));
|
||||
dayFirst = !!output.match(/^\d/);
|
||||
return dayFirst;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
let yearSeparator = null;
|
||||
const yearFormatter = makeFormatter({
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: 'numeric'
|
||||
}); // Private: Determine if the year should be separated from the month and day
|
||||
// with a comma. For example, `9 Jun 2014` in en-GB and `Jun 9, 2014` in en-US.
|
||||
//
|
||||
// Returns true if the date needs a separator.
|
||||
|
||||
function isYearSeparator() {
|
||||
if (yearSeparator !== null) {
|
||||
return yearSeparator;
|
||||
}
|
||||
|
||||
const formatter = yearFormatter();
|
||||
|
||||
if (formatter) {
|
||||
const output = formatter.format(new Date(0));
|
||||
yearSeparator = !!output.match(/\d,/);
|
||||
return yearSeparator;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
} // Private: Determine if the date occurs in the same year as today's date.
|
||||
//
|
||||
// date - The Date to test.
|
||||
//
|
||||
// Returns true if it's this year.
|
||||
|
||||
function isThisYear(date) {
|
||||
const now = new Date();
|
||||
return now.getUTCFullYear() === date.getUTCFullYear();
|
||||
}
|
||||
function makeRelativeFormat(locale, options) {
|
||||
if ('Intl' in window && 'RelativeTimeFormat' in window.Intl) {
|
||||
try {
|
||||
// eslint-disable-next-line flowtype/no-flow-fix-me-comments
|
||||
// $FlowFixMe: missing RelativeTimeFormat type
|
||||
return new Intl.RelativeTimeFormat(locale, options);
|
||||
} catch (e) {
|
||||
if (!(e instanceof RangeError)) {
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
}
|
||||
} // Private: Get preferred Intl locale for a target element.
|
||||
//
|
||||
// Traverses parents until it finds an explicit `lang` other returns "default".
|
||||
|
||||
function localeFromElement(el) {
|
||||
const container = el.closest('[lang]');
|
||||
|
||||
if (container instanceof HTMLElement && container.lang) {
|
||||
return container.lang;
|
||||
}
|
||||
|
||||
return 'default';
|
||||
}
|
||||
|
||||
const datetimes = new WeakMap();
|
||||
class ExtendedTimeElement extends HTMLElement {
|
||||
static get observedAttributes() {
|
||||
return ['datetime', 'day', 'format', 'lang', 'hour', 'minute', 'month', 'second', 'title', 'weekday', 'year'];
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
const title = this.getFormattedTitle();
|
||||
|
||||
if (title && !this.hasAttribute('title')) {
|
||||
this.setAttribute('title', title);
|
||||
}
|
||||
|
||||
const text = this.getFormattedDate();
|
||||
|
||||
if (text) {
|
||||
this.textContent = text;
|
||||
}
|
||||
} // Internal: Refresh the time element's formatted date when an attribute changes.
|
||||
|
||||
|
||||
attributeChangedCallback(attrName, oldValue, newValue) {
|
||||
if (attrName === 'datetime') {
|
||||
const millis = Date.parse(newValue);
|
||||
|
||||
if (isNaN(millis)) {
|
||||
datetimes.delete(this);
|
||||
} else {
|
||||
datetimes.set(this, new Date(millis));
|
||||
}
|
||||
}
|
||||
|
||||
const title = this.getFormattedTitle();
|
||||
|
||||
if (title && !this.hasAttribute('title')) {
|
||||
this.setAttribute('title', title);
|
||||
}
|
||||
|
||||
const text = this.getFormattedDate();
|
||||
|
||||
if (text) {
|
||||
this.textContent = text;
|
||||
}
|
||||
}
|
||||
|
||||
get date() {
|
||||
return datetimes.get(this);
|
||||
} // Internal: Format the ISO 8601 timestamp according to the user agent's
|
||||
// locale-aware formatting rules. The element's existing `title` attribute
|
||||
// value takes precedence over this custom format.
|
||||
//
|
||||
// Returns a formatted time String.
|
||||
|
||||
|
||||
getFormattedTitle() {
|
||||
const date = this.date;
|
||||
if (!date) return;
|
||||
const formatter = titleFormatter();
|
||||
|
||||
if (formatter) {
|
||||
return formatter.format(date);
|
||||
} else {
|
||||
try {
|
||||
return date.toLocaleString();
|
||||
} catch (e) {
|
||||
if (e instanceof RangeError) {
|
||||
return date.toString();
|
||||
} else {
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getFormattedDate() {}
|
||||
|
||||
}
|
||||
const titleFormatter = makeFormatter({
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
timeZoneName: 'short'
|
||||
});
|
||||
|
||||
const formatters = new WeakMap();
|
||||
class LocalTimeElement extends ExtendedTimeElement {
|
||||
attributeChangedCallback(attrName, oldValue, newValue) {
|
||||
if (attrName === 'hour' || attrName === 'minute' || attrName === 'second' || attrName === 'time-zone-name') {
|
||||
formatters.delete(this);
|
||||
}
|
||||
|
||||
super.attributeChangedCallback(attrName, oldValue, newValue);
|
||||
} // Formats the element's date, in the user's current locale, according to
|
||||
// the formatting attribute values. Values are not passed straight through to
|
||||
// an Intl.DateTimeFormat instance so that weekday and month names are always
|
||||
// displayed in English, for now.
|
||||
//
|
||||
// Supported attributes are:
|
||||
//
|
||||
// weekday - "short", "long"
|
||||
// year - "numeric", "2-digit"
|
||||
// month - "short", "long"
|
||||
// day - "numeric", "2-digit"
|
||||
// hour - "numeric", "2-digit"
|
||||
// minute - "numeric", "2-digit"
|
||||
// second - "numeric", "2-digit"
|
||||
//
|
||||
// Returns a formatted time String.
|
||||
|
||||
|
||||
getFormattedDate() {
|
||||
const d = this.date;
|
||||
if (!d) return;
|
||||
const date = formatDate(this, d) || '';
|
||||
const time = formatTime(this, d) || '';
|
||||
return "".concat(date, " ").concat(time).trim();
|
||||
}
|
||||
|
||||
} // Private: Format a date according to the `weekday`, `day`, `month`,
|
||||
// and `year` attribute values.
|
||||
//
|
||||
// This doesn't use Intl.DateTimeFormat to avoid creating text in the user's
|
||||
// language when the majority of the surrounding text is in English. There's
|
||||
// currently no way to separate the language from the format in Intl.
|
||||
//
|
||||
// el - The local-time element to format.
|
||||
//
|
||||
// Returns a date String or null if no date formats are provided.
|
||||
|
||||
function formatDate(el, date) {
|
||||
// map attribute values to strftime
|
||||
const props = {
|
||||
weekday: {
|
||||
short: '%a',
|
||||
long: '%A'
|
||||
},
|
||||
day: {
|
||||
numeric: '%e',
|
||||
'2-digit': '%d'
|
||||
},
|
||||
month: {
|
||||
short: '%b',
|
||||
long: '%B'
|
||||
},
|
||||
year: {
|
||||
numeric: '%Y',
|
||||
'2-digit': '%y'
|
||||
} // build a strftime format string
|
||||
|
||||
};
|
||||
let format = isDayFirst() ? 'weekday day month year' : 'weekday month day, year';
|
||||
|
||||
for (const prop in props) {
|
||||
const value = props[prop][el.getAttribute(prop)];
|
||||
format = format.replace(prop, value || '');
|
||||
} // clean up year separator comma
|
||||
|
||||
|
||||
format = format.replace(/(\s,)|(,\s$)/, ''); // squeeze spaces from final string
|
||||
|
||||
return strftime(date, format).replace(/\s+/, ' ').trim();
|
||||
} // Private: Format a time according to the `hour`, `minute`, and `second`
|
||||
// attribute values.
|
||||
//
|
||||
// el - The local-time element to format.
|
||||
//
|
||||
// Returns a time String or null if no time formats are provided.
|
||||
|
||||
|
||||
function formatTime(el, date) {
|
||||
const options = {}; // retrieve format settings from attributes
|
||||
|
||||
const hour = el.getAttribute('hour');
|
||||
if (hour === 'numeric' || hour === '2-digit') options.hour = hour;
|
||||
const minute = el.getAttribute('minute');
|
||||
if (minute === 'numeric' || minute === '2-digit') options.minute = minute;
|
||||
const second = el.getAttribute('second');
|
||||
if (second === 'numeric' || second === '2-digit') options.second = second;
|
||||
const tz = el.getAttribute('time-zone-name');
|
||||
if (tz === 'short' || tz === 'long') options.timeZoneName = tz; // No time format attributes provided.
|
||||
|
||||
if (Object.keys(options).length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
let factory = formatters.get(el);
|
||||
|
||||
if (!factory) {
|
||||
factory = makeFormatter(options);
|
||||
formatters.set(el, factory);
|
||||
}
|
||||
|
||||
const formatter = factory();
|
||||
|
||||
if (formatter) {
|
||||
// locale-aware formatting of 24 or 12 hour times
|
||||
return formatter.format(date);
|
||||
} else {
|
||||
// fall back to strftime for non-Intl browsers
|
||||
const timef = options.second ? '%H:%M:%S' : '%H:%M';
|
||||
return strftime(date, timef);
|
||||
}
|
||||
} // Public: LocalTimeElement constructor.
|
||||
//
|
||||
// var time = new LocalTimeElement()
|
||||
// # => <local-time></local-time>
|
||||
//
|
||||
|
||||
|
||||
if (!window.customElements.get('local-time')) {
|
||||
window.LocalTimeElement = LocalTimeElement;
|
||||
window.customElements.define('local-time', LocalTimeElement);
|
||||
}
|
||||
|
||||
class RelativeTime {
|
||||
constructor(date, locale) {
|
||||
this.date = date;
|
||||
this.locale = locale;
|
||||
}
|
||||
|
||||
toString() {
|
||||
const ago = this.timeElapsed();
|
||||
|
||||
if (ago) {
|
||||
return ago;
|
||||
} else {
|
||||
const ahead = this.timeAhead();
|
||||
|
||||
if (ahead) {
|
||||
return ahead;
|
||||
} else {
|
||||
return "on ".concat(this.formatDate());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
timeElapsed() {
|
||||
const ms = new Date().getTime() - this.date.getTime();
|
||||
const sec = Math.round(ms / 1000);
|
||||
const min = Math.round(sec / 60);
|
||||
const hr = Math.round(min / 60);
|
||||
const day = Math.round(hr / 24);
|
||||
|
||||
if (ms >= 0 && day < 30) {
|
||||
return this.timeAgoFromMs(ms);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
timeAhead() {
|
||||
const ms = this.date.getTime() - new Date().getTime();
|
||||
const sec = Math.round(ms / 1000);
|
||||
const min = Math.round(sec / 60);
|
||||
const hr = Math.round(min / 60);
|
||||
const day = Math.round(hr / 24);
|
||||
|
||||
if (ms >= 0 && day < 30) {
|
||||
return this.timeUntil();
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
timeAgo() {
|
||||
const ms = new Date().getTime() - this.date.getTime();
|
||||
return this.timeAgoFromMs(ms);
|
||||
}
|
||||
|
||||
timeAgoFromMs(ms) {
|
||||
const sec = Math.round(ms / 1000);
|
||||
const min = Math.round(sec / 60);
|
||||
const hr = Math.round(min / 60);
|
||||
const day = Math.round(hr / 24);
|
||||
const month = Math.round(day / 30);
|
||||
const year = Math.round(month / 12);
|
||||
|
||||
if (ms < 0) {
|
||||
return formatRelativeTime(this.locale, 0, 'second');
|
||||
} else if (sec < 10) {
|
||||
return formatRelativeTime(this.locale, 0, 'second');
|
||||
} else if (sec < 45) {
|
||||
return formatRelativeTime(this.locale, -sec, 'second');
|
||||
} else if (sec < 90) {
|
||||
return formatRelativeTime(this.locale, -min, 'minute');
|
||||
} else if (min < 45) {
|
||||
return formatRelativeTime(this.locale, -min, 'minute');
|
||||
} else if (min < 90) {
|
||||
return formatRelativeTime(this.locale, -hr, 'hour');
|
||||
} else if (hr < 24) {
|
||||
return formatRelativeTime(this.locale, -hr, 'hour');
|
||||
} else if (hr < 36) {
|
||||
return formatRelativeTime(this.locale, -day, 'day');
|
||||
} else if (day < 30) {
|
||||
return formatRelativeTime(this.locale, -day, 'day');
|
||||
} else if (month < 12) {
|
||||
return formatRelativeTime(this.locale, -month, 'month');
|
||||
} else if (month < 18) {
|
||||
return formatRelativeTime(this.locale, -year, 'year');
|
||||
} else {
|
||||
return formatRelativeTime(this.locale, -year, 'year');
|
||||
}
|
||||
}
|
||||
|
||||
microTimeAgo() {
|
||||
const ms = new Date().getTime() - this.date.getTime();
|
||||
const sec = Math.round(ms / 1000);
|
||||
const min = Math.round(sec / 60);
|
||||
const hr = Math.round(min / 60);
|
||||
const day = Math.round(hr / 24);
|
||||
const month = Math.round(day / 30);
|
||||
const year = Math.round(month / 12);
|
||||
|
||||
if (min < 1) {
|
||||
return '1m';
|
||||
} else if (min < 60) {
|
||||
return "".concat(min, "m");
|
||||
} else if (hr < 24) {
|
||||
return "".concat(hr, "h");
|
||||
} else if (day < 365) {
|
||||
return "".concat(day, "d");
|
||||
} else {
|
||||
return "".concat(year, "y");
|
||||
}
|
||||
}
|
||||
|
||||
timeUntil() {
|
||||
const ms = this.date.getTime() - new Date().getTime();
|
||||
return this.timeUntilFromMs(ms);
|
||||
}
|
||||
|
||||
timeUntilFromMs(ms) {
|
||||
const sec = Math.round(ms / 1000);
|
||||
const min = Math.round(sec / 60);
|
||||
const hr = Math.round(min / 60);
|
||||
const day = Math.round(hr / 24);
|
||||
const month = Math.round(day / 30);
|
||||
const year = Math.round(month / 12);
|
||||
|
||||
if (month >= 18) {
|
||||
return formatRelativeTime(this.locale, year, 'year');
|
||||
} else if (month >= 12) {
|
||||
return formatRelativeTime(this.locale, year, 'year');
|
||||
} else if (day >= 45) {
|
||||
return formatRelativeTime(this.locale, month, 'month');
|
||||
} else if (day >= 30) {
|
||||
return formatRelativeTime(this.locale, month, 'month');
|
||||
} else if (hr >= 36) {
|
||||
return formatRelativeTime(this.locale, day, 'day');
|
||||
} else if (hr >= 24) {
|
||||
return formatRelativeTime(this.locale, day, 'day');
|
||||
} else if (min >= 90) {
|
||||
return formatRelativeTime(this.locale, hr, 'hour');
|
||||
} else if (min >= 45) {
|
||||
return formatRelativeTime(this.locale, hr, 'hour');
|
||||
} else if (sec >= 90) {
|
||||
return formatRelativeTime(this.locale, min, 'minute');
|
||||
} else if (sec >= 45) {
|
||||
return formatRelativeTime(this.locale, min, 'minute');
|
||||
} else if (sec >= 10) {
|
||||
return formatRelativeTime(this.locale, sec, 'second');
|
||||
} else {
|
||||
return formatRelativeTime(this.locale, 0, 'second');
|
||||
}
|
||||
}
|
||||
|
||||
microTimeUntil() {
|
||||
const ms = this.date.getTime() - new Date().getTime();
|
||||
const sec = Math.round(ms / 1000);
|
||||
const min = Math.round(sec / 60);
|
||||
const hr = Math.round(min / 60);
|
||||
const day = Math.round(hr / 24);
|
||||
const month = Math.round(day / 30);
|
||||
const year = Math.round(month / 12);
|
||||
|
||||
if (day >= 365) {
|
||||
return "".concat(year, "y");
|
||||
} else if (hr >= 24) {
|
||||
return "".concat(day, "d");
|
||||
} else if (min >= 60) {
|
||||
return "".concat(hr, "h");
|
||||
} else if (min > 1) {
|
||||
return "".concat(min, "m");
|
||||
} else {
|
||||
return '1m';
|
||||
}
|
||||
}
|
||||
|
||||
formatDate() {
|
||||
let format = isDayFirst() ? '%e %b' : '%b %e';
|
||||
|
||||
if (!isThisYear(this.date)) {
|
||||
format += isYearSeparator() ? ', %Y' : ' %Y';
|
||||
}
|
||||
|
||||
return strftime(this.date, format);
|
||||
}
|
||||
|
||||
formatTime() {
|
||||
const formatter = timeFormatter();
|
||||
|
||||
if (formatter) {
|
||||
return formatter.format(this.date);
|
||||
} else {
|
||||
return strftime(this.date, '%l:%M%P');
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function formatRelativeTime(locale, value, unit) {
|
||||
const formatter = makeRelativeFormat(locale, {
|
||||
numeric: 'auto'
|
||||
});
|
||||
|
||||
if (formatter) {
|
||||
return formatter.format(value, unit);
|
||||
} else {
|
||||
return formatEnRelativeTime(value, unit);
|
||||
}
|
||||
} // Simplified "en" RelativeTimeFormat.format function
|
||||
//
|
||||
// Values should roughly match
|
||||
// new Intl.RelativeTimeFormat('en', {numeric: 'auto'}).format(value, unit)
|
||||
//
|
||||
|
||||
|
||||
function formatEnRelativeTime(value, unit) {
|
||||
if (value === 0) {
|
||||
switch (unit) {
|
||||
case 'year':
|
||||
case 'quarter':
|
||||
case 'month':
|
||||
case 'week':
|
||||
return "this ".concat(unit);
|
||||
|
||||
case 'day':
|
||||
return 'today';
|
||||
|
||||
case 'hour':
|
||||
case 'minute':
|
||||
return "in 0 ".concat(unit, "s");
|
||||
|
||||
case 'second':
|
||||
return 'now';
|
||||
}
|
||||
} else if (value === 1) {
|
||||
switch (unit) {
|
||||
case 'year':
|
||||
case 'quarter':
|
||||
case 'month':
|
||||
case 'week':
|
||||
return "next ".concat(unit);
|
||||
|
||||
case 'day':
|
||||
return 'tomorrow';
|
||||
|
||||
case 'hour':
|
||||
case 'minute':
|
||||
case 'second':
|
||||
return "in 1 ".concat(unit);
|
||||
}
|
||||
} else if (value === -1) {
|
||||
switch (unit) {
|
||||
case 'year':
|
||||
case 'quarter':
|
||||
case 'month':
|
||||
case 'week':
|
||||
return "last ".concat(unit);
|
||||
|
||||
case 'day':
|
||||
return 'yesterday';
|
||||
|
||||
case 'hour':
|
||||
case 'minute':
|
||||
case 'second':
|
||||
return "1 ".concat(unit, " ago");
|
||||
}
|
||||
} else if (value > 1) {
|
||||
switch (unit) {
|
||||
case 'year':
|
||||
case 'quarter':
|
||||
case 'month':
|
||||
case 'week':
|
||||
case 'day':
|
||||
case 'hour':
|
||||
case 'minute':
|
||||
case 'second':
|
||||
return "in ".concat(value, " ").concat(unit, "s");
|
||||
}
|
||||
} else if (value < -1) {
|
||||
switch (unit) {
|
||||
case 'year':
|
||||
case 'quarter':
|
||||
case 'month':
|
||||
case 'week':
|
||||
case 'day':
|
||||
case 'hour':
|
||||
case 'minute':
|
||||
case 'second':
|
||||
return "".concat(-value, " ").concat(unit, "s ago");
|
||||
}
|
||||
}
|
||||
|
||||
throw new RangeError("Invalid unit argument for format() '".concat(unit, "'"));
|
||||
}
|
||||
|
||||
const timeFormatter = makeFormatter({
|
||||
hour: 'numeric',
|
||||
minute: '2-digit'
|
||||
});
|
||||
|
||||
class RelativeTimeElement extends ExtendedTimeElement {
|
||||
getFormattedDate() {
|
||||
const date = this.date;
|
||||
|
||||
if (date) {
|
||||
return new RelativeTime(date, localeFromElement(this)).toString();
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
nowElements.push(this);
|
||||
|
||||
if (!updateNowElementsId) {
|
||||
updateNowElements();
|
||||
updateNowElementsId = setInterval(updateNowElements, 60 * 1000);
|
||||
}
|
||||
|
||||
super.connectedCallback();
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
const ix = nowElements.indexOf(this);
|
||||
|
||||
if (ix !== -1) {
|
||||
nowElements.splice(ix, 1);
|
||||
}
|
||||
|
||||
if (!nowElements.length) {
|
||||
if (updateNowElementsId) {
|
||||
clearInterval(updateNowElementsId);
|
||||
updateNowElementsId = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
} // Internal: Array tracking all elements attached to the document that need
|
||||
// to be updated every minute.
|
||||
|
||||
const nowElements = []; // Internal: Timer ID for `updateNowElements` interval.
|
||||
|
||||
let updateNowElementsId; // Internal: Install a timer to refresh all attached relative-time elements every
|
||||
// minute.
|
||||
|
||||
function updateNowElements() {
|
||||
let time, i, len;
|
||||
|
||||
for (i = 0, len = nowElements.length; i < len; i++) {
|
||||
time = nowElements[i];
|
||||
time.textContent = time.getFormattedDate() || '';
|
||||
}
|
||||
} // Public: RelativeTimeElement constructor.
|
||||
//
|
||||
// var time = new RelativeTimeElement()
|
||||
// # => <relative-time></relative-time>
|
||||
//
|
||||
|
||||
|
||||
if (!window.customElements.get('relative-time')) {
|
||||
window.RelativeTimeElement = RelativeTimeElement;
|
||||
window.customElements.define('relative-time', RelativeTimeElement);
|
||||
}
|
||||
|
||||
class TimeAgoElement extends RelativeTimeElement {
|
||||
getFormattedDate() {
|
||||
const format = this.getAttribute('format');
|
||||
const date = this.date;
|
||||
if (!date) return;
|
||||
|
||||
if (format === 'micro') {
|
||||
return new RelativeTime(date, localeFromElement(this)).microTimeAgo();
|
||||
} else {
|
||||
return new RelativeTime(date, localeFromElement(this)).timeAgo();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (!window.customElements.get('time-ago')) {
|
||||
window.TimeAgoElement = TimeAgoElement;
|
||||
window.customElements.define('time-ago', TimeAgoElement);
|
||||
}
|
||||
|
||||
class TimeUntilElement extends RelativeTimeElement {
|
||||
getFormattedDate() {
|
||||
const format = this.getAttribute('format');
|
||||
const date = this.date;
|
||||
if (!date) return;
|
||||
|
||||
if (format === 'micro') {
|
||||
return new RelativeTime(date, localeFromElement(this)).microTimeUntil();
|
||||
} else {
|
||||
return new RelativeTime(date, localeFromElement(this)).timeUntil();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (!window.customElements.get('time-until')) {
|
||||
window.TimeUntilElement = TimeUntilElement;
|
||||
window.customElements.define('time-until', TimeUntilElement);
|
||||
}
|
||||
|
||||
exports.LocalTimeElement = LocalTimeElement;
|
||||
exports.RelativeTimeElement = RelativeTimeElement;
|
||||
exports.TimeAgoElement = TimeAgoElement;
|
||||
exports.TimeUntilElement = TimeUntilElement;
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
}));
|
25
samples/webcomponents/node_modules/@github/time-elements/dist/time-elements-legacy.js.flow
сгенерированный
поставляемый
Normal file
25
samples/webcomponents/node_modules/@github/time-elements/dist/time-elements-legacy.js.flow
сгенерированный
поставляемый
Normal file
|
@ -0,0 +1,25 @@
|
|||
/* @flow strict */
|
||||
|
||||
declare module '@github/time-elements' {
|
||||
declare class ExtendedTimeElement extends HTMLElement {
|
||||
get date(): ?Date;
|
||||
getFormattedTitle(): ?string;
|
||||
getFormattedDate(): ?string;
|
||||
}
|
||||
|
||||
declare export class LocalTimeElement extends ExtendedTimeElement {
|
||||
getFormattedDate(): ?string;
|
||||
}
|
||||
|
||||
declare export class RelativeTimeElement extends ExtendedTimeElement {
|
||||
getFormattedDate(): ?string;
|
||||
}
|
||||
|
||||
declare export class TimeAgoElement extends RelativeTimeElement {
|
||||
getFormattedDate(): ?string;
|
||||
}
|
||||
|
||||
declare export class TimeUntilElement extends RelativeTimeElement {
|
||||
getFormattedDate(): ?string;
|
||||
}
|
||||
}
|
820
samples/webcomponents/node_modules/@github/time-elements/dist/time-elements.js
сгенерированный
поставляемый
Normal file
820
samples/webcomponents/node_modules/@github/time-elements/dist/time-elements.js
сгенерированный
поставляемый
Normal file
|
@ -0,0 +1,820 @@
|
|||
const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
||||
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
||||
|
||||
function pad(num) {
|
||||
return "0".concat(num).slice(-2);
|
||||
}
|
||||
|
||||
function strftime(time, formatString) {
|
||||
const day = time.getDay();
|
||||
const date = time.getDate();
|
||||
const month = time.getMonth();
|
||||
const year = time.getFullYear();
|
||||
const hour = time.getHours();
|
||||
const minute = time.getMinutes();
|
||||
const second = time.getSeconds();
|
||||
return formatString.replace(/%([%aAbBcdeHIlmMpPSwyYZz])/g, function (_arg) {
|
||||
let match;
|
||||
const modifier = _arg[1];
|
||||
|
||||
switch (modifier) {
|
||||
case '%':
|
||||
return '%';
|
||||
|
||||
case 'a':
|
||||
return weekdays[day].slice(0, 3);
|
||||
|
||||
case 'A':
|
||||
return weekdays[day];
|
||||
|
||||
case 'b':
|
||||
return months[month].slice(0, 3);
|
||||
|
||||
case 'B':
|
||||
return months[month];
|
||||
|
||||
case 'c':
|
||||
return time.toString();
|
||||
|
||||
case 'd':
|
||||
return pad(date);
|
||||
|
||||
case 'e':
|
||||
return String(date);
|
||||
|
||||
case 'H':
|
||||
return pad(hour);
|
||||
|
||||
case 'I':
|
||||
return pad(strftime(time, '%l'));
|
||||
|
||||
case 'l':
|
||||
if (hour === 0 || hour === 12) {
|
||||
return String(12);
|
||||
} else {
|
||||
return String((hour + 12) % 12);
|
||||
}
|
||||
|
||||
case 'm':
|
||||
return pad(month + 1);
|
||||
|
||||
case 'M':
|
||||
return pad(minute);
|
||||
|
||||
case 'p':
|
||||
if (hour > 11) {
|
||||
return 'PM';
|
||||
} else {
|
||||
return 'AM';
|
||||
}
|
||||
|
||||
case 'P':
|
||||
if (hour > 11) {
|
||||
return 'pm';
|
||||
} else {
|
||||
return 'am';
|
||||
}
|
||||
|
||||
case 'S':
|
||||
return pad(second);
|
||||
|
||||
case 'w':
|
||||
return String(day);
|
||||
|
||||
case 'y':
|
||||
return pad(year % 100);
|
||||
|
||||
case 'Y':
|
||||
return String(year);
|
||||
|
||||
case 'Z':
|
||||
match = time.toString().match(/\((\w+)\)$/);
|
||||
return match ? match[1] : '';
|
||||
|
||||
case 'z':
|
||||
match = time.toString().match(/\w([+-]\d\d\d\d) /);
|
||||
return match ? match[1] : '';
|
||||
}
|
||||
|
||||
return '';
|
||||
});
|
||||
}
|
||||
function makeFormatter(options) {
|
||||
let format;
|
||||
return function () {
|
||||
if (format) return format;
|
||||
|
||||
if ('Intl' in window) {
|
||||
try {
|
||||
format = new Intl.DateTimeFormat(undefined, options);
|
||||
return format;
|
||||
} catch (e) {
|
||||
if (!(e instanceof RangeError)) {
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
let dayFirst = null;
|
||||
const dayFirstFormatter = makeFormatter({
|
||||
day: 'numeric',
|
||||
month: 'short'
|
||||
}); // Private: Determine if the day should be formatted before the month name in
|
||||
// the user's current locale. For example, `9 Jun` for en-GB and `Jun 9`
|
||||
// for en-US.
|
||||
//
|
||||
// Returns true if the day appears before the month.
|
||||
|
||||
function isDayFirst() {
|
||||
if (dayFirst !== null) {
|
||||
return dayFirst;
|
||||
}
|
||||
|
||||
const formatter = dayFirstFormatter();
|
||||
|
||||
if (formatter) {
|
||||
const output = formatter.format(new Date(0));
|
||||
dayFirst = !!output.match(/^\d/);
|
||||
return dayFirst;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
let yearSeparator = null;
|
||||
const yearFormatter = makeFormatter({
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: 'numeric'
|
||||
}); // Private: Determine if the year should be separated from the month and day
|
||||
// with a comma. For example, `9 Jun 2014` in en-GB and `Jun 9, 2014` in en-US.
|
||||
//
|
||||
// Returns true if the date needs a separator.
|
||||
|
||||
function isYearSeparator() {
|
||||
if (yearSeparator !== null) {
|
||||
return yearSeparator;
|
||||
}
|
||||
|
||||
const formatter = yearFormatter();
|
||||
|
||||
if (formatter) {
|
||||
const output = formatter.format(new Date(0));
|
||||
yearSeparator = !!output.match(/\d,/);
|
||||
return yearSeparator;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
} // Private: Determine if the date occurs in the same year as today's date.
|
||||
//
|
||||
// date - The Date to test.
|
||||
//
|
||||
// Returns true if it's this year.
|
||||
|
||||
function isThisYear(date) {
|
||||
const now = new Date();
|
||||
return now.getUTCFullYear() === date.getUTCFullYear();
|
||||
}
|
||||
function makeRelativeFormat(locale, options) {
|
||||
if ('Intl' in window && 'RelativeTimeFormat' in window.Intl) {
|
||||
try {
|
||||
// eslint-disable-next-line flowtype/no-flow-fix-me-comments
|
||||
// $FlowFixMe: missing RelativeTimeFormat type
|
||||
return new Intl.RelativeTimeFormat(locale, options);
|
||||
} catch (e) {
|
||||
if (!(e instanceof RangeError)) {
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
}
|
||||
} // Private: Get preferred Intl locale for a target element.
|
||||
//
|
||||
// Traverses parents until it finds an explicit `lang` other returns "default".
|
||||
|
||||
function localeFromElement(el) {
|
||||
const container = el.closest('[lang]');
|
||||
|
||||
if (container instanceof HTMLElement && container.lang) {
|
||||
return container.lang;
|
||||
}
|
||||
|
||||
return 'default';
|
||||
}
|
||||
|
||||
const datetimes = new WeakMap();
|
||||
class ExtendedTimeElement extends HTMLElement {
|
||||
static get observedAttributes() {
|
||||
return ['datetime', 'day', 'format', 'lang', 'hour', 'minute', 'month', 'second', 'title', 'weekday', 'year'];
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
const title = this.getFormattedTitle();
|
||||
|
||||
if (title && !this.hasAttribute('title')) {
|
||||
this.setAttribute('title', title);
|
||||
}
|
||||
|
||||
const text = this.getFormattedDate();
|
||||
|
||||
if (text) {
|
||||
this.textContent = text;
|
||||
}
|
||||
} // Internal: Refresh the time element's formatted date when an attribute changes.
|
||||
|
||||
|
||||
attributeChangedCallback(attrName, oldValue, newValue) {
|
||||
if (attrName === 'datetime') {
|
||||
const millis = Date.parse(newValue);
|
||||
|
||||
if (isNaN(millis)) {
|
||||
datetimes.delete(this);
|
||||
} else {
|
||||
datetimes.set(this, new Date(millis));
|
||||
}
|
||||
}
|
||||
|
||||
const title = this.getFormattedTitle();
|
||||
|
||||
if (title && !this.hasAttribute('title')) {
|
||||
this.setAttribute('title', title);
|
||||
}
|
||||
|
||||
const text = this.getFormattedDate();
|
||||
|
||||
if (text) {
|
||||
this.textContent = text;
|
||||
}
|
||||
}
|
||||
|
||||
get date() {
|
||||
return datetimes.get(this);
|
||||
} // Internal: Format the ISO 8601 timestamp according to the user agent's
|
||||
// locale-aware formatting rules. The element's existing `title` attribute
|
||||
// value takes precedence over this custom format.
|
||||
//
|
||||
// Returns a formatted time String.
|
||||
|
||||
|
||||
getFormattedTitle() {
|
||||
const date = this.date;
|
||||
if (!date) return;
|
||||
const formatter = titleFormatter();
|
||||
|
||||
if (formatter) {
|
||||
return formatter.format(date);
|
||||
} else {
|
||||
try {
|
||||
return date.toLocaleString();
|
||||
} catch (e) {
|
||||
if (e instanceof RangeError) {
|
||||
return date.toString();
|
||||
} else {
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getFormattedDate() {}
|
||||
|
||||
}
|
||||
const titleFormatter = makeFormatter({
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
timeZoneName: 'short'
|
||||
});
|
||||
|
||||
const formatters = new WeakMap();
|
||||
class LocalTimeElement extends ExtendedTimeElement {
|
||||
attributeChangedCallback(attrName, oldValue, newValue) {
|
||||
if (attrName === 'hour' || attrName === 'minute' || attrName === 'second' || attrName === 'time-zone-name') {
|
||||
formatters.delete(this);
|
||||
}
|
||||
|
||||
super.attributeChangedCallback(attrName, oldValue, newValue);
|
||||
} // Formats the element's date, in the user's current locale, according to
|
||||
// the formatting attribute values. Values are not passed straight through to
|
||||
// an Intl.DateTimeFormat instance so that weekday and month names are always
|
||||
// displayed in English, for now.
|
||||
//
|
||||
// Supported attributes are:
|
||||
//
|
||||
// weekday - "short", "long"
|
||||
// year - "numeric", "2-digit"
|
||||
// month - "short", "long"
|
||||
// day - "numeric", "2-digit"
|
||||
// hour - "numeric", "2-digit"
|
||||
// minute - "numeric", "2-digit"
|
||||
// second - "numeric", "2-digit"
|
||||
//
|
||||
// Returns a formatted time String.
|
||||
|
||||
|
||||
getFormattedDate() {
|
||||
const d = this.date;
|
||||
if (!d) return;
|
||||
const date = formatDate(this, d) || '';
|
||||
const time = formatTime(this, d) || '';
|
||||
return "".concat(date, " ").concat(time).trim();
|
||||
}
|
||||
|
||||
} // Private: Format a date according to the `weekday`, `day`, `month`,
|
||||
// and `year` attribute values.
|
||||
//
|
||||
// This doesn't use Intl.DateTimeFormat to avoid creating text in the user's
|
||||
// language when the majority of the surrounding text is in English. There's
|
||||
// currently no way to separate the language from the format in Intl.
|
||||
//
|
||||
// el - The local-time element to format.
|
||||
//
|
||||
// Returns a date String or null if no date formats are provided.
|
||||
|
||||
function formatDate(el, date) {
|
||||
// map attribute values to strftime
|
||||
const props = {
|
||||
weekday: {
|
||||
short: '%a',
|
||||
long: '%A'
|
||||
},
|
||||
day: {
|
||||
numeric: '%e',
|
||||
'2-digit': '%d'
|
||||
},
|
||||
month: {
|
||||
short: '%b',
|
||||
long: '%B'
|
||||
},
|
||||
year: {
|
||||
numeric: '%Y',
|
||||
'2-digit': '%y'
|
||||
} // build a strftime format string
|
||||
|
||||
};
|
||||
let format = isDayFirst() ? 'weekday day month year' : 'weekday month day, year';
|
||||
|
||||
for (const prop in props) {
|
||||
const value = props[prop][el.getAttribute(prop)];
|
||||
format = format.replace(prop, value || '');
|
||||
} // clean up year separator comma
|
||||
|
||||
|
||||
format = format.replace(/(\s,)|(,\s$)/, ''); // squeeze spaces from final string
|
||||
|
||||
return strftime(date, format).replace(/\s+/, ' ').trim();
|
||||
} // Private: Format a time according to the `hour`, `minute`, and `second`
|
||||
// attribute values.
|
||||
//
|
||||
// el - The local-time element to format.
|
||||
//
|
||||
// Returns a time String or null if no time formats are provided.
|
||||
|
||||
|
||||
function formatTime(el, date) {
|
||||
const options = {}; // retrieve format settings from attributes
|
||||
|
||||
const hour = el.getAttribute('hour');
|
||||
if (hour === 'numeric' || hour === '2-digit') options.hour = hour;
|
||||
const minute = el.getAttribute('minute');
|
||||
if (minute === 'numeric' || minute === '2-digit') options.minute = minute;
|
||||
const second = el.getAttribute('second');
|
||||
if (second === 'numeric' || second === '2-digit') options.second = second;
|
||||
const tz = el.getAttribute('time-zone-name');
|
||||
if (tz === 'short' || tz === 'long') options.timeZoneName = tz; // No time format attributes provided.
|
||||
|
||||
if (Object.keys(options).length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
let factory = formatters.get(el);
|
||||
|
||||
if (!factory) {
|
||||
factory = makeFormatter(options);
|
||||
formatters.set(el, factory);
|
||||
}
|
||||
|
||||
const formatter = factory();
|
||||
|
||||
if (formatter) {
|
||||
// locale-aware formatting of 24 or 12 hour times
|
||||
return formatter.format(date);
|
||||
} else {
|
||||
// fall back to strftime for non-Intl browsers
|
||||
const timef = options.second ? '%H:%M:%S' : '%H:%M';
|
||||
return strftime(date, timef);
|
||||
}
|
||||
} // Public: LocalTimeElement constructor.
|
||||
//
|
||||
// var time = new LocalTimeElement()
|
||||
// # => <local-time></local-time>
|
||||
//
|
||||
|
||||
|
||||
if (!window.customElements.get('local-time')) {
|
||||
window.LocalTimeElement = LocalTimeElement;
|
||||
window.customElements.define('local-time', LocalTimeElement);
|
||||
}
|
||||
|
||||
class RelativeTime {
|
||||
constructor(date, locale) {
|
||||
this.date = date;
|
||||
this.locale = locale;
|
||||
}
|
||||
|
||||
toString() {
|
||||
const ago = this.timeElapsed();
|
||||
|
||||
if (ago) {
|
||||
return ago;
|
||||
} else {
|
||||
const ahead = this.timeAhead();
|
||||
|
||||
if (ahead) {
|
||||
return ahead;
|
||||
} else {
|
||||
return "on ".concat(this.formatDate());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
timeElapsed() {
|
||||
const ms = new Date().getTime() - this.date.getTime();
|
||||
const sec = Math.round(ms / 1000);
|
||||
const min = Math.round(sec / 60);
|
||||
const hr = Math.round(min / 60);
|
||||
const day = Math.round(hr / 24);
|
||||
|
||||
if (ms >= 0 && day < 30) {
|
||||
return this.timeAgoFromMs(ms);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
timeAhead() {
|
||||
const ms = this.date.getTime() - new Date().getTime();
|
||||
const sec = Math.round(ms / 1000);
|
||||
const min = Math.round(sec / 60);
|
||||
const hr = Math.round(min / 60);
|
||||
const day = Math.round(hr / 24);
|
||||
|
||||
if (ms >= 0 && day < 30) {
|
||||
return this.timeUntil();
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
timeAgo() {
|
||||
const ms = new Date().getTime() - this.date.getTime();
|
||||
return this.timeAgoFromMs(ms);
|
||||
}
|
||||
|
||||
timeAgoFromMs(ms) {
|
||||
const sec = Math.round(ms / 1000);
|
||||
const min = Math.round(sec / 60);
|
||||
const hr = Math.round(min / 60);
|
||||
const day = Math.round(hr / 24);
|
||||
const month = Math.round(day / 30);
|
||||
const year = Math.round(month / 12);
|
||||
|
||||
if (ms < 0) {
|
||||
return formatRelativeTime(this.locale, 0, 'second');
|
||||
} else if (sec < 10) {
|
||||
return formatRelativeTime(this.locale, 0, 'second');
|
||||
} else if (sec < 45) {
|
||||
return formatRelativeTime(this.locale, -sec, 'second');
|
||||
} else if (sec < 90) {
|
||||
return formatRelativeTime(this.locale, -min, 'minute');
|
||||
} else if (min < 45) {
|
||||
return formatRelativeTime(this.locale, -min, 'minute');
|
||||
} else if (min < 90) {
|
||||
return formatRelativeTime(this.locale, -hr, 'hour');
|
||||
} else if (hr < 24) {
|
||||
return formatRelativeTime(this.locale, -hr, 'hour');
|
||||
} else if (hr < 36) {
|
||||
return formatRelativeTime(this.locale, -day, 'day');
|
||||
} else if (day < 30) {
|
||||
return formatRelativeTime(this.locale, -day, 'day');
|
||||
} else if (month < 12) {
|
||||
return formatRelativeTime(this.locale, -month, 'month');
|
||||
} else if (month < 18) {
|
||||
return formatRelativeTime(this.locale, -year, 'year');
|
||||
} else {
|
||||
return formatRelativeTime(this.locale, -year, 'year');
|
||||
}
|
||||
}
|
||||
|
||||
microTimeAgo() {
|
||||
const ms = new Date().getTime() - this.date.getTime();
|
||||
const sec = Math.round(ms / 1000);
|
||||
const min = Math.round(sec / 60);
|
||||
const hr = Math.round(min / 60);
|
||||
const day = Math.round(hr / 24);
|
||||
const month = Math.round(day / 30);
|
||||
const year = Math.round(month / 12);
|
||||
|
||||
if (min < 1) {
|
||||
return '1m';
|
||||
} else if (min < 60) {
|
||||
return "".concat(min, "m");
|
||||
} else if (hr < 24) {
|
||||
return "".concat(hr, "h");
|
||||
} else if (day < 365) {
|
||||
return "".concat(day, "d");
|
||||
} else {
|
||||
return "".concat(year, "y");
|
||||
}
|
||||
}
|
||||
|
||||
timeUntil() {
|
||||
const ms = this.date.getTime() - new Date().getTime();
|
||||
return this.timeUntilFromMs(ms);
|
||||
}
|
||||
|
||||
timeUntilFromMs(ms) {
|
||||
const sec = Math.round(ms / 1000);
|
||||
const min = Math.round(sec / 60);
|
||||
const hr = Math.round(min / 60);
|
||||
const day = Math.round(hr / 24);
|
||||
const month = Math.round(day / 30);
|
||||
const year = Math.round(month / 12);
|
||||
|
||||
if (month >= 18) {
|
||||
return formatRelativeTime(this.locale, year, 'year');
|
||||
} else if (month >= 12) {
|
||||
return formatRelativeTime(this.locale, year, 'year');
|
||||
} else if (day >= 45) {
|
||||
return formatRelativeTime(this.locale, month, 'month');
|
||||
} else if (day >= 30) {
|
||||
return formatRelativeTime(this.locale, month, 'month');
|
||||
} else if (hr >= 36) {
|
||||
return formatRelativeTime(this.locale, day, 'day');
|
||||
} else if (hr >= 24) {
|
||||
return formatRelativeTime(this.locale, day, 'day');
|
||||
} else if (min >= 90) {
|
||||
return formatRelativeTime(this.locale, hr, 'hour');
|
||||
} else if (min >= 45) {
|
||||
return formatRelativeTime(this.locale, hr, 'hour');
|
||||
} else if (sec >= 90) {
|
||||
return formatRelativeTime(this.locale, min, 'minute');
|
||||
} else if (sec >= 45) {
|
||||
return formatRelativeTime(this.locale, min, 'minute');
|
||||
} else if (sec >= 10) {
|
||||
return formatRelativeTime(this.locale, sec, 'second');
|
||||
} else {
|
||||
return formatRelativeTime(this.locale, 0, 'second');
|
||||
}
|
||||
}
|
||||
|
||||
microTimeUntil() {
|
||||
const ms = this.date.getTime() - new Date().getTime();
|
||||
const sec = Math.round(ms / 1000);
|
||||
const min = Math.round(sec / 60);
|
||||
const hr = Math.round(min / 60);
|
||||
const day = Math.round(hr / 24);
|
||||
const month = Math.round(day / 30);
|
||||
const year = Math.round(month / 12);
|
||||
|
||||
if (day >= 365) {
|
||||
return "".concat(year, "y");
|
||||
} else if (hr >= 24) {
|
||||
return "".concat(day, "d");
|
||||
} else if (min >= 60) {
|
||||
return "".concat(hr, "h");
|
||||
} else if (min > 1) {
|
||||
return "".concat(min, "m");
|
||||
} else {
|
||||
return '1m';
|
||||
}
|
||||
}
|
||||
|
||||
formatDate() {
|
||||
let format = isDayFirst() ? '%e %b' : '%b %e';
|
||||
|
||||
if (!isThisYear(this.date)) {
|
||||
format += isYearSeparator() ? ', %Y' : ' %Y';
|
||||
}
|
||||
|
||||
return strftime(this.date, format);
|
||||
}
|
||||
|
||||
formatTime() {
|
||||
const formatter = timeFormatter();
|
||||
|
||||
if (formatter) {
|
||||
return formatter.format(this.date);
|
||||
} else {
|
||||
return strftime(this.date, '%l:%M%P');
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function formatRelativeTime(locale, value, unit) {
|
||||
const formatter = makeRelativeFormat(locale, {
|
||||
numeric: 'auto'
|
||||
});
|
||||
|
||||
if (formatter) {
|
||||
return formatter.format(value, unit);
|
||||
} else {
|
||||
return formatEnRelativeTime(value, unit);
|
||||
}
|
||||
} // Simplified "en" RelativeTimeFormat.format function
|
||||
//
|
||||
// Values should roughly match
|
||||
// new Intl.RelativeTimeFormat('en', {numeric: 'auto'}).format(value, unit)
|
||||
//
|
||||
|
||||
|
||||
function formatEnRelativeTime(value, unit) {
|
||||
if (value === 0) {
|
||||
switch (unit) {
|
||||
case 'year':
|
||||
case 'quarter':
|
||||
case 'month':
|
||||
case 'week':
|
||||
return "this ".concat(unit);
|
||||
|
||||
case 'day':
|
||||
return 'today';
|
||||
|
||||
case 'hour':
|
||||
case 'minute':
|
||||
return "in 0 ".concat(unit, "s");
|
||||
|
||||
case 'second':
|
||||
return 'now';
|
||||
}
|
||||
} else if (value === 1) {
|
||||
switch (unit) {
|
||||
case 'year':
|
||||
case 'quarter':
|
||||
case 'month':
|
||||
case 'week':
|
||||
return "next ".concat(unit);
|
||||
|
||||
case 'day':
|
||||
return 'tomorrow';
|
||||
|
||||
case 'hour':
|
||||
case 'minute':
|
||||
case 'second':
|
||||
return "in 1 ".concat(unit);
|
||||
}
|
||||
} else if (value === -1) {
|
||||
switch (unit) {
|
||||
case 'year':
|
||||
case 'quarter':
|
||||
case 'month':
|
||||
case 'week':
|
||||
return "last ".concat(unit);
|
||||
|
||||
case 'day':
|
||||
return 'yesterday';
|
||||
|
||||
case 'hour':
|
||||
case 'minute':
|
||||
case 'second':
|
||||
return "1 ".concat(unit, " ago");
|
||||
}
|
||||
} else if (value > 1) {
|
||||
switch (unit) {
|
||||
case 'year':
|
||||
case 'quarter':
|
||||
case 'month':
|
||||
case 'week':
|
||||
case 'day':
|
||||
case 'hour':
|
||||
case 'minute':
|
||||
case 'second':
|
||||
return "in ".concat(value, " ").concat(unit, "s");
|
||||
}
|
||||
} else if (value < -1) {
|
||||
switch (unit) {
|
||||
case 'year':
|
||||
case 'quarter':
|
||||
case 'month':
|
||||
case 'week':
|
||||
case 'day':
|
||||
case 'hour':
|
||||
case 'minute':
|
||||
case 'second':
|
||||
return "".concat(-value, " ").concat(unit, "s ago");
|
||||
}
|
||||
}
|
||||
|
||||
throw new RangeError("Invalid unit argument for format() '".concat(unit, "'"));
|
||||
}
|
||||
|
||||
const timeFormatter = makeFormatter({
|
||||
hour: 'numeric',
|
||||
minute: '2-digit'
|
||||
});
|
||||
|
||||
class RelativeTimeElement extends ExtendedTimeElement {
|
||||
getFormattedDate() {
|
||||
const date = this.date;
|
||||
|
||||
if (date) {
|
||||
return new RelativeTime(date, localeFromElement(this)).toString();
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
nowElements.push(this);
|
||||
|
||||
if (!updateNowElementsId) {
|
||||
updateNowElements();
|
||||
updateNowElementsId = setInterval(updateNowElements, 60 * 1000);
|
||||
}
|
||||
|
||||
super.connectedCallback();
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
const ix = nowElements.indexOf(this);
|
||||
|
||||
if (ix !== -1) {
|
||||
nowElements.splice(ix, 1);
|
||||
}
|
||||
|
||||
if (!nowElements.length) {
|
||||
if (updateNowElementsId) {
|
||||
clearInterval(updateNowElementsId);
|
||||
updateNowElementsId = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
} // Internal: Array tracking all elements attached to the document that need
|
||||
// to be updated every minute.
|
||||
|
||||
const nowElements = []; // Internal: Timer ID for `updateNowElements` interval.
|
||||
|
||||
let updateNowElementsId; // Internal: Install a timer to refresh all attached relative-time elements every
|
||||
// minute.
|
||||
|
||||
function updateNowElements() {
|
||||
let time, i, len;
|
||||
|
||||
for (i = 0, len = nowElements.length; i < len; i++) {
|
||||
time = nowElements[i];
|
||||
time.textContent = time.getFormattedDate() || '';
|
||||
}
|
||||
} // Public: RelativeTimeElement constructor.
|
||||
//
|
||||
// var time = new RelativeTimeElement()
|
||||
// # => <relative-time></relative-time>
|
||||
//
|
||||
|
||||
|
||||
if (!window.customElements.get('relative-time')) {
|
||||
window.RelativeTimeElement = RelativeTimeElement;
|
||||
window.customElements.define('relative-time', RelativeTimeElement);
|
||||
}
|
||||
|
||||
class TimeAgoElement extends RelativeTimeElement {
|
||||
getFormattedDate() {
|
||||
const format = this.getAttribute('format');
|
||||
const date = this.date;
|
||||
if (!date) return;
|
||||
|
||||
if (format === 'micro') {
|
||||
return new RelativeTime(date, localeFromElement(this)).microTimeAgo();
|
||||
} else {
|
||||
return new RelativeTime(date, localeFromElement(this)).timeAgo();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (!window.customElements.get('time-ago')) {
|
||||
window.TimeAgoElement = TimeAgoElement;
|
||||
window.customElements.define('time-ago', TimeAgoElement);
|
||||
}
|
||||
|
||||
class TimeUntilElement extends RelativeTimeElement {
|
||||
getFormattedDate() {
|
||||
const format = this.getAttribute('format');
|
||||
const date = this.date;
|
||||
if (!date) return;
|
||||
|
||||
if (format === 'micro') {
|
||||
return new RelativeTime(date, localeFromElement(this)).microTimeUntil();
|
||||
} else {
|
||||
return new RelativeTime(date, localeFromElement(this)).timeUntil();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (!window.customElements.get('time-until')) {
|
||||
window.TimeUntilElement = TimeUntilElement;
|
||||
window.customElements.define('time-until', TimeUntilElement);
|
||||
}
|
||||
|
||||
export { LocalTimeElement, RelativeTimeElement, TimeAgoElement, TimeUntilElement };
|
25
samples/webcomponents/node_modules/@github/time-elements/dist/time-elements.js.flow
сгенерированный
поставляемый
Normal file
25
samples/webcomponents/node_modules/@github/time-elements/dist/time-elements.js.flow
сгенерированный
поставляемый
Normal file
|
@ -0,0 +1,25 @@
|
|||
/* @flow strict */
|
||||
|
||||
declare module '@github/time-elements' {
|
||||
declare class ExtendedTimeElement extends HTMLElement {
|
||||
get date(): ?Date;
|
||||
getFormattedTitle(): ?string;
|
||||
getFormattedDate(): ?string;
|
||||
}
|
||||
|
||||
declare export class LocalTimeElement extends ExtendedTimeElement {
|
||||
getFormattedDate(): ?string;
|
||||
}
|
||||
|
||||
declare export class RelativeTimeElement extends ExtendedTimeElement {
|
||||
getFormattedDate(): ?string;
|
||||
}
|
||||
|
||||
declare export class TimeAgoElement extends RelativeTimeElement {
|
||||
getFormattedDate(): ?string;
|
||||
}
|
||||
|
||||
declare export class TimeUntilElement extends RelativeTimeElement {
|
||||
getFormattedDate(): ?string;
|
||||
}
|
||||
}
|
30
samples/webcomponents/node_modules/@github/time-elements/index.d.ts
сгенерированный
поставляемый
Normal file
30
samples/webcomponents/node_modules/@github/time-elements/index.d.ts
сгенерированный
поставляемый
Normal file
|
@ -0,0 +1,30 @@
|
|||
declare class ExtendedTimeElement extends HTMLElement {
|
||||
readonly date: Date | undefined
|
||||
getFormattedTitle(): string | undefined
|
||||
getFormattedDate(): string | undefined
|
||||
}
|
||||
|
||||
export class LocalTimeElement extends ExtendedTimeElement {
|
||||
getFormattedDate(): string | undefined
|
||||
}
|
||||
|
||||
export class RelativeTimeElement extends ExtendedTimeElement {
|
||||
getFormattedDate(): string | undefined
|
||||
}
|
||||
|
||||
export class TimeAgoElement extends ExtendedTimeElement {
|
||||
getFormattedDate(): string | undefined
|
||||
}
|
||||
|
||||
export class TimeUntilElement extends ExtendedTimeElement {
|
||||
getFormattedDate(): string | undefined
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
LocalTimeElement: typeof LocalTimeElement;
|
||||
RelativeTimeElement: typeof RelativeTimeElement;
|
||||
TimeAgoElement: typeof TimeAgoElement;
|
||||
TimeUntilElement: typeof TimeUntilElement;
|
||||
}
|
||||
}
|
43
samples/webcomponents/node_modules/@github/time-elements/package.json
сгенерированный
поставляемый
Normal file
43
samples/webcomponents/node_modules/@github/time-elements/package.json
сгенерированный
поставляемый
Normal file
|
@ -0,0 +1,43 @@
|
|||
{
|
||||
"name": "@github/time-elements",
|
||||
"version": "3.0.7",
|
||||
"main": "dist/time-elements-legacy.js",
|
||||
"module": "dist/time-elements.js",
|
||||
"types": "index.d.ts",
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist",
|
||||
"index.d.ts"
|
||||
],
|
||||
"scripts": {
|
||||
"clean": "rm -rf dist",
|
||||
"lint": "github-lint",
|
||||
"prebuild": "npm run clean && npm run lint && mkdir dist",
|
||||
"build": "rollup -c && cp src/index.js.flow dist/time-elements.js.flow && cp src/index.js.flow dist/time-elements-legacy.js.flow",
|
||||
"prepublishOnly": "npm run build",
|
||||
"pretest": "npm run build",
|
||||
"test": "karma start ./test/karma.config.js",
|
||||
"postpublish": "npm publish --ignore-scripts --@github:registry='https://npm.pkg.github.com'"
|
||||
},
|
||||
"repository": "github/time-elements",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.5.0",
|
||||
"babel-preset-github": "^3.2.0",
|
||||
"chai": "^4.2.0",
|
||||
"eslint": "^6.0.1",
|
||||
"eslint-plugin-github": "^3.0.0",
|
||||
"flow-bin": "^0.102.0",
|
||||
"karma": "^4.1.0",
|
||||
"karma-chai": "^0.1.0",
|
||||
"karma-chrome-launcher": "^2.2.0",
|
||||
"karma-mocha": "^1.3.0",
|
||||
"karma-mocha-reporter": "^2.2.5",
|
||||
"mocha": "^6.1.4",
|
||||
"rollup": "^1.16.6",
|
||||
"rollup-plugin-babel": "^4.3.3",
|
||||
"webcomponents.js": "^0.7.23"
|
||||
},
|
||||
"eslintIgnore": [
|
||||
"dist/"
|
||||
]
|
||||
}
|
469
samples/webcomponents/node_modules/@github/time-elements/web-components.html-data.json
сгенерированный
поставляемый
Normal file
469
samples/webcomponents/node_modules/@github/time-elements/web-components.html-data.json
сгенерированный
поставляемый
Normal file
|
@ -0,0 +1,469 @@
|
|||
{
|
||||
"version": 1.1,
|
||||
"tags": [
|
||||
{
|
||||
"name": "relative-time",
|
||||
"description": "A relative time-ago-in-words description can be generated by using the `relative-time` element extension.\n\nAdd a `<relative-time>` element to your markup. Provide a default formatted date as the element's text content (e.g. April 1, 2014).\n\n``` html\n<relative-time datetime=\"2014-04-01T16:30:00-08:00\">\n April 1, 2014\n</relative-time>\n```\n\nDepending on how far in the future this is being viewed, the element's text will be replaced with one of the following formats:\n\n- 6 years from now\n- 20 days from now\n- 4 hours from now\n- 7 minutes from now\n- just now\n- 30 seconds ago\n- a minute ago\n- 30 minutes ago\n- an hour ago\n- 20 hours ago\n- a day ago\n- 20 days ago\n- on Apr 1, 2014\n\nSo, a relative date phrase is used for up to a month and then the actual date is shown.",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#relative-time"
|
||||
},
|
||||
{
|
||||
"name": "WebComponents",
|
||||
"url": "https://www.webcomponents.org/element/time-elements#relative-time"
|
||||
},
|
||||
{
|
||||
"name": "NPM",
|
||||
"url": "https://www.npmjs.com/package/@github/time-elements#relative-time"
|
||||
}
|
||||
],
|
||||
"attributes": [
|
||||
{
|
||||
"name": "datetime",
|
||||
"description": "Value Type: ISO 8601 date.\nDescription: Required date of element such as `2014-06-01T13:05:07Z`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "year",
|
||||
"description": "Value Type: 2-digit, numeric.\nDescription: Format year as `14` or `2014`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "month",
|
||||
"description": "Value Type: short, long\nDescription: Format month as `Jun` or `June`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "day",
|
||||
"description": "Value Type: 2-digit, numeric\nDescription: Format day as `01` or `1`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "weekday",
|
||||
"description": "Value Type: short, long\nDescription: Format weekday as `Sun` or `Sunday`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "hour",
|
||||
"description": "Value Type: 2-digit, numeric\nDescription: Format hour as `01` or `1`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "minute",
|
||||
"description": "Value Type: 2-digit, numeric.\nDescription: Format minute as `05` or `5`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "second",
|
||||
"description": "Value Type: 2-digit, numeric.\nDescription: Format second as `07` or `7`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "time-zone-name",
|
||||
"description": "Value Type: short, long\nDescription: Display time zone as `GMT+1` or by its full name",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "time-until",
|
||||
"description": "You can use `time-until` to always display a relative date that's in the future. It operates much like `<relative-time>`, except in the reverse, with past events shown as `just now` and future events always showing as relative:\n\n- 10 years from now\n- 20 days from now\n- 6 hours from now\n- 20 minutes from now\n- 30 seconds from now\n- just now\n\nAdd a `<time-until>` element to your markup. Provide a default formatted date as the element's text content (e.g. April 1, 2024).\n\n```html\n<time-until datetime=\"2024-04-01T16:30:00-08:00\">\n April 1, 2024\n</time-until>\n```\n",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#time-until"
|
||||
},
|
||||
{
|
||||
"name": "WebComponents",
|
||||
"url": "https://www.webcomponents.org/element/time-elements#time-until"
|
||||
},
|
||||
{
|
||||
"name": "NPM",
|
||||
"url": "https://www.npmjs.com/package/@github/time-elements#time-until"
|
||||
}
|
||||
],
|
||||
"attributes": [
|
||||
{
|
||||
"name": "datetime",
|
||||
"description": "Value Type: ISO 8601 date.\nDescription: Required date of element such as `2014-06-01T13:05:07Z`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "year",
|
||||
"description": "Value Type: 2-digit, numeric.\nDescription: Format year as `14` or `2014`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "month",
|
||||
"description": "Value Type: short, long\nDescription: Format month as `Jun` or `June`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "day",
|
||||
"description": "Value Type: 2-digit, numeric\nDescription: Format day as `01` or `1`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "weekday",
|
||||
"description": "Value Type: short, long\nDescription: Format weekday as `Sun` or `Sunday`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "hour",
|
||||
"description": "Value Type: 2-digit, numeric\nDescription: Format hour as `01` or `1`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "minute",
|
||||
"description": "Value Type: 2-digit, numeric.\nDescription: Format minute as `05` or `5`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "second",
|
||||
"description": "Value Type: 2-digit, numeric.\nDescription: Format second as `07` or `7`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "time-zone-name",
|
||||
"description": "Value Type: short, long\nDescription: Display time zone as `GMT+1` or by its full name",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "time-ago",
|
||||
"description": "An *always* relative time-ago-in-words description can be generated by using the `time-ago` element extension. This is similar to the `relative-time` extension. However, this will never switch to displaying the date. It strictly shows relative date phrases, even after a month has passed.\n\n```html\n<time-ago datetime=\"2012-04-01T16:30:00-08:00\">\n April 1, 2014\n</time-ago>\n```\n\nFor example, if this markup is viewed two years in the future, the element's text will read `2 years ago`.",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#time-ago"
|
||||
},
|
||||
{
|
||||
"name": "WebComponents",
|
||||
"url": "https://www.webcomponents.org/element/time-elements#time-ago"
|
||||
},
|
||||
{
|
||||
"name": "NPM",
|
||||
"url": "https://www.npmjs.com/package/@github/time-elements#time-ago"
|
||||
}
|
||||
],
|
||||
"attributes": [
|
||||
{
|
||||
"name": "format",
|
||||
"description": "The optional `format=\"micro\"` attribute shortens the descriptions to 1m, 1h, 1d, 1y.\n```html\n<time-ago datetime=\"2012-04-01T16:30:00-08:00\" format=\"micro\">\n April 1, 2014\n</time-ago>\n```",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#micro-format"
|
||||
},
|
||||
{
|
||||
"name": "WebComponents",
|
||||
"url": "https://www.webcomponents.org/element/time-elements#micro-format"
|
||||
},
|
||||
{
|
||||
"name": "NPM",
|
||||
"url": "https://www.npmjs.com/package/@github/time-elements#micro-format"
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
{
|
||||
"name": "micro",
|
||||
"description": "The optional `format=\"micro\"` attribute shortens the descriptions to 1m, 1h, 1d, 1y."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "datetime",
|
||||
"description": "Value Type: ISO 8601 date.\nDescription: Required date of element such as `2014-06-01T13:05:07Z`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "year",
|
||||
"description": "Value Type: 2-digit, numeric.\nDescription: Format year as `14` or `2014`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "month",
|
||||
"description": "Value Type: short, long\nDescription: Format month as `Jun` or `June`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "day",
|
||||
"description": "Value Type: 2-digit, numeric\nDescription: Format day as `01` or `1`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "weekday",
|
||||
"description": "Value Type: short, long\nDescription: Format weekday as `Sun` or `Sunday`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "hour",
|
||||
"description": "Value Type: 2-digit, numeric\nDescription: Format hour as `01` or `1`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "minute",
|
||||
"description": "Value Type: 2-digit, numeric.\nDescription: Format minute as `05` or `5`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "second",
|
||||
"description": "Value Type: 2-digit, numeric.\nDescription: Format second as `07` or `7`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "time-zone-name",
|
||||
"description": "Value Type: short, long\nDescription: Display time zone as `GMT+1` or by its full name",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "local-time",
|
||||
"description": "This custom time extension is useful for formatting a date and time in the user's preferred locale format.\n\n```html\n<local-time datetime=\"2014-04-01T16:30:00-08:00\"\n month=\"short\"\n day=\"numeric\"\n year=\"numeric\"\n hour=\"numeric\"\n minute=\"numeric\">\n April 1, 2014 4:30PM PDT\n</local-time>\n```\n\nWhen this markup is viewed in a CDT timezone, it will show `Apr 1, 2014 6:30PM`. If it's viewed in a browser with European date preferences, it will read `1 Apr 2014 18:30`.",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#local-time"
|
||||
},
|
||||
{
|
||||
"name": "WebComponents",
|
||||
"url": "https://www.webcomponents.org/element/time-elements#local-time"
|
||||
},
|
||||
{
|
||||
"name": "NPM",
|
||||
"url": "https://www.npmjs.com/package/@github/time-elements#local-time"
|
||||
}
|
||||
],
|
||||
"attributes": [
|
||||
{
|
||||
"name": "datetime",
|
||||
"description": "Value Type: ISO 8601 date.\nDescription: Required date of element such as `2014-06-01T13:05:07Z`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "year",
|
||||
"description": "Value Type: 2-digit, numeric.\nDescription: Format year as `14` or `2014`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "month",
|
||||
"description": "Value Type: short, long\nDescription: Format month as `Jun` or `June`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "day",
|
||||
"description": "Value Type: 2-digit, numeric\nDescription: Format day as `01` or `1`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "weekday",
|
||||
"description": "Value Type: short, long\nDescription: Format weekday as `Sun` or `Sunday`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "hour",
|
||||
"description": "Value Type: 2-digit, numeric\nDescription: Format hour as `01` or `1`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "minute",
|
||||
"description": "Value Type: 2-digit, numeric.\nDescription: Format minute as `05` or `5`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "second",
|
||||
"description": "Value Type: 2-digit, numeric.\nDescription: Format second as `07` or `7`",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "time-zone-name",
|
||||
"description": "Value Type: short, long\nDescription: Display time zone as `GMT+1` or by its full name",
|
||||
"references": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
"url": "https://github.com/github/time-elements#options"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
Загрузка…
Ссылка в новой задаче