From eb308806869e647c1f1d11b4459823559f80e650 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Wed, 27 Jan 2021 09:33:33 +0100 Subject: [PATCH 1/3] pat-calendar: Deactivate some more event-add related code paths if not needed. --- src/pat/calendar/calendar.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/pat/calendar/calendar.js b/src/pat/calendar/calendar.js index 851c7e048..f60d262e8 100644 --- a/src/pat/calendar/calendar.js +++ b/src/pat/calendar/calendar.js @@ -147,8 +147,6 @@ export default Base.extend({ ]; config.eventColor = opts.eventColor; - config.dateClick = this.addNewEvent.bind(this); - let lang = opts.lang || document.querySelector("html").getAttribute("lang") || @@ -196,10 +194,13 @@ export default Base.extend({ cal_el.setAttribute("class", "pat-calendar__fc"); el.appendChild(cal_el); - // Create a element for modals/injections - this.mod_el = document.createElement("section"); - this.mod_el.setAttribute("class", "pat-calendar__modal"); - el.appendChild(this.mod_el); + if (opts.addUrl) { + config.dateClick = this.addNewEvent.bind(this); + // Create a element for modals/injections + this.mod_el = document.createElement("section"); + this.mod_el.setAttribute("class", "pat-calendar__modal"); + el.appendChild(this.mod_el); + } let calendar = (this.calendar = new Calendar(cal_el, config)); calendar.render(); From dc07b4335d9c773954e88669e6de9acdc66bd53b Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Wed, 27 Jan 2021 11:19:46 +0100 Subject: [PATCH 2/3] pat-calendar: Do not include properties not existent in the event source. Avoids problem of setting a href attribute of undefined in the calendar. --- src/pat/calendar/calendar.js | 5 ++++ src/pat/calendar/calendar.test.js | 34 ++++++++++++++++++++++--- src/pat/calendar/test_event_source.json | 6 +++-- 3 files changed, 40 insertions(+), 5 deletions(-) diff --git a/src/pat/calendar/calendar.js b/src/pat/calendar/calendar.js index f60d262e8..862c77ad1 100644 --- a/src/pat/calendar/calendar.js +++ b/src/pat/calendar/calendar.js @@ -252,6 +252,11 @@ export default Base.extend({ contact_email: event.contact_email, event_url: event.event_url, }; + for (const prop in ret) { + if (!ret[prop]) { + delete ret[prop]; + } + } return ret; }, diff --git a/src/pat/calendar/calendar.test.js b/src/pat/calendar/calendar.test.js index aba676ea6..0f2e9d069 100644 --- a/src/pat/calendar/calendar.test.js +++ b/src/pat/calendar/calendar.test.js @@ -13,9 +13,10 @@ const mockFetch = () => end: "2020-10-10T12:00:00Z", }, { - title: "Event 2", - start: "2020-10-12", - end: "2020-10-12", + "title": "Event 2", + "start": "2020-10-12", + "end": "2020-10-12", + "@id": "./test_event.html", }, { title: "Event 3", @@ -228,6 +229,33 @@ describe("Calendar tests", () => { done(); }); + it("Loads events and does not set the href if not present", async (done) => { + const el = document.querySelector(".pat-calendar"); + el.setAttribute( + "data-pat-calendar", + "initial-date: 2020-10-10; url: ./test.json;" + ); + + 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 + + expect(event1.href).toBeFalsy(); + expect(event2.href).toBe("http://localhost/test_event.html"); + expect(event3.href).toBeFalsy(); + + 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/test_event_source.json b/src/pat/calendar/test_event_source.json index a33a31f60..268e3156a 100644 --- a/src/pat/calendar/test_event_source.json +++ b/src/pat/calendar/test_event_source.json @@ -4,13 +4,15 @@ "title": "Event 1", "start": "2020-10-10T10:00:00", "end": "2020-10-10T12:00:00", - "class": "hello-class-1 hello-class-2 calendar-section1-category1" + "class": "hello-class-1 hello-class-2 calendar-section1-category1", + "@id": "./test_event.html" }, { "title": "Event 2", "start": "2020-10-12", "end": "2020-10-12", - "class": "calendar-section1-category2" + "class": "calendar-section1-category2", + "@id": "./test_event.html" }, { "title": "Event 3", From 005f774601f22db64c9a1d99468740a30cf86b6e Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Wed, 27 Jan 2021 12:04:46 +0100 Subject: [PATCH 3/3] pat calendar: Support for rendered events via some configuration options. --- CHANGES.md | 2 ++ src/pat/calendar/calendar.js | 38 +++++++++++++++++++++---- src/pat/calendar/calendar.test.js | 46 +++++++++++++++++++++++++++++++ src/pat/calendar/documentation.md | 8 ++++-- src/pat/calendar/index.html | 13 ++++++++- src/pat/calendar/test_event.html | 12 ++++++++ 6 files changed, 111 insertions(+), 8 deletions(-) create mode 100644 src/pat/calendar/test_event.html diff --git a/CHANGES.md b/CHANGES.md index 03bb28d5f..9cfdafba0 100644 --- a/CHANGES.md +++ b/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. diff --git a/src/pat/calendar/calendar.js b/src/pat/calendar/calendar.js index 862c77ad1..f7bed4bbf 100644 --- a/src/pat/calendar/calendar.js +++ b/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); } }, diff --git a/src/pat/calendar/calendar.test.js b/src/pat/calendar/calendar.test.js index 0f2e9d069..9935f3cb5 100644 --- a/src/pat/calendar/calendar.test.js +++ b/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"); diff --git a/src/pat/calendar/documentation.md b/src/pat/calendar/documentation.md index 4967d881d..3b8fa0874 100644 --- a/src/pat/calendar/documentation.md +++ b/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 | + diff --git a/src/pat/calendar/index.html b/src/pat/calendar/index.html index 1bbbe7351..0605e9bff 100644 --- a/src/pat/calendar/index.html +++ b/src/pat/calendar/index.html @@ -12,14 +12,19 @@
+
event info here!
diff --git a/src/pat/calendar/test_event.html b/src/pat/calendar/test_event.html new file mode 100644 index 000000000..d23463d4c --- /dev/null +++ b/src/pat/calendar/test_event.html @@ -0,0 +1,12 @@ + + + + + Test event + + +
+ hello i'm some detail infor for a test event +
+ +