Sie nutzen Joomla und den leistungsstarken Route 66 SEO Analyzer, wünschen sich aber eine schnellere und visuelle Übersicht über den Zustand Ihrer Website? Die native Ergebnisliste ist zwar toll, aber würden ein Echtzeit-Score und ein Messdiagramm die Inhaltsbearbeitung nicht schneller und intuitiver machen?
Ich habe ein kompaktes, eigenständiges JavaScript-Snippet erstellt, das direkt auf die Route 66-Ausgabe zugreift und Ihnen einen sofortigen visuellen Status direkt im Joomla-Artikeleditor liefert. Das Beste daran: Es verwendet Inline-SVG, sodass keine externen Bibliotheken (wie Google Charts) benötigt werden. Dadurch bleibt Ihr Editor schnell und Konflikte mit komplexen Inhaltsfiltern wie denen in JCE werden vermieden.
So funktioniert es: Die Magie der SVG-Anzeigen
Der Schlüssel zu dieser Lösung ist die Kombination aus jQuerys DOM-Manipulation und nativen Browserfunktionen:
- Echtzeit-Monitoring: Wir verwenden die leistungsstarke native MutationObserver-API. Diese weist das Skript an, sofort eine Aktualisierungsfunktion auszuführen, sobald sich die Route 66-Ergebnisliste (#route66-analyzer-seo-results) ändert. Während Sie tippen, aktualisiert der Analysator seine Ergebnisse und unser Skript die Anzeige!
- Keine externen Diagramme: Anstatt eine umfangreiche Diagrammbibliothek zu laden, zeichnen wir die Anzeige mit einfachen Scalable Vector Graphics (SVG). Ein Kreis dient als Pfad, und ein weiterer Kreisbogen wird mithilfe der CSS-Eigenschaft „dasharray“ dynamisch darüber gezeichnet. Dies wird berechnet, um den genauen Prozentsatz von „Gut“ und „Schlecht“ anzuzeigen. Schlechte Ergebnisse.
- Flüssige Animation: Die Aktualisierungen werden mithilfe von „requestAnimationFrame“ angewendet. Dadurch wird sichergestellt, dass die kleinen prozentualen Änderungen flüssig animiert werden und den Browser während der Bearbeitung nicht verlangsamen.
Implementierung (Joomla-Vorlage/Modul)
Da Editoren wie JCE häufig Skripte entfernen, ist der sicherste Ort für diesen Code ein Benutzerdefiniertes HTML-Modul, das an einer Position in der Nähe des Artikels oder in der Haupt-HTML-Datei Ihrer Joomla-Vorlage definiert ist. Denken Sie daran, die Editor-Filterung für die Benutzergruppe zu deaktivieren, die auf das Modul zugreift.
Kopieren Sie diesen Codeausschnitt und fügen Sie ihn Ihrem Admin-Bereich hinzu.
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(); } });
Diese einfache Ergänzung verwandelt Ihre Route 66-Liste in ein Dashboard und gibt Ihnen sofortiges Feedback, das Ihnen hilft, schneller den grünen Punkt zu erreichen!
