Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FEATURE: Add user option to toggle timezone adjustment #437

Merged
merged 5 commits into from
Sep 13, 2023
Merged

FEATURE: Add user option to toggle timezone adjustment #437

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c3a90a8
FEATURE: Add user option to toggle timezone adjustment
jancernik Sep 12, 2023
d2d514e
Change button placement and use icons instead of text
jancernik Sep 13, 2023
489487a
Use core button
jancernik Sep 13, 2023
24001c7
Add title
jancernik Sep 13, 2023
2eff5b7
Update title
jancernik Sep 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 70 additions & 32 deletions assets/javascripts/discourse/initializers/discourse-calendar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,10 @@ function loadFullCalendar() {
);
}

let calendarPost;
let calendar;
pmusaraj marked this conversation as resolved.
Show resolved Hide resolved
let eventPopper;

const EVENT_POPOVER_ID = "event-popover";

function initializeDiscourseCalendar(api) {
Expand All @@ -30,6 +33,8 @@ function initializeDiscourseCalendar(api) {
return;
}

let enableTimezoneOffset = siteSettings.default_timezone_offset_user_option;
pmusaraj marked this conversation as resolved.
Show resolved Hide resolved

let _topicController;
const outletName = siteSettings.calendar_categories_outlet;

Expand Down Expand Up @@ -119,7 +124,7 @@ function initializeDiscourseCalendar(api) {

if (foundCategory) {
loadFullCalendar().then(() => {
let calendar = new window.FullCalendar.Calendar(
let fullCalendar = new window.FullCalendar.Calendar(
categoryEventNode,
{}
);
Expand All @@ -132,7 +137,7 @@ function initializeDiscourseCalendar(api) {

events[Object.keys(events)[0]].forEach((event) => {
const { starts_at, ends_at, post } = event;
calendar.addEvent({
fullCalendar.addEvent({
title: formatEventName(event),
start: starts_at,
end: ends_at || starts_at,
Expand All @@ -141,7 +146,7 @@ function initializeDiscourseCalendar(api) {
});
});

calendar.render();
fullCalendar.render();
});
});
}
Expand Down Expand Up @@ -228,26 +233,26 @@ function initializeDiscourseCalendar(api) {
$calendar = $calendar.empty();

const timezone = _getTimeZone($calendar, api.getCurrentUser());
const calendar = _buildCalendar($calendar, timezone);
const isStatic = $calendar.attr("data-calendar-type") === "static";
const fullDay = $calendar.attr("data-calendar-full-day") === "true";
calendar = _buildCalendar($calendar, timezone);

if (isStatic) {
calendar.render();
_setStaticCalendarEvents(calendar, $calendar, post);
_setStaticCalendarEvents($calendar, post);
} else {
_setDynamicCalendarEvents(calendar, post, fullDay, timezone);
_setDynamicCalendarEvents(post, fullDay, timezone);
calendar.render();
_setDynamicCalendarOptions(calendar, $calendar);
_setDynamicCalendarOptions($calendar);
}

const resetDynamicEvents = () => {
const selectedTimezone = calendar.getOption("timeZone");
calendar.getEvents().forEach((event) => event.remove());
_setDynamicCalendarEvents(calendar, post, fullDay, selectedTimezone);
_setDynamicCalendarEvents(post, fullDay, selectedTimezone);
};

_setupTimezonePicker(calendar, timezone, resetDynamicEvents);
_setupTimezonePicker(timezone, resetDynamicEvents);
}

function attachCalendar($elem, helper) {
Expand All @@ -256,8 +261,8 @@ function initializeDiscourseCalendar(api) {
if ($calendar.length === 0) {
return;
}

loadFullCalendar().then(() => render($calendar, helper.getModel()));
calendarPost = helper.getModel();
loadFullCalendar().then(() => render($calendar, calendarPost));
}

function _buildCalendar($calendar, timeZone) {
Expand Down Expand Up @@ -295,11 +300,21 @@ function initializeDiscourseCalendar(api) {
},
},
header: {
left: "prev,next today",
left: "prev,next today timezoneOffset",
center: "title",
right: "month,basicWeek,listNextYear",
},
eventOrder: ["start", _orderByTz, "-duration", "allDay", "title"],
customButtons:
siteSettings.enable_timezone_offset_for_calendar_events && {
timezoneOffset: {
text: "Timezone Offset",
jancernik marked this conversation as resolved.
Show resolved Hide resolved
click: () => {
toggleTimezoneOffset($calendar);
},
},
},

datesRender: (info) => {
if (showAddToCalendar) {
_insertAddToCalendarLinks(info);
Expand All @@ -314,8 +329,29 @@ function initializeDiscourseCalendar(api) {
});
}

function toggleTimezoneOffset($calendar) {
const button = document.querySelector(".fc-timezoneOffset-button");
enableTimezoneOffset = !enableTimezoneOffset;
if (enableTimezoneOffset) {
button.classList.add("fc-state-active");
button.classList.remove("fc-state-default");
} else {
button.classList.add("fc-state-default");
button.classList.remove("fc-state-active");
}

const fullDay = $calendar.attr("data-calendar-full-day") === "true";
const selectedTimezone = calendar.getOption("timeZone");

calendar.getEvents().forEach((event) => event.remove());
_setDynamicCalendarEvents(calendarPost, fullDay, selectedTimezone);
}

function _orderByTz(a, b) {
if (!siteSettings.enable_timezone_offset_for_calendar_events) {
if (
!siteSettings.enable_timezone_offset_for_calendar_events &&
!enableTimezoneOffset
) {
return 0;
}

Expand Down Expand Up @@ -385,7 +421,7 @@ function initializeDiscourseCalendar(api) {
return event;
}

function _setStaticCalendarEvents(calendar, $calendar, post) {
function _setStaticCalendarEvents($calendar, post) {
$(`<div>${post.cooked}</div>`)
.find('.calendar[data-calendar-type="static"] p')
.html()
Expand Down Expand Up @@ -441,7 +477,7 @@ function initializeDiscourseCalendar(api) {
document.getElementById(EVENT_POPOVER_ID)?.remove();
}

function _setDynamicCalendarOptions(calendar, $calendar) {
function _setDynamicCalendarOptions($calendar) {
const skipWeekends = $calendar.attr("data-weekends") === "false";
const hiddenDays = $calendar.attr("data-hidden-days");

Expand Down Expand Up @@ -514,7 +550,7 @@ function initializeDiscourseCalendar(api) {
return event;
}

function _addStandaloneEvent(calendar, post, detail) {
function _addStandaloneEvent(post, detail) {
const event = _buildEvent(detail);

const holidayCalendarTopicId = parseInt(
Expand Down Expand Up @@ -547,9 +583,11 @@ function initializeDiscourseCalendar(api) {
calendar.addEvent(event);
}

function _addGroupedEvent(calendar, post, detail, fullDay, calendarTz) {
function _addGroupedEvent(post, detail, fullDay, calendarTz) {
const groupedEventData =
siteSettings.enable_timezone_offset_for_calendar_events && fullDay
siteSettings.enable_timezone_offset_for_calendar_events &&
enableTimezoneOffset &&
fullDay
? _splitGroupEventByTimezone(detail, calendarTz)
: [detail];

Expand Down Expand Up @@ -681,7 +719,7 @@ function initializeDiscourseCalendar(api) {
});
}

function _setDynamicCalendarEvents(calendar, post, fullDay, calendarTz) {
function _setDynamicCalendarEvents(post, fullDay, calendarTz) {
const groupedEvents = [];
const calendarUtcOffset = moment.tz(calendarTz).utcOffset();

Expand All @@ -696,7 +734,10 @@ function initializeDiscourseCalendar(api) {
let from = moment.tz(detail.from, detail.timezone);
let to = moment.tz(detail.to, detail.timezone);

if (siteSettings.enable_timezone_offset_for_calendar_events) {
if (
siteSettings.enable_timezone_offset_for_calendar_events &&
enableTimezoneOffset
) {
const eventUtcOffset = moment.tz(detail.timezone).utcOffset();
const timezoneOffset = (calendarUtcOffset - eventUtcOffset) / 60;
eventDetail.timezoneOffset = timezoneOffset;
Expand All @@ -706,9 +747,9 @@ function initializeDiscourseCalendar(api) {
eventDetail.from = from.format("YYYY-MM-DD");
eventDetail.to = to.format("YYYY-MM-DD");

_addStandaloneEvent(calendar, post, eventDetail);
_addStandaloneEvent(post, eventDetail);
} else {
_addStandaloneEvent(calendar, post, detail);
_addStandaloneEvent(post, detail);
}
break;
}
Expand Down Expand Up @@ -750,13 +791,7 @@ function initializeDiscourseCalendar(api) {

Object.keys(formattedGroupedEvents).forEach((key) => {
const formattedGroupedEvent = formattedGroupedEvents[key];
_addGroupedEvent(
calendar,
post,
formattedGroupedEvent,
fullDay,
calendarTz
);
_addGroupedEvent(post, formattedGroupedEvent, fullDay, calendarTz);
});
}

Expand Down Expand Up @@ -785,15 +820,17 @@ function initializeDiscourseCalendar(api) {
return defaultTimezone || currentUser?.timezone || moment.tz.guess();
}

function _setupTimezonePicker(calendar, timezone, resetDynamicEvents) {
function _setupTimezonePicker(timezone, resetDynamicEvents) {
const tzPicker = document.querySelector(
".discourse-calendar-timezone-picker"
);
if (tzPicker) {
tzPicker.addEventListener("change", function (event) {
calendar.setOption("timeZone", event.target.value);
resetDynamicEvents();
_insertAddToCalendarLinks(calendar);
if (enableTimezoneOffset) {
resetDynamicEvents();
_insertAddToCalendarLinks(calendar);
}
});

moment.tz
Expand Down Expand Up @@ -826,6 +863,7 @@ function initializeDiscourseCalendar(api) {
function _setTimezoneOffset(info) {
if (
!siteSettings.enable_timezone_offset_for_calendar_events ||
!enableTimezoneOffset ||
info.view.type === "listNextYear"
) {
return;
Expand Down
4 changes: 4 additions & 0 deletions config/settings.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,10 @@ discourse_calendar:
default: 0
client: true
hidden: true
default_timezone_offset_user_option:
default: false
client: true
hidden: true

discourse_post_event:
discourse_post_event_enabled:
Expand Down
3 changes: 3 additions & 0 deletions test/javascripts/acceptance/timezone-offset-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,7 @@ acceptance("Discourse Calendar - Timezone Offset", function (needs) {
needs.settings({
calendar_enabled: true,
enable_timezone_offset_for_calendar_events: true,
default_timezone_offset_user_option: true,
});

needs.pretender((server, helper) => {
Expand Down Expand Up @@ -308,6 +309,7 @@ acceptance("Discourse Calendar - Splitted Grouped Events", function (needs) {
needs.settings({
calendar_enabled: true,
enable_timezone_offset_for_calendar_events: true,
default_timezone_offset_user_option: true,
split_grouped_events_by_timezone_threshold: 0,
});

Expand Down Expand Up @@ -340,6 +342,7 @@ acceptance("Discourse Calendar - Grouped Events", function (needs) {
needs.settings({
calendar_enabled: true,
enable_timezone_offset_for_calendar_events: true,
default_timezone_offset_user_option: true,
split_grouped_events_by_timezone_threshold: 2,
});

Expand Down