github / relative-time-element Goto Github PK

After this repo is public, we can setup Travis CI phantomjs builds.

Edit: closed

Looks like there could be a bug here, if you are using this library on the Github User Feed Page.

I believe this should be 3 hours ago, as opposed to in 3 hours unless github is predicting the future.

see screenshot below:

I have been using time-elements for a Polymer 2.0 app successfully and when I came to upgrade to polymer 3.0 I decided to go straight to PWA

However I can't get time-elements working even though I'm passing the same data as before.

I've used NPM to get hold of the code, and it's listed in package.json and I can see it in node_modules

I've added an import to my component
import 'time-elements/dist/time-elements.js';

and I'm using the tag as normal way
<relative-time datetime="${event.created}"></relative-time> in the _render() method.

The code is loaded when I access the page but the time doesn't seem to render, and nothing written to the console.

I've probably done something stupid but I'd appreciate some help, please.

>> Time.now.strftime("%Y-%m-%d %H:%M:%S %z")
=> "2014-05-13 17:12:41 -0400"

Only %Z is implemented.

/cc @dgraham

Found this bug right here on GitHub:

Could be tied to Chrome 58.0.3029.110, but I honestly don't know.

@dgraham so I love the new extended element. But what do we call the repo now?

Some existing conventions

local-time-elements, time-elements, ...

https://github.com/zenorocha/voice-elements - -elements since theres multiple custom elements packaged.

/cc @eanakashima @mislav

Once the repo is public.

$ bower register time-elements https://github.com/github/time-elements.git

How can we improve the current README for public readers.

https://github.com/github/local-time-element/blob/master/README.md

One concern I have is about this whole web component dependency thing. How do we explain what it is, why its cool, and how to get started.

/cc @mislav @eanakashima @dgraham @mtodd @dewski

Somewhat related to #81. Right now polymer lint will complain

 warning [undefined-elements] - The element relative-time is not defined

If I just have this at the end of modules:

 ...
 <script src="../bower_components/time-elements/time-elements.js"></script>
</dom-module>

Check this Plunkr: http://plnkr.co/edit/xEB6WxUpfxgv41Aai4np?p=preview

When I update the date the text changes but the title doesn't.

I saw that it is because the title attribute take precedence, but I'm not sure it's a good case when the user didn't add a title.

The People want this.

https://twitter.com/polymer/status/464103568392200193

Not using semicolon for end of line is terrible for performance.

We really don't even use the regular date localization in github itself. It was probably premature to even try to extract it.

Maybe we can rename and focus this library on <relative-time>.

what do you guys think?

/cc @mislav @eanakashima @dgraham

If this element supports translation, it would be great!

Example:
<time datetime="2015-02-23T09:51:57Z" is="relative-time" lang="ja-jp">Feb 23, 2015</time>

What do you think about making "ago" optional for time-ago? It's often useful to get a human-readable time span and combine it with custom suffix, e.g.: 2 days since the last meeting, 10 years of experience. moment.js supports similar feature via a boolean argument to fromNow(true) method.

It seems that time-elements.js doesn't seem to work with Polymer 1.0. Couldn't really grasp what was wrong. Would be great if it was fixed/supported!

On an initial page load or page reload, the formatting is not working (Using Rails + Turbolinks). I used to solve this by calling updateNowElements directly but now that Rails 6 switch to webpacker, i'd like to know how to access updateNowElements after importing time-elements via

import timeElements from 'time-elements/dist/time-elements.js'

The element is pretty limited to English and the github date style right now.
There should be a way to supply a strftime format for anything that is too old to be displayed in relative terms.

For example:
https://github.com/github/time-elements/blob/77a086c07630ae2fefb1a763a2d5212b72de79d2/src/relative-time.js#L23

This element currently handles localizing a UTC into a strftime format and generating relative time ago in words descriptions. Should the 2 be separate concerns?

One code reuse reason to have them together is that relative timestamps can use a localized title format with title-format. In order to support that, relative timestamps also need to use a strftime function.

/cc @mislav @eanakashima @dgraham @mtodd @dewski

https://developers.google.com/web/updates/2018/10/intl-relativetimeformat
https://github.com/tc39/proposal-intl-relative-time

CC: @github/web-systems

Private property likes this._date should be referenced from a WeakMap instead of exposed as underscore properties on the LocalTimeElement object.

Per MDN :
document.registerElement() is deprecated in favor of customElements.define()

Code does not appear to work in latest version of Firefox due to this.

CI is 🔴

CC: @dgraham @mislav

Hi guys,

I wasn't able to get this to work to elements that were created after the document has sent the ready event. Is there a way to manually transform an element, or to rerun the search on the page to parse the <time> elements again?

Thanks!

When used in Firefox, I get the following error:

TypeError: document.registerElement is not a function

The polyfill with version 1.0.0 of web component assumes that window.customElements.define is used.

The source code contains an implementation of strftime and a few functions that use it but there's no way to access it directly. It would be nice if you could use it to customize the format of the title attribute and other strings.

Any way you guys can make a time-elements.html file which simply imports the javascript file.

Add a file named: time-elements.html
the contents of that file should be exactly
<script src="./time-elements.js"></script>

This is the proper way to import web components because importing an html file twice does nothing while importing a javascript file twice will try to run the code twice.

We expose a strftime format expression rather than the moment tokens. This means we aren't coupled to moment.js. Removing moment.js would give this component and overall smaller footprint as well as make it easier to install.

Safari 10 will be supporting Custom Elements soon, but won't support is="".

We should rewrite this extension without extending <time> and just do <relative-time> and <local-time>.

Hopefully we can get github.com updated long before so future Enterprise versions will be ready with this change. Unsure if the Polymer Custom Element polyfill will correctly cover a partial Custom Elements implementation.

To: @dgraham @mislav
CC: @notwaldorf @github/js

Unfortunately all of new elements (time, date-picker, ...) don't implement Jalali calendar in them...
We should do something about it.

I noticed that for <relative-time> which is further than 1 month ago we show example: on 14 April 2018

Would it be possible to add custom prefix, which if not specified would default to on (for backwards compatibility) but in case I could specify empty string so I would get just 14 April 2018?

It looks like the update to 3.0.9 introduced an infinite loop in the <relative-time /> element.

Repro Link:
https://codesandbox.io/s/thirsty-joliot-44k9p
Repro Steps:

• Open link
• Open browser console
• Refresh

Uncaught RangeError: Maximum call stack size exceeded.
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at HTMLElement.attributeChangedCallback (time-elements-legacy.js:248)
    at evaluate (index.js? [sm]:6)
    at Jn (eval.js:61)
    at e.value (transpiled-module.ts:980)
    at e.value (manager.ts:361)
    at t (transpiled-module.ts:958)
    at loadResources (index.html:3)

Compare to https://codesandbox.io/s/wizardly-dew-7pih0 which is using 3.0.8 and does not have the issue.

Here is the relevant code:

if (title && (!currentTitle || currentTitle === oldTitle)) {
        this.setAttribute('title', title);
      }

which I think was modified in this PR:
#129

For current date 2015-02-23T00:00:00.000Z (like)

The following html :

Give this result :
117y

Or it's should give 115 or maybe 116 not 117 !

Note : for date 002-02-01T00:00:00.000Z It's even more obvious.

I'd like to just do <script src=... without hosting my own time-elements.js file. Can't seem to find anything like this in the README.

How to do it?

In December "Last year" has a range of 1-12 months 😱 It would be great if we could make sure to show "x months ago" again.

Ref: https://github.com/github/github/issues/116284
Ref: https://github.com/github/github/pull/115903

The ES internationalization APIs have partial implementations across browsers.

How can we leverage it when its available to provide better localized date formats?

/cc @dgraham @aroben @eanakashima @mislav

Resources

• http://www.ecma-international.org/ecma-402/1.0/
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl

In some case we receive millisecond format time from server, currently I have to construct a date object and convert it into a string of acceptable format in a customized filter, that's really inconvenient. So have you guys considered to define a different attribute to accept time of this format? like time="1414579265159"

Today is Jan 18, 2020,

but <time-until datetime="2020-12-31T00:00:00"></time-until> outputs next year

https://beta.webcomponents.org/

CC: @github/js
Requested by @notwaldorf

Is there any way to make it possible to display "on the 7 of March" instead of "on 7 March" ?

Currently using JSHint.

Issues lists on GitHub have relative times displayed in two languages. For example, my os/browser is set to the Slovak language and when I open a GitHub issues list, some relative times are displayed as translated (red) and some in English (blue) - see the attached screenshot.

Browser: Google Chrome 74.0.3729.169
OS: macOS Mojave 10.14.4

I found 2 problems: appending content in chrome and no default formatting

No default formatting:

Source:

<local-time datetime="2018-08-24T16:57:42.604Z">Aug 24, 2018 23:57:42</local-time>

Result:

<local-time datetime="2018-08-24T16:57:42.604Z" title="Aug 24, 2018, 11:57 PM GMT+7">Aug 24, 2018 23:57:42</local-time>

would be much easier to start if it would apply default formatting month="short" day="numeric" year="numeric" hour="numeric" minute="numeric" (or similar) and may be update-content=false to prevent updating content

Appending content in chrome:
Source:

<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>

Result:

<local-time datetime="2014-04-01T16:30:00-08:00" month="short" day="numeric" year="numeric" hour="numeric" minute="numeric" title="Apr 2, 2014, 7:30 AM GMT+7">Apr 2, 2014 7:30 AMApril 1, 2014 4:30PM PDT</local-time>

I'm trying to use time-elements in an application built on top of Polymer (2.0) and Web Components and I can't seem to get this to work since there is no real web component defined for these custom HTML tags. I know this is added to the Web Components website but it only has the .js file and no HTML files to import. My request is two-fold:

1. Make full-blown Web Components for each custom HTML tag (eg. <relative-time>, <local-time>, etc.) with HTML imports.
2. Is there a way to properly use the current implementation in a Polymer 2.0 Web Component?

Thank you for your work!

Edit: I forgot to mention that I'm relatively new to Web Components and Polymer so it's very possible that I'm missing something and time-elements in its current form is already a real web component and I just don't realize it.

Had a situation on this PR. As I filled in the comment, I saw:

myii requested review from aboe76 and noelmcloughlin 3 minutes from now

To be fair, this soon became:

myii requested review from aboe76 and noelmcloughlin 4 minutes ago

So probably just a glitch. Just to be clear, from now connotes a future event, as mentioned on this page.