Commit 6a29239d authored by Kushal Pandya's avatar Kushal Pandya

Merge branch '56327-improve-localtimeago-rendering' into 'master'

Improve localTimeAgo rendering

Closes #56327

See merge request gitlab-org/gitlab-ce!24389
parents 037fddad 887e5ac4
...@@ -141,7 +141,7 @@ export default { ...@@ -141,7 +141,7 @@ export default {
<time-ago <time-ago
v-if="version.created_at" v-if="version.created_at"
:time="version.created_at" :time="version.created_at"
class="js-timeago js-timeago-render" class="js-timeago"
/> />
</small> </small>
</div> </div>
......
...@@ -87,80 +87,96 @@ let timeagoInstance; ...@@ -87,80 +87,96 @@ let timeagoInstance;
*/ */
export const getTimeago = () => { export const getTimeago = () => {
if (!timeagoInstance) { if (!timeagoInstance) {
const localeRemaining = (number, index) => const memoizedLocaleRemaining = () => {
[ const cache = [];
[s__('Timeago|just now'), s__('Timeago|right now')],
[s__('Timeago|%s seconds ago'), s__('Timeago|%s seconds remaining')], const timeAgoLocaleRemaining = [
[s__('Timeago|1 minute ago'), s__('Timeago|1 minute remaining')], () => [s__('Timeago|just now'), s__('Timeago|right now')],
[s__('Timeago|%s minutes ago'), s__('Timeago|%s minutes remaining')], () => [s__('Timeago|%s seconds ago'), s__('Timeago|%s seconds remaining')],
[s__('Timeago|1 hour ago'), s__('Timeago|1 hour remaining')], () => [s__('Timeago|1 minute ago'), s__('Timeago|1 minute remaining')],
[s__('Timeago|%s hours ago'), s__('Timeago|%s hours remaining')], () => [s__('Timeago|%s minutes ago'), s__('Timeago|%s minutes remaining')],
[s__('Timeago|1 day ago'), s__('Timeago|1 day remaining')], () => [s__('Timeago|1 hour ago'), s__('Timeago|1 hour remaining')],
[s__('Timeago|%s days ago'), s__('Timeago|%s days remaining')], () => [s__('Timeago|%s hours ago'), s__('Timeago|%s hours remaining')],
[s__('Timeago|1 week ago'), s__('Timeago|1 week remaining')], () => [s__('Timeago|1 day ago'), s__('Timeago|1 day remaining')],
[s__('Timeago|%s weeks ago'), s__('Timeago|%s weeks remaining')], () => [s__('Timeago|%s days ago'), s__('Timeago|%s days remaining')],
[s__('Timeago|1 month ago'), s__('Timeago|1 month remaining')], () => [s__('Timeago|1 week ago'), s__('Timeago|1 week remaining')],
[s__('Timeago|%s months ago'), s__('Timeago|%s months remaining')], () => [s__('Timeago|%s weeks ago'), s__('Timeago|%s weeks remaining')],
[s__('Timeago|1 year ago'), s__('Timeago|1 year remaining')], () => [s__('Timeago|1 month ago'), s__('Timeago|1 month remaining')],
[s__('Timeago|%s years ago'), s__('Timeago|%s years remaining')], () => [s__('Timeago|%s months ago'), s__('Timeago|%s months remaining')],
][index]; () => [s__('Timeago|1 year ago'), s__('Timeago|1 year remaining')],
() => [s__('Timeago|%s years ago'), s__('Timeago|%s years remaining')],
const locale = (number, index) => ];
[
[s__('Timeago|just now'), s__('Timeago|right now')], return (number, index) => {
[s__('Timeago|%s seconds ago'), s__('Timeago|in %s seconds')], if (cache[index]) {
[s__('Timeago|1 minute ago'), s__('Timeago|in 1 minute')], return cache[index];
[s__('Timeago|%s minutes ago'), s__('Timeago|in %s minutes')],
[s__('Timeago|1 hour ago'), s__('Timeago|in 1 hour')],
[s__('Timeago|%s hours ago'), s__('Timeago|in %s hours')],
[s__('Timeago|1 day ago'), s__('Timeago|in 1 day')],
[s__('Timeago|%s days ago'), s__('Timeago|in %s days')],
[s__('Timeago|1 week ago'), s__('Timeago|in 1 week')],
[s__('Timeago|%s weeks ago'), s__('Timeago|in %s weeks')],
[s__('Timeago|1 month ago'), s__('Timeago|in 1 month')],
[s__('Timeago|%s months ago'), s__('Timeago|in %s months')],
[s__('Timeago|1 year ago'), s__('Timeago|in 1 year')],
[s__('Timeago|%s years ago'), s__('Timeago|in %s years')],
][index];
timeago.register(timeagoLanguageCode, locale);
timeago.register(`${timeagoLanguageCode}-remaining`, localeRemaining);
timeagoInstance = timeago();
} }
cache[index] = timeAgoLocaleRemaining[index] && timeAgoLocaleRemaining[index]();
return cache[index];
};
};
return timeagoInstance; const memoizedLocale = () => {
}; const cache = [];
const timeAgoLocale = [
() => [s__('Timeago|just now'), s__('Timeago|right now')],
() => [s__('Timeago|%s seconds ago'), s__('Timeago|in %s seconds')],
() => [s__('Timeago|1 minute ago'), s__('Timeago|in 1 minute')],
() => [s__('Timeago|%s minutes ago'), s__('Timeago|in %s minutes')],
() => [s__('Timeago|1 hour ago'), s__('Timeago|in 1 hour')],
() => [s__('Timeago|%s hours ago'), s__('Timeago|in %s hours')],
() => [s__('Timeago|1 day ago'), s__('Timeago|in 1 day')],
() => [s__('Timeago|%s days ago'), s__('Timeago|in %s days')],
() => [s__('Timeago|1 week ago'), s__('Timeago|in 1 week')],
() => [s__('Timeago|%s weeks ago'), s__('Timeago|in %s weeks')],
() => [s__('Timeago|1 month ago'), s__('Timeago|in 1 month')],
() => [s__('Timeago|%s months ago'), s__('Timeago|in %s months')],
() => [s__('Timeago|1 year ago'), s__('Timeago|in 1 year')],
() => [s__('Timeago|%s years ago'), s__('Timeago|in %s years')],
];
/** return (number, index) => {
* For the given element, renders a timeago instance. if (cache[index]) {
* @param {jQuery} $els return cache[index];
*/ }
export const renderTimeago = $els => { cache[index] = timeAgoLocale[index] && timeAgoLocale[index]();
const timeagoEls = $els || document.querySelectorAll('.js-timeago-render'); return cache[index];
};
};
timeago.register(timeagoLanguageCode, memoizedLocale());
timeago.register(`${timeagoLanguageCode}-remaining`, memoizedLocaleRemaining());
timeagoInstance = timeago();
}
// timeago.js sets timeouts internally for each timeago value to be updated in real time return timeagoInstance;
getTimeago().render(timeagoEls, timeagoLanguageCode);
}; };
/** /**
* For the given elements, sets a tooltip with a formatted date. * For the given elements, sets a tooltip with a formatted date.
* @param {jQuery} * @param {JQuery} $timeagoEls
* @param {Boolean} setTimeago * @param {Boolean} setTimeago
*/ */
export const localTimeAgo = ($timeagoEls, setTimeago = true) => { export const localTimeAgo = ($timeagoEls, setTimeago = true) => {
getTimeago().render($timeagoEls, timeagoLanguageCode);
if (!setTimeago) {
return;
}
function addTimeAgoTooltip() {
$timeagoEls.each((i, el) => { $timeagoEls.each((i, el) => {
if (setTimeago) {
// Recreate with custom template // Recreate with custom template
$(el).tooltip({ $(el).tooltip({
template: template:
'<div class="tooltip local-timeago" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>', '<div class="tooltip local-timeago" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
}); });
}
el.classList.add('js-timeago-render');
}); });
}
renderTimeago($timeagoEls); requestIdleCallback(addTimeAgoTooltip);
}; };
/** /**
......
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