pat calendar: Support on events with a URL via set to .

Author: thet

CHANGES.md

@@ -37,6 +37,7 @@
 -   pat calendar: Allow filtering/hiding events based in comparing the checkbox id with the classes of the displayed events.
 -   pat calendar: Support `pat-inject` on events with a URL via `pat-inject-source` and `pat-inject-target` configuration options.
 -   pat calendar: Support `pat-switch` for rendered events via some configuration options.
+-   pat calendar: Support `pat-tooltip` on events with a URL via `pat-tooltip-source` set to `ajax`.
 -   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

@@ -63,6 +63,9 @@ parser.addArgument("event-sources", [], undefined, true);
 parser.addArgument("pat-inject-source", null);
 parser.addArgument("pat-inject-target", null);
 
+// pat-tooltip support for individual events
+parser.addArgument("pat-tooltip-source", null, ["ajax", null]);
+
 // pat-switch support for individual events
 parser.addArgument("pat-switch-selector", null);
 parser.addArgument("pat-switch-remove", null);
@@ -339,6 +342,14 @@ export default Base.extend({
             do_scan = true;
         }
 
+        // pat-tooltip support
+        if (args.event.url && this.options.pat["tooltip-source"] === "ajax") {
+            // Only set pat-tooltip if event has a url
+            args.el.classList.add("pat-tooltip");
+            args.el.setAttribute("data-pat-tooltip", "source: ajax");
+            do_scan = true;
+        }
+
         // pat-switch support
         const switch_sel = this.options.pat["switch-selector"];
         if (switch_sel) {

src/pat/calendar/calendar.test.js

@@ -303,6 +303,44 @@ describe("Calendar tests", () => {
         done();
     });
 
+    it("Loads events and initializes them with pat-tooltip", async (done) => {
+        // pat-inject is only set if event has a url.
+        const el = document.querySelector(".pat-calendar");
+        el.setAttribute(
+            "data-pat-calendar",
+            `initial-date: 2020-10-10;
+              url: ./test.json;
+              pat-tooltip-source: ajax;
+            `
+        );
+
+        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-tooltip")).toBe(false);
+        expect(event1.hasAttribute("data-pat-tooltip")).toBe(false);
+
+        expect(event2.classList.contains("pat-tooltip")).toBe(true);
+        expect(event2.getAttribute("data-pat-tooltip")).toBe("source: ajax"); // prettier-ignore
+
+        expect(event3.classList.contains("pat-tooltip")).toBe(false);
+        expect(event3.hasAttribute("data-pat-tooltip")).toBe(false);
+
+        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

@@ -66,4 +66,5 @@ The calendar can be configured through a `data-pat-calendar` attribute. The avai
 | `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                 |
+| `pat-tooltip-source`      | null              | null, "ajax"                                      | If set to "ajax" and a URL is configured for an displayed event, it will open the url in a tooltip.           | string                 |
 

src/pat/calendar/index.html

@@ -4,6 +4,11 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>Demo page</title>
     <link rel="stylesheet" href="/style/common.css" type="text/css">
+    <link
+        rel="stylesheet"
+        href="../../../node_modules/tippy.js/dist/tippy.css"
+        type="text/css"
+    />
     <script
         src="/dist/bundle.js"
         type="text/javascript"
@@ -22,6 +27,7 @@
                                 event-color: fuchsia;
                                 pat-inject-target: #event-info;
                                 pat-inject-source: #document-body;
+                                pat-tooltip-source: ajax;
                                 pat-switch-selector: #event-info;
                                 pat-switch-remove: event-info--inactive;
                                 pat-switch-add: event-info--active;