Permite ajustar e persistir o tamanho da letra no editor de textos articulados (#3862)

* Permite ajustar e persistir o tamanho da letra no editor de textos articulados

Os botões a/A da leitura alteravam o font-size de cada dispositivo via
jQuery, sem persistir, e não existiam na tela de edição. Com isso, a
única forma de aumentar a letra era formatar o texto no TinyMCE, o que
gravava o tamanho no conteúdo do dispositivo e valia apenas para ele.

- Escala de leitura aplicada via variável CSS (--cp-font-scale) no
  container .cp, salva no localStorage (80% a 250%, passo de 10%)
- Botões a/A também na tela de edição (text_edit)
- Textarea do editor simples e corpo do TinyMCE acompanham a escala
- Linha de vigências não é afetada pela escala
- initTextRichEditor passa a retornar a promise do tinymce.init

* Ajusta a escala de fonte conforme a revisão do PR

- Agrupa as constantes no objeto congelado EscalaFonte, com o valor
  padrão em EscalaFonte.PADRAO.
- Extrai o helper clamp() para limitar a escala ao intervalo permitido.
- Separa, no log, a falha de acesso ao localStorage do valor salvo
  inválido, e registra também a falha ao salvar.
- Renomeia aplicaEscalaFonte/salvaEscalaFonte para o infinitivo.

---------

Co-authored-by: Edward <9326037+edwardoliveira@users.noreply.github.com>

frontend/src/__apps/compilacao/js/old/compilacao.js

@@ -279,6 +279,69 @@ function DispositivoSearch (opts) {
   })
 }
 
+// Escala de leitura do texto articulado, preferência de cada navegador.
+// Aplicada via variável CSS (--cp-font-scale) para não alterar o conteúdo
+// dos dispositivos e para valer também nos que são recarregados via ajax.
+const EscalaFonte = Object.freeze({
+  CHAVE: 'compilacao_escala_fonte',
+  PADRAO: 1,
+  PASSO: 0.1,
+  MIN: 0.8,
+  MAX: 2.5
+})
+let escalaFonteAtual = null
+
+// Limita num ao intervalo [lower, upper].
+function clamp (num, lower, upper) {
+  return Math.max(lower, Math.min(num, upper))
+}
+
+function lerEscalaFonte () {
+  if (escalaFonteAtual !== null) {
+    return escalaFonteAtual
+  }
+  let valor = null
+  try {
+    valor = window.localStorage.getItem(EscalaFonte.CHAVE)
+  } catch (e) {
+    // localStorage indisponível (ex.: navegação privada bloqueada)
+    console.warn('Escala de fonte: não foi possível ler o localStorage.', e)
+    return EscalaFonte.PADRAO
+  }
+  if (valor === null) {
+    return EscalaFonte.PADRAO
+  }
+  const escala = parseFloat(valor)
+  if (!Number.isFinite(escala)) {
+    console.warn('Escala de fonte: valor inválido no localStorage, usando o padrão.', valor)
+    return EscalaFonte.PADRAO
+  }
+  return clamp(escala, EscalaFonte.MIN, EscalaFonte.MAX)
+}
+
+function aplicarEscalaFonte (escala) {
+  document.documentElement.style.setProperty('--cp-font-scale', escala)
+  if (window.tinymce) {
+    window.tinymce.get().forEach(function (editor) {
+      if (editor.getBody()) {
+        editor.getBody().style.fontSize = (escala * 100) + '%'
+      }
+    })
+  }
+}
+
+function salvarEscalaFonte (escala) {
+  escala = Math.round(clamp(escala, EscalaFonte.MIN, EscalaFonte.MAX) * 10) / 10
+  try {
+    window.localStorage.setItem(EscalaFonte.CHAVE, escala)
+  } catch (e) {
+    // localStorage indisponível: a escala vale apenas até recarregar a página
+    console.warn('Escala de fonte: não foi possível salvar no localStorage.', escala, e)
+  }
+  escalaFonteAtual = escala
+  aplicarEscalaFonte(escala)
+}
+
 function InitViewTAs () {
   setTimeout(function () {
     var href = location.href.split('#')
@@ -297,11 +360,12 @@ function InitViewTAs () {
     }
   }, 100)
 
+  aplicarEscalaFonte(lerEscalaFonte())
   $('#btn_font_menos').click(function () {
-    $('.dpt').css('font-size', '-=1')
+    salvarEscalaFonte(lerEscalaFonte() - EscalaFonte.PASSO)
   })
   $('#btn_font_mais').click(function () {
-    $('.dpt').css('font-size', '+=1')
+    salvarEscalaFonte(lerEscalaFonte() + EscalaFonte.PASSO)
   })
 
   $('.dpt.bloco_alteracao .dpt').each(function () {
@@ -327,5 +391,7 @@ export default {
   ReadCookie,
   insertWaitAjax,
   InitViewTAs,
+  lerEscalaFonte,
+  aplicarEscalaFonte,
   DispositivoSearch
 }

frontend/src/__apps/compilacao/js/old/compilacao_edit.js

@@ -244,7 +244,9 @@ window.DispositivoEdit = function () {
         if (editortype !== 'construct') {
           dpt_form.html(data)
           if (editortype === 'tinymce') {
-            window.initTextRichEditor(null, false, false)
+            window.initTextRichEditor(null, false, false).then(function () {
+              window.aplicarEscalaFonte(window.lerEscalaFonte())
+            })
           }
           // OptionalCustomFrontEnd().init()
         }

frontend/src/__apps/compilacao/scss/compilacao.scss

@@ -164,12 +164,21 @@ a:link:after, a:visited:after {
 }
 
 .cp {
+  /* --cp-font-scale: escala de leitura escolhida pelo usuário (a/A) */
+  font-size: calc(100% * var(--cp-font-scale, 1));
+
+  .dpt-form textarea.form-control {
+    font-size: calc(1rem * var(--cp-font-scale, 1));
+  }
+
   .vigencia-active {
     margin-top: 30px;
     display: block;
   }
 
   .cp-linha-vigencias {
+    /* navegação entre vigências não acompanha a escala de leitura */
+    font-size: calc(100% / var(--cp-font-scale, 1));
     display: flex;
     flex-direction: row;
     list-style: none;

frontend/src/__global/js/tinymce/index.js

@@ -31,5 +31,5 @@ window.initTextRichEditor = function (elements, readonly = false, paste_as_text
     configTinymce.menubar = false
     configTinymce.toolbar = false
   }
-  window.tinymce.init(configTinymce)
+  return window.tinymce.init(configTinymce)
 }

sapl/templates/compilacao/text_edit.html

@@ -17,10 +17,16 @@
               <a href="{% url 'sapl.compilacao:ta_text_edit' object.pk %}?{% if object.editing_locked %}unlock{%else%}lock{% endif %}" class="btn {% if object.editing_locked %}btn-outline-danger{%else%}btn-outline-primary{% endif %}">{% if object.editing_locked %}{% trans 'Desbloquear Edição' %}{%else%}{% trans 'Publicar Texto' %}{% endif %}</a>
         {% endif %}
       </div>
+      <div class="d-flex">
+        <div class="actions btn-group mr-2" role="group">
+          <a class="btn btn-outline-primary" id="btn_font_menos" title="{% trans 'Diminuir tamanho da letra' %}">a</a>
+          <a class="btn btn-outline-primary" id="btn_font_mais" title="{% trans 'Aumentar tamanho da letra' %}">A</a>
+        </div>
         <div class="actions btn-group dropleft" role="group">
           {% include 'compilacao/textoarticulado_menu_config.html' %}
         </div>
       </div>
+    </div>
     {% if object.dispositivos_set.count == 1 %}
       {% with view.materia_da_norma_deste_texto_articulado as materia %}
           {% if materia %}