pat calendar: Support for rendered events via some configuration options.

Author: thet

CHANGES.md

@@ -36,6 +36,8 @@
 -   pat calendar: Fetch events from the backend.
 -   pat calendar: Allow filtering/hiding events based in comparing the checkbox id with the classes of the displayed events.
 -   pat calendar: Support injection of events when clicking on and event rather than redirecting to them.
+    Done by adding `pat-inject` to rendered events via some configuration options.
+-   pat calendar: Support `pat-switch` for rendered events via some configuration options.
 -   pat calendar: Store view, date and active categories per URL, allowing to individually customize the calendar per page.
 -   pat tooltip: Use tippy v6 based implementation.
 -   pat tooltip: Introduce new option ``arrowPadding`` to define the padding of the box arrow from the corners of the tooltip.

src/pat/calendar/calendar.js

@@ -59,9 +59,15 @@ parser.addArgument("url", null);
 parser.addArgument("event-sources", [], undefined, true);
 //parser.addArgument("add-url", null);
 
+// pat-inject support for individual events
 parser.addArgument("pat-inject-source", null);
 parser.addArgument("pat-inject-target", null);
 
+// pat-switch support for individual events
+parser.addArgument("pat-switch-selector", null);
+parser.addArgument("pat-switch-remove", null);
+parser.addArgument("pat-switch-add", null);
+
 parser.addAlias("default-date", "initial-date");
 parser.addAlias("default-view", "initial-view");
 
@@ -317,16 +323,38 @@ export default Base.extend({
 
     init_event(args) {
         this.filter_event(args.event);
-        let source = this.options.pat["inject-source"];
-        let target = this.options.pat["inject-target"];
+
+        let do_scan = false;
+
+        // pat-inject support
+        const source = this.options.pat["inject-source"];
+        const target = this.options.pat["inject-target"];
         if (source || target) {
-            source = source || "body";
-            target = target || "body";
             args.el.classList.add("pat-inject");
             args.el.setAttribute(
                 "data-pat-inject",
-                `target: ${target}; source: ${source}`
+                `target: ${target || "body"}; source: ${source || "body"}`
+            );
+            do_scan = true;
+        }
+
+        // pat-switch support
+        const switch_sel = this.options.pat["switch-selector"];
+        if (switch_sel) {
+            const switch_add = this.options.pat["switch-add"];
+            const switch_rm = this.options.pat["switch-remove"];
+
+            args.el.classList.add("pat-switch");
+            args.el.setAttribute(
+                "data-pat-switch",
+                `selector: ${switch_sel}${
+                    switch_add ? "; add: " + switch_add : ""
+                }${switch_rm ? "; remove: " + switch_rm : ""}`
             );
+            do_scan = true;
+        }
+
+        if (do_scan) {
             registry.scan(args.el);
         }
     },

src/pat/calendar/calendar.test.js

@@ -256,6 +256,52 @@ describe("Calendar tests", () => {
         done();
     });
 
+    it("Loads events and initializes them with pat-inject and pat-switch", async (done) => {
+        const el = document.querySelector(".pat-calendar");
+        el.setAttribute(
+            "data-pat-calendar",
+            `initial-date: 2020-10-10;
+            url: ./test.json;
+            pat-inject-target: #event-info;
+            pat-inject-source: #document-body;
+            pat-switch-selector: #event-info;
+            pat-switch-remove: event-info--inactive;
+            pat-switch-add: event-info--active`
+        );
+
+        global.fetch = jest.fn().mockImplementation(mockFetch);
+
+        registry.scan(document.body);
+        await utils.timeout(1); // wait a tick for async to settle.
+
+        const events = [...document.querySelectorAll(".fc-event-title")];
+
+        const event1 = events.filter((it) => it.textContent === "Event 1")[0].closest(".fc-event"); // prettier-ignore
+        const event2 = events.filter((it) => it.textContent === "Event 2")[0].closest(".fc-event"); // prettier-ignore
+        const event3 = events.filter((it) => it.textContent === "Event 3")[0].closest(".fc-event"); // prettier-ignore
+
+        console.log(event3.outerHTML);
+
+        expect(event1.classList.contains("pat-inject")).toBe(true);
+        expect(event1.classList.contains("pat-switch")).toBe(true);
+        expect(event1.getAttribute("data-pat-inject")).toBe("target: #event-info; source: #document-body"); // prettier-ignore
+        expect(event1.getAttribute("data-pat-switch")).toBe("selector: #event-info; add: event-info--active; remove: event-info--inactive"); // prettier-ignore
+
+        expect(event2.classList.contains("pat-inject")).toBe(true);
+        expect(event2.classList.contains("pat-switch")).toBe(true);
+        expect(event2.getAttribute("data-pat-inject")).toBe("target: #event-info; source: #document-body"); // prettier-ignore
+        expect(event2.getAttribute("data-pat-switch")).toBe("selector: #event-info; add: event-info--active; remove: event-info--inactive"); // prettier-ignore
+
+        expect(event3.classList.contains("pat-inject")).toBe(true);
+        expect(event3.classList.contains("pat-switch")).toBe(true);
+        expect(event3.getAttribute("data-pat-inject")).toBe("target: #event-info; source: #document-body"); // prettier-ignore
+        expect(event3.getAttribute("data-pat-switch")).toBe("selector: #event-info; add: event-info--active; remove: event-info--inactive"); // prettier-ignore
+
+        global.fetch.mockClear();
+        delete global.fetch;
+        done();
+    });
+
     it("Loads correct date if set in query string", async (done) => {
         const el = document.querySelector(".pat-calendar");
         el.setAttribute("data-pat-calendar", "timezone: Europe/Berlin");

src/pat/calendar/documentation.md

@@ -61,5 +61,9 @@ The calendar can be configured through a `data-pat-calendar` attribute. The avai
 | `title-week`              | MMM D YYYY        |                                                   |
 | `url`                     |                   |                                                   | URL to an event source as JSON feed.
 | `event-color`             | blue              | Any CSS color value                               | Default color of events.
-| `pat-inject-source`       |                   | CSS selector                                      | If clicking on an event this selector identifies which section of the loaded event to inject.
-| `pat-inject-target`       |                   | CSS selector                                      | If clicking on an event this selector identifies where to inject the loaded content.
+| `pat-inject-source`       |                   | CSS selector                                      | If clicking on an event this selector identifies which section of the loaded event to inject.                 | string                 |
+| `pat-inject-target`       |                   | CSS selector                                      | If clicking on an event this selector identifies where to inject the loaded content.                          | string                 |
+| `pat-switch-selector`     |                   | CSS selector                                      | Defines the element on which pat-select should operate on.                                                    | string                 |
+| `pat-switch-add`          |                   | CSS class name                                    | Defines the class name to be added.                                                                           | string                 |
+| `pat-switch-remove`       |                   | CSS class name                                    | Defines the class name to be removed.                                                                         | string                 |
+

src/pat/calendar/index.html

@@ -12,14 +12,19 @@
 </head>
 <body>
     <div class="calendar-main">
+        <div id="event-info" class="event-info--inactive">event info here!</div>
 
         <div class="pat-calendar"
              data-pat-calendar="category-controls: .cal-categories;
                                 event-sources: ./test_event_source.json,./test_event_source2.json;
-                                event-sources-classes: internal-calendar, external-calendar;
                                 add-url: ./test_add_event.html;
                                 initial-date: 2020-10-10;
                                 event-color: fuchsia;
+                                pat-inject-target: #event-info;
+                                pat-inject-source: #document-body;
+                                pat-switch-selector: #event-info;
+                                pat-switch-remove: event-info--inactive;
+                                pat-switch-add: event-info--active;
                                 lang: en;
                                 store: local;">
             <form class="pat-toolbar cal-toolbar pat-form"
@@ -121,6 +126,12 @@
         .calendar-hidden {
             display: none !important;
         }
+        .event-info--inactive {
+          color: grey;
+        }
+        .event-info--active {
+          background: lightblue;
+        }
     </style>
 
 </body>

src/pat/calendar/test_event.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Test event</title>
+  </head>
+  <body>
+    <div id="document-body">
+      hello i'm some detail infor for a test event
+    </div>
+  </body>
+</html>