Merge pull request #1070 from ae-utbm/calendar-link

Remote calendar link for external sync

com/ics_calendar.py

@@ -1,9 +1,11 @@
 from pathlib import Path
-from typing import final
 
 from dateutil.relativedelta import relativedelta
 from django.conf import settings
+from django.contrib.sites.models import Site
+from django.contrib.syndication.views import add_domain
 from django.db.models import F, QuerySet
+from django.http import HttpRequest
 from django.urls import reverse
 from django.utils import timezone
 from ical.calendar import Calendar
@@ -14,7 +16,14 @@ from com.models import NewsDate
 from core.models import User
 
 
-@final
+def as_absolute_url(url: str, request: HttpRequest | None = None) -> str:
+    return add_domain(
+        Site.objects.get_current(request=request),
+        url,
+        secure=request.is_secure() if request is not None else settings.HTTPS,
+    )
+
+
 class IcsCalendar:
     _CACHE_FOLDER: Path = settings.MEDIA_ROOT / "com" / "calendars"
     _INTERNAL_CALENDAR = _CACHE_FOLDER / "internal.ics"
@@ -58,7 +67,9 @@ class IcsCalendar:
                 summary=news_date.news_title,
                 start=news_date.start_date,
                 end=news_date.end_date,
-                url=reverse("com:news_detail", kwargs={"news_id": news_date.news.id}),
+                url=as_absolute_url(
+                    reverse("com:news_detail", kwargs={"news_id": news_date.news.id})
+                ),
             )
             calendar.events.append(event)
 

com/static/bundled/com/components/ics-calendar-index.ts

@@ -44,7 +44,18 @@ export class IcsCalendar extends inheritHtmlElement("div") {
     return this.isMobile() ? "listMonth" : "dayGridMonth";
   }
 
-  currentToolbar() {
+  currentFooterToolbar() {
+    if (this.isMobile()) {
+      return {
+        start: "",
+        center: "getCalendarLink",
+        end: "",
+      };
+    }
+    return { start: "getCalendarLink", center: "", end: "" };
+  }
+
+  currentHeaderToolbar() {
     if (this.isMobile()) {
       return {
         left: "prev,next",
@@ -303,14 +314,44 @@ export class IcsCalendar extends inheritHtmlElement("div") {
     this.calendar = new Calendar(this.node, {
       plugins: [dayGridPlugin, iCalendarPlugin, listPlugin],
       locales: [frLocale, enLocale],
+      customButtons: {
+        getCalendarLink: {
+          text: gettext("Copy calendar link"),
+          click: async (event: Event) => {
+            const button = event.target as HTMLButtonElement;
+            button.classList.add("text-copy");
+            if (!button.hasAttribute("position")) {
+              button.setAttribute("tooltip", gettext("Link copied"));
+              button.setAttribute("position", "top");
+              button.setAttribute("no-hover", "");
+            }
+            if (button.classList.contains("text-copied")) {
+              button.classList.remove("text-copied");
+            }
+            navigator.clipboard.writeText(
+              new URL(
+                await makeUrl(calendarCalendarInternal),
+                window.location.origin,
+              ).toString(),
+            );
+            setTimeout(() => {
+              button.classList.remove("text-copied");
+              button.classList.add("text-copied");
+              button.classList.remove("text-copy");
+            }, 1500);
+          },
+        },
+      },
       height: "auto",
       locale: this.locale,
       initialView: this.currentView(),
-      headerToolbar: this.currentToolbar(),
+      headerToolbar: this.currentHeaderToolbar(),
+      footerToolbar: this.currentFooterToolbar(),
       eventSources: await this.getEventSources(),
       windowResize: () => {
         this.calendar.changeView(this.currentView());
-        this.calendar.setOption("headerToolbar", this.currentToolbar());
+        this.calendar.setOption("headerToolbar", this.currentHeaderToolbar());
+        this.calendar.setOption("footerToolbar", this.currentFooterToolbar());
       },
       eventClick: (event) => {
         // Avoid our popup to be deleted because we clicked outside of it

com/static/com/components/ics-calendar.scss

@@ -98,4 +98,26 @@ ics-calendar {
       background: white;
     }
   }
+
+  .fc .fc-toolbar.fc-footer-toolbar {
+    margin-bottom: 0.5em;
+  }
+
+  button.text-copy,
+  button.text-copy:focus,
+  button.text-copy:hover {
+    background-color: #67AE6E !important;
+    transition: 500ms ease-in;
+  }
+
+  button.text-copied,
+  button.text-copied:focus,
+  button.text-copied:hover {
+    transition: 500ms ease-out;
+  }
+
+  button.text-copied[tooltip]::before {
+    opacity: 0;
+    transition: opacity 500ms ease-out;
+  }
 }