relative-time-format
Version:
A convenient Intl.RelativeTimeFormat polyfill
460 lines (416 loc) • 9.88 kB
HTML
<html>
<head>
<title>relative-time-format</title>
<!-- Fix encoding. -->
<meta charset="utf-8">
<!-- Fix document width for mobile devices. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- `relative-time-format` -->
<script src="./relative-time-format.js"></script>
<!-- React 16.4.1 -->
<script src="./lib/react.js"></script>
<script src="./lib/react-dom.js"></script>
<!-- Babel 6 -->
<script src="./lib/babel.min.js"></script>
<script src="./lib/babel-polyfill.min.js"></script>
<!-- PrismJS -->
<link href="./lib/prism.css" rel="stylesheet" />
<script src="./lib/prism.js"></script>
</head>
<style>
html, body, button, input, textarea, select
{
font-family : Arial, Helvetica;
font-size : 20px;
}
html, body
{
-webkit-tap-highlight-color : transparent;
}
body
{
/* Disables "double tap to zoom in" on mobile devices. */
/* https://stackoverflow.com/questions/46167604/iphone-html-disable-double-tap-to-zoom */
touch-action: manipulation;
}
body
{
padding: 40px;
}
pre
{
white-space: pre-wrap ;
word-wrap: break-word ;
}
h2
{
margin-top: 60px;
margin-bottom: 30px;
font-size: 125%;
}
pre
{
border: 1px solid rgba(0, 0, 0, 0.03);
}
.section
{
margin-top: 20px;
line-height: 1.35em;
}
a
{
text-decoration: none;
color: #0093C4;
}
a:hover
{
text-decoration: underline;
}
a.main
{
display : block;
font-size : 125%;
}
p
{
margin-top : 10px;
margin-bottom : 40px;
}
.react-phone-number-input
{
max-width : 13rem;
}
/* Overrides Chrome autofill yellow background color */
/*
.rrui__input-field:-webkit-autofill,
.rrui__input-field:-webkit-autofill:hover,
.rrui__input-field:-webkit-autofill:focus
{
box-shadow: 0 0 0 1000px white inset;
}
*/
/* Style copied from GitHub. */
.code-source {
background-color: rgba(27,31,35,.05);
border-radius: 3px;
font-size: 85%;
margin: 0;
padding: .2em .4em;
}
.code-result {
font-size: 85%;
color: #2f9c0a;
}
.arrow {
opacity: 0.5;
}
@media (max-width: 720px)
{
body
{
padding: calc(0.3rem * 2);
}
html, body, button, input, textarea, select
{
font-size : 16px;
}
h2
{
margin-top: 40px;
margin-bottom: 12px;
}
}
</style>
<body>
<a target="_blank" class="main" href="https://github.com/catamphetamine/relative-time-format"><code>relative-time-format</code></a>
<p>A polyfill for <a href="https://github.com/tc39/proposal-intl-relative-time" target="_blank"><code>Intl.RelativeTimeFormat</code></a></p>
<div id="content"></div>
<script type="text/babel">
var long = {
"year": {
"previous": "last year",
"current": "this year",
"next": "next year",
"past": {
"one": "{0} year ago",
"other": "{0} years ago"
},
"future": {
"one": "in {0} year",
"other": "in {0} years"
}
},
"quarter": {
"previous": "last quarter",
"current": "this quarter",
"next": "next quarter",
"past": {
"one": "{0} quarter ago",
"other": "{0} quarters ago"
},
"future": {
"one": "in {0} quarter",
"other": "in {0} quarters"
}
},
"month": {
"previous": "last month",
"current": "this month",
"next": "next month",
"past": {
"one": "{0} month ago",
"other": "{0} months ago"
},
"future": {
"one": "in {0} month",
"other": "in {0} months"
}
},
"week": {
"previous": "last week",
"current": "this week",
"next": "next week",
"past": {
"one": "{0} week ago",
"other": "{0} weeks ago"
},
"future": {
"one": "in {0} week",
"other": "in {0} weeks"
}
},
"day": {
"previous": "yesterday",
"current": "today",
"next": "tomorrow",
"past": {
"one": "{0} day ago",
"other": "{0} days ago"
},
"future": {
"one": "in {0} day",
"other": "in {0} days"
}
},
"hour": {
"current": "this hour",
"past": {
"one": "{0} hour ago",
"other": "{0} hours ago"
},
"future": {
"one": "in {0} hour",
"other": "in {0} hours"
}
},
"minute": {
"current": "this minute",
"past": {
"one": "{0} minute ago",
"other": "{0} minutes ago"
},
"future": {
"one": "in {0} minute",
"other": "in {0} minutes"
}
},
"second": {
"current": "now",
"past": {
"one": "{0} second ago",
"other": "{0} seconds ago"
},
"future": {
"one": "in {0} second",
"other": "in {0} seconds"
}
}
}
var short = {
"year": {
"previous": "last yr.",
"current": "this yr.",
"next": "next yr.",
"past": "{0} yr. ago",
"future": "in {0} yr."
},
"quarter": {
"previous": "last qtr.",
"current": "this qtr.",
"next": "next qtr.",
"past": {
"one": "{0} qtr. ago",
"other": "{0} qtrs. ago"
},
"future": {
"one": "in {0} qtr.",
"other": "in {0} qtrs."
}
},
"month": {
"previous": "last mo.",
"current": "this mo.",
"next": "next mo.",
"past": "{0} mo. ago",
"future": "in {0} mo."
},
"week": {
"previous": "last wk.",
"current": "this wk.",
"next": "next wk.",
"past": "{0} wk. ago",
"future": "in {0} wk."
},
"day": {
"previous": "yesterday",
"current": "today",
"next": "tomorrow",
"past": {
"one": "{0} day ago",
"other": "{0} days ago"
},
"future": {
"one": "in {0} day",
"other": "in {0} days"
}
},
"hour": {
"current": "this hour",
"past": "{0} hr. ago",
"future": "in {0} hr."
},
"minute": {
"current": "this minute",
"past": "{0} min. ago",
"future": "in {0} min."
},
"second": {
"current": "now",
"past": "{0} sec. ago",
"future": "in {0} sec."
}
}
var narrow = {
"year": {
"previous": "last yr.",
"current": "this yr.",
"next": "next yr.",
"past": "{0} yr. ago",
"future": "in {0} yr."
},
"quarter": {
"previous": "last qtr.",
"current": "this qtr.",
"next": "next qtr.",
"past": {
"one": "{0} qtr. ago",
"other": "{0} qtrs. ago"
},
"future": {
"one": "in {0} qtr.",
"other": "in {0} qtrs."
}
},
"month": {
"previous": "last mo.",
"current": "this mo.",
"next": "next mo.",
"past": "{0} mo. ago",
"future": "in {0} mo."
},
"week": {
"previous": "last wk.",
"current": "this wk.",
"next": "next wk.",
"past": "{0} wk. ago",
"future": "in {0} wk."
},
"day": {
"previous": "yesterday",
"current": "today",
"next": "tomorrow",
"past": {
"one": "{0} day ago",
"other": "{0} days ago"
},
"future": {
"one": "in {0} day",
"other": "in {0} days"
}
},
"hour": {
"current": "this hour",
"past": "{0} hr. ago",
"future": "in {0} hr."
},
"minute": {
"current": "this minute",
"past": "{0} min. ago",
"future": "in {0} min."
},
"second": {
"current": "now",
"past": "{0} sec. ago",
"future": "in {0} sec."
}
}
var quantify = function(n){var r=!String(n).split(".")[1];return 1==n&&r?"one":"other"}
var en = {
locale: "en",
long: long,
short: short,
narrow: narrow,
quantify: quantify
}
RelativeTimeFormat.addLocale(en)
const rtf = new RelativeTimeFormat('en')
const debug = window.location.origin === 'file://'
function Highlight({ lang, style, children })
{
return (
<pre style={style || { marginTop: '20px' }} className={`language-${lang}`}>
<code dangerouslySetInnerHTML={{__html: Prism.highlight(children.trim(), Prism.languages[lang], lang)}}/>
</pre>
)
}
class Content extends React.Component
{
render()
{
return (
<div>
<h2>Example</h2>
<div className="section">
<code className="code-source">rtf.format(-1, "day")</code> <span className="arrow">→</span> <code className="code-result">"{rtf.format(-1, "day")}"</code>
<div style={{ height: '0.4em' }}/>
<code className="code-source">rtf.format(1, "day")</code> <span className="arrow">→</span> <code className="code-result">"{rtf.format(1, "day")}"</code>
</div>
<Highlight lang="jsx">
{`import RelativeTimeFormat from "relative-time-format"
import en from "relative-time-format/locale/en.json"
// Import English relative time messages.
RelativeTimeFormat.addLocale(en)
// Create a relative time formatter in your locale.
const rtf = new RelativeTimeFormat("en", {
style: "long" // other values: "short" or "narrow"
})
// Format relative time using negative value (-1).
rtf.format(-1, "day")
// > "1 day ago"
// Format relative time using positive value (1).
rtf.format(1, "day")
// > "in 1 day"
`}
</Highlight>
</div>
)
}
}
ReactDOM.render
(
<Content />,
document.getElementById('content')
)
</script>
</body>
</html>