theme/templates/partials/elements/program-big-sinopse.html.twig line 1

Open in your IDE?
  1. {% set uid = id ?? random() %}
  3. <style>
  4. .texto-clamp-3 {
  5.     display: -webkit-box;
  6.     -webkit-line-clamp: 3;
  7.     -webkit-box-orient: vertical;
  8.     overflow: hidden;
  9.     line-height: 1.5;
  10.     word-break: break-word;
  11. }
  12. .ver-mais-btn {
  13.     color: var(--bloominggreen);
  14.     text-decoration: none;
  15.     font-size: 0.9em;
  16.     margin-top: 0.5rem;
  17.     display: inline-block;
  18.     background: none;
  19.     border: none;
  20.     padding: 0;
  21.     cursor: pointer;
  22. }
  23. .ver-mais-btn:hover {
  24.     text-decoration: underline;
  25. }
  26. </style>
  28. <div class="texto-container">
  29.     <div class="texto-clamp-3" id="texto-{{ uid }}">
  30.         {{ texto|raw }}
  31.     </div>
  33.     <button type="button" id="verMaisBtn-{{ uid }}" class="ver-mais-btn" style="display:none;">
  34.         Ver mais
  35.     </button>
  36. </div>
  38. <script>
  39. document.addEventListener("DOMContentLoaded", function () {
  40.     const textoElement = document.getElementById("texto-{{ uid }}");
  41.     const verMaisBtn = document.getElementById("verMaisBtn-{{ uid }}");
  42.     const modalTitle = document.getElementById("modalLabel");
  43.     const modalContent = document.getElementById("conteudoModal");
  45.     if (!textoElement || !verMaisBtn || !modalContent || !modalTitle) {
  46.         console.log('Elementos não encontrados:', { textoElement, verMaisBtn, modalContent, modalTitle });
  47.         return;
  48.     }
  50.     // Cria um elemento temporário para medir o tamanho real do texto
  51.     function checkIfNeedsExpansion() {
  52.         // Cria clone temporário sem line-clamp
  53.         const tempDiv = document.createElement('div');
  54.         tempDiv.innerHTML = textoElement.innerHTML;
  55.         tempDiv.style.cssText = `
  56.             position: absolute;
  57.             visibility: hidden;
  58.             width: ${textoElement.offsetWidth}px;
  59.             font-family: ${getComputedStyle(textoElement).fontFamily};
  60.             font-size: ${getComputedStyle(textoElement).fontSize};
  61.             line-height: ${getComputedStyle(textoElement).lineHeight};
  62.             word-break: break-word;
  63.         `;
  65.         document.body.appendChild(tempDiv);
  67.         // Calcula altura de 3 linhas
  68.         const lineHeight = parseFloat(getComputedStyle(textoElement).lineHeight);
  69.         const maxHeight = lineHeight * 3;
  70.         const realHeight = tempDiv.offsetHeight;
  72.         document.body.removeChild(tempDiv);
  74.         return realHeight > maxHeight;
  75.     }
  77.     // Verifica se precisa mostrar o botão "Ver mais"
  78.     const needsExpansion = checkIfNeedsExpansion();
  80.     if (needsExpansion) {
  81.         verMaisBtn.style.display = "inline-block";
  82.     }
  84.     // Evento do botão "Ver mais"
  85.     verMaisBtn.addEventListener("click", function (e) {
  86.         e.preventDefault();
  87.         e.stopPropagation();
  89.         // Se o modal existir, usa-o
  90.         if (modalContent) {
  91.             modalContent.innerHTML = '{{ texto|raw|e('js') }}';
  92.             if (modalTitle) {
  93.                 modalTitle.innerHTML = '{{ title|default('Sinopse completa')|e('js') }}';
  94.             }
  96.             const modalElement = document.getElementById('modalTextoCompleto');
  97.             if (window.bootstrap && window.bootstrap.Modal) {
  98.                 const modal = new window.bootstrap.Modal(modalElement);
  99.                 modal.show();
  100.             } else if (window.$ && $.fn.modal) {
  101.                 setTimeout(() => {
  102.                     $('#modalTextoCompleto').modal('show');
  103.                 }, 50);
  104.             } else {
  105.                 modalElement.style.display = 'block';
  106.                 modalElement.classList.add('show');
  107.                 document.body.classList.add('modal-open');
  108.             }
  109.         }
  110.     });
  112.     // Reajusta quando a janela for redimensionada
  113.     window.addEventListener('resize', function() {
  114.         if (checkIfNeedsExpansion()) {
  115.             verMaisBtn.style.display = "inline-block";
  116.         } else {
  117.             verMaisBtn.style.display = "none";
  118.         }
  119.     });
  120.     });
  121. </script>