ui/twig/create/modals/full.html.twig line 1

Open in your IDE?
  1. {% set htmlId = _args.htmlId %}
  2. {% set ajax = _args.ajax %}
  3. {% set version = _args.version|default(null) %}
  5. <div class="v3_2">
  6.     <div id="{{ htmlId }}" class="modal modal--full" data-cs-modal-start="{{ ajax }}" tabindex="-1">
  7.         {% if version is not empty %}
  8.             <div class="modal__version"><span class="badge badge--beta">{{ version }}</span></div>
  9.         {% endif %}
  10.         <button class="modal__close" data-dismiss="modal">
  11.             <span></span>
  12.         </button>
  13.         <div class="modal__content"></div>
  14.     </div>
  15. </div>
  16. <script>
  17.     $(function () {
  18.         $('#{{ htmlId }}')
  20.             // load up the start page when showing
  21.             .on('show.bs.modal', function (e) {
  22.                 var $modal = $(e.target),
  23.                     url = $modal.attr('data-cs-modal-start');
  24.                 $modal.trigger('navigate.cs.modal', {
  25.                     url: url
  26.                 });
  27.             })
  29.             // once hidden, wipe the html content
  30.             .on('hidden.bs.modal', function (e) {
  31.                 var $modal = $(e.target);
  32.                 $modal.find('.modal__content').html('');
  33.             })
  35.             // special event handling for "navigating" within the modal
  36.             .on('navigate.cs.modal', function (e, opts) {
  37.                 var $elem = $(e.target),// element the even is being triggered on, can be anything
  38.                     $modal = $elem.closest('.modal'),// get the modal wrapper/main element
  39.                     $ajax = $.ajax(opts.url, {
  40.                         method: 'GET',
  41.                         xhrFields: {
  42.                             withCredentials: true
  43.                         }
  44.                     });// ajax call to get the url
  46.                 // fade out the existing content
  47.                 $modal.find('.modal__content').fadeOut(100);
  49.                 // handle success
  50.                 $ajax.done(function (resp, status, xhr) {
  52.                     // wait for animation then set the html on the element
  53.                     $modal.find('.modal__content').promise().done(function () {
  54.                         $(this).html(resp);
  55.                     });
  57.                 });
  59.                 // TODO: handle errors
  60.                 $ajax.fail(function () {
  61.                     //alert('ERROR!');
  62.                 });
  64.                 // fade the content back in when done
  65.                 $ajax.always(function () {
  66.                     $modal.find('.modal__content').promise().done(function () {
  67.                         $(this).fadeIn(100);
  68.                     });
  69.                 });
  70.             })
  72.             // handle special event of form ajax submission
  73.             .on('submission.cs.modal', function (e, opts) {
  74.                 var $elem = $(e.target),// the element that triggered the form load
  75.                     $modal = $elem.closest('.modal'),// the modal wrapper
  76.                     $ajax = $.ajax(opts.url, {
  77.                         method: opts.method,
  78.                         data: opts.data,
  79.                         xhrFields: {
  80.                             withCredentials: true
  81.                         }
  82.                     });// ajax call for the form submission
  84.                 // fade out the content
  85.                 $modal.find('.modal__content').fadeOut(100);
  87.                 // handle success
  88.                 $ajax.done(function (resp, status, xhr) {
  90.                     // wait for animation then set the html on the element
  91.                     $modal.find('.modal__content').promise().done(function () {
  92.                         $(this).html(resp);
  93.                     });
  95.                 });
  97.                 // TODO: handle errors
  98.                 $ajax.fail(function () {
  99.                     //alert('ERROR!');
  100.                 });
  102.                 // fade the content back in when done
  103.                 $ajax.always(function () {
  104.                     $modal.find('.modal__content').promise().done(function () {
  105.                         $(this).fadeIn(100);
  106.                     });
  107.                 });
  108.             })
  109.         ;
  111.         // register click handlers in the modal to capture and process navigating to different "screens" in the modal
  112.         $('#{{ htmlId }} .modal__content')
  114.             // hide the content, it will fade in when loaded
  115.             .hide()
  117.             // handle links
  118.             .on('click', 'a', function (e) {
  119.                 var $link = $(e.currentTarget),// the link that was clicked
  120.                     href = $link.attr('href'),// the href attribute of the link, if any
  121.                     target = $link.attr('target');// the target value
  123.                 // if we have an href attribute and the target is self; we are treating self as if the modal is an iframe
  124.                 if (href && ( ! target || target === '_self')) {
  126.                     // need to prevent the default behavior
  127.                     e.preventDefault();
  129.                     // if the href is legit follow it via modal navigation (ajax load and inject response into modal content)
  130.                     if (href && href !== '#') {
  132.                         // due to using this in the page editor stuff, we also need to stop the click propagation
  133.                         e.stopPropagation();
  135.                         // trigger the navigation
  136.                         $link.trigger('navigate.cs.modal', {
  137.                             url: href
  138.                         });
  140.                         // to be safe, also return false
  141.                         return false;
  143.                     }
  145.                 }
  146.             })
  148.             // handle for submissions
  149.             .on('submit', 'form', function (e) {
  150.                 var $form = $(e.currentTarget),// the form being submitted
  151.                     $button = (e.originalEvent) ? $(e.originalEvent.submitter) : $(''),// input button, if any, that was used to submit the form
  152.                     target = $form.attr('target'),// target value of the form
  153.                     data = $form.serializeArray();
  155.                 // add button if there is a name
  156.                 if ($button.attr('name')) {
  157.                     data.push({
  158.                         name: $button.attr('name'),
  159.                         value: ($button.attr('value')) ? $button.attr('value') : ''
  160.                     });
  161.                 }
  163.                 // make sure that the target is one we are concerned with
  164.                 if ( ! target || target === '_self') {
  166.                     // we want to handle the submission, prevent the default
  167.                     e.preventDefault();
  169.                     // due to using this in the page editor stuff, we also need to stop the click propagation
  170.                     e.stopPropagation();
  172.                     // use the ajax submit
  173.                     $form.trigger('submission.cs.modal', {
  174.                         url: $form.attr('action'),
  175.                         method: $form.attr('method'),
  176.                         data: data
  177.                     });
  179.                     // to be safe, also return false
  180.                     return false;
  182.                 }
  183.             })
  184.         ;
  185.     });
  186. </script>