templates/FrontBundle/Page/spectacle-deesses.html.twig line 1

Open in your IDE?
  1. {% extends 'FrontBundle/layout.html.twig' %}
  3. {% block title %}{{ app_sitename }} - {{ page.metaTitle }}{% endblock %}
  4. {% block description %}{{ page.metaDescription }}{% endblock %}
  6. {% block extra_class %}native page_spectacle{% endblock %}
  7. {% block menu_min %}931{% endblock %}
  8. {# {% block menu_max %}3076{% endblock %} #}
  11. {% block sub_header %}
  13.     <div class="sub-header anchor">
  14.         <ul>
  15.             <li><a href="#spectacle">DÉESSES</a></li>
  16.             <li><a href="#artistes">{{ 'spectacle_artistes'|tr(tr)|raw }}</a></li>
  17.             <li><a href="#coulisses">{{ 'spectacle_coulisses'|tr(tr)|raw }}</a></li>
  18.         </ul>
  19.     </div>
  21. {% endblock %}
  25. {% block stylesheets %}
  26.     <link href="/front/css/owl.carousel.min.css" rel="stylesheet">
  27.     <link href="/front/css/owl.theme.default.min.css" rel="stylesheet">
  28.     <link href="/plugins/photoswipe/photoswipe.css" rel="stylesheet">
  29.     <link href="/plugins/photoswipe/default-skin/default-skin.css" rel="stylesheet" type="text/css"/>
  30.     <link href="/front/css/carousel.css" rel="stylesheet">
  31.     <style>
  32.         @media screen and (min-width: 1047px) {
  33.             .full-size-image {
  34.                 position: absolute;
  35.                 top: 0;
  36.                 left: 0;
  37.                 width: 100% !important;
  38.                 height: 100% !important;
  39.                 object-fit: contain;
  40.                 background-image: url("/front/img/home-deesses.jpg");
  41.                 background-position: center;
  42.                 background-repeat: no-repeat;
  43.                 background-size: cover;
  44.             }
  45.         }
  46.    .page_spectacle .mini-suites .subname{
  47.             font-size: 10px;
  48.         }
  49.   .page_spectacle #spectacle {
  50.       background-image: url(/front/img/deesses-bg.svg);
  51.   background-repeat: no-repeat;
  52.     background-position-x: -100px;
  53.     background-position-y: -20px;
  54.   }
  55.         .spectacle-header .order-btn {
  56.             bottom: 130px;
  57.         }
  60.         .video-background {
  61.             position: absolute;
  62.             top: 0;
  63.             left: 0;
  64.             width: 100%;
  65.             height: 100%;
  66.             overflow: hidden;
  67.             z-index: 0; /* Derrière le contenu principal */
  68.             /*      display: flex;
  69.                   justify-content: center;
  70.                   align-items: center;*/
  71.             background-image: url('/front/img/preview.jpg');
  72.             background-size: cover;
  73.             background-repeat: no-repeat;
  74.             background-position: top center;
  75.         }
  77.         .video-background iframe {
  78.             left: 50%;
  79.             position: absolute;
  80.             transform: translateX(-50%);
  81.         }
  85.     </style>
  86. {% endblock %}
  88. {% block body %}
  89.     {#
  91.     <section class="info-header2 anchor">
  92.       <ul>
  93.         <li><a href="#spectacle">Frénésie</a></li>
  94.         <li><a href="#artistes">Artistes</a></li>
  95.         <li><a href="#coulisses">Coulisses</a></li>
  96.       </ul>
  97.     </section>
  99.     #}
  101.     <section class="menus-tarifs-callendar espace-header spectacle-header p-0 home">
  104.         <div class="video-background">
  105.             <iframe
  106.                     src="https://player.vimeo.com/video/1030772014?background=1&autoplay=1&loop=1&muted=1"
  107.                     frameborder="0"
  108.                     allow="autoplay; fullscreen;"
  109.                     allowfullscreen
  110.                     id="video-iframe"
  111.                     class="video-iframe">
  112.             </iframe>
  113.         </div>
  117.         {# <video class="video-slide active" src="/front/videos/palace3.mp4" autoplay muted loop playsinline></video> #}
  118.         <div class="content pt-0">
  119.             <p><img src="/front/img/spectacle-title-line.svg" alt="line" class="page_spectacle_logo_line"  /><img src="/front/img/COVER_DEESES_LOGO.png" alt="line" class="page_spectacle_logo_line w-50" /><img src="/front/img/spectacle-title-line.svg" alt="line" class="page_spectacle_logo_line"  /></p>
  120.             <p class="sub-title mb-0">{{ 'deesse_title'|tr(tr)|raw }}</p>
  121.             <p class="desc mt-5 pt-2 mb-0">{{ 'deesse_subtitle'|tr(tr)|raw }}</p>
  122.         </div>
  124.         <a href="/{{app.request.locale }}/{{ 'reservation'|getUrl(app.request.locale) }}" class="order-btn">{{ 'general_reserver'|tr(tr)|raw }}</a>
  126.         <a href="#spectacle" class="arrow-btn"><img src="/front/img/spectacle-header-arrow-b.svg" alt="next" width="20px" /></a>
  128.          {% set cata_link = '/front/Brochure-deesses-royal-palace-2025.pdf' %}
  129.         {% if app.request.locale == 'de' %}
  130.             {% set cata_link = '/front/Brochure-deesses-royal-palace-2025-de.pdf' %}
  131.         {% endif %}
  132.         <a href="{{cata_link}}" class="cata-btn" target="_blank">{{ 'spectacle_cata'|tr(tr)|raw }} <img src="/front/img/espaces-down-link.svg" alt="dowload" width="33px" /></a>
  135.         <ul>
  136.             <li class="active"><a href="#spectacle">DÉESSES</a></li>
  137.             <li><a href="#artistes">{{ 'spectacle_artistes'|tr(tr)|raw }}</a></li>
  138.             <li><a href="#coulisses">{{ 'spectacle_coulisses'|tr(tr)|raw }}</a></li>
  139.         </ul>
  141.     </section>
  145.     <section id="spectacle" class="espace-content full pt-5 mt-5 overflow-h overflow-y-h">
  146.         <div class="content">
  147.             <h1 class="pt-5 mb-3 no-bar">{{ 'deesse_s1_maintitle'|tr(tr)|upper }}<span class="full-bar"></span></h1>
  148.             <h5 class="mb-3 mt-5">{{ 'grandamour_s1_title'|tr(tr)|raw }}</h5>
  149.             <p class="p-0">{{ 'deesse_s1_title'|tr(tr)|raw }}</p>
  150.             <div class="pre-carousel pt-3 mt-3">
  151.                 <a href="#" class="active photo">{{ 'spectacle_photos'|tr(tr)|raw }}<span>12</span></a>
  152.                 <a href="#" class="video d-none">{{ 'spectacle_video'|tr(tr)|raw }}<span>1</span></a>
  153.             </div>
  154.             <div class="carousel"></div>
  155.             <div class="owl-dots">
  156.                 <button role="button" class="owl-dot"><span></span></button>
  157.                 <button role="button" class="owl-dot"><span></span></button>
  158.                 <button role="button" class="owl-dot"><span></span></button>
  159.                 <button role="button" class="owl-dot"><span></span></button>
  160.                 <button role="button" class="owl-dot"><span></span></button>
  161.             </div>
  162.             <div class="yt">
  163.                 <iframe width="560" height="315" src="https://www.youtube.com/embed/HcDfortoJtU?si=A7z3NFxBwg-Pwb7-" allow="autoplay" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  164.             </div>
  165.         </div>
  166.     </section>
  169.     <section id="artistes" class="espace-content full mt-5 pt-5 overflow-h">
  170.         <div class="content">
  171.             <h2 class="pt-5 mt-0 mb-3 no-bar"><span>{{ 'spectacle_artistes2'|tr(tr)|upper|raw }}<span class="full-bar"></span></h2>
  172.             <h5 class="mb-5 mt-5"><span>&nbsp;</span></h5>
  173.         </div>
  174.     </section>
  176.     <section class="slider p-0">
  177.         <div class="slider-after"></div>
  178.         <div class="content overflow-h" style="height:620px;">
  179.             <div class="owl-carousel mini-suites">
  180.                 <div class="item" data-link="#">
  181.                     <div class="img" style="background-image: url('{{ asset('front/img/deesse-artiste/sarita.jpg') }}');">
  182.                         <div class="gradient"></div>
  183.                         <p class="name">Sarita</p>
  184.                         <p class="subname">{{ 'grandamour_a3'|tr(tr)|upper|raw }}</p>
  185.                         <a href="https://www.instagram.com/wanderlustdancer/" target="_blank" class="ig"><img alt="instagram" src="/front/img/spectacle-ig.svg" /></a>
  186.                     </div>
  187.                 </div>
  188.                 <div class="item" data-link="#">
  189.                     <div class="img" style="background-image: url('{{ asset('front/img/deesse-artiste/antony-cesar.jpg') }}');">
  190.                         <div class="gradient"></div>
  191.                         <p class="name">Antony César</p>
  192.                         <p class="subname">{{ 'deesse_a2'|tr(tr)|upper|raw }}</p>
  193.                         <a href="https://www.instagram.com/antony__cesar/?hl=fr" target="_blank" class="ig"><img alt="instagram" src="/front/img/spectacle-ig.svg" /></a>
  194.                     </div>
  195.                 </div>
  197.                 <div class="item" data-link="#">
  198.                     <div class="img" style="background-image: url('{{ asset('front/img/deesse-artiste/troupe-kevin-richter.jpg') }}');">
  199.                         <div class="gradient"></div>
  200.                         <p class="name">Troupe Kevin Richter</p>
  201.                         <p class="subname">{{ 'deesse_a3'|tr(tr)|upper|raw }}</p>
  202.                         <a href="https://www.instagram.com/r.kevin_rkt/" target="_blank" class="ig"><img alt="instagram" src="/front/img/spectacle-ig.svg" /></a>
  203.                     </div>
  204.                 </div>
  208.                 <div class="item" data-link="#">
  209.                     <div class="img" style="background-image: url('{{ asset('front/img/deesse-artiste/jerome-murat.jpg') }}');">
  210.                         <div class="gradient"></div>
  211.                         <p class="name">Jerome Murat</p>
  212.                         <p class="subname">{{ 'deesse_a4'|tr(tr)|upper|raw }}</p>
  213.                         <a href="https://www.instagram.com/jeromemurat/" target="_blank" class="ig"><img alt="instagram" src="/front/img/spectacle-ig.svg" /></a>
  214.                     </div>
  216.                 </div>
  218.                 <div class="item" data-link="#">
  219.                     <div class="img" style="background-image: url('{{ asset('front/img/deesse-artiste/zhang-fan.jpg') }}');">
  220.                         <div class="gradient"></div>
  221.                         <p class="name">Zhang Fan </p>
  222.                         <p class="subname">{{ 'deesse_a5'|tr(tr)|upper|raw }}</p>
  223.                         <!-- <a href="https://www.instagram.com/caiyong1112/" target="_blank" class="ig"><img alt="instagram" src="/front/img/spectacle-ig.svg" /></a> -->
  224.                     </div>
  225.                 </div>
  227.                 <div class="item" data-link="#">
  228.                     <div class="img" style="background-image: url('{{ asset('front/img/deesse-artiste/michail-ermakov.jpg') }}');">
  229.                         <div class="gradient"></div>
  230.                         <p class="name">Michail Ermakov</p>
  231.                         <p class="subname">{{ 'deesse_a6'|tr(tr)|upper|raw }}</p>
  232.                         <!--  <a href="https://www.instagram.com/shakirov_oleg/" target="_blank" class="ig"><img alt="instagram" src="/front/img/spectacle-ig.svg" /></a> -->
  233.                     </div>
  234.                 </div>
  236.                 <div class="item" data-link="#">
  237.                     <div class="img" style="background-image: url('{{ asset('front/img/deesse-artiste/bello-sisters.jpg') }}');">
  238.                         <div class="gradient"></div>
  239.                         <p class="name">Bello Sisters</p>
  240.                         <p class="subname" style="bottom:100px";>{{ 'deesse_a7'|tr(tr)|upper|raw }}</p>
  241.                         <a href="https://www.instagram.com/bellosistersofficial/?hl=fr" target="_blank" class="ig"><img alt="instagram" src="/front/img/spectacle-ig.svg" /></a>
  242.                     </div>
  243.                 </div>
  244.     <div class="item" data-link="#">
  245.                     <div class="img" style="background-image: url('{{ asset('front/img/deesse-artiste/meggy-forget.jpg') }}');">
  246.                         <div class="gradient"></div>
  247.                         <p class="name">Meggy Forget</p>
  248.                         <p class="subname">{{ 'deesse_a8'|tr(tr)|upper|raw }}</p>
  249.                         <a href="https://www.instagram.com/meggyforget/" target="_blank" class="ig"><img alt="instagram" src="/front/img/spectacle-ig.svg" /></a>
  250.                     </div>
  251.                 </div>
  252.                 <div class="item" data-link="#">
  253.                     <div class="img" style="background-image: url('{{ asset('front/img/deesse-artiste/margaux-faisandier.jpg') }}');">
  254.                         <div class="gradient"></div>
  255.                         <p class="name">Margaux Faisandier</p>
  256.                         <p class="subname">{{ 'deesse_a8'|tr(tr)|upper|raw }}</p>
  257.                        <!-- <a href="https://www.instagram.com/bellosistersofficial/?hl=fr" target="_blank" class="ig"><img alt="instagram" src="/front/img/spectacle-ig.svg" /></a> -->
  258.                     </div>
  259.                 </div>
  260.                 <div class="item" data-link="#">
  261.                     <div class="img" style="background-image: url('{{ asset('front/img/deesse-artiste/leila-veslard.jpg') }}');">
  262.                         <div class="gradient"></div>
  263.                         <p class="name">Leila Veslard</p>
  264.                         <p class="subname">{{ 'deesse_a8'|tr(tr)|upper|raw }}</p>
  265.                         <a href="https://www.instagram.com/leilaveslardoff/?hl=fr" target="_blank" class="ig"><img alt="instagram" src="/front/img/spectacle-ig.svg" /></a>
  266.                     </div>
  267.                 </div>
  268.                 <div class="item" data-link="#">
  269.                     <div class="img" style="background-image: url('{{ asset('front/img/deesse-artiste/charlene-veyrunes.jpg') }}');">
  270.                         <div class="gradient"></div>
  271.                         <p class="name">Charlene Veyrunes</p>
  272.                         <p class="subname">{{ 'deesse_a8'|tr(tr)|upper|raw }}</p>
  273.                         <a href="https://www.instagram.com/charleneveyrunes/" target="_blank" class="ig"><img alt="instagram" src="/front/img/spectacle-ig.svg" /></a>
  274.                     </div>
  275.                 </div>
  276.                         
  277.             </div>
  278. <p class="desc">{{ 'frenesie_a3_desc'|tr(tr)|raw }}</p>
  279.         </div>
  281.         <div class="buttons hide">
  282.             <a href="#infos" class="artist-link">Découvrez prochainement l'artiste</a>
  283.         </div>
  285.         <div class="red-bar"></div>
  287.     </section>
  289.     <section id="coulisses" class="espace-content full mt-2 pt-5 overflow-h">
  290.         <div class="content">
  291.             <h2 class="pt-5 mt-5 mb-3 no-bar"><span>{{ 'spectacle_coulisses2'|tr(tr)|upper|raw }}<span class="full-bar"></span></h2>
  292.             <p class="p-0 mt-5"> {# {{ 'grandamour_s2'|tr(tr)|raw }} #}</p>
  293.         </div>
  294.     </section>
  298.     <section class="coulisses-slider p-0 mt-5 pt-5 overflow-h" style="margin-bottom: 180px;">
  299.         {#
  300.         <div class="content fluid">
  301.           <div class="owl-carousel">
  303.             <div class="item">
  304.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses1.jpg');"> </div>
  305.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses2.jpg');"> </div>
  306.             </div>
  308.             <div class="item">
  309.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses3.jpg');"> </div>
  310.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses4.jpg');"> </div>
  311.             </div>
  313.             <div class="item">
  314.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses5.jpg');"> </div>
  315.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses6.jpg');"> </div>
  316.             </div>
  318.             <div class="item">
  319.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses7.jpg');"> </div>
  320.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses8.jpg');"> </div>
  321.             </div>
  323.             <div class="item">
  324.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses9.jpg');"> </div>
  325.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses10.jpg');"> </div>
  326.             </div>
  328.             <div class="item">
  329.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses11.jpg');"> </div>
  330.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses12.jpg');"> </div>
  331.             </div>
  333.             <div class="item">
  334.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses13.jpg');"> </div>
  335.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses14.jpg');"> </div>
  336.             </div>
  338.             <div class="item">
  339.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses15.jpg');"> </div>
  340.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses16.jpg');"> </div>
  341.             </div>
  343.             <div class="item">
  344.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses17.jpg');"> </div>
  345.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses18.jpg');"> </div>
  346.             </div>
  348.           </div>
  349.         </div> #}
  351.         <div class="content fluid">
  352.             <div class="owl-carousel images">
  355.                 {% for i in 1..24 %}
  356.                     {% if i is odd %}
  357.                         <div class="item">
  358.                     {% endif %}
  359.                     <a id="{{'now'|date('U')}}_{{i}}" href="/front/img/spectacle-coulisses/spectacle-coulisses{{i}}.jpg" itemprop="contentUrl" data-size="" class="img " style="background-image: url('/front/img/spectacle-coulisses/spectacle-coulisses{{i}}.jpg');" source="{{ app.request.getSchemeAndHttpHost() }}/front/img/spectacle-coulisses/spectacle-coulisses{{i}}.jpg">
  360.                         <img src="/front/img/spectacle-coulisses/spectacle-coulisses{{i}}.jpg" style="display:none;" itemprop="thumbnail" alt="album" />
  361.                     </a>
  362.                     </a>
  363.                     {% if i is even %}
  364.                         </div>
  365.                     {% endif %}
  367.                 {% endfor %}
  370.             </div>
  371.         </div>
  374.         <div class="horizontal-bar-container">
  375.             <div class="horizontal-bar"></div>
  376.             <div class="horizontal-bar-ctrl"></div>
  377.         </div>
  379.     </section>
  383.     {% include 'FrontBundle/Partial/footer.html.twig' %}
  386.     <!-- Root element of PhotoSwipe. Must have class pswp. -->
  387.     <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  388.         <!-- Background of PhotoSwipe.
  389.           It's a separate element as animating opacity is faster than rgba(). -->
  390.         <div class="pswp__bg"></div>
  391.         <!-- Slides wrapper with overflow:hidden. -->
  392.         <div class="pswp__scroll-wrap">
  393.             <!-- Container that holds slides.
  394.               PhotoSwipe keeps only 3 of them in the DOM to save memory.
  395.               Don't modify these 3 pswp__item elements, data is added later on. -->
  396.             <div class="pswp__container">
  397.                 <div class="pswp__item"></div>
  398.                 <div class="pswp__item"></div>
  399.                 <div class="pswp__item"></div>
  400.             </div>
  401.             <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
  402.             <div class="pswp__ui pswp__ui--hidden">
  403.                 <div class="pswp__top-bar">
  404.                     <!--  Controls are self-explanatory. Order can be changed. -->
  405.                     <div class="pswp__counter"></div>
  406.                     <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
  407.                     <button class="pswp__button pswp__button--share" title="Share"></button>
  408.                     <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
  409.                     <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
  410.                     <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
  411.                     <!-- element will get class pswp__preloader--active when preloader is running -->
  412.                     <div class="pswp__preloader">
  413.                         <div class="pswp__preloader__icn">
  414.                             <div class="pswp__preloader__cut">
  415.                                 <div class="pswp__preloader__donut"></div>
  416.                             </div>
  417.                         </div>
  418.                     </div>
  419.                 </div>
  420.                 <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
  421.                     <div class="pswp__share-tooltip"></div>
  422.                 </div>
  423.                 <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
  424.                 </button>
  425.                 <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
  426.                 </button>
  427.                 <div class="pswp__caption">
  428.                     <div class="pswp__caption__center"></div>
  429.                 </div>
  430.             </div>
  431.         </div>
  432.     </div>
  434. {% endblock %}
  436. {% block javascripts %}
  437.     <script src="/front/js/owl.carousel.min.js"></script>
  438.     <script src="/plugins/photoswipe/photoswipe.min.js"></script>
  439.     <script src="/plugins/photoswipe/photoswipe-ui-default.min.js"></script>
  440.     <script type="text/javascript">
  443.         'use strict';
  445.         class Carousel {
  446.             constructor(el) {
  447.                 this.el = el;
  448.                 this.carouselOptions = ['previous','play','next'];
  449.                 this.carouselData = [
  450.                     {% for i in 1..7 %}
  451.                     {
  452.                         'id': '{{i}}',
  453.                         'src': '/front/img/spectacle-slider-2024-{{i}}.jpg?v=1',
  454.                     },
  455.                     {% endfor %}
  456.                 ];
  457.                 this.carouselInView = [1, 2, 3, 4, 5];
  458.                 this.carouselContainer;
  459.                 this.carouselPlayState;
  460.             }
  465.             mounted() {
  466.                 this.setupCarousel();
  467.                 this.play()
  468.             }
  470.             // Build carousel html
  471.             setupCarousel() {
  472.                 const container = document.createElement('div');
  473.                 const controls = document.createElement('div');
  475.                 // Add container for carousel items and controls
  476.                 this.el.append(container, controls);
  477.                 container.className = 'carousel-container';
  478.                 controls.className = 'carousel-controls';
  480.                 // Take dataset array and append items to container
  481.                 this.carouselData.forEach((item, index) => {
  482.                     const carouselItem = item.src ? document.createElement('img') : document.createElement('div');
  484.                     container.append(carouselItem);
  486.                     // Add item attributes
  487.                     carouselItem.className = `carousel-item carousel-item-${index + 1}`;
  488.                     carouselItem.src = item.src;
  489.                     carouselItem.setAttribute('loading', 'lazy');
  490.                     // Used to keep track of carousel items, infinite items possible in carousel however min 5 items required
  491.                     carouselItem.setAttribute('data-index', `${index + 1}`);
  492.                 });
  494.                 this.carouselOptions.forEach((option) => {
  495.                     const btn = document.createElement('button');
  496.                     const axSpan = document.createElement('span');
  498.                     // Add accessibilty spans to button
  499.                     axSpan.innerText = option;
  500.                     axSpan.className = 'ax-hidden';
  501.                     btn.append(axSpan);
  503.                     // Add button attributes
  504.                     btn.className = `carousel-control carousel-control-${option}`;
  505.                     btn.setAttribute('data-name', option);
  507.                     // Add carousel control options
  508.                     controls.append(btn);
  509.                 });
  511.                 // After rendering carousel to our DOM, setup carousel controls' event listeners
  512.                 this.setControls([...controls.children]);
  514.                 // Set container property
  515.                 this.carouselContainer = container;
  517.             }
  519.             setControls(controls) {
  520.                 controls.forEach(control => {
  521.                     control.onclick = (event) => {
  522.                         event.preventDefault();
  524.                         // Manage control actions, update our carousel data first then with a callback update our DOM
  525.                         this.controlManager(control.dataset.name);
  526.                     };
  527.                 });
  528.             }
  530.             controlManager(control) {
  531.                 if (control === 'previous') return this.previous();
  532.                 if (control === 'next') return this.next();
  533.                 if (control === 'add') return this.add();
  534.                 if (control === 'play') return this.play();
  536.                 return;
  537.             }
  539.             getIndex(inView) {
  540.                 var inViewArr = {
  541.                     'i1': 4,
  542.                     'i2': 3,
  543.                     'i3': 2,
  544.                     'i4': 1,
  545.                     'i5': 5,
  546.                 };
  548.                 var inViewArr = {
  549.                     'i1': 0,
  550.                     'i2': 4,
  551.                     'i3': 3,
  552.                     'i4': 2,
  553.                     'i5': 1,
  554.                 };
  556.                 // console.log (inViewArr['i'+inView] );
  558.                 $('#spectacle .owl-dots .owl-dot').removeClass('active');
  559.                 $('#spectacle .owl-dots .owl-dot:eq('+inViewArr['i'+inView]+')').addClass('active');
  560.             }
  562.             previous() {
  564.                 // console.log('prev');
  565.                 this.getIndex(exampleCarousel.carouselInView[0])
  567.                 // Update order of items in data array to be shown in carousel
  568.                 this.carouselData.unshift(this.carouselData.pop());
  570.                 // Push the first item to the end of the array so that the previous item is front and center
  571.                 this.carouselInView.push(this.carouselInView.shift());
  573.                 // Update the css class for each carousel item in view
  574.                 this.carouselInView.forEach((item, index) => {
  575.                     this.carouselContainer.children[index].className = `carousel-item carousel-item-${item}`;
  576.                 });
  578.                 // Using the first 5 items in data array update content of carousel items in view
  579.                 this.carouselData.slice(0, 5).forEach((data, index) => {
  580.                     document.querySelector(`.carousel-item-${index + 1}`).src = data.src;
  581.                 });
  582.             }
  584.             next() {
  586.                 // console.log('next');
  587.                 this.getIndex(exampleCarousel.carouselInView[0])
  589.                 // Update order of items in data array to be shown in carousel
  590.                 this.carouselData.push(this.carouselData.shift());
  592.                 // Take the last item and add it to the beginning of the array so that the next item is front and center
  593.                 this.carouselInView.unshift(this.carouselInView.pop());
  595.                 // Update the css class for each carousel item in view
  596.                 this.carouselInView.forEach((item, index) => {
  597.                     this.carouselContainer.children[index].className = `carousel-item carousel-item-${item}`;
  598.                 });
  600.                 // Using the first 5 items in data array update content of carousel items in view
  601.                 this.carouselData.slice(0, 5).forEach((data, index) => {
  602.                     document.querySelector(`.carousel-item-${index + 1}`).src = data.src;
  603.                 });
  604.             }
  606.             add() {
  607.                 const newItem = {
  608.                     'id': '',
  609.                     'src': '',
  610.                 };
  611.                 const lastItem = this.carouselData.length;
  612.                 const lastIndex = this.carouselData.findIndex(item => item.id == lastItem);
  614.                 // Assign properties for new carousel item
  615.                 Object.assign(newItem, {
  616.                     id: `${lastItem + 1}`,
  617.                     src: `http://fakeimg.pl/300/?text=${lastItem + 1}`
  618.                 });
  620.                 // Then add it to the "last" item in our carouselData
  621.                 this.carouselData.splice(lastIndex + 1, 0, newItem);
  623.                 // Shift carousel to display new item
  624.                 this.next();
  625.             }
  627.             play() {
  628.                 const playBtn = document.querySelector('.carousel-control-play');
  629.                 const startPlaying = () => this.next();
  631.                 if (playBtn.classList.contains('playing')) {
  632.                     // Remove class to return to play button state/appearance
  633.                     playBtn.classList.remove('playing');
  635.                     // Remove setInterval
  636.                     clearInterval(this.carouselPlayState);
  637.                     this.carouselPlayState = null;
  638.                 } else {
  639.                     // Add class to change to pause button state/appearance
  640.                     playBtn.classList.add('playing');
  642.                     // First run initial next method
  643.                     this.next();
  645.                     // Use play state prop to store interval ID and run next method on a 1.5 second interval
  646.                     this.carouselPlayState = setInterval(startPlaying, 3000);
  647.                 };
  648.             }
  650.         }
  652.         // Refers to the carousel root element you want to target, use specific class selectors if using multiple carousels
  653.         const el = document.querySelector('.carousel');
  654.         // Create a new carousel object
  655.         const exampleCarousel = new Carousel(el);
  656.         // Setup carousel and methods
  657.         exampleCarousel.mounted();
  661.     </script>
  662.     <script type="text/javascript">
  664.         $( document ).ready(function() {
  666.             // TODO: Mettre à jour le background
  667.             if (window.innerWidth > 1047) {
  668.                 //$('.menus-tarifs-callendar .content').before('<div class="video-slide active h-auto w-100 full-size-image"></div>');
  669.                 //$('.menus-tarifs-callendar .content').before('<div class="video-background"><iframe src="https://player.vimeo.com/video/1030772014?background=1&autoplay=1&loop=1&muted=1" frameborder="0" allow="autoplay; fullscreen;" allowfullscreen id="video-iframe" class="video-iframe"> </iframe> </div>');
  671.             }
  673.             $(document).scroll(function(){
  674.                 $('.info-header2 li').removeClass('active');
  675.                 $('.info-header2 li:eq(0)').addClass('active');
  677.                 if( $(window).scrollTop() > $('#artistes').position().top ){
  678.                     $('.info-header2 li').removeClass('active');
  679.                     $('.info-header2 li:eq(1)').addClass('active');
  680.                 }
  682.                 if( $(window).scrollTop() > $('#coulisses').position().top ){
  683.                     $('.info-header2 li').removeClass('active');
  684.                     $('.info-header2 li:eq(2)').addClass('active');
  685.                 }
  687.             });
  691.             $('.spectacle-header').css('height', window.innerHeight+'px');
  693.             $('.slider .owl-carousel').owlCarousel({
  694.                 loop:true,
  695.                 margin:80,
  696.                 nav:true,
  697.                 dots:false,
  698.                 responsive:{
  699.                     0:{
  700.                         items:1
  701.                     },
  702.                     1024:{
  703.                         items:1
  704.                     },
  705.                     1025:{
  706.                         items:3
  707.                     },
  708.                     1920:{
  709.                         items:3
  710.                     }
  711.                 }
  712.             });
  714.             var owl = $('.coulisses-slider .owl-carousel');
  715.             owl.owlCarousel({
  716.                 loop:false,
  717.                 margin:42,
  718.                 nav:true,
  719.                 itemElement: 'figure',
  720.                 dots:false,
  721.                 responsive:{
  722.                     0:{
  723.                         items:2
  724.                     },
  725.                     868:{
  726.                         items:3
  727.                     },
  728.                     1000:{
  729.                         items:3
  730.                     },
  731.                     1280:{
  732.                         items:4
  733.                     },
  734.                     1475:{
  735.                         items:5
  736.                     },
  737.                     1920:{
  738.                         items:6
  739.                     }
  740.                 }
  741.             });
  743.             $('.artist-link').click(function(){
  744.                 window.location.href = $('.owl-item.active ~ .owl-item.active .item').data('link');
  745.             });
  747.             $('.arrow-btn').click(function(e){
  748.                 e.preventDefault();
  749.                 $([document.documentElement, document.body]).animate({
  750.                     scrollTop: $( $('#spectacle') ).offset().top - 130
  751.                 }, 100);
  752.             });
  754.             $('#spectacle .video').click(function(e){
  755.                 e.preventDefault();
  756.                 $('#spectacle .carousel').hide();
  757.                 $('#spectacle .yt').fadeIn();
  758.                 $('#spectacle .owl-dots').hide();
  759.                 $('#spectacle .photo').removeClass('active');
  760.                 $('#spectacle .video').addClass('active');
  761.             });
  763.             $('#spectacle .photo').click(function(e){
  764.                 e.preventDefault();
  765.                 $('#spectacle .yt').hide();
  766.                 $('#spectacle .carousel').fadeIn();
  767.                 $('#spectacle .owl-dots').fadeIn();
  768.                 $('#spectacle .video').removeClass('active');
  769.                 $('#spectacle .photo').addClass('active');
  770.             });
  772.             $('#spectacle .yt .hover').click(function(e){
  773.                 e.preventDefault();
  774.                 console.log('ssss');
  775.                 window.open('https://youtu.be/RbHIzbo522o', '_blank');
  777.             });
  779.             owl.on('changed.owl.carousel', function(event) {
  781.                 var itemsNbr = owl.data()['owl.carousel'].settings.items;
  782.                 var itemsTotal = event.item.count;
  784.                 var itemsIndex = event.item.index;
  786.                 var pagesNbr = itemsTotal - itemsNbr;
  788.                 var horizontalBar = $('.horizontal-bar').outerWidth();
  789.                 var horizontalBarCtrl = $('.horizontal-bar-ctrl').outerWidth();
  791.                 var courseLength = $('.horizontal-bar').outerWidth() - $('.horizontal-bar-ctrl').outerWidth();
  793.                 var left = itemsIndex * 100 / pagesNbr; // percent
  795.                 left = left * courseLength / 100;
  797.                 $('.horizontal-bar-ctrl').css('left', left+'px');
  799.             });
  802.             $('.owl-carousel.images a').each(function(index, value) {
  803.                 img = new Image();
  804.                 size = 0;
  805.                 const ident = $(this).attr('id').toString();
  806.                 img.onload = function() {
  807.                     $('#'+ident).attr('data-size', this.width + 'x' + this.height);
  808.                 }
  809.                 img.src = $(this).attr('source');
  811.             }).promise().done( function(){
  813.                 setTimeout( function(){
  814.                     initPhotoSwipeFromDOM('.my-gallery');
  815.                 }, 1000);
  817.             } );
  820.             $('.owl-carousel.images .owl-stage').addClass('my-gallery');
  821.             $('.owl-carousel.images .owl-stage').attr('itemscope');
  822.             $('.owl-carousel.images .owl-stage').attr('itemtype', 'http://schema.org/ImageGallery');
  824.             $('.owl-carousel.images .owl-item ').attr('itemscope');
  825.             $('.owl-carousel.images .owl-item ').attr('itemprop', 'associatedMedia');
  826.             $('.owl-carousel.images .owl-item ').attr('itemtype', 'http://schema.org/ImageObject');
  828.         });
  830.     </script>
  831.     <script type="text/javascript">
  833.         videoBackground();
  834.         $( window ).resize(function() {
  835.             videoBackground();
  836.         });
  839.         var initPhotoSwipeFromDOM = function(gallerySelector) {
  841.             // parse slide data (url, title, size ...) from DOM elements
  842.             // (children of gallerySelector)
  843.             var parseThumbnailElements = function(el) {
  845.                 console.log(el.childNodes);
  847.                 var thumbElements = el.childNodes,
  848.                     numNodes = thumbElements.length,
  849.                     items = [
  850.                         // {
  851.                         //   src: 'https://dummyimage.com/1000x1000/ccc/5cac22',
  852.                         //   w: '1024',
  853.                         //   h: '1024'
  854.                         // },
  855.                         // {
  856.                         //   src: 'https://dummyimage.com/1000x1000/5cac22/fff',
  857.                         //   w: '1024',
  858.                         //   h: '1024'
  859.                         // }
  860.                     ],
  861.                     figureEl,
  862.                     linkEl,
  863.                     size,
  864.                     item;
  868.                 for(var i = 0; i < numNodes; i++) {
  870.                     figureEl = thumbElements[i]; // <figure> element
  872.                     // include only element nodes
  873.                     if(figureEl.nodeType !== 1) {
  874.                         continue;
  875.                     }
  877.                     linkEl = figureEl.children[0] // <a> element
  880.                     // console.log('linkEl')
  881.                     // console.log(linkEl.children[0])
  882.                     // console.log(linkEl.children[1])
  885.                     for(var j = 0; j < 2; j++) {
  887.                         size = linkEl.children[j].getAttribute('data-size').split('x');
  889.                         // create slide object
  890.                         item = {
  891.                             src: linkEl.children[j].getAttribute('href'),
  892.                             w: parseInt(size[0], 10),
  893.                             h: parseInt(size[1], 10)
  894.                         };
  899.                         if(figureEl.children.length > 1) {
  900.                             // <figcaption> content
  901.                             item.title = figureEl.children[1].innerHTML;
  902.                         }
  904.                         if(linkEl.children.length > 0) {
  905.                             // <img> thumbnail element, retrieving thumbnail url
  906.                             item.msrc = linkEl.children[0].getAttribute('src');
  907.                         }
  909.                         item.el = figureEl; // save link to element for getThumbBoundsFn
  910.                         items.push(item);
  912.                     }
  913.                 }
  915.                 return items;
  916.             };
  918.             // find nearest parent element
  919.             var closest = function closest(el, fn) {
  920.                 return el && ( fn(el) ? el : closest(el.parentNode, fn) );
  921.             };
  923.             // triggers when user clicks on thumbnail
  924.             var onThumbnailsClick = function(e) {
  925.                 e = e || window.event;
  926.                 e.preventDefault ? e.preventDefault() : e.returnValue = false;
  928.                 var eTarget = e.target || e.srcElement;
  930.                 // find root element of slide
  931.                 var clickedListItem = closest(eTarget, function(el) {
  932.                     return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
  933.                 });
  935.                 if(!clickedListItem) {
  936.                     return;
  937.                 }
  939.                 // find index of clicked item by looping through all child nodes
  940.                 // alternatively, you may define index via data- attribute
  941.                 var clickedGallery = clickedListItem.parentNode,
  942.                     childNodes = clickedListItem.parentNode.childNodes,
  943.                     numChildNodes = childNodes.length,
  944.                     nodeIndex = 0,
  945.                     index;
  947.                 for (var i = 0; i < numChildNodes; i++) {
  948.                     if(childNodes[i].nodeType !== 1) {
  949.                         continue;
  950.                     }
  952.                     if(childNodes[i] === clickedListItem) {
  953.                         index = nodeIndex;
  954.                         break;
  955.                     }
  956.                     nodeIndex++;
  957.                 }
  961.                 if(index >= 0) {
  962.                     // open PhotoSwipe if valid index found
  963.                     openPhotoSwipe( index, clickedGallery );
  964.                 }
  965.                 return false;
  966.             };
  968.             // parse picture index and gallery index from URL (#&pid=1&gid=2)
  969.             var photoswipeParseHash = function() {
  970.                 var hash = window.location.hash.substring(1),
  971.                     params = {};
  973.                 if(hash.length < 5) {
  974.                     return params;
  975.                 }
  977.                 var vars = hash.split('&');
  978.                 for (var i = 0; i < vars.length; i++) {
  979.                     if(!vars[i]) {
  980.                         continue;
  981.                     }
  982.                     var pair = vars[i].split('=');
  983.                     if(pair.length < 2) {
  984.                         continue;
  985.                     }
  986.                     params[pair[0]] = pair[1];
  987.                 }
  989.                 if(params.gid) {
  990.                     params.gid = parseInt(params.gid, 10);
  991.                 }
  993.                 return params;
  994.             };
  996.             var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
  997.                 var pswpElement = document.querySelectorAll('.pswp')[0],
  998.                     gallery,
  999.                     options,
  1000.                     items;
  1002.                 items = parseThumbnailElements(galleryElement);
  1004.                 // define options (if needed)
  1005.                 options = {
  1007.                     // define gallery index (for URL)
  1008.                     galleryUID: galleryElement.getAttribute('data-pswp-uid'),
  1010.                     getThumbBoundsFn: function(index) {
  1011.                         // See Options -> getThumbBoundsFn section of documentation for more info
  1012.                         var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
  1013.                             pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
  1014.                             rect = thumbnail.getBoundingClientRect();
  1016.                         return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
  1017.                     }
  1019.                 };
  1021.                 // PhotoSwipe opened from URL
  1022.                 if(fromURL) {
  1023.                     if(options.galleryPIDs) {
  1024.                         // parse real index when custom PIDs are used
  1025.                         // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
  1026.                         for(var j = 0; j < items.length; j++) {
  1027.                             if(items[j].pid == index) {
  1028.                                 options.index = j;
  1029.                                 break;
  1030.                             }
  1031.                         }
  1032.                     } else {
  1033.                         // in URL indexes start from 1
  1034.                         options.index = parseInt(index, 10) - 1;
  1035.                     }
  1036.                 } else {
  1037.                     options.index = parseInt(index, 10);
  1038.                 }
  1040.                 // exit if index not found
  1041.                 if( isNaN(options.index) ) {
  1042.                     return;
  1043.                 }
  1045.                 if(disableAnimation) {
  1046.                     options.showAnimationDuration = 0;
  1047.                 }
  1049.                 // Pass data to PhotoSwipe and initialize it
  1050.                 gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
  1051.                 gallery.init();
  1052.             };
  1054.             // loop through all gallery elements and bind events
  1055.             var galleryElements = document.querySelectorAll( gallerySelector );
  1057.             for(var i = 0, l = galleryElements.length; i < l; i++) {
  1058.                 galleryElements[i].setAttribute('data-pswp-uid', i+1);
  1059.                 galleryElements[i].onclick = onThumbnailsClick;
  1060.             }
  1062.             // Parse URL and open gallery if it contains #&pid=3&gid=1
  1063.             var hashData = photoswipeParseHash();
  1064.             if(hashData.pid && hashData.gid) {
  1065.                 openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );
  1066.             }
  1067.         };
  1069.         // // execute above function
  1070.         // initPhotoSwipeFromDOM('.my-gallery');
  1072.         function videoBackground(){
  1073.             const iframe = document.querySelector('.video-background iframe');
  1074.             const windowWidth = window.innerWidth;
  1075.             const windowHeight = window.innerHeight;
  1077.             const aspectRatio = 16 / 9;
  1079.             const currentRatio = windowWidth / windowHeight;
  1083.             if (windowWidth > windowHeight) {  // Orientation paysage
  1084.                 // Fixe la largeur au maximum de la fenêtre
  1085.                 const width = windowWidth;
  1086.                 const height = width / aspectRatio; // Hauteur basée sur le ratio 16:9
  1088.                 iframe.style.width = `${width}px`;
  1089.                 iframe.style.height = `${height}px`;
  1091.             } else {  // Orientation portrait
  1092.                 // Fixe la hauteur au maximum de la fenêtre
  1093.                 const height = windowHeight;
  1094.                 const width = height * aspectRatio; // Largeur basée sur le ratio 16:9
  1096.                 iframe.style.width = `${width}px`;
  1097.                 iframe.style.height = `${height}px`;
  1099.             }
  1101.             if(currentRatio < aspectRatio) {
  1102.                 const height = windowHeight;
  1103.                 const width = height * aspectRatio; // Largeur basée sur le ratio 16:9
  1105.                 iframe.style.width = `${width}px`;
  1106.                 iframe.style.height = `${height}px`;
  1107.             }
  1110.         }
  1113.     </script>
  1114. {% endblock %}