DEV: local-dates refactoring (#6692)

This commit is contained in:
Joffrey JAFFEUX
2018-11-28 16:19:25 +01:00
committed by GitHub
parent 654b80e472
commit eb1607bd98

View File

@ -1,9 +1,23 @@
(function($) { (function($) {
$.fn.applyLocalDates = function(repeat) { const DATE_TEMPLATE = `
const processElement = ($element, options = {}) => { <span>
if (this.timeout) clearTimeout(this.timeout); <svg class="fa d-icon d-icon-globe-americas svg-icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#globe-americas"></use>
</svg>
<span class="relative-time"></span>
</span>
`;
const PREVIEW_TEMPLATE = `
<div class='preview'>
<span class='timezone'></span>
<span class='date-time'></span>
</div>
`;
function processElement($element, options = {}) {
clearTimeout(this.timeout);
repeat = repeat || true;
const utc = moment().utc(); const utc = moment().utc();
const dateTime = options.time const dateTime = options.time
? `${options.date} ${options.time}` ? `${options.date} ${options.time}`
@ -53,54 +67,37 @@
options options
); );
const $dateTemplate = `
<span>
<svg class="fa d-icon d-icon-globe-americas svg-icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#globe-americas"></use>
</svg>
<span class="relative-time"></span>
</span>
`;
$element $element
.html($dateTemplate) .html(DATE_TEMPLATE)
.attr("title", textPreview) .attr("title", textPreview)
.attr("data-html-tooltip", `<div class="previews">${htmlPreview}</div>`) .attr("data-html-tooltip", `<div class="previews">${htmlPreview}</div>`)
.addClass("cooked-date") .addClass("cooked-date")
.find(".relative-time") .find(".relative-time")
.text(formatedDateTime); .text(formatedDateTime);
if (repeat) { this.timeout = setTimeout(() => processElement($element, options), 10000);
this.timeout = setTimeout(
() => processElement($element, options),
10000
);
} }
};
const _formatTimezone = timezone => function _formatTimezone(timezone) {
timezone return timezone
.replace("_", " ") .replace("_", " ")
.replace("Etc/", "") .replace("Etc/", "")
.split("/"); .split("/");
}
const _zoneWithoutPrefix = timezone => { function _zoneWithoutPrefix(timezone) {
const parts = _formatTimezone(timezone); const parts = _formatTimezone(timezone);
return parts[1] || parts[0]; return parts[1] || parts[0];
};
const _applyZoneToDateTime = (dateTime, timezone) => {
return moment.tz(dateTime, timezone).utc();
};
const _calendarFormats = time => {
const _translate = key => {
const translated = I18n.t(
`discourse_local_dates.relative_dates.${key}`,
{
time: "LT"
} }
);
function _applyZoneToDateTime(dateTime, timezone) {
return moment.tz(dateTime, timezone).utc();
}
function _translateCalendarKey(time, key) {
const translated = I18n.t(`discourse_local_dates.relative_dates.${key}`, {
time: "LT"
});
if (time) { if (time) {
return translated return translated
@ -110,24 +107,25 @@
} else { } else {
return `[${translated.replace(" LT", "")}]`; return `[${translated.replace(" LT", "")}]`;
} }
}; }
function _calendarFormats(time) {
return { return {
sameDay: _translate("today"), sameDay: _translateCalendarKey(time, "today"),
nextDay: _translate("tomorrow"), nextDay: _translateCalendarKey(time, "tomorrow"),
lastDay: _translate("yesterday"), lastDay: _translateCalendarKey(time, "yesterday"),
sameElse: "L" sameElse: "L"
}; };
}; }
const compareZones = (timezoneA, timezoneB) => { function _isEqualZones(timezoneA, timezoneB) {
return ( return (
moment.tz(timezoneA).utcOffset() === moment.tz(timezoneB).utcOffset() moment.tz(timezoneA).utcOffset() === moment.tz(timezoneB).utcOffset()
); );
}; }
const _applyFormatting = (dateTime, displayedTimezone, options) => { function _applyFormatting(dateTime, displayedTimezone, options) {
const sameTimezone = compareZones(displayedTimezone, moment.tz.guess()); const sameTimezone = _isEqualZones(displayedTimezone, moment.tz.guess());
const inCalendarRange = dateTime.isBetween( const inCalendarRange = dateTime.isBetween(
moment().subtract(2, "days"), moment().subtract(2, "days"),
moment().add(2, "days") moment().add(2, "days")
@ -174,9 +172,9 @@
} }
return dateTime; return dateTime;
}; }
const _applyRecurrence = (dateTime, recurring) => { function _applyRecurrence(dateTime, recurring) {
const parts = recurring.split("."); const parts = recurring.split(".");
const count = parseInt(parts[0], 10); const count = parseInt(parts[0], 10);
const type = parts[1]; const type = parts[1];
@ -184,9 +182,9 @@
const add = Math.ceil(diff + count); const add = Math.ceil(diff + count);
return dateTime.add(add, type); return dateTime.add(add, type);
}; }
const createDateTimeRange = (dateTime, timezone) => { function _createDateTimeRange(dateTime, timezone) {
const startRange = dateTime.tz(timezone).format("LLL"); const startRange = dateTime.tz(timezone).format("LLL");
const separator = "→"; const separator = "→";
const endRange = dateTime const endRange = dateTime
@ -195,22 +193,22 @@
.format("LLL"); .format("LLL");
return `${startRange} ${separator} ${endRange}`; return `${startRange} ${separator} ${endRange}`;
}; }
const _generatePreviews = (dateTime, displayedTimezone, options) => { function _generatePreviews(dateTime, displayedTimezone, options) {
const previewedTimezones = []; const previewedTimezones = [];
const watchingUserTimezone = moment.tz.guess(); const watchingUserTimezone = moment.tz.guess();
const timezones = options.timezones.filter( const timezones = options.timezones.filter(
timezone => timezone !== watchingUserTimezone timezone => timezone !== watchingUserTimezone
); );
if (!compareZones(displayedTimezone, watchingUserTimezone)) { if (!_isEqualZones(displayedTimezone, watchingUserTimezone)) {
previewedTimezones.push({ previewedTimezones.push({
timezone: watchingUserTimezone, timezone: watchingUserTimezone,
current: true, current: true,
dateTime: options.time dateTime: options.time
? dateTime.tz(watchingUserTimezone).format("LLL") ? dateTime.tz(watchingUserTimezone).format("LLL")
: createDateTimeRange(dateTime, watchingUserTimezone) : _createDateTimeRange(dateTime, watchingUserTimezone)
}); });
} }
@ -218,17 +216,17 @@
options.timezone && options.timezone &&
displayedTimezone === watchingUserTimezone && displayedTimezone === watchingUserTimezone &&
options.timezone !== displayedTimezone && options.timezone !== displayedTimezone &&
!compareZones(displayedTimezone, options.timezone) !_isEqualZones(displayedTimezone, options.timezone)
) { ) {
timezones.unshift(options.timezone); timezones.unshift(options.timezone);
} }
timezones.filter(z => z).forEach(timezone => { timezones.filter(z => z).forEach(timezone => {
if (compareZones(timezone, displayedTimezone)) { if (_isEqualZones(timezone, displayedTimezone)) {
return; return;
} }
if (compareZones(timezone, watchingUserTimezone)) { if (_isEqualZones(timezone, watchingUserTimezone)) {
timezone = watchingUserTimezone; timezone = watchingUserTimezone;
} }
@ -236,7 +234,7 @@
timezone, timezone,
dateTime: options.time dateTime: options.time
? dateTime.tz(timezone).format("LLL") ? dateTime.tz(timezone).format("LLL")
: createDateTimeRange(dateTime, timezone) : _createDateTimeRange(dateTime, timezone)
}); });
}); });
@ -245,14 +243,14 @@
timezone: "Etc/UTC", timezone: "Etc/UTC",
dateTime: options.time dateTime: options.time
? dateTime.tz("Etc/UTC").format("LLL") ? dateTime.tz("Etc/UTC").format("LLL")
: createDateTimeRange(dateTime, "Etc/UTC") : _createDateTimeRange(dateTime, "Etc/UTC")
}); });
} }
return _.uniq(previewedTimezones, "timezone"); return _.uniq(previewedTimezones, "timezone");
}; }
const _generateTextPreview = previews => { function _generateTextPreview(previews) {
return previews return previews
.map(preview => { .map(preview => {
const formatedZone = _zoneWithoutPrefix(preview.timezone); const formatedZone = _zoneWithoutPrefix(preview.timezone);
@ -264,31 +262,23 @@
} }
}) })
.join(", "); .join(", ");
}; }
const _generateHtmlPreview = previews => { function _generateHtmlPreview(previews) {
const $htmlTooltip = $("<div></div>"); return previews
.map(preview => {
const $previewTemplate = $(` const $template = $(PREVIEW_TEMPLATE);
<div class='preview'>
<span class='timezone'></span>
<span class='date-time'></span>
</div>
`);
previews.forEach(preview => {
const $template = $previewTemplate.clone();
if (preview.current) $template.addClass("current"); if (preview.current) $template.addClass("current");
$template.find(".timezone").text(_zoneWithoutPrefix(preview.timezone)); $template.find(".timezone").text(_zoneWithoutPrefix(preview.timezone));
$template.find(".date-time").text(preview.dateTime); $template.find(".date-time").text(preview.dateTime);
$htmlTooltip.append($template); return $template[0].outerHTML;
}); })
.join("");
return $htmlTooltip.html(); }
};
$.fn.applyLocalDates = function() {
return this.each(function() { return this.each(function() {
const $element = $(this); const $element = $(this);