src/AppBundle/Resources/views/ContentBlock/banner.html.twig line 1

Open in your IDE?
  1. <div class="page-banner" id="banner-main">
  2.     <div class="row position-relative overflow-hidden text-center">
  3.         {% if bannerSlides %}
  4.             <div class="glide {% if bannerSlides|length > 1 %}glide-enabled{% endif %}">
  5.                 <div class="glide__track" data-glide-el="track">
  6.                     <ul class="glide__slides">
  7.                         {% for slide in bannerSlides %}
  8.                             <li id="slide-{{ slide.id }}" class="glide__slide">
  9.                               {% if slide.isVideo %}
  10.                                 <a href="{% if slide.link %}{{ slide.link }}{% else %}#{% endif %}">
  11.                                   <video class="w-100" loop autoplay><source src="{{ slide.url }}"></video>
  12.                                 </a>
  13.                               {% else %}
  14.                                 <a href="{% if slide.link %}{{ slide.link }}{% else %}#{% endif %}"
  15.                                    style="background-image: url('{{ slide.url }}')">
  16.                                 </a>
  17.                               {% endif %}
  18.                             </li>
  19.                         {% endfor %}
  20.                     </ul>
  21.                 </div>
  22.                 {% if bannerSlides|length > 1 %}
  23.                   <div class="glide__controls-container" data-glide-el="controls">
  24.                       <div class="glide__controls-item" data-glide-dir="<"><img class="glide__controls-img" src="{{ asset('bundles/app/images/controls_left.png') }}" alt=""/></div>
  25.                       <div class="glide__controls-item" data-glide-dir=">"><img class="glide__controls-img" src="{{ asset('bundles/app/images/controls_right.png') }}" alt=""/></div>
  26.                   </div>
  27.                   <div class="glide__bullets-container"></div>
  28.                 {% endif %}
  29.             </div>
  30.         {% endif %}
  31.     </div>
  32. </div>
  34. {% if subPageBanners is defined %}
  35.     {% for id, tabBanner in subPageBanners %}
  36.         <div class="page-banner {% if tabBanner|length <= 1 %}hidden{% endif %}" id="banner-{{ id }}">
  37.             <div class="row position-relative overflow-hidden text-center">
  38.                 <div class="glide {% if tabBanner|length > 1 %}glide-enabled{% endif %}">
  39.                     <div class="glide__track" data-glide-el="track">
  40.                         <ul class="glide__slides">
  41.                             {% for slide in tabBanner %}
  42.                                 <li id="slide-{{ slide.id }}" class="glide__slide">
  43.                                   {% if slide.isVideo %}
  44.                                     <a href="{% if slide.link %}{{ slide.link }}{% else %}#{% endif %}">
  45.                                       <video class="w-100" loop autoplay><source src="{{ slide.url }}"></video>
  46.                                     </a>
  47.                                   {% else %}
  48.                                     <a href="{% if slide.link %}{{ slide.link }}{% else %}#{% endif %}"
  49.                                        style="background-image: url('{{ slide.url }}')">
  50.                                     </a>
  51.                                   {% endif %}
  52.                                 </li>
  53.                             {% endfor %}
  54.                         </ul>
  55.                     </div>
  56.                     {% if tabBanner|length > 1 %}
  57.                         <div class="glide__controls-container" data-glide-el="controls">
  58.                             <div class="glide__controls-item" data-glide-dir="<"><img class="glide__controls-img" src="{{ asset('bundles/app/images/controls_left.png') }}" alt=""/></div>
  59.                             <div class="glide__controls-item" data-glide-dir=">"><img class="glide__controls-img" src="{{ asset('bundles/app/images/controls_right.png') }}" alt=""/></div>
  60.                         </div>
  61.                         <div class="glide__bullets-container"></div>
  62.                     {% endif %}
  63.                 </div>
  64.             </div>
  65.         </div>
  66.     {% endfor %}
  67. {% endif %}
  69. <script>
  70.     let slideData = [];
  71.     slideData[0] = [{{ bannerSlides|json_encode|raw }}][0];
  72.     let subpagesBanners = [{% if subPageBanners is defined %}{{ subPageBanners|json_encode|raw }}{% endif %}];
  73.     subpagesBanners.forEach(function (v) {
  74.         for (var key in v) {
  75.             slideData[key] = v[key];
  76.         }
  77.     });
  78.     $(document).ready(function () {
  79.         let slideElements = $('.glide__slides li');
  80.         let bulletsParent = $('.glide__bullets-container');
  81.         let newItem = '<div class="glide__bullets-item"></div>';
  83.         initBullets();
  85.         slideElements.on('classChange', function () {
  86.             switchActiveBullet(this);
  87.         });
  90.         function switchActiveBullet(slide) {
  91.             let el = $(slide);
  92.             let bullet = $('#bullet-' + (el[0].id).split("slide-")[1]);
  93.             el.hasClass('glide__slide--active')
  94.                 ? bullet.addClass('glide__bullets-item--active')
  95.                 : bullet.removeClass('glide__bullets-item--active');
  96.         }
  98.         function initBullets() {
  99.             var slideDataRaw = Array.from(slideData);
  100.             slideData = slideDataRaw.filter(function (el) {
  101.                 return el != null;
  102.             });
  104.             $.each(slideData, function (pk, data) {
  106.                 $.each(data, function (k, item) {
  107.                     let newBullet = $(newItem).attr('id', 'bullet-' + item.id);
  108.                     newBullet = newBullet.attr('style', 'order:' + item.order);
  109.                     let currentSlide = document.getElementById('slide-' + item.id);
  110.                     if ($(currentSlide).hasClass('glide__slide--active')) {
  111.                         newBullet.addClass('glide__bullets-item--active');
  112.                     }
  113.                     $(bulletsParent[pk]).append(newBullet);
  114.                 });
  115.             });
  118.             //classChange event
  119.             var observer = new MutationObserver(function (mutations) {
  120.                 mutations.forEach(function (mutation) {
  121.                     if (mutation.attributeName === "class") {
  122.                         $(mutation.target).trigger('classChange');
  123.                     }
  124.                 });
  125.             });
  127.             //register
  128.             $.each(slideElements, function (k, item) {
  129.                 observer.observe(item, {
  130.                     attributes: true
  131.                 });
  132.             });
  133.         }
  135.     });
  136. </script>