Quantcast
Channel: Issues for Drupal core
Viewing all articles
Browse latest Browse all 293752

Allow TimestampFormatter to show as a fully cacheable time difference with JS

$
0
0

Problem/Motivation

As it turned out in #2500525: Time ago/hence date/time formatting breaks caching; needs appropriate max age and #2686409: Time Ago summary does not render on Manage Display for Timestamp and Datetime fields the TimestampAgoFormatter formatter outputs a string that is very hard to cache. A time difference interval string changes very often making it uncacheable and then the whole page become uncacheable. The big problem here is that we return a string from the server that is refreshes very often. Using a max-age strategy works but it has the drawback of being very bad for the user experience.

Proposed resolution

  1. Use the default TimestampFormatter formatter to show also a time difference formatted dates and deprecate TimestampAgoFormatter EDIT: The deprecation is discussed in #2938705: Consider deprecating TimestampAgoFormatter.
  2. Add a new "Display as a time difference" option (as checkbox) in TimestampFormatter settings. When this setting is On, a jQuery snippet replaces the current output of the formatter, which is a human readable formatted date/time, with a Display as a time difference string expression. Also the "Display as a time difference" settings will be visible and configurable.
  3. The time difference replacement is formatted using a jQuery snippet that converts the actual PHP time difference functionality.

Pros of this solution:

  • Assures a dynamic time difference that can be refreshed by JS with an interval that should be configured in the formatter.
  • Is cacheable.
  • Degrades nice to a normal formatted date/time for non-JS browsers.

Additional improvements:

  • Use the <time ...> HTML5 element.
  • Add a title (tooltip) to <time ...> so that while displaying a time difference string, the user still can see the exact time by hovering with the mouse. The format of the tooltip should be configurable apart from the main date format because we may want a more detailed format than the main one.
  • Allow configuration of time difference string pattern as the actual TimeAgoFormatter does.

Remaining tasks

  • Add tests.
  • Add a post update script to fix configurations of existing entity view displays that are using the TimestampFormatter.
  • Add update path test.
  • Open a followup for the datetime.module corresponding formatter.

User interface changes

  • For site builders: New options in TimestampFormatter settings.
  • For users: "Time difference" dates will be up-to-date (no cached) and will refresh in the client browser on a specific interval.

API changes

Deprecated TimestampAgoFormatter formatter. EDIT: Moved to #2938705: Consider deprecating TimestampAgoFormatter.

Data model changes

New settings for TimestampFormatter formatter.

Manual testing

  • Create a Timestamp field
  • The formatter is set to "Default". Edit the formatter settings
  • Check the "Display as time difference"
  • Configure
  • Set the refresh interval to a lower value so that you can observe later, in node view, how the field is refreshing
  • Save the formatter settings.
  • Check the formatter settings summary.
  • Create a new node and save.
  • See that the field correctly shows the field value as time difference.
  • Hover with the mouse and check that a detailed time tooltip pops-up
  • Without reloading the page, check that the field is refreshing client side after the refresh interval expires.
  • Disable Javascript and reload the page.
  • Check that the field degrades to a normal time representation.

Formatter settings form


Formatter settings summary

Javascript shows the timestamp as time difference

The time difference refreshes after the refresh interval expires

Javascript disabled degradation


Viewing all articles
Browse latest Browse all 293752

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>