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

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

@@ -279,6 +279,51 @@ 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 ESCALA_FONTE_CHAVE = 'compilacao_escala_fonte'
+const ESCALA_FONTE_PASSO = 0.1
+const ESCALA_FONTE_MIN = 0.8
+const ESCALA_FONTE_MAX = 2.5
+let escalaFonteAtual = null
+
+function lerEscalaFonte () {
+  if (escalaFonteAtual !== null) {
+    return escalaFonteAtual
+  }
+  let escala = 1
+  try {
+    escala = parseFloat(window.localStorage.getItem(ESCALA_FONTE_CHAVE)) || 1
+  } catch (e) {
+    // localStorage indisponível (ex.: navegação privada bloqueada)
+  }
+  return Math.min(ESCALA_FONTE_MAX, Math.max(ESCALA_FONTE_MIN, escala))
+}
+
+function aplicaEscalaFonte (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 salvaEscalaFonte (escala) {
+  escala = Math.round(
+    Math.min(ESCALA_FONTE_MAX, Math.max(ESCALA_FONTE_MIN, escala)) * 10) / 10
+  try {
+    window.localStorage.setItem(ESCALA_FONTE_CHAVE, escala)
+  } catch (e) {
+    // localStorage indisponível: a escala vale apenas até recarregar a página
+  }
+  escalaFonteAtual = escala
+  aplicaEscalaFonte(escala)
+}
+
 function InitViewTAs () {
   setTimeout(function () {
     var href = location.href.split('#')
@@ -297,11 +342,12 @@ function InitViewTAs () {
     }
   }, 100)
 
+  aplicaEscalaFonte(lerEscalaFonte())
   $('#btn_font_menos').click(function () {
-    $('.dpt').css('font-size', '-=1')
+    salvaEscalaFonte(lerEscalaFonte() - ESCALA_FONTE_PASSO)
   })
   $('#btn_font_mais').click(function () {
-    $('.dpt').css('font-size', '+=1')
+    salvaEscalaFonte(lerEscalaFonte() + ESCALA_FONTE_PASSO)
   })
 
   $('.dpt.bloco_alteracao .dpt').each(function () {
@@ -327,5 +373,7 @@ export default {
   ReadCookie,
   insertWaitAjax,
   InitViewTAs,
+  lerEscalaFonte,
+  aplicaEscalaFonte,
   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.aplicaEscalaFonte(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 %}