diff --git a/CHANGES.md b/CHANGES.md
index 4fcedd916..e5bec4986 100644
--- a/CHANGES.md
+++ b/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.
diff --git a/src/pat/calendar/calendar.js b/src/pat/calendar/calendar.js
index c5420088b..c2ee14050 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);
@@ -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) {
diff --git a/src/pat/calendar/calendar.test.js b/src/pat/calendar/calendar.test.js
index ec7a9e30e..127e4ad5a 100644
--- a/src/pat/calendar/calendar.test.js
+++ b/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,9 +295,9 @@ 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();
@@ -303,6 +305,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(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");
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
+