É um utilizador do Joomla que utiliza o poderoso Analisador de SEO do Route 66, mas pretende um resumo visual mais imediato da saúde do seu conteúdo? A lista nativa de resultados é ótima, mas um gráfico de pontuação e medição em tempo real não tornaria a edição de conteúdos mais rápida e intuitiva?
Criei um snippet JavaScript leve e independente que se liga diretamente à saída do Route 66, fornecendo um estado visual instantâneo diretamente no editor de artigos do Joomla. O melhor de tudo é que utiliza SVG em linha, o que significa que não são necessárias bibliotecas externas (como o Google Charts), mantendo o seu editor rápido e evitando conflitos com filtros de conteúdo complexos como os do JCE.
Como funciona: a magia dos medidores SVG
A chave para esta solução é a combinação da manipulação do DOM do jQuery com as características nativas do browser:
- Monitorização em tempo real: Utilizamos a poderosa API nativa MutationObserver. Esta instrui o script para executar instantaneamente uma função de atualização sempre que a lista de resultados do Route 66 (#route66-analyzer-seo-results) for alterada. À medida que escreve, o analisador atualiza os seus resultados e o nosso script atualiza o medidor!
- Sem gráficos externos: Em vez de carregar uma enorme biblioteca de gráficos, desenhamos o medidor utilizando Scalable Vector Graphics (SVG) simples. Um círculo é utilizado como rasto, e o arco de outro círculo é desenhado dinamicamente sobre ele utilizando a propriedade CSS stroke-dasharray. Isto é calculado para mostrar a percentagem exata de resultados bons e maus.
- Animação suave: As atualizações são aplicadas utilizando o requestAnimationFrame, garantindo que as pequenas alterações percentuais são animadas suavemente e não deixam o browser lento durante a edição.
Implementação (Modelo/Módulo Joomla)
Como os editores como o JCE costumam remover scripts, o local mais seguro para este código é num Módulo HTML Personalizado definido numa posição próxima do artigo ou no ficheiro HTML principal do seu modelo Joomla. Lembre-se de desativar a filtragem do editor para o grupo de utilizadores que acede ao módulo.
Copie este snippet e adicione-o ao seu painel de administração.
jQuery(function () { const $target = jQuery('#route66-analyzer-seo-results'); // Insert counters + empty gauges (percent will be set dynamically) $target.before(`
`); const targetNode = $target.get(0); // helper: round nicely const pct = (value) => Math.max(0, Math.min(100, Math.round(value))); // helper: set/animate a gauge const updateGauge = (gaugeEl, percent, opts) => { if (!gaugeEl) return; const svg = gaugeEl.querySelector('svg'); const arc = svg?.querySelector('circle:nth-of-type(2)'); if (!arc) return; // Size: use data-size (px) or fallback to 44 const size = Number(gaugeEl.dataset.size) || 44; gaugeEl.style.width = size + 'px'; gaugeEl.style.height = size + 'px'; // Colors (optional override) if (opts?.bg) svg.querySelector('circle:nth-of-type(1)')?.setAttribute('stroke', opts.bg); if (opts?.fg) arc.setAttribute('stroke', opts.fg); const r = Number(arc.getAttribute('r')) || 20; const circumference = 2 * Math.PI * r; const length = (circumference * percent) / 100; // A11y/title svg.setAttribute('aria-label', `${opts?.label || 'Gauge'}: ${percent}%`); svg.setAttribute('title', `${opts?.label || 'Gauge'}: ${percent}%`); // Animate requestAnimationFrame(() => { arc.style.transition = 'stroke-dasharray 600ms ease, opacity 150ms ease'; arc.style.strokeDasharray = `${length} 9999`; arc.style.opacity = '1'; }); }; const goodGauge = document.querySelector('[data-role="gauge-good"]'); const badGauge = document.querySelector('[data-role="gauge-bad"]'); const refresh = () => { const totalItems = jQuery('.route66-analyzer-result', targetNode).length; const goodItems = jQuery('.route66-analyzer-result-icon.good', targetNode).length; const badItems = jQuery('.route66-analyzer-result-icon.bad', targetNode).length; //jQuery('#total-count-display').text(`Total Results: ${totalItems}`); jQuery('#good-count-display').text(`Good Results: 👍 ${goodItems}`); jQuery('#bad-count-display').text(`Bad Results: 👎 ${badItems}`); const goodPercent = totalItems ? pct((goodItems / totalItems) * 100) : 0; const badPercent = totalItems ? pct((badItems / totalItems) * 100) : 0; updateGauge(goodGauge, goodPercent, { label: 'Good', bg: '#E9F8F2', fg: '#23B681' }); updateGauge(badGauge, badPercent, { label: 'Bad', bg: '#FBEDED', fg: '#D44949' }); }; // Only in editor layout (keep your original condition) if (targetNode && jQuery('body').hasClass('layout-edit')) { const observer = new MutationObserver(() => refresh()); observer.observe(targetNode, { childList: true, subtree: true }); refresh(); // initial } else { // If not in edit layout, still render once refresh(); } });
Esta simples adição transforma a sua lista do Route 66 num painel, fornecendo feedback imediato que o ajuda a atingir a pontuação verde mais rapidamente!
