Merge pull request #810 from Patternslib/calendar-tooltip

pat calendar: Support pat-tooltip

Author: thet

CHANGES.md

@@ -37,7 +37,10 @@
 -   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 calendar: Support `url` in the event JSON model additionally to `@id`.
+    The unique identifier is often not semantically correct for a URL to the item, especially when we want to call a specific view.
 -   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.
 -   pat tooltip: set content when mounting to avoid positioning problems.

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);
@@ -240,7 +243,7 @@ export default Base.extend({
             start: new Date(event.start),
             end: new Date(event.end),
             allDay: event.whole_day,
-            url: event["@id"],
+            url: event.url || event["@id"],
 
             backgroundColor: event.color,
             borderColor: event.color,
@@ -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

@@ -19,9 +19,11 @@ const mockFetch = () =>
                         "@id": "./test_event.html",
                     },
                     {
-                        title: "Event 3",
-                        start: "2020-10-14",
-                        end: "2020-10-16",
+                        "title": "Event 3",
+                        "start": "2020-10-14",
+                        "end": "2020-10-16",
+                        "@id": "./test_event.html",
+                        "url": "./@@test-event",
                     },
                 ],
             }),
@@ -249,7 +251,7 @@ describe("Calendar tests", () => {
 
         expect(event1.href).toBeFalsy();
         expect(event2.href).toBe("http://localhost/test_event.html");
-        expect(event3.href).toBeFalsy();
+        expect(event3.href).toBe("http://localhost/@@test-event");
 
         global.fetch.mockClear();
         delete global.fetch;
@@ -293,16 +295,54 @@ describe("Calendar tests", () => {
         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(false);
+        expect(event3.classList.contains("pat-inject")).toBe(true);
         expect(event3.classList.contains("pat-switch")).toBe(true);
-        expect(event3.hasAttribute("data-pat-inject")).toBe(false);
+        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 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(true);
+        expect(event3.getAttribute("data-pat-tooltip")).toBe("source: ajax"); // 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

@@ -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;