mirror of
https://github.com/discourse/discourse.git
synced 2025-06-08 00:27:32 +08:00
DEV: local-dates refactoring (#6692)
This commit is contained in:
@ -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);
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user