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.                             <li><a href="{{ path ("dtc_telechargement_catalogue_liste") }}">Catalogues</a></li>
  73.                             <li><a href="{{ path ("dtc_telechargement_fiche_liste") }}">Fichiers CSV</a></li>
  74.                         </ul>
  75.                     </li>
  78.                     <li><a href="{{ path ("dtc_contact") }}"><i class="fa fa-envelope"></i> Contact </a>
  79.                     <li><a href="{{ path ("dtc_faq") }}"><i class="fa fa-question"></i> Aide </a>
  80.                 </ul>
  81.             </div>
  83.             <div class="menu_section " style="margin-bottom:20px;">
  84.                 <h3>Paramètres</h3>
  85.                 <ul class="nav side-menu side-menu-2" style="margin-top:15px;">
  88.                     <li><a><i class="fa fa-gears"></i> Paramètres <span class="fa fa-chevron-down"></span></a>
  89.                         <ul class="nav child_menu">
  90.                             <li><a href="{{ path ("dtc_utilisateur_profil") }}">Données personnelles</a></li>
  91.                           {#   <li><a href="{{ path ("dtc_remise_liste") }}">Remises</a></li>#}
  92.                             <li><a href="{{ path ("dtc_adresse_liste") }}">Adresses</a></li>
  94.                             {% if app.user.client.id is defined and app.user.client.statutApi %}
  95.                             <li><a href="{{ path ("dtc_client_export_csv") }}">Export CSV</a></li>
  96.                             <li><a href="{{ path ("dtc_client_api") }}">API</a></li>
  97.                             {% endif %}
  98.                         </ul>
  99.                     </li>
  106.                     {#
  107.                     <li><a><i class="fa fa-gears"></i> Paramètres <span class="fa fa-chevron-down"></span></a>
  108.                         <ul class="nav child_menu">
  109.                             <li><a href="#level1_1">Level One</a>
  110.                             <li><a>Level One<span class="fa fa-chevron-down"></span></a>
  111.                                 <ul class="nav child_menu">
  112.                                     <li class="sub_menu"><a href="level2.html">Level Two</a>
  113.                                     </li>
  114.                                     <li><a href="#level2_1">Level Two</a>
  115.                                     </li>
  116.                                     <li><a href="#level2_2">Level Two</a>
  117.                                     </li>
  118.                                 </ul>
  119.                             </li>
  120.                             <li><a href="#level1_2">Level One</a>
  121.                             </li>
  122.                         </ul>
  123.                     </li>
  124.                         <li><a href="{{ path('dtc_utilisateur_profil') }}"><i class="fa fa-gears"></i> Paramètres</a></li>
  125.                     #}
  128.                 </ul>
  129.             </div>
  130.             <div class="menu_section">
  132.                 <style>
  133.                     /* Style de base pour tous les drapeaux */
  135.                 </style>
  137.                 <script type="text/javascript">
  138.                     function changeLanguage(lang) {
  139.                         var selectField = document.querySelector("select.goog-te-combo");
  141.                         if (selectField) {
  142.                             selectField.value = lang;
  143.                             selectField.dispatchEvent(new Event("change"));
  144.                         }
  145.                     }
  146.                     function googleTranslateElementInit() {
  147.                         new google.translate.TranslateElement({
  148.                             pageLanguage: 'fr'
  149.                         }, 'google_translate_element');
  150.                     }
  151.                 </script>
  152.                 <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  153.                 <div id="google_translate_element" style="display:none"></div>
  154.                 <h3>Langue</h3>
  155.                 <ul class="nav side-menu" style="margin-top:15px;">
  156.                     <li style="text-align:center;">
  157.                         <span style="cursor:pointer;display:inline;padding-right:5px;" href="#" onclick="changeLanguage('en')"><span style="margin-bottom:10px;" class="flag flag-gb"></span></span>
  158.                         <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>
  159.                         <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>
  160.                     </li>
  161.                 </ul>
  162.             </div>
  163.         </div>
  164.         <!-- /sidebar menu -->
  166.         <!-- /menu footer buttons -->
  167.         <div class="sidebar-footer hidden-small">
  168.             {#
  169.             <a data-toggle="tooltip" data-placement="top" title="Settings">
  170.                 <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
  171.             </a>
  172.             <a data-toggle="tooltip" data-placement="top" title="FullScreen">
  173.                 <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
  174.             </a>
  176.             <a data-toggle="tooltip" data-placement="top" title="Lock">
  177.                 <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
  178.             </a>
  181.             <span style="width:75%;display:block;float:left;">
  182.                 &nbsp;
  183.             </span>
  184.             #}
  186.             <a data-toggle="tooltip" data-placement="top" title="Aide" href="{{ path('dtc_faq') }}">
  187.                 <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
  188.             </a>
  189.             <a data-toggle="tooltip" data-placement="top" title="Contact" href="{{ path('dtc_contact') }}">
  190.                 <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
  191.             </a>
  192.             <a data-toggle="tooltip" data-placement="top" title="Profil" href="{{ path('dtc_utilisateur_profil') }}">
  193.                 <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
  194.             </a>
  195.             <a data-toggle="tooltip" data-placement="top" title="Se déconnecter" href="{{ path('logout') }}">
  196.                 <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
  197.             </a>
  198.         </div>
  199.         <!-- /menu footer buttons -->
  200.     </div>
  201. </div>
  203. {% set now = "now"|date("Y-m-d H:i:s") %}
  204. {% if societe.noteService != ""
  205.     and societe.isStatutTexteBandeau
  206.     and (societe.dateDebutTexteBandeau is not empty and societe.dateDebutTexteBandeau|date("Y-m-d H:i:s") <= now)
  207.     and (societe.dateFinTexteBandeau is not empty and societe.dateFinTexteBandeau|date("Y-m-d H:i:s") >= now)
  208. %}
  209.     <div style="background:yellow;">
  210.         <div class="banner" aria-label="" style="_margin-left:230px;">
  211.             <div class="track" id="track">
  212.                 <div class="item" style="text-align:center;">
  213.                     {{ societe.noteService }}&nbsp;&nbsp;&nbsp;
  214.                     {{ societe.noteService }}&nbsp;&nbsp;&nbsp;
  215.                     {{ societe.noteService }}
  216.                 </div>
  217.                 <input id="speed" type="hidden" value="30" min="10">
  218.             </div>
  219.         </div>
  220.     </div>
  221. {% endif %}
  222. <style>
  223.     .pulse {
  224.         animation: pulse 0.4s ease;
  225.     }
  226.     @keyframes pulse {
  227.         0%   { transform: scale(1); }
  228.         50%  { transform: scale(1.15); }
  229.         100% { transform: scale(1); }
  230.     }
  231. </style>
  232. {% 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) %}
  233.     <div id="bandeau_admin" class="dark"  style="background:#d8d8d8;padding:10px;">
  235.         <div id="contenu_bandeau_admin">
  236.         {% if app.user.client.id is defined %}
  237.         <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>
  238.         {% else %}
  239.             <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>
  240.         {% endif %}
  241.         <b>{{ app.user.prenom }} {{ app.user.nom }} ADMIN</b>.
  242.         {% if app.user.client.id is defined %}
  243.             <div id="client_rattache">CLIENT : <b id="">{{ app.user.client.reference }} - {{ app.user.client.nom }}</b>.
  244.                 {% if app.user.type.id == 1 %}
  245.                 | <a class="dark" href="{{ path ("dtc_client_stats", {} ) }}">Suivi activités</a>
  246.                 {% endif %}
  247.             </div>
  249.         {% else %}
  250.             <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>
  251.         {% endif %}
  253.         <div class="both"></div>
  254.         </div>
  256.     </div>
  257. {% endif %}
  260. <script>
  264.     $(document).ready(function(){
  265.         $selectArticleRechercheTop = $("#dtc_article_recherche_top_select2").select2({
  266.             ajax: {
  267.                 url: Routing.generate('dtc_article_recherche'),
  268.                 dataType: 'json',
  269.                 delay: 250,
  270.                 data: function (params) { return {  q: params.term,page: params.page}; },
  271.                 processResults: function (data, params) {
  272.                     params.page = params.page || 1;
  273.                     return {  results: data.items,  pagination: { more: (params.page * 10) < data.total_count }};},
  274.                 cache: true
  275.             },
  276.             escapeMarkup: function (markup) { return markup; },minimumInputLength: 0,
  277.             templateResult:formatRepoSelect2RechercheTop,
  278.             templateSelection: formatRepoSelect2RechercheTopSelection,
  279.             minimumInputLength: 3,
  280.             placeholder: 'Rechercher un produit, une référence.',
  281.             language: {
  282.                 inputTooShort: function(args) {
  283.                     var remainingChars = args.minimum - args.input.length;
  284.                     return 'Merci de saisir au moins ' + args.minimum + ' caractères';
  285.                 },
  286.                 searching: function() {
  287.                     return "Recherche en cours…"; // ton texte personnalisé
  288.                 },
  289.                 noResults: function() {
  290.                     return "Aucun résultat trouvé";
  291.                 },
  292.                 errorLoading: function () {
  293.                     return "Les résultats n'ont pas pu être chargés.";
  294.                 }
  295.             },
  296.         });
  298.         var isEnterKey = false;
  299.         var url_fiche_produit_select2 = "";
  301.         $('#dtc_article_recherche_top_select2').on('select2:open', function(e) {
  302.             // On récupère l'input de recherche interne du dropdown
  303.             let searchField = $('.select2-container--open .select2-search__field');
  304.             // On retire tout ancien handler keydown pour éviter les doublons
  305.             searchField.off('keydown').on('keydown', function(e) {
  306.                 if (e.key === "Enter" || e.keyCode === 13) {
  307.                     e.preventDefault(); // empêche la sélection par défaut
  308.                     isEnterKey = true;
  309.                     let userInput = $(this).val();
  310.                     if (url_fiche_produit_select2 === "") {
  311.                         var url = Routing.generate('dtc_article_liste', {mc: userInput});
  312.                         window.location.href = url;
  313.                         e.stopImmediatePropagation();
  314.                     }
  315.                     return false;
  316.                 }
  317.             });
  318.         });
  320.         $("#dtc_article_recherche_top_select2").on('change', function(e) {
  321.             if (isEnterKey) {
  322.             } else {
  323.                 var valeur = $(this).val();
  324.                 var selectedData = $(this).select2('data')[0]; // récupère le premier item sélectionné
  325.                 var slug = selectedData.slug;
  326.                 var url = Routing.generate('dtc_article_afficher', {id: valeur,slug:slug});
  327.                 url_fiche_produit_select2 = url;
  328.                 window.location.href = url;
  329.                 e.stopImmediatePropagation();
  330.                 return false;
  331.             }
  332.             isEnterKey = false;
  333.         });
  334.     });
  335. </script>
  337. <!-- top navigation -->
  338. <div class="top_nav">
  339.     <div class="nav_menu" style="margin-bottom:0px;">
  341.         <div class="nav toggle" style="">
  342.             {#
  343.             <div style="margin-top:15px;padding-left : 0px;padding-left:5px;" class="gauche" id="icon-kangaroo-mobile">
  344.                 <a href="/" style="padding:0px;"><i style="font-size:2em;" class="icon-kangaroo-silhouette"></i></a>
  345.             </div>
  346.             #}
  347.             <a style="color:white !important;" id="menu_toggle"><i class="fa fa-bars"></i></a>
  348.             <a id="loupe_search" class="visible_mobile" href="#" data-toggle="modal" data-target="#searchModal" class="ml-2 pl-0" style="padding-left:0px;">
  349.                 <i class="fa fa-search"></i>
  350.             </a>
  352.         </div>
  353.         <nav class="nav navbar-nav">
  354.             <div class="_off" id="bloc_select2_recheche_top" style="float:left;width:calc(100% - 350px);position:absolute;">
  355.                 <div id="dtc_article_recherche_top_select2_conteneur" style="padding-top:9px;">
  356.                     <select style="width:100%;" id="dtc_article_recherche_top_select2"></select>
  357.                 </div>
  358.             </div>
  359.             <ul style="padding-left:0px;" class=" navbar-right">
  361.                 <li class="nav-item dropdown open" style="padding-left: 15px;">
  363.                     {% if app.user.id is defined  %}
  364.                         <a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false">
  365.                             <img src="/images/avatar.png" alt="">
  366.                             <span style="white-space:nowrap;" class="masquer_mobile_absolute">{{ app.user.prenom }} {{ app.user.nom }}</span>
  367.                         </a>
  368.                     {% else %}
  369.                         <a href="/login" class="user-profile">
  370.                             <img src="/images/avatar.png" alt="">
  371.                             <span style="white-space:nowrap;" class="masquer_mobile_absolute">Se connecter</span>
  372.                         </a>
  373.                     {% endif %}
  376.                     <div class="dropdown-menu dropdown-usermenu pull-right" aria-labelledby="navbarDropdown">
  378.                         {% if app.user.id is defined  %}
  379.                         <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>
  380.                         {% endif %}
  382.                         <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>
  383.                         {# <a class="dropdown-item"  href="{{ path('dtc_remise_liste') }}"><i style="color:#34495E;font-size:1.35em;" class=" pull-right">%</i> Remises</a>#}
  384.                         <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>
  385.                         {#
  386.                         <a class="dropdown-item"  href="javascript:;">
  387.                             <span class="badge bg-red pull-right">50%</span>
  388.                             <span>Settings</span>
  389.                         </a>
  390.                         #}
  391.                     </div>
  392.                 </li>
  394.                 {% set panier = dtc_panier.getPanier() %}
  395.                 <li role="presentation" class="nav-item dropdown open">
  396.                     <a style="color:white !important;" href="javascript:;" class="dropdown-toggle info-number" id="navbarDropdown1" data-toggle="dropdown" aria-expanded="false">
  397.                         <i style="" class="fa fa-shopping-cart"></i>
  399.                         <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>
  400.                     </a>
  402.                     <ul id="liste-top-panier" class="dropdown-menu list-unstyled msg_list" role="menu" aria-labelledby="navbarDropdown1">
  403.                         {% if panier.id is defined and panier.articleCommande|length > 0 %}
  404.                         {% for p in panier.articleCommande %}
  405.                         <li class="nav-item">
  406.                             {% set slug = dtc_article.getslugifArticle(p.article) %}
  407.                             <a class="dropdown-item" href="{{ path("dtc_article_afficher" , { 'id': p.article.id,'slug':slug }) }}">
  408.                                 <span class="image">
  409.                                     {% set images = dtc_image_article.getImageDefaut(p.article.id) %}
  410.                                     {% if images[0] is defined %}
  411.                                        {#  <img src="{{ asset(images[0].getUploadDir ~ '/' ~ p.article.id ~ '/' ~ images[0].url) | imagine_filter('400x300') }}" style="width:25%;">#}
  413.                                         <img src="{{ url_image_distant }}/image/800/600/{{ images[0].ulid }}" style="width:25%;">
  417.                                     {% else %}
  418.                                         <img src="{{ asset('images/defaut-img-product.jpg') }}" style="width:25%;">
  419.                                     {% endif %}
  420.                                  </span>
  421.                                 <div class="gauche">
  422.                                 <div>Référence : {{ p.reference }}</div>
  423.                                 <div class="message">Tarif :  {{ p.prixAvecRemise|price|raw }}&nbsp;&euro; HT</div>
  424.                                 <div class="message">Quantité : {{ p.quantite }}</div>
  425.                                 </div>
  426.                             </a>
  427.                         </li>
  428.                         {% endfor %}
  429.                         {% endif %}
  430.                         <li class="nav-item">
  431.                             <div class="text-center">
  432.                                 <a href="{{ path('dtc_panier_afficher') }}" class="btn btn-warning d-flex justify-content-center align-items-center" style="width:100%;">
  433.                                     <i class="fa fa-shopping-cart mr-2" style="font-size:0.9em;"></i>
  434.                                     Voir le panier
  435.                                 </a>
  436.                             </div>
  437.                         </li>
  438.                     </ul>
  439.                 </li>
  440.             </ul>
  441.         </nav>
  444.     </div>
  445.     {% set current_path = app.request.attributes.get('_route') %}
  446.     {% set tableau_fil = "" %}
  447.     {% set tableau_fil = "" %}
  448.     {% set objet = "" %}
  449.     {% if current_path == "dtc_article_liste" %}
  450.         {% set tableau_fil = "DTCArticlesBundle:Article" %}
  451.         {% set type_fil = "liste" %}
  452.     {% elseif current_path == "dtc_article_afficher" %}
  453.         {% set tableau_fil = "DTCArticlesBundle:Article" %}
  454.         {% set type_fil = article.libelle %}
  455.         {% set objet = article %}
  456.     {% endif %}
  461.     {% if tableau_fil != "" %}
  462.         {% include 'FO/FO/fil_ariane.html.twig' with( {'tableau':tableau_fil ,'type':type_fil,'objet':objet} )%}
  463.     {% endif %}
  464.     {% if societe.noteService != "" %}
  465.     <script>
  466.         (function(){
  467.             const track = document.getElementById('track');
  468.             const speedInput = document.getElementById('speed');
  469.             const applyBtn = document.getElementById('apply');
  470.             // s'assurer qu'on a au moins deux copies consécutives du contenu pour une boucle continue
  471.             function ensureDouble(){
  472.                 const children = Array.from(track.children);
  473.                 // si la piste n'a qu'une seule série, on la clone pour avoir une répétition
  474.                 if(children.length === 1){
  475.                     const clone = children[0].cloneNode(true);
  476.                     track.appendChild(clone);
  477.                 }
  478.             }
  479.             // calcule et applique la durée d'animation pour que la vitesse soit constante
  480.             function applySpeed(pxPerSecond){
  481.                 // largeur totale de la piste (les deux répétitions)
  482.                 // on utilise scrollWidth pour prendre en compte le contenu non visible
  483.                 const totalWidth = track.scrollWidth;
  484.                 // durée en secondes = (largeur à parcourir (en px) / vitesse en px/s)
  485.                 // la piste animée parcourt 50% de sa largeur (de 0 à -50%) avant de boucler
  486.                 // donc distance parcourue = totalWidth * 0.5
  487.                 const distancePx = totalWidth * 0.5;
  488.                 const durationSec = Math.max(1, distancePx / pxPerSecond); // minimum 1s
  489.                 // appliquer la durée via variable CSS
  490.                 track.style.setProperty('--duration', durationSec + 's');
  491.             }
  492.             // initialisation
  493.             ensureDouble();
  494.             // appliquer vitesse initiale tirée du champ
  495.             applySpeed(Number(speedInput.value) || 120);
  496.             // si la fenêtre est redimensionnée, recalculer la durée
  497.             let resizeTimer;
  498.             window.addEventListener('resize', ()=>{
  499.                 clearTimeout(resizeTimer);
  500.                 resizeTimer = setTimeout(()=> applySpeed(Number(speedInput.value) || 120), 120);
  501.             });
  503.             // accessible: permet de modifier le texte depuis Javascript si besoin
  504.             window.setMarqueeText = function(newText){
  505.                 // remplace le texte dans les items existants
  506.                 const items = track.querySelectorAll('.item');
  507.                 if(items.length === 0){
  508.                     const d = document.createElement('div'); d.className='item'; d.textContent=newText; track.appendChild(d);
  509.                 } else {
  510.                     items.forEach(it => it.textContent = newText);
  511.                 }
  512.                 // si on avait une seule série, s'assurer d'une répétition
  513.                 ensureDouble();
  514.                 // recalculer durée
  515.                 applySpeed(Number(speedInput.value) || 120);
  516.             };
  517.         })();
  518.     </script>
  519.     {% endif %}
  521. </div>
  522. <!-- /top navigation -->