Commit 1c7cce9e authored by Phil Hughes's avatar Phil Hughes

Improved timeago performance

- Changes to use a single instance of timeago
- Uses one timeout for every element, rather than 1 per element

Closes #25728
parent 412ab17d
...@@ -247,5 +247,7 @@ window.ES6Promise.polyfill(); ...@@ -247,5 +247,7 @@ window.ES6Promise.polyfill();
new Aside(); new Aside();
// bind sidebar events // bind sidebar events
new gl.Sidebar(); new gl.Sidebar();
gl.utils.initTimeagoTimeout();
}); });
}).call(this); }).call(this);
...@@ -8,6 +8,8 @@ window.dateFormat = require('vendor/date.format'); ...@@ -8,6 +8,8 @@ window.dateFormat = require('vendor/date.format');
(function() { (function() {
(function(w) { (function(w) {
var base; var base;
var timeagoInstance;
if (w.gl == null) { if (w.gl == null) {
w.gl = {}; w.gl = {};
} }
...@@ -24,29 +26,28 @@ window.dateFormat = require('vendor/date.format'); ...@@ -24,29 +26,28 @@ window.dateFormat = require('vendor/date.format');
return this.days[date.getDay()]; return this.days[date.getDay()];
}; };
w.gl.utils.localTimeAgo = function($timeagoEls, setTimeago) { w.gl.utils.localTimeAgo = function($timeagoEls, setTimeago = true) {
if (setTimeago == null) { $timeagoEls.each((i, el) => {
setTimeago = true; el.setAttribute('title', gl.utils.formatDate(el.getAttribute('datetime')));
}
$timeagoEls.filter(':not([data-timeago-rendered])').each(function() {
var $el = $(this);
$el.attr('title', gl.utils.formatDate($el.attr('datetime')));
if (setTimeago) { if (setTimeago) {
// Recreate with custom template // Recreate with custom template
$el.tooltip({ $(el).tooltip({
template: '<div class="tooltip local-timeago" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' template: '<div class="tooltip local-timeago" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
}); });
} }
$el.attr('data-timeago-rendered', true); el.classList.add('js-timeago-render');
gl.utils.renderTimeago($el);
}); });
gl.utils.renderTimeago($timeagoEls);
}; };
w.gl.utils.getTimeago = function() { w.gl.utils.getTimeago = function() {
var locale = function(number, index) { var locale;
if (!timeagoInstance) {
locale = function(number, index) {
return [ return [
['less than a minute ago', 'a while'], ['less than a minute ago', 'a while'],
['less than a minute ago', 'in %s seconds'], ['less than a minute ago', 'in %s seconds'],
...@@ -66,7 +67,10 @@ window.dateFormat = require('vendor/date.format'); ...@@ -66,7 +67,10 @@ window.dateFormat = require('vendor/date.format');
}; };
timeago.register('gl_en', locale); timeago.register('gl_en', locale);
return timeago(); timeagoInstance = timeago();
}
return timeagoInstance;
}; };
w.gl.utils.timeFor = function(time, suffix, expiredLabel) { w.gl.utils.timeFor = function(time, suffix, expiredLabel) {
...@@ -85,9 +89,30 @@ window.dateFormat = require('vendor/date.format'); ...@@ -85,9 +89,30 @@ window.dateFormat = require('vendor/date.format');
return timefor; return timefor;
}; };
w.gl.utils.renderTimeago = function($element) { w.gl.utils.cachedTimeagoElements = [];
var timeagoInstance = gl.utils.getTimeago(); w.gl.utils.renderTimeago = function($els) {
timeagoInstance.render($element, 'gl_en'); if (!$els && !w.gl.utils.cachedTimeagoElements.length) {
w.gl.utils.cachedTimeagoElements = [].slice.call(document.querySelectorAll('.js-timeago-render'));
} else if ($els) {
w.gl.utils.cachedTimeagoElements = w.gl.utils.cachedTimeagoElements.concat($els.toArray());
}
w.gl.utils.cachedTimeagoElements.forEach(gl.utils.updateTimeagoText);
};
w.gl.utils.updateTimeagoText = function(el) {
const timeago = gl.utils.getTimeago();
const formattedDate = timeago.format(el.getAttribute('datetime'), 'gl_en');
if (el.textContent !== formattedDate) {
el.textContent = formattedDate;
}
};
w.gl.utils.initTimeagoTimeout = function() {
gl.utils.renderTimeago();
gl.utils.timeagoTimeout = setTimeout(gl.utils.initTimeagoTimeout, 1000);
}; };
w.gl.utils.getDayDifference = function(a, b) { w.gl.utils.getDayDifference = function(a, b) {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment