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/

 

[bernhard]

Needed this today while working on RockGrid.

Realised that the version above attaches an event listener for every created link but doesn't remove it later. So I improved this by listening on the "pw-modal-closed" event on the $link instead of the $(document). This didn't work at first, but I found out, that the culprit was that I instantly removed the $link after it has been clicked, so obviously there is no element any more to listen for the event. After moving the $link.remove() in the modal closed callback it worked as expected.

Here is the updated function that I use in RockCalendar:

  const openInModal = (href, options = {}) => {
    // merge options with defaults
    const defaults = {
      calendar: false,
      autoclose: true,
      buttons: "button.ui-button[type=submit]",
    };
    const opts = { ...defaults, ...options };

    // create a fake link element in body
    let link = document.createElement("a");
    let $link = $(link);
    $link.attr("href", href);
    $link.addClass("pw-modal rc-link-remove");
    if (opts.autoclose) $link.attr("data-autoclose", "");
    if (opts.buttons) $link.attr("data-buttons", opts.buttons);
    $link.on("click", pwModalOpenEvent);
    $link.on("pw-modal-closed", () => {
      if (opts.calendar) opts.calendar.refresh();
      $link.remove();
    });
    $link.click();
  };

A different approach is to add a second button (save + close) to the modal: