templates/FO/FO/menu.html.twig line 1

Open in your IDE?
  1. {% set societe = dtc_societe.getSociete() %}
  2. <div class="col-md-3 left_col">
  3.     <div class="_left_col scroll-view">
  5.         <div class="navbar _nav_title text-center" style="border: 0;">
  6.             <a href="/" class="_site_title" style=""><img style="width:75%;" src="/images/logo_noir.png"></a>
  7.         </div>
  10.         {#
  11.         <div class="navbar nav_title" style="border: 0;">
  12.             <a href="/" class="site_title" style="font-size:1.4em;"><i style="padding-left:0px;border-radius:0%;border:0;" class="icon-kangaroo-silhouette"></i> <span>Pro Outback Import</span></a>
  13.         </div>
  14.         #}
  16.         {% if version_projet != "" and 1!=1 %}
  17.         <div class="navbar " style="border: 0;font-size:1.4em;color:white;padding-top:0;padding-bottom:0px;">
  18.             <span class="badge badge-info">{{ version_projet }}</span>
  19.         </div>
  20.         {% endif %}
  23.         <!-- menu profile quick info -->
  25.         {% if app.user.id is defined  %}
  26.             <div class="profile clearfix">
  27.                 <div class="profile_pic">
  28.                     <img src="/images/avatar.png" style="height:55px;" class="img-circle profile_img">
  29.                 </div>
  30.                 <div class="profile_info">
  31.                     <span>Bonjour,</span>
  32.                     <h2 class="orange" style="color:#fbb911;">{{ app.user.prenom }} {{ app.user.nom }}</h2>
  33.                 </div>
  34.             </div>
  35.         {% endif %}
  38.         <!-- /menu profile quick info -->
  40.         <!-- sidebar menu -->
  41.         <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
  42.             <div class="menu_section">
  43.                 <h3>General</h3>
  44.                 <ul class="nav side-menu">
  45.                     <li><a href="/"><i class="fa fa-home"></i> Accueil </a> </li>
  48.                     <li><a href="{{ path ("dtc_article_liste") }}"><i class="fa fa-shopping-cart"></i> Catalogue </a> </li>
  51.                     {#
  52.                     <li><a><i class="fa fa-shopping-cart"></i> Catalogue <span class="fa fa-chevron-down"></span></a>
  53.                         <ul class="nav child_menu">
  54.                             <li><a href="{{ path ("dtc_article_liste") }}">Produits</a></li>
  56.                         </ul>
  57.                     </li>
  58.                     #}
  59.                     <li><a><i class="fa fa-clipboard"></i> Commandes <span class="fa fa-chevron-down"></span></a>
  60.                         <ul class="nav child_menu">
  61.                             <li><a href="{{ path ("dtc_devis_liste") }}">Devis</a></li>
  62.                             <li><a href="{{ path ("dtc_commande_liste") }}">Commandes</a></li>
  63.                             <li><a href="{{ path ("dtc_bon_livraison_liste") }}">Bons de livraison</a></li>
  64.                             <li><a href="{{ path ("dtc_facture_liste") }}">Factures</a></li>
  65.                             <li><a href="{{ path ("dtc_sav") }}">SAV</a></li>
  66.                         </ul>
  67.                     </li>
  69.                     <li><a><i class="fa fa-download"></i> Téléchargements <span class="fa fa-chevron-down"></span></a>
  70.                         <ul class="nav child_menu">
  71.                            {#  <li><a href="{{ path ("dtc_telechargement_prix_liste") }}">Prix</a></li> #}
  72.                             {% if dtc_article.getCatalogues() > 0 %}
  73.                             <li><a href="{{ path ("dtc_telechargement_catalogue_liste") }}">Catalogues</a></li>
  74.                             {% endif %}
  75.                             {% if dtc_article.getFichiersCsv() > 0 %}
  76.                                 <li><a href="{{ path ("dtc_telechargement_fiche_liste") }}">Fichiers CSV</a></li>
  77.                             {% endif %}
  79.                         </ul>
  80.                     </li>
  83.                     <li><a href="{{ path ("dtc_contact") }}"><i class="fa fa-envelope"></i> Contact </a>
  84.                     <li><a href="{{ path ("dtc_faq") }}"><i class="fa fa-question"></i> Aide </a>
  85.                 </ul>
  86.             </div>
  88.             <div class="menu_section " style="margin-bottom:20px;">
  89.                 <h3>Paramètres</h3>
  90.                 <ul class="nav side-menu side-menu-2" style="margin-top:15px;">
  93.                     <li><a><i class="fa fa-gears"></i> Paramètres <span class="fa fa-chevron-down"></span></a>
  94.                         <ul class="nav child_menu">
  95.                             <li><a href="{{ path ("dtc_utilisateur_profil") }}">Données personnelles</a></li>
  96.                           {#   <li><a href="{{ path ("dtc_remise_liste") }}">Remises</a></li>#}
  97.                             <li><a href="{{ path ("dtc_adresse_liste") }}">Adresses</a></li>
  99.                             {% if app.user.client.id is defined and app.user.client.statutApi %}
  100.                             <li><a href="{{ path ("dtc_client_export_csv") }}">Export CSV</a></li>
  101.                             <li><a href="{{ path ("dtc_client_api") }}">API</a></li>
  102.                             {% endif %}
  103.                         </ul>
  104.                     </li>
  111.                     {#
  112.                     <li><a><i class="fa fa-gears"></i> Paramètres <span class="fa fa-chevron-down"></span></a>
  113.                         <ul class="nav child_menu">
  114.                             <li><a href="#level1_1">Level One</a>
  115.                             <li><a>Level One<span class="fa fa-chevron-down"></span></a>
  116.                                 <ul class="nav child_menu">
  117.                                     <li class="sub_menu"><a href="level2.html">Level Two</a>
  118.                                     </li>
  119.                                     <li><a href="#level2_1">Level Two</a>
  120.                                     </li>
  121.                                     <li><a href="#level2_2">Level Two</a>
  122.                                     </li>
  123.                                 </ul>
  124.                             </li>
  125.                             <li><a href="#level1_2">Level One</a>
  126.                             </li>
  127.                         </ul>
  128.                     </li>
  129.                         <li><a href="{{ path('dtc_utilisateur_profil') }}"><i class="fa fa-gears"></i> Paramètres</a></li>
  130.                     #}
  133.                 </ul>
  134.             </div>
  135.             <div class="menu_section">
  137.                 <style>
  138.                     /* Style de base pour tous les drapeaux */
  140.                 </style>
  142.                 <script type="text/javascript">
  143.                     function changeLanguage(lang) {
  144.                         var selectField = document.querySelector("select.goog-te-combo");
  146.                         if (selectField) {
  147.                             selectField.value = lang;
  148.                             selectField.dispatchEvent(new Event("change"));
  149.                         }
  150.                     }
  151.                     function googleTranslateElementInit() {
  152.                         new google.translate.TranslateElement({
  153.                             pageLanguage: 'fr'
  154.                         }, 'google_translate_element');
  155.                     }
  156.                 </script>
  157.                 <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  158.                 <div id="google_translate_element" style="display:none"></div>
  159.                 <h3>Langue</h3>
  160.                 <ul class="nav side-menu" style="margin-top:15px;">
  161.                     <li style="text-align:center;">
  162.                         <span style="cursor:pointer;display:inline;padding-right:5px;" href="#" onclick="changeLanguage('en')"><span style="margin-bottom:10px;" class="flag flag-gb"></span></span>
  163.                         <span style="cursor:pointer;display:inline;padding-left:5px;padding-right:5px;" href="#" onclick="changeLanguage('fr')"><span style="margin-bottom:10px;" class="flag flag-fr"></span></span>
  164.                         <span style="cursor:pointer;display:inline;padding-left:5px;padding-right:5px;" href="#" onclick="changeLanguage('es')"><span style="margin-bottom:10px;" class="flag flag-es"></span></span>
  165.                     </li>
  166.                 </ul>
  167.             </div>
  168.         </div>
  169.         <!-- /sidebar menu -->
  171.         <!-- /menu footer buttons -->
  172.         <div class="sidebar-footer hidden-small">
  173.             {#
  174.             <a data-toggle="tooltip" data-placement="top" title="Settings">
  175.                 <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
  176.             </a>
  177.             <a data-toggle="tooltip" data-placement="top" title="FullScreen">
  178.                 <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
  179.             </a>
  181.             <a data-toggle="tooltip" data-placement="top" title="Lock">
  182.                 <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
  183.             </a>
  186.             <span style="width:75%;display:block;float:left;">
  187.                 &nbsp;
  188.             </span>
  189.             #}
  191.             <a data-toggle="tooltip" data-placement="top" title="Aide" href="{{ path('dtc_faq') }}">
  192.                 <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
  193.             </a>
  194.             <a data-toggle="tooltip" data-placement="top" title="Contact" href="{{ path('dtc_contact') }}">
  195.                 <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
  196.             </a>
  197.             <a data-toggle="tooltip" data-placement="top" title="Profil" href="{{ path('dtc_utilisateur_profil') }}">
  198.                 <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
  199.             </a>
  200.             <a data-toggle="tooltip" data-placement="top" title="Se déconnecter" href="{{ path('logout') }}">
  201.                 <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
  202.             </a>
  203.         </div>
  204.         <!-- /menu footer buttons -->
  205.     </div>
  206. </div>
  208. {% set now = "now"|date("Y-m-d H:i:s") %}
  209. {% if societe.noteService != ""
  210.     and societe.isStatutTexteBandeau
  211.     and (societe.dateDebutTexteBandeau is not empty and societe.dateDebutTexteBandeau|date("Y-m-d H:i:s") <= now)
  212.     and (societe.dateFinTexteBandeau is not empty and societe.dateFinTexteBandeau|date("Y-m-d H:i:s") >= now)
  213. %}
  214.     <div style="background:yellow;">
  215.         <div class="banner" aria-label="" style="_margin-left:230px;">
  216.             <div class="track" id="track">
  217.                 <div class="item" style="text-align:center;">
  218.                     {{ societe.noteService }}&nbsp;&nbsp;&nbsp;
  219.                     {{ societe.noteService }}&nbsp;&nbsp;&nbsp;
  220.                     {{ societe.noteService }}
  221.                 </div>
  222.                 <input id="speed" type="hidden" value="30" min="10">
  223.             </div>
  224.         </div>
  225.     </div>
  226. {% endif %}
  227. <style>
  228.     .pulse {
  229.         animation: pulse 0.4s ease;
  230.     }
  231.     @keyframes pulse {
  232.         0%   { transform: scale(1); }
  233.         50%  { transform: scale(1.15); }
  234.         100% { transform: scale(1); }
  235.     }
  236. </style>
  237. {% if app.user.type.id is defined and (app.user.type.id == 1 or app.user.type.id == 2 or app.user.type.id == 3) %}
  238.     <div id="bandeau_admin" class="dark"  style="background:#d8d8d8;padding:10px;">
  240.         <div id="contenu_bandeau_admin">
  241.         {% if app.user.client.id is defined %}
  242.         <span data-link="{{ path ("dtc_change_client_modal", {} ) }}" class="droite btn btn-success btn-sm open-modal-form" data-taille="" data-target="#blocModal" data-toggle="modal">Changer de client</span>
  243.         {% else %}
  244.             <span data-link="{{ path ("dtc_change_client_modal", {} ) }}" class="droite btn btn-success btn-sm open-modal-form" data-taille="" data-target="#blocModal" data-toggle="modal">Choisir un client</span>
  245.         {% endif %}
  246.         <b>{{ app.user.prenom }} {{ app.user.nom }} ADMIN</b>.
  247.         {% if app.user.client.id is defined %}
  248.             <div id="client_rattache">CLIENT : <b id="">{{ app.user.client.reference }} - {{ app.user.client.nom }}</b>.
  249.                 {% if app.user.type.id == 1 or app.user.type.id == 2 or app.user.type.id == 3 %}
  250.                 | <a class="dark" href="{{ path ("dtc_client_stats", {} ) }}">Suivi activités</a>
  251.                 {% endif %}
  252.             </div>
  254.         {% else %}
  255.             <div id="client_rattache"><span class="fa fa-warning text-danger"></span> MERCI DE SÉLECTIONNER UN CLIENT. <span class="fa fa-warning text-danger"></div>
  256.         {% endif %}
  258.         <div class="both"></div>
  259.         </div>
  261.     </div>
  262. {% endif %}
  265. <script>
  269.     $(document).ready(function(){
  270.         $selectArticleRechercheTop = $("#dtc_article_recherche_top_select2").select2({
  271.             ajax: {
  272.                 url: Routing.generate('dtc_article_recherche'),
  273.                 dataType: 'json',
  274.                 delay: 250,
  275.                 data: function (params) { return {  q: params.term,page: params.page}; },
  276.                 processResults: function (data, params) {
  277.                     params.page = params.page || 1;
  278.                     return {  results: data.items,  pagination: { more: (params.page * 10) < data.total_count }};},
  279.                 cache: true
  280.             },
  281.             escapeMarkup: function (markup) { return markup; },minimumInputLength: 0,
  282.             templateResult:formatRepoSelect2RechercheTop,
  283.             templateSelection: formatRepoSelect2RechercheTopSelection,
  284.             minimumInputLength: 3,
  285.             placeholder: 'Rechercher un produit, une référence.',
  286.             language: {
  287.                 inputTooShort: function(args) {
  288.                     var remainingChars = args.minimum - args.input.length;
  289.                     return 'Merci de saisir au moins ' + args.minimum + ' caractères';
  290.                 },
  291.                 searching: function() {
  292.                     return "Recherche en cours…"; // ton texte personnalisé
  293.                 },
  294.                 noResults: function() {
  295.                     return "Aucun résultat trouvé";
  296.                 },
  297.                 errorLoading: function () {
  298.                     return "Les résultats n'ont pas pu être chargés.";
  299.                 }
  300.             },
  301.         });
  303.         var isEnterKey = false;
  304.         var url_fiche_produit_select2 = "";
  306.         $('#dtc_article_recherche_top_select2').on('select2:open', function(e) {
  307.             // On récupère l'input de recherche interne du dropdown
  308.             let searchField = $('.select2-container--open .select2-search__field');
  309.             // On retire tout ancien handler keydown pour éviter les doublons
  310.             searchField.off('keydown').on('keydown', function(e) {
  311.                 if (e.key === "Enter" || e.keyCode === 13) {
  312.                     e.preventDefault(); // empêche la sélection par défaut
  313.                     isEnterKey = true;
  314.                     let userInput = $(this).val();
  315.                     if (url_fiche_produit_select2 === "") {
  316.                         var url = Routing.generate('dtc_article_liste', {mc: userInput});
  317.                         window.location.href = url;
  318.                         e.stopImmediatePropagation();
  319.                     }
  320.                     return false;
  321.                 }
  322.             });
  323.         });
  325.         $("#dtc_article_recherche_top_select2").on('change', function(e) {
  326.             if (isEnterKey) {
  327.             } else {
  328.                 var valeur = $(this).val();
  329.                 var selectedData = $(this).select2('data')[0]; // récupère le premier item sélectionné
  330.                 var slug = selectedData.slug;
  331.                 var url = Routing.generate('dtc_article_afficher', {id: valeur,slug:slug});
  332.                 url_fiche_produit_select2 = url;
  333.                 window.location.href = url;
  334.                 e.stopImmediatePropagation();
  335.                 return false;
  336.             }
  337.             isEnterKey = false;
  338.         });
  339.     });
  340. </script>
  342. <!-- top navigation -->
  343. <div class="top_nav">
  344.     <div class="nav_menu" style="margin-bottom:0px;">
  346.         <div class="nav toggle" style="">
  347.             {#
  348.             <div style="margin-top:15px;padding-left : 0px;padding-left:5px;" class="gauche" id="icon-kangaroo-mobile">
  349.                 <a href="/" style="padding:0px;"><i style="font-size:2em;" class="icon-kangaroo-silhouette"></i></a>
  350.             </div>
  351.             #}
  352.             <a style="color:white !important;" id="menu_toggle"><i class="fa fa-bars"></i></a>
  353.             <a id="loupe_search" class="visible_mobile" href="#" data-toggle="modal" data-target="#searchModal" class="ml-2 pl-0" style="padding-left:0px;">
  354.                 <i class="fa fa-search"></i>
  355.             </a>
  357.         </div>
  358.         <nav class="nav navbar-nav">
  359.             <div class="_off" id="bloc_select2_recheche_top" style="float:left;width:calc(100% - 350px);position:absolute;">
  360.                 <div id="dtc_article_recherche_top_select2_conteneur" style="padding-top:9px;">
  361.                     <select style="width:100%;" id="dtc_article_recherche_top_select2"></select>
  362.                 </div>
  363.             </div>
  364.             <ul style="padding-left:0px;" class=" navbar-right">
  366.                 <li class="nav-item dropdown open" style="padding-left: 15px;">
  368.                     {% if app.user.id is defined  %}
  369.                         <a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false">
  370.                             <img src="/images/avatar.png" alt="">
  371.                             <span style="white-space:nowrap;" class="masquer_mobile_absolute">{{ app.user.prenom }} {{ app.user.nom }}</span>
  372.                         </a>
  373.                     {% else %}
  374.                         <a href="/login" class="user-profile">
  375.                             <img src="/images/avatar.png" alt="">
  376.                             <span style="white-space:nowrap;" class="masquer_mobile_absolute">Se connecter</span>
  377.                         </a>
  378.                     {% endif %}
  381.                     <div class="dropdown-menu dropdown-usermenu pull-right" aria-labelledby="navbarDropdown">
  383.                         {% if app.user.id is defined  %}
  384.                         <a class="dropdown-item"  href="{{ path('dtc_utilisateur_profil') }}"><i style="color:#34495E;font-size:1.35em;" class="fa fa-user pull-right"></i>  {{ app.user.prenom }} {{ app.user.nom }}</a>
  385.                         {% endif %}
  387.                         <a class="dropdown-item"  href="{{ path('dtc_adresse_liste') }}"><i style="color:#34495E;font-size:1.35em;" class="fa fa-book pull-right"></i> Adresses</a>
  388.                         {# <a class="dropdown-item"  href="{{ path('dtc_remise_liste') }}"><i style="color:#34495E;font-size:1.35em;" class=" pull-right">%</i> Remises</a>#}
  389.                         <a class="dropdown-item"  href="{{ path('logout') }}"><i style="color:#34495E;font-size:1.35em;" class="fa fa-power-off pull-right"></i> Déconnexion</a>
  390.                         {#
  391.                         <a class="dropdown-item"  href="javascript:;">
  392.                             <span class="badge bg-red pull-right">50%</span>
  393.                             <span>Settings</span>
  394.                         </a>
  395.                         #}
  396.                     </div>
  397.                 </li>
  400.                 {% set panier = dtc_panier.getPanier() %}
  401.                 <li role="presentation" class="nav-item dropdown open">
  402.                     <a style="color:white !important;" href="javascript:;" class="dropdown-toggle info-number" id="navbarDropdown1" data-toggle="dropdown" aria-expanded="false">
  403.                         <i style="" class="fa fa-shopping-cart"></i>
  405.                         <span style="font-weight:bold;position:inherit;" id="panier-count" class="badge bg-red {% if panier.id is defined and panier.articleCommande|length > 0 %}bounce{% endif %}">{% if panier.id is defined and panier.articleCommande|length > 0 %}{{ panier.articleCommande|length }}{% else %}0{% endif %}</span>
  406.                     </a>
  408.                     <ul id="liste-top-panier" class="dropdown-menu list-unstyled msg_list" role="menu" aria-labelledby="navbarDropdown1">
  409.                         {% if panier.id is defined and panier.articleCommande|length > 0 %}
  410.                         {% for p in panier.articleCommande %}
  411.                         <li class="nav-item">
  412.                             {% set slug = dtc_article.getslugifArticle(p.article) %}
  413.                             <a class="dropdown-item" href="{{ path("dtc_article_afficher" , { 'id': p.article.id,'slug':slug }) }}">
  414.                                 <span class="image">
  415.                                     {% set images = dtc_image_article.getImageDefaut(p.article.id) %}
  416.                                     {% if images[0] is defined %}
  417.                                        {#  <img src="{{ asset(images[0].getUploadDir ~ '/' ~ p.article.id ~ '/' ~ images[0].url) | imagine_filter('400x300') }}" style="width:25%;">#}
  419.                                         <img src="{{ url_image_distant }}/image/800/600/{{ images[0].ulid }}" style="width:25%;">
  423.                                     {% else %}
  424.                                         <img src="{{ asset('images/defaut-img-product.jpg') }}" style="width:25%;">
  425.                                     {% endif %}
  426.                                  </span>
  427.                                 <div class="gauche">
  428.                                 <div>Référence : {{ p.reference }}</div>
  429.                                 <div class="message">Tarif :  {{ p.prixAvecRemise|price|raw }}&nbsp;&euro; HT</div>
  430.                                 <div class="message">Quantité : {{ p.quantite }}</div>
  431.                                 </div>
  432.                             </a>
  433.                         </li>
  434.                         {% endfor %}
  435.                         {% endif %}
  436.                         <li class="nav-item">
  437.                             <div class="text-center">
  438.                                 <a href="{{ path('dtc_panier_afficher') }}" class="btn btn-warning d-flex justify-content-center align-items-center" style="width:100%;">
  439.                                     <i class="fa fa-shopping-cart mr-2" style="font-size:0.9em;"></i>
  440.                                     Voir le panier
  441.                                 </a>
  442.                             </div>
  443.                         </li>
  444.                     </ul>
  445.                 </li>
  446.             </ul>
  447.         </nav>
  450.     </div>
  451.     {% set current_path = app.request.attributes.get('_route') %}
  452.     {% set tableau_fil = "" %}
  453.     {% set tableau_fil = "" %}
  454.     {% set objet = "" %}
  455.     {% if current_path == "dtc_article_liste" %}
  456.         {% set tableau_fil = "DTCArticlesBundle:Article" %}
  457.         {% set type_fil = "liste" %}
  458.     {% elseif current_path == "dtc_article_afficher" %}
  459.         {% set tableau_fil = "DTCArticlesBundle:Article" %}
  460.         {% set type_fil = article.libelle %}
  461.         {% set objet = article %}
  462.     {% endif %}
  467.     {% if tableau_fil != "" %}
  468.         {% include 'FO/FO/fil_ariane.html.twig' with( {'tableau':tableau_fil ,'type':type_fil,'objet':objet} )%}
  469.     {% endif %}
  470.     {% if societe.noteService != "" %}
  471.     <script>
  472.         (function(){
  473.             const track = document.getElementById('track');
  474.             const speedInput = document.getElementById('speed');
  475.             const applyBtn = document.getElementById('apply');
  476.             // s'assurer qu'on a au moins deux copies consécutives du contenu pour une boucle continue
  477.             function ensureDouble(){
  478.                 const children = Array.from(track.children);
  479.                 // si la piste n'a qu'une seule série, on la clone pour avoir une répétition
  480.                 if(children.length === 1){
  481.                     const clone = children[0].cloneNode(true);
  482.                     track.appendChild(clone);
  483.                 }
  484.             }
  485.             // calcule et applique la durée d'animation pour que la vitesse soit constante
  486.             function applySpeed(pxPerSecond){
  487.                 // largeur totale de la piste (les deux répétitions)
  488.                 // on utilise scrollWidth pour prendre en compte le contenu non visible
  489.                 const totalWidth = track.scrollWidth;
  490.                 // durée en secondes = (largeur à parcourir (en px) / vitesse en px/s)
  491.                 // la piste animée parcourt 50% de sa largeur (de 0 à -50%) avant de boucler
  492.                 // donc distance parcourue = totalWidth * 0.5
  493.                 const distancePx = totalWidth * 0.5;
  494.                 const durationSec = Math.max(1, distancePx / pxPerSecond); // minimum 1s
  495.                 // appliquer la durée via variable CSS
  496.                 track.style.setProperty('--duration', durationSec + 's');
  497.             }
  498.             // initialisation
  499.             ensureDouble();
  500.             // appliquer vitesse initiale tirée du champ
  501.             applySpeed(Number(speedInput.value) || 120);
  502.             // si la fenêtre est redimensionnée, recalculer la durée
  503.             let resizeTimer;
  504.             window.addEventListener('resize', ()=>{
  505.                 clearTimeout(resizeTimer);
  506.                 resizeTimer = setTimeout(()=> applySpeed(Number(speedInput.value) || 120), 120);
  507.             });
  509.             // accessible: permet de modifier le texte depuis Javascript si besoin
  510.             window.setMarqueeText = function(newText){
  511.                 // remplace le texte dans les items existants
  512.                 const items = track.querySelectorAll('.item');
  513.                 if(items.length === 0){
  514.                     const d = document.createElement('div'); d.className='item'; d.textContent=newText; track.appendChild(d);
  515.                 } else {
  516.                     items.forEach(it => it.textContent = newText);
  517.                 }
  518.                 // si on avait une seule série, s'assurer d'une répétition
  519.                 ensureDouble();
  520.                 // recalculer durée
  521.                 applySpeed(Number(speedInput.value) || 120);
  522.             };
  523.         })();
  524.     </script>
  525.     {% endif %}
  527. </div>
  528. <!-- /top navigation -->