How to open a modal window from JavaScript

[bernhard]

I'm working on RockCalendar which will be released soon if everything goes smoothly 😎 I think it should be stable enough next month. If you want to get notified you can subscribe to the Rock Monthly Newsletter.

The module uses https://fullcalendar.io/ for the calendar interface and when clicking an event it will open the page editor in a pw modal:

Opening the modal was a bit of a challenge, because PW unfortunately does not offer a good JS API to open modals. It only offers markup-based options to control the behaviour of the modal - at least as far as I could find out.

This is a problem, because all events in the calendar get loaded by fullcalendar and I only have the eventClick() callback where I need to fire my action. My solution is to create a fake element in the dom and trigger a click on that element:

      calendar.on("eventClick", (info) => {
        // create a fake link element in body
        let link = document.createElement("a");
        let $link = $(link);
        $link.attr(
          "href",
          ProcessWire.config.urls.admin + "page/edit/?id=" + info.event.id
        );
        $link.addClass("pw-modal");
        $link.attr("data-autoclose", "");
        $link.attr("data-buttons", "button.ui-button[type=submit]");
        $link.on("click", pwModalOpenEvent);
        $(document).on("pw-modal-closed", this.refresh.bind(this));
        $link.click();
        $link.remove();
      });

Maybe that helps anyone else looking for a solution to a similar problem.

If anybody knows a better way how to do it, please let me know!

PS: If you have input (feature requests) for the development of RockCalendar please let me know: https://processwire.com/talk/topic/30355-request-for-input-what-features-should-a-pw-calendar-module-have/