templates/recommandation/index.html.twig line 1

Open in your IDE?
  1. {% block content %}
  2.   <div id="carrousel-wrapper"
  3.     data-size="{{articlesRecos|length}}" 
  4.     data-favs="{{favs|serialize(format='json')}}"
  5.     data-user="{{app.user}}">
  7.     <div class="onglets">
  8.       <button class="onglet" id="onglet-1" onclick="openTab(this.id, 'p1')">Trajectoire 1</button>
  9.       <button class="onglet" id="onglet-2" onclick="openTab(this.id, 'p2')">Trajectoire 2</button>
  10.       <button class="onglet" id="onglet-3" onclick="openTab(this.id, 'p3')">Trajectoire 3</button>
  11.       <button class="onglet" id="onglet-4" onclick="openTab(this.id, 'p4')">Trajectoire 4</button>
  12.     </div>
  14.     {% for i in 0..articlesRecos|length - 1 %}
  15.       <div id='p{{loop.index}}' class="tabcontent">
  16.         {% if not is_mobile() %}
  17.           <div class="carrousel" id="carrousel-{{loop.index0}}" data-size="{{articlesRecos[i]|length}}">
  18.             {% for article in articlesRecos[i] %}
  19.               {% if loop.index0 is divisible by(3) %}
  20.                 {% if not loop.first %}
  21.                   </span>
  22.                   <a class="prev" onclick="plusSlides(-1,{{i}})">&#10094;</a>
  23.                   <a class="next" onclick="plusSlides(1,{{i}})">&#10095;</a>
  24.                 {% endif %}
  25.                 <span class="slide fade slides-carrousel-{{i}}" id="slide-{{loop.index0 /3}}-carrousel-{{i}}">
  26.               {% endif %}
  27.               <div class="article">
  28.                 <span id='carrousel-{{i}}-carte-{{loop.index0}}'
  29.                 data-article="{{article|serialize(format='json')}}">
  30.                 </span>
  31.               </div>
  32.             {% endfor %}
  33.             {% if loop.last %}
  34.               </span>
  35.               <a class="prev" onclick="plusSlides(-1,{{i}})">&#10094;</a>
  36.               <a class="next" onclick="plusSlides(1,{{i}})">&#10095;</a>
  37.             {% endif %}
  38.           </div>
  39.         {% else %}
  40.           {% for article in articlesRecos[i] %}
  41.             <div class="carrousel" id="carrousel-{{loop.index0}}" data-size="{{articlesRecos[i]|length}}">
  42.               <span class="slide fade slides-carrousel-{{i}}" id="slide-{{loop.index0}}-carrousel-{{i}}">
  43.                 <div class="article">
  44.                   <span id='carrousel-{{i}}-carte-{{loop.index0}}'
  45.                   data-article="{{article|serialize(format='json')}}">
  46.                   </span>
  47.                 </div>
  48.               {% if loop.last %}
  49.                 </span>
  50.                 <div style="/*display: inline-flex;*/ text-align: center;">
  51.                   <a class="prev" style="margin-left: 0;" onclick="plusSlides(-1,{{i}})">&#10094;</a>
  52.                   <a class="next" style="margin-left: 0;" onclick="plusSlides(1,{{i}})">&#10095;</a>
  53.                 </div>
  54.               {% endif %}
  55.             </div>
  56.           {% endfor %}
  57.         {% endif %}
  58.       </div>
  59.     {% endfor %} 
  60.   </div>
  61.   
  63. <script type="module">
  64.         import ui_article from "/assets/js/ui/ui_article.js";
  65.         import article from "/assets/js/article.js";
  66.         import favoris from "/assets/js/favoris.js";
  67.         
  68.         
  69.         let size = $('#carrousel-wrapper').data('size');
  70.         let favs = $('#carrousel-wrapper').data('favs');
  71.         let connecte = $('#carrousel-wrapper').data('user') !== '';
  73.         $(document).ready( function(){ 
  74.           for(let i=0;i<size;i++){
  75.               showSlides(slideIndex,i);
  77.               let nbArticles = $('#carrousel-'+i).data('size');
  78.               for(let j=0;j<nbArticles;j++){
  79.                 let data = $('#carrousel-'+i+'-carte-'+j).data('article');
  80.                 $('#carrousel-'+i+'-carte-'+j).replaceWith(ui_article.creerCarteArticle(data,connecte,favs));
  81.               }
  82.               
  83.               openTab('onglet-1','p1');
  84.           }
  85.           article.init();
  86.         })
  87.          
  88. </script>
  89. <script>
  90.   let slideIndex = 0;
  91.   // Next/previous controls
  92.   function plusSlides(n, idCarrousel) {
  93.     showSlides(slideIndex += n, idCarrousel);
  94.   }
  96.   function showSlides(n, idCarrousel) {
  97.     let slides = $('.slides-carrousel-' + idCarrousel);
  98.     if (n >= slides.length) {slideIndex = 0}
  99.     if (n < 0) {slideIndex = slides.length - 1}
  101.     for (i = 0; i < slides.length; i++) {
  102.       slides[i].style.display = "none";
  103.     }
  104.     slides[slideIndex].style.display = "flex";
  105.   }
  108.   function openTab(tabId, parcoursId) {
  109.     let i, tabcontent, tablinks;
  111.     tabcontent = document.getElementsByClassName("tabcontent");
  112.     for (i = 0; i < tabcontent.length; i++) {
  113.       tabcontent[i].style.display = "none";
  114.     }
  116.     tablinks = document.getElementsByClassName("onglet");
  117.     for (i = 0; i < tablinks.length; i++) {
  118.       tablinks[i].className = tablinks[i].className.replace(" active", "");
  119.     }
  121.     document.getElementById(parcoursId).style.display = "block";
  122.     document.getElementById(tabId).className += " active";
  123.   } 
  124. </script>
  126. {% endblock %}