templates/feedback/_widget.html.twig line 1

Open in your IDE?
  1. <div id="feedback-widget" class="position-fixed start-50 translate-middle-x bottom-0 mb-3" style="z-index: 1050;">
  2.   <div class="d-flex align-items-center gap-1">
  3.     <button type="button" 
  4.             class="btn btn-feedback d-flex align-items-center gap-2 shadow-sm" 
  5.             data-bs-toggle="modal" 
  6.             data-bs-target="#feedbackModal"
  7.             id="feedback-open-btn">
  8.       <i class="fa-regular fa-message"></i>
  9.       <span>Feedback ?</span>
  10.     </button>
  11.     <button type="button" 
  12.             class="btn btn-feedback btn-sm shadow-sm" 
  13.             id="feedback-toggle-position"
  14.             title="Changer la position du bouton">
  15.       <i class="fa-solid fa-chevron-up" id="feedback-position-icon"></i>
  16.     </button>
  17.   </div>
  18. </div>
  20. <style>
  21.   .btn-feedback {
  22.     background-color: #e8f0fe;
  23.     border: 1px solid #c5d5fb;
  24.     color: #2e6be5;
  25.     font-weight: 600;
  26.     font-size: 0.875rem;
  27.     padding: 0.5rem 1rem;
  28.     border-radius: 0.5rem;
  29.     transition: all 0.2s ease;
  30.   }
  31.   
  32.   .btn-feedback:hover {
  33.     background-color: #d4e4fd;
  34.     border-color: #a8c4f9;
  35.     color: #1d4ed8;
  36.   }
  37.   
  38.   .btn-feedback:focus {
  39.     box-shadow: 0 0 0 0.25rem rgba(46, 107, 229, 0.25);
  40.   }
  41.   
  42.   .btn-feedback.btn-sm {
  43.     padding: 0.5rem 0.625rem;
  44.   }
  45.   
  46.   #feedback-widget.position-top {
  47.     top: 0 !important;
  48.     bottom: auto !important;
  49.     margin-top: 1rem !important;
  50.     margin-bottom: 0 !important;
  51.   }
  52. </style>
  54. <script>
  55. (function() {
  56.   'use strict';
  57.   
  58.   var widget = document.getElementById('feedback-widget');
  59.   var toggleBtn = document.getElementById('feedback-toggle-position');
  60.   var icon = document.getElementById('feedback-position-icon');
  61.   var STORAGE_KEY = 'feedbackWidgetPosition';
  62.   
  63.   function setPosition(position) {
  64.     if (position === 'top') {
  65.       widget.classList.remove('bottom-0', 'mb-3');
  66.       widget.classList.add('top-0', 'mt-3', 'position-top');
  67.       icon.classList.remove('fa-chevron-up');
  68.       icon.classList.add('fa-chevron-down');
  69.     } else {
  70.       widget.classList.remove('top-0', 'mt-3', 'position-top');
  71.       widget.classList.add('bottom-0', 'mb-3');
  72.       icon.classList.remove('fa-chevron-down');
  73.       icon.classList.add('fa-chevron-up');
  74.     }
  75.     try {
  76.       localStorage.setItem(STORAGE_KEY, position);
  77.     } catch (e) {
  78.       // localStorage non disponible
  79.     }
  80.   }
  81.   
  82.   function getPosition() {
  83.     try {
  84.       return localStorage.getItem(STORAGE_KEY) || 'bottom';
  85.     } catch (e) {
  86.       return 'bottom';
  87.     }
  88.   }
  89.   
  90.   // Initialisation
  91.   setPosition(getPosition());
  92.   
  93.   // Gestion du clic sur le bouton de repositionnement
  94.   toggleBtn.addEventListener('click', function(e) {
  95.     e.stopPropagation();
  96.     var isBottom = widget.classList.contains('bottom-0');
  97.     setPosition(isBottom ? 'top' : 'bottom');
  98.   });
  99.   
  100.   // Masquer le widget quand le modal est ouvert
  101.   var feedbackModal = document.getElementById('feedbackModal');
  102.   if (feedbackModal) {
  103.     feedbackModal.addEventListener('show.bs.modal', function() {
  104.       widget.style.display = 'none';
  105.     });
  106.     feedbackModal.addEventListener('hidden.bs.modal', function() {
  107.       widget.style.display = 'block';
  108.     });
  109.   }
  110. })();
  111. </script>