ui2022/schoolnow/modal--sidepanel.html.twig line 1

Open in your IDE?
  1. {% set attr = _args.attr|default({}) %}
  3. {% set attr = attr|merge({
  4.     class: 'sidepanel %s'|format(
  5.         attr.class|default('')
  6.     )|trim,
  7. }) %}
  9. {% set preserveScrool = _args.preserveScroll|default(false) %}
  11. <div {{ attributes(attr) }}>
  12.     <button type="button" class="sidepanel__control sidepanel__cancel" data-dismiss="sidepanel" title="Cancel">
  13.         <i class="icon-glyph-chevron-right"></i>
  14.     </button>
  15.     <div class="sidepanel__wrapper">
  16.         <div class="sidepanel__head sidepanel__head--cols">
  17.             {% block header %}{% endblock %}
  18.         </div>
  19.         <div class="sidepanel__content">
  20.             {% block content %}{% endblock %}
  21.         </div>
  22.     </div>
  23. </div>
  25. <script type="text/javascript">
  26.     (function (window, document, $, undefined) {
  27.         $(function () {
  28.             $('#{{ attr.id }}')
  30.                 // load up the start page when showing, only if a target page is set
  31.                 .on('show.cs.sidepanel', function (e) {
  32.                     var $modal = $(e.target),
  33.                         $trigger = $(e.relatedTarget);
  34.                     if ($trigger.length && $trigger.is('a[href][href!=""][href!="#"]:not([href^="#"])')) {
  35.                         let $form = $($trigger.data('form'));
  37.                         $modal
  38.                             .addClass('modal-ajax')
  39.                             .addClass('modal-ajax-loading')
  40.                             .trigger('navigate.cs.modal', {
  41.                                 url: $trigger.attr('href'),
  42.                                 data: $form ? $form.serialize() : null,
  43.                                 method: $form ? 'POST' : 'GET',
  44.                             });
  45.                     }
  46.                 })
  47.                 .on('shown.cs.sidepanel', function (e) {
  48.                     var $modal = $(e.target);
  49.                     $modal.removeClass('modal-ajax-loading');
  50.                 })
  52.                 // once hidden, wipe the html content
  53.                 .on('hidden.cs.sidepanel', function (e) {
  54.                     var $modal = $(e.target);
  55.                     if ($modal.is('.modal-ajax')) {
  56.                         $modal
  57.                             .removeClass('modal-ajax-loading')
  58.                             .removeClass('modal-ajax');
  59.                         $modal.find('.sidepanel__wrapper').html('');
  60.                     }
  61.                 })
  63.                 // special event handling for "navigating" within the modal
  64.                 .on('navigate.cs.modal', function (e, opts) {
  65.                     var $elem = $(e.target),// element the even is being triggered on, can be anything
  66.                         $modal = $('#{{ attr.id }}'),// get the modal wrapper/main element
  67.                         $ajax = $.ajax($.extend({}, {
  68.                             method: 'GET',
  69.                             xhrFields: {
  70.                                 withCredentials: true
  71.                             }
  72.                         }, opts));// ajax call to get the url
  74.                     // fade out the existing content
  75.                     $modal.find('.sidepanel__wrapper .sidepanel__content').addClass('ajax-disabled');
  77.                     // save the original scroll top value
  78.                     const $originalScrollTop = $modal.find('.sidepanel__content').scrollTop();
  80.                     // handle success
  81.                     $ajax.done(function (resp) {
  83.                         // TODO: wait for animation then set the html on the element
  84.                         $modal.find('.sidepanel__wrapper').html(resp);
  86.                         {% if preserveScrool %}
  87.                             $modal.find('.sidepanel__content').scrollTop($originalScrollTop);
  88.                         {% endif %}
  90.                     });
  92.                     // TODO: handle errors
  93.                     $ajax.fail(function () {
  94.                         //alert('ERROR!');
  95.                     });
  97.                     // fade the content back in when done
  98.                     $ajax.always(function () {
  100.                         // TODO: need to wait for animations
  101.                         $modal
  102.                             .removeClass('ajax-disabled');
  104.                         // scroll to the top of the modal
  105.                         // TODO: probably need to fix this...
  106.                         $modal.scrollTop(0);
  108.                         // in case we need to run things after a modal reload
  109.                         $modal.trigger('updated.cs.modal');
  111.                     });
  112.                 })
  114.                 // handle special event of form ajax submission
  115.                 .on('submission.cs.modal', function (e, opts) {
  116.                     var $elem = $(e.target),// the element that triggered the form load
  117.                         $modal = $('#{{ attr.id }}'),// get the modal wrapper/main element
  118.                         $ajax = $.ajax($.extend({}, {
  119.                             xhrFields: {
  120.                                 withCredentials: true
  121.                             }
  122.                         }, opts));// ajax call for the form submission
  124.                     // fade out the content
  125.                     $modal.find('.sidepanel__wrapper .sidepanel__content').addClass('ajax-disabled');
  127.                     // save the original scroll top value
  128.                     const $originalScrollTop = $modal.find('.sidepanel__content').scrollTop();
  130.                     // handle success
  131.                     $ajax.done(function (resp) {
  133.                         // check if we have an object or not
  134.                         // this chunk of code handles non-html returns
  135.                         // these special cases allow for basic redirection or modal closing
  136.                         if (typeof resp === 'object') {
  138.                             switch (true) {
  139.                                 // set a "close" key on the json object to TRUE in order to simply close the modal
  140.                                 // no page reload or anything will occur, the modal simply closes
  141.                                 case (resp.close === true):
  142.                                     $modal.trigger('do-hide.cs.sidepanel');
  143.                                     break;
  144.                                 // set a "redirect" key on the json object to TRUE in order to immediately reload the current URL in the browser
  145.                                 // this is useful for like modal form submissions
  146.                                 case (resp.redirect === true):
  147.                                     window.location.replace(window.location.origin + window.location.pathname + window.location.search);
  148.                                     break;
  149.                                 // the "redirect" key on the json object can also be set to a string
  150.                                 // in this case the string is expected to be a valid url pattern that the browser can understand
  151.                                 // this url will then be used to perform a redirection to the desired page
  152.                                 case (typeof resp.redirect === 'string'):
  153.                                     window.location.href = resp.redirect;
  154.                                     break;
  155.                             }
  157.                         } else {
  159.                             // TODO: wait for animation then set the html on the element
  160.                             $modal.find('.sidepanel__wrapper').html(resp);
  162.                             {% if preserveScrool %}
  163.                                 $modal.find('.sidepanel__content').scrollTop($originalScrollTop);
  164.                             {% endif %}
  165.                         }
  167.                     });
  169.                     // TODO: handle errors
  170.                     $ajax.fail(function () {
  171.                         //alert('ERROR!');
  172.                     });
  174.                     // fade the content back in when done
  175.                     $ajax.always(function () {
  177.                         // TODO: wait for animation...
  178.                         $modal
  179.                             .removeClass('ajax-disabled');
  181.                         // scroll to the top of the modal
  182.                         // TODO: probably need to handle this somehow...
  183.                         $modal.scrollTop(0);
  185.                         // in case we need to run things after a modal reload
  186.                         $modal.trigger('updated.cs.modal');
  188.                     });
  189.                 })
  190.             ;
  192.             // register click handlers in the modal to capture and process navigating to different "screens" in the modal
  193.             $('#{{ attr.id }}')
  195.                 // handle link clicks
  196.                 .on('click', 'a[target="_modal"][href][href!="#"]:not([href^="#"])', function (e) {
  197.                     var $link = $(e.currentTarget);// the link that was clicked
  199.                     // need to prevent the default behavior
  200.                     e.preventDefault();
  202.                     // due to using this in the page editor stuff, we also need to stop the click propagation
  203.                     e.stopPropagation();
  205.                     // trigger the navigation
  206.                     $link.trigger('navigate.cs.modal', {
  207.                         url: $link.attr('href')
  208.                     });
  210.                     // to be safe, also return false
  211.                     return false;
  213.                 })
  215.                 // handle form submissions, these need done through ajax otherwise the whole page will reload
  216.                 .on('submit', 'form[target="_modal"]', function (e) {
  217.                     var $form = $(e.currentTarget),// the form being submitted
  218.                         $button = (e.originalEvent) ? $(e.originalEvent.submitter) : $(),// input button, if any, that was used to submit the form
  219.                         data = $form.serializeArray();
  221.                     // add button if there is a name on it
  222.                     if ($button.attr('name')) {
  223.                         data.push({
  224.                             name: $button.attr('name'),
  225.                             value: ($button.attr('value')) ? $button.attr('value') : ''
  226.                         });
  227.                     }
  229.                     // we want to handle the submission, prevent the default
  230.                     e.preventDefault();
  232.                     // due to using this in the page editor stuff, we also need to stop the click propagation
  233.                     e.stopPropagation();
  235.                     // use the ajax submit
  236.                     $form.trigger('submission.cs.modal', {
  237.                         url: $button.attr('formaction') ? $button.attr('formaction') : $form.attr('action'),
  238.                         method: $button.attr('formmethod') ? $button.attr('formmethod') : $form.attr('method'),
  239.                         data: data
  240.                     });
  242.                     // to be safe, also return false
  243.                     return false;
  245.                 })
  246.             ;
  247.         });
  248.     })(window, document, jQuery);
  249. </script>
  251. <style type="text/css">
  252.     .modal-ajax.modal-ajax-loading .modal-content {
  253.         display: none !important;
  254.     }
  255. </style>