github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-23 23:42:43 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FEATURE: local dates range on click (#14355)

Browse Source 
This PR is introducing 2 changes.
1. Date popup is displayed on click instead on hover
2. If the range is given then the whole range is always displayed for both startDate and endDate
3. For range, short time is displayed for end if the range is < 24 hours
This commit is contained in:
Krzysztof Kotlarek
2021-09-20 09:23:18 +10:00
committed by GitHub
parent e316467169
commit 82b7e34f30
3 changed files with 139 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
plugins/discourse-local-dates/assets/javascripts/initializers/discourse-local-dates.js.es6
View File

@ -39,6 +39,11 @@ export function applyLocalDates(dates, siteSettings) {
function buildOptionsFromElement(element, siteSettings) {
const opts = {};
const dataset = element.dataset;
if (_rangeElements(element).length === 2) {
opts.duration = _calculateDuration(element);
}
opts.time = dataset.time;
opts.date = dataset.date;
opts.recurring = dataset.recurring;
@ -57,6 +62,12 @@ function buildOptionsFromElement(element, siteSettings) {
return opts;
}
function _rangeElements(element) {
return Array.from(element.parentElement.children).filter(
(span) => span.dataset.date
);
}
function initializeDiscourseLocalDates(api) {
const siteSettings = api.container.lookup("site-settings:main");
@ -114,7 +125,7 @@ function buildHtmlPreview(element, siteSettings) {
const dateTimeNode = document.createElement("span");
dateTimeNode.classList.add("date-time");
dateTimeNode.innerText = preview.formated;
dateTimeNode.innerHTML = preview.formated;
previewNode.appendChild(dateTimeNode);
return previewNode;
@ -127,6 +138,20 @@ function buildHtmlPreview(element, siteSettings) {
return previewsNode.outerHTML;
}
function _calculateDuration(element) {
const [startDataset, endDataset] = _rangeElements(element).map(
(dateElement) => dateElement.dataset
);
const startDateTime = moment(
`${startDataset.date} ${startDataset.time || ""}`
);
const endDateTime = moment(`${endDataset.date} ${endDataset.time || ""}`);
const duration = endDateTime.diff(startDateTime, "minutes");
// negative duration is used when we calculate difference for end date from range
return element.dataset === startDataset ? duration : -duration;
}
export default {
name: "discourse-local-dates",
@ -138,9 +163,13 @@ export default {
const siteSettings = owner.lookup("site-settings:main");
if (event?.target?.classList?.contains("discourse-local-date")) {
showPopover(event, {
htmlContent: buildHtmlPreview(event.target, siteSettings),
});
if ($(document.getElementById("d-popover"))[0]) {
hidePopover(event);
} else {
showPopover(event, {
htmlContent: buildHtmlPreview(event.target, siteSettings),
});
}
}
},
@ -155,7 +184,6 @@ export default {
router.on("routeWillChange", hidePopover);
window.addEventListener("click", this.showDatePopover);
window.addEventListener("mouseover", this.showDatePopover);
window.addEventListener("mouseout", this.hideDatePopover);
const siteSettings = container.lookup("site-settings:main");
@ -174,7 +202,6 @@ export default {
teardown() {
window.removeEventListener("click", this.showDatePopover);
window.removeEventListener("mouseover", this.showDatePopover);
window.removeEventListener("mouseout", this.hideDatePopover);
},
};