{% set attr = _args.attr|default({}) %}{% set dialog_styles = _args.dialog_styles|default(['centered', 'scrollable']) %}{% if dialog_styles is not iterable %} {% set dialog_styles = dialog_styles|split(' ') %}{% endif %}{% set attr = attr|merge({ class: 'modal modal-template modal--fullscreen fade %s'|format( attr.class|default('') )|trim, 'data-keyboard': 'true', tabindex: '-1', role: 'dialog',}) %}<div {{ attributes(attr) }}> <div class="modal-dialog modal-dialog-{{ dialog_styles|join(' modal-dialog-')|trim }}"> <div class="modal-content"> {% block content %}{% endblock %} </div> </div></div><script type="text/javascript"> (function (window, document, $, undefined) { $(function () { $('#{{ attr.id }}') // load up the start page when showing, only if a target page is set .on('show.bs.modal', function (e) { var $modal = $(e.target), $trigger = $(e.relatedTarget); if ($trigger.length && $trigger.is('a[href][href!=""][href!="#"]:not([href^="#"])')) { $modal .addClass('modal-ajax') .addClass('modal-ajax-loading') .trigger('navigate.cs.modal', { url: $trigger.attr('href') }); } }) .on('shown.bs.modal', function (e) { var $modal = $(e.target); $modal.removeClass('modal-ajax-loading'); }) // once hidden, wipe the html content .on('hidden.bs.modal', function (e) { var $modal = $(e.target); if ($modal.is('.modal-ajax')) { $modal .removeClass('modal-ajax-loading') .removeClass('modal-ajax'); $modal.find('.modal-content').html(''); } }) // special event handling for "navigating" within the modal .on('navigate.cs.modal', function (e, opts) { var $elem = $(e.target),// element the even is being triggered on, can be anything $modal = $('#{{ attr.id }}'),// get the modal wrapper/main element $ajax = $.ajax($.extend({}, { method: 'GET', xhrFields: { withCredentials: true } }, opts));// ajax call to get the url // fade out the existing content $modal.find('.modal-content .modal-body').addClass('ajax-disabled'); // handle success $ajax.done(function (resp) { // TODO: wait for animation then set the html on the element $modal.find('.modal-content').html(resp); }); // TODO: handle errors $ajax.fail(function () { //alert('ERROR!'); }); // fade the content back in when done $ajax.always(function () { // TODO: need to wait for animations $modal .removeClass('ajax-disabled') .modal('handleUpdate'); // scroll to the top of the modal $modal.scrollTop(0); // in case we need to run things after a modal reload $modal.trigger('updated.cs.modal'); }); }) // handle special event of form ajax submission .on('submission.cs.modal', function (e, opts) { var $elem = $(e.target),// the element that triggered the form load $modal = $('#{{ attr.id }}'),// get the modal wrapper/main element $ajax = $.ajax($.extend({}, { xhrFields: { withCredentials: true } }, opts));// ajax call for the form submission // fade out the content $modal.find('.modal-content .modal-body').addClass('ajax-disabled'); // handle success $ajax.done(function (resp) { // check if we have an object or not // this chunk of code handles non-html returns // these special cases allow for basic redirection or modal closing if (typeof resp === 'object') { switch (true) { // set a "close" key on the json object to TRUE in order to simply close the modal // no page reload or anything will occur, the modal simply closes case (resp.close === true): $modal.modal('hide'); break; // set a "redirect" key on the json object to TRUE in order to immediately reload the current URL in the browser // this is useful for like modal form submissions case (resp.redirect === true): window.location.replace(window.location.origin + window.location.pathname + window.location.search); break; // the "redirect" key on the json object can also be set to a string // in this case the string is expected to be a valid url pattern that the browser can understand // this url will then be used to perform a redirection to the desired page case (typeof resp.redirect === 'string'): window.location.href = resp.redirect; break; } } else { // TODO: wait for animation then set the html on the element $modal.find('.modal-content').html(resp); } }); // TODO: handle errors $ajax.fail(function () { //alert('ERROR!'); }); // fade the content back in when done $ajax.always(function () { // TODO: wait for animation... $modal .removeClass('ajax-disabled') .modal('handleUpdate'); // scroll to the top of the modal $modal.scrollTop(0); // in case we need to run things after a modal reload $modal.trigger('updated.cs.modal'); }); }) ; // register click handlers in the modal to capture and process navigating to different "screens" in the modal $('#{{ attr.id }}') // handle link clicks .on('click', 'a[target="_modal"][href][href!="#"]:not([href^="#"])', function (e) { var $link = $(e.currentTarget);// the link that was clicked // need to prevent the default behavior e.preventDefault(); // due to using this in the page editor stuff, we also need to stop the click propagation e.stopPropagation(); // trigger the navigation $link.trigger('navigate.cs.modal', { url: $link.attr('href') }); // to be safe, also return false return false; }) // handle form submissions, these need done through ajax otherwise the whole page will reload .on('submit', 'form[target="_modal"]', function (e) { var $form = $(e.currentTarget),// the form being submitted $button = (e.originalEvent) ? $(e.originalEvent.submitter) : $(),// input button, if any, that was used to submit the form data = $form.serializeArray(); // add button if there is a name on it if ($button.attr('name')) { data.push({ name: $button.attr('name'), value: ($button.attr('value')) ? $button.attr('value') : '' }); } // we want to handle the submission, prevent the default e.preventDefault(); // due to using this in the page editor stuff, we also need to stop the click propagation e.stopPropagation(); // use the ajax submit $form.trigger('submission.cs.modal', { url: $button.attr('formaction') ? $button.attr('formaction') : $form.attr('action'), method: $button.attr('formmethod') ? $button.attr('formmethod') : $form.attr('method'), data: data }); // to be safe, also return false return false; }) ; }); })(window, document, jQuery);</script><style type="text/css"> .modal-ajax.modal-ajax-loading .modal-content { display: none !important; }</style>