From 2ed8b0f405d5f1e800ed291de8a8da169a0f4e81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Moraes?= Date: Thu, 24 Sep 2026 15:31:56 -0300 Subject: [PATCH] Permite ajustar e persistir o tamanho da letra no editor de textos articulados MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../__apps/compilacao/js/old/compilacao.js | 52 ++++++++++++++++++- .../compilacao/js/old/compilacao_edit.js | 4 +- .../__apps/compilacao/scss/compilacao.scss | 9 ++++ frontend/src/__global/js/tinymce/index.js | 2 +- sapl/templates/compilacao/text_edit.html | 10 +++- 5 files changed, 71 insertions(+), 6 deletions(-) diff --git a/frontend/src/__apps/compilacao/js/old/compilacao.js b/frontend/src/__apps/compilacao/js/old/compilacao.js index f7176c473..b5e5ba7ae 100644 --- a/frontend/src/__apps/compilacao/js/old/compilacao.js +++ b/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 } diff --git a/frontend/src/__apps/compilacao/js/old/compilacao_edit.js b/frontend/src/__apps/compilacao/js/old/compilacao_edit.js index ba651188b..946618d98 100644 --- a/frontend/src/__apps/compilacao/js/old/compilacao_edit.js +++ b/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() } diff --git a/frontend/src/__apps/compilacao/scss/compilacao.scss b/frontend/src/__apps/compilacao/scss/compilacao.scss index 82c52f7f6..842436b24 100644 --- a/frontend/src/__apps/compilacao/scss/compilacao.scss +++ b/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; diff --git a/frontend/src/__global/js/tinymce/index.js b/frontend/src/__global/js/tinymce/index.js index 51eed1efa..3f3ca312e 100644 --- a/frontend/src/__global/js/tinymce/index.js +++ b/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) } diff --git a/sapl/templates/compilacao/text_edit.html b/sapl/templates/compilacao/text_edit.html index ada437934..ed7055e62 100644 --- a/sapl/templates/compilacao/text_edit.html +++ b/sapl/templates/compilacao/text_edit.html @@ -17,8 +17,14 @@ {% if object.editing_locked %}{% trans 'Desbloquear Edição' %}{%else%}{% trans 'Publicar Texto' %}{% endif %} {% endif %} -
- {% include 'compilacao/textoarticulado_menu_config.html' %} +
+
+ a + A +
+
+ {% include 'compilacao/textoarticulado_menu_config.html' %} +
{% if object.dispositivos_set.count == 1 %}