Improved timeago performance
- Changes to use a single instance of timeago - Uses one timeout for every element, rather than 1 per element Closes #25728
This commit is contained in:
Phil Hughes
parent
412ab17d3f
commit
1c7cce9ec8
3 changed files with 128 additions and 101 deletions
|
|
@ -247,5 +247,7 @@ window.ES6Promise.polyfill();
|
|||
new Aside();
|
||||
// bind sidebar events
|
||||
new gl.Sidebar();
|
||||
|
||||
gl.utils.initTimeagoTimeout();
|
||||
});
|
||||
}).call(this);
|
||||
|
|
|
|||
|
|
@ -1,101 +0,0 @@
|
|||
/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-param-reassign, no-cond-assign, comma-dangle, no-unused-expressions, prefer-template, max-len */
|
||||
/* global timeago */
|
||||
/* global dateFormat */
|
||||
|
||||
window.timeago = require('vendor/timeago');
|
||||
window.dateFormat = require('vendor/date.format');
|
||||
|
||||
(function() {
|
||||
(function(w) {
|
||||
var base;
|
||||
if (w.gl == null) {
|
||||
w.gl = {};
|
||||
}
|
||||
if ((base = w.gl).utils == null) {
|
||||
base.utils = {};
|
||||
}
|
||||
w.gl.utils.days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
||||
|
||||
w.gl.utils.formatDate = function(datetime) {
|
||||
return dateFormat(datetime, 'mmm d, yyyy h:MMtt Z');
|
||||
};
|
||||
|
||||
w.gl.utils.getDayName = function(date) {
|
||||
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')));
|
||||
|
||||
if (setTimeago) {
|
||||
// Recreate with custom template
|
||||
$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);
|
||||
});
|
||||
};
|
||||
|
||||
w.gl.utils.getTimeago = function() {
|
||||
var locale = function(number, index) {
|
||||
return [
|
||||
['less than a minute ago', 'a while'],
|
||||
['less than a minute ago', 'in %s seconds'],
|
||||
['about a minute ago', 'in 1 minute'],
|
||||
['%s minutes ago', 'in %s minutes'],
|
||||
['about an hour ago', 'in 1 hour'],
|
||||
['about %s hours ago', 'in %s hours'],
|
||||
['a day ago', 'in 1 day'],
|
||||
['%s days ago', 'in %s days'],
|
||||
['a week ago', 'in 1 week'],
|
||||
['%s weeks ago', 'in %s weeks'],
|
||||
['a month ago', 'in 1 month'],
|
||||
['%s months ago', 'in %s months'],
|
||||
['a year ago', 'in 1 year'],
|
||||
['%s years ago', 'in %s years']
|
||||
][index];
|
||||
};
|
||||
|
||||
timeago.register('gl_en', locale);
|
||||
return timeago();
|
||||
};
|
||||
|
||||
w.gl.utils.timeFor = function(time, suffix, expiredLabel) {
|
||||
var timefor;
|
||||
if (!time) {
|
||||
return '';
|
||||
}
|
||||
suffix || (suffix = 'remaining');
|
||||
expiredLabel || (expiredLabel = 'Past due');
|
||||
timefor = gl.utils.getTimeago().format(time).replace('in', '');
|
||||
if (timefor.indexOf('ago') > -1) {
|
||||
timefor = expiredLabel;
|
||||
} else {
|
||||
timefor = timefor.trim() + ' ' + suffix;
|
||||
}
|
||||
return timefor;
|
||||
};
|
||||
|
||||
w.gl.utils.renderTimeago = function($element) {
|
||||
var timeagoInstance = gl.utils.getTimeago();
|
||||
timeagoInstance.render($element, 'gl_en');
|
||||
};
|
||||
|
||||
w.gl.utils.getDayDifference = function(a, b) {
|
||||
var millisecondsPerDay = 1000 * 60 * 60 * 24;
|
||||
var date1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
|
||||
var date2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
|
||||
|
||||
return Math.floor((date2 - date1) / millisecondsPerDay);
|
||||
};
|
||||
})(window);
|
||||
}).call(this);
|
||||
126
app/assets/javascripts/lib/utils/datetime_utility.js.es6
Normal file
126
app/assets/javascripts/lib/utils/datetime_utility.js.es6
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-param-reassign, no-cond-assign, comma-dangle, no-unused-expressions, prefer-template, max-len */
|
||||
/* global timeago */
|
||||
/* global dateFormat */
|
||||
|
||||
window.timeago = require('vendor/timeago');
|
||||
window.dateFormat = require('vendor/date.format');
|
||||
|
||||
(function() {
|
||||
(function(w) {
|
||||
var base;
|
||||
var timeagoInstance;
|
||||
|
||||
if (w.gl == null) {
|
||||
w.gl = {};
|
||||
}
|
||||
if ((base = w.gl).utils == null) {
|
||||
base.utils = {};
|
||||
}
|
||||
w.gl.utils.days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
||||
|
||||
w.gl.utils.formatDate = function(datetime) {
|
||||
return dateFormat(datetime, 'mmm d, yyyy h:MMtt Z');
|
||||
};
|
||||
|
||||
w.gl.utils.getDayName = function(date) {
|
||||
return this.days[date.getDay()];
|
||||
};
|
||||
|
||||
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({
|
||||
template: '<div class="tooltip local-timeago" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
|
||||
});
|
||||
}
|
||||
|
||||
el.classList.add('js-timeago-render');
|
||||
});
|
||||
|
||||
gl.utils.renderTimeago($timeagoEls);
|
||||
};
|
||||
|
||||
w.gl.utils.getTimeago = function() {
|
||||
var locale;
|
||||
|
||||
if (!timeagoInstance) {
|
||||
locale = function(number, index) {
|
||||
return [
|
||||
['less than a minute ago', 'a while'],
|
||||
['less than a minute ago', 'in %s seconds'],
|
||||
['about a minute ago', 'in 1 minute'],
|
||||
['%s minutes ago', 'in %s minutes'],
|
||||
['about an hour ago', 'in 1 hour'],
|
||||
['about %s hours ago', 'in %s hours'],
|
||||
['a day ago', 'in 1 day'],
|
||||
['%s days ago', 'in %s days'],
|
||||
['a week ago', 'in 1 week'],
|
||||
['%s weeks ago', 'in %s weeks'],
|
||||
['a month ago', 'in 1 month'],
|
||||
['%s months ago', 'in %s months'],
|
||||
['a year ago', 'in 1 year'],
|
||||
['%s years ago', 'in %s years']
|
||||
][index];
|
||||
};
|
||||
|
||||
timeago.register('gl_en', locale);
|
||||
timeagoInstance = timeago();
|
||||
}
|
||||
|
||||
return timeagoInstance;
|
||||
};
|
||||
|
||||
w.gl.utils.timeFor = function(time, suffix, expiredLabel) {
|
||||
var timefor;
|
||||
if (!time) {
|
||||
return '';
|
||||
}
|
||||
suffix || (suffix = 'remaining');
|
||||
expiredLabel || (expiredLabel = 'Past due');
|
||||
timefor = gl.utils.getTimeago().format(time).replace('in', '');
|
||||
if (timefor.indexOf('ago') > -1) {
|
||||
timefor = expiredLabel;
|
||||
} else {
|
||||
timefor = timefor.trim() + ' ' + suffix;
|
||||
}
|
||||
return timefor;
|
||||
};
|
||||
|
||||
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) {
|
||||
var millisecondsPerDay = 1000 * 60 * 60 * 24;
|
||||
var date1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
|
||||
var date2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
|
||||
|
||||
return Math.floor((date2 - date1) / millisecondsPerDay);
|
||||
};
|
||||
})(window);
|
||||
}).call(this);
|
||||
Loading…
Reference in a new issue