Programmatically calling mockup modal

Esoth · August 21, 2017, 7:34pm

I am trying to use the modal pattern in 5.0.5 as documented here http://plone.github.io/mockup/dev/#pattern/modal. Instead of opening the modal by clicking on a link I want it to be dependent on some javascript code so that if a bunch of conditionals are met it opens it. Is the best way to do this to just put in a hidden link and call $('#my-link').click()?

The problem I am running into is a race condition. I have some buttons on the modal where only one of them should be a redirect. Another just closes the thing, and a third makes an ajax call and then closes if that call returns true. I am able to do this by changing the .click of those buttons to prevent the default/etc. But this needs to run after the modal has actually fired, or the selectors will not find the button.

Is there a way to verify that the modal has been fully loaded before some code runs? Or is there a better way to get this desired functionality?

pigeonflight · August 21, 2017, 9:20pm

I'm going to answer you indirectly by showing you an example of how I used pat-modal programmatically. In the example I use Rapido.plone but that was just for convenience.

gist.github.com

https://gist.github.com/pigeonflight/2ccf1ccfeaee9215fa4bc4fd20a81852

custom.js

window.onload = setTimeout(function () {
document.querySelector("#my-modal .pat-plone-modal").click(); 
}, 5000);
// note the use of #my-modal before .pat-plone-modal this makes the selector specific to the
// modal you want, in case there may be other modals on the site.

custom.xml

<!-- custom rule for the modal it places it at the bottom of the site -->
<after css:theme-children="body">
       <include css:content="#my-modal" 
          href="@@rapido/modal/blocks/modal" />
</after>

rapido-modal.html

<!-- I would locate this file under
rapido/modal/blocks/modal.html
-->
<div id="my-modal">
<a href="#modal1" class="plone-btn plone-btn-large plone-btn-primary pat-plone-modal"
                     data-pat-modal="width: 400;"
                     >Modal basic</a>
   <div id="modal1" style="display: none">
     <h1>Basic modal!</h1>
     <p>Indeed. Whoa whoa whoa whoa. Wait.</p>

This file has been truncated. show original

Esoth · August 22, 2017, 2:42pm

That's basically what I had as a starting point but I don't think using setTimeout is a good solution. What I ended up doing is moving all of the javascript that relies on the modal being loaded into that modal template (it's an AJAX call). It would still be nice if there were a reliable event to listen to properly though.

seanupton · August 22, 2017, 3:51pm

MutationObserver might not be "proper" but could be reliable without asking anything of how the pattern is built?

davilima6 · August 22, 2017, 7:29pm

You can listen to 'show.plone-modal.patterns', see: https://github.com/plone/mockup/blob/master/mockup/tests/pattern-modal-test.js

Esoth · August 23, 2017, 2:12pm

This is exactly what I was looking for and works perfectly, thank you.