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();
new Aside();
// bind sidebar events
new gl.Sidebar();
gl.utils.initTimeagoTimeout();
});
}).call(this);
......@@ -8,6 +8,8 @@ window.dateFormat = require('vendor/date.format');
(function() {
(function(w) {
var base;
var timeagoInstance;
if (w.gl == null) {
w.gl = {};
}
......@@ -24,29 +26,28 @@ window.dateFormat = require('vendor/date.format');
return this.days[date.getDay()];
};
w.gl.utils.localTimeAgo = function($timeagoEls, setTimeago) {
if (setTimeago == null) {
setTimeago = true;
}
$timeagoEls.filter(':not([data-timeago-rendered])').each(function() {
var $el = $(this);
$el.attr('title', gl.utils.formatDate($el.attr('datetime')));
w.gl.utils.localTimeAgo = function($timeagoEls, setTimeago = true) {
$timeagoEls.each((i, el) => {
el.setAttribute('title', gl.utils.formatDate(el.getAttribute('datetime')));
if (setTimeago) {
// 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>'
});
}
$el.attr('data-timeago-rendered', true);
gl.utils.renderTimeago($el);
el.classList.add('js-timeago-render');
});
gl.utils.renderTimeago($timeagoEls);
};
w.gl.utils.getTimeago = function() {
var locale = function(number, index) {
var locale;
if (!timeagoInstance) {
locale = function(number, index) {
return [
['less than a minute ago', 'a while'],
['less than a minute ago', 'in %s seconds'],
......@@ -66,7 +67,10 @@ window.dateFormat = require('vendor/date.format');
};
timeago.register('gl_en', locale);
return timeago();
timeagoInstance = timeago();
}
return timeagoInstance;
};
w.gl.utils.timeFor = function(time, suffix, expiredLabel) {
......@@ -85,9 +89,30 @@ window.dateFormat = require('vendor/date.format');
return timefor;
};
w.gl.utils.renderTimeago = function($element) {
var timeagoInstance = gl.utils.getTimeago();
timeagoInstance.render($element, 'gl_en');
w.gl.utils.cachedTimeagoElements = [];
w.gl.utils.renderTimeago = function($els) {
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) {
......
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