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
- Use the default
TimestampFormatter
formatter to show also a time difference formatted datesand deprecateEDIT: The deprecation is discussed in #2938705: Consider deprecating TimestampAgoFormatter.TimestampAgoFormatter
- 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. - 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 theTimestampFormatter
.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 EDIT: Moved to #2938705: Consider deprecating TimestampAgoFormatter.TimestampAgoFormatter
formatter.
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.