From 493e1bea91f74368d9d979fcf3bf3756cbd347c7 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Wed, 17 Feb 2021 09:46:28 +0100 Subject: [PATCH 1/2] pat calendar: Support on events with a URL via set to . --- CHANGES.md | 1 + src/pat/calendar/calendar.js | 11 +++++++++ src/pat/calendar/calendar.test.js | 38 +++++++++++++++++++++++++++++++ src/pat/calendar/documentation.md | 1 + src/pat/calendar/index.html | 6 +++++ 5 files changed, 57 insertions(+) diff --git a/CHANGES.md b/CHANGES.md index 4fcedd916..e3b236976 100644 --- a/CHANGES.md +++ b/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. diff --git a/src/pat/calendar/calendar.js b/src/pat/calendar/calendar.js index c5420088b..226041cbb 100644 --- a/src/pat/calendar/calendar.js +++ b/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) { diff --git a/src/pat/calendar/calendar.test.js b/src/pat/calendar/calendar.test.js index ec7a9e30e..c68039464 100644 --- a/src/pat/calendar/calendar.test.js +++ b/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"); diff --git a/src/pat/calendar/documentation.md b/src/pat/calendar/documentation.md index 3b8fa0874..de48f8723 100644 --- a/src/pat/calendar/documentation.md +++ b/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 | diff --git a/src/pat/calendar/index.html b/src/pat/calendar/index.html index 0e0d7630f..47e4c4be6 100644 --- a/src/pat/calendar/index.html +++ b/src/pat/calendar/index.html @@ -4,6 +4,11 @@ Demo page +