DevEnv nis2-agileandClaude Opus 4.8
a71d1a096d
- aria-guide "Mostrami dov'è": ora aggancia le voci del menu IN ALTO V3 (data-nav aggiunto in topnav-v3.js su voci dirette + mega-link). Se la voce è in un mega-menu, lo apre (.aria-guide-open) e ci punta lo spotlight; coach "menu in alto". Fallback navigazione invariato. (Prima cercava .sidebar-nav V2.) - segnala-anonimo.html: CSP font-src 'self' → 'self' data: (sbloccato il font data: embeddato, niente più violazione CSP). - Cache-buster: topnav-v3.js/common.js ?v=20260627t, aria-guide.js ?v=20260627t. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
158 lines
12 KiB
JavaScript
158 lines
12 KiB
JavaScript
/**
|
|
* NIS2 Agile - ARIA Guide (puntatore "dove andare")
|
|
*
|
|
* Porting del pattern TRPG (CHANGE_aria_voice_pointer.md): quando l'utente chiede
|
|
* "dove trovo X", ARIA mostra un PUNTATORE animato + spotlight sulla voce reale
|
|
* della sidebar V2 (common-bi.js) e offre "Vai →".
|
|
*
|
|
* Self-contained, vanilla, frontend-only. Nessuna dipendenza, niente inline-CSS.
|
|
* Aggancia le voci via [data-nav="<href senza .html>"] (vedi common-bi.js).
|
|
* Rispetta prefers-reduced-motion. Espone window.AriaGuide.
|
|
*/
|
|
(function () {
|
|
'use strict';
|
|
if (window.AriaGuide) return;
|
|
|
|
// Mappa destinazioni: nav (data-nav) → { label, keywords[] }. label = voce reale del menu.
|
|
var DESTINATIONS = [
|
|
{ nav: 'assets', label: 'Inventario', section: 'Operativo', keywords: ['inventario', 'asset', 'beni', 'bene', 'sistemi informativi', 'rilevanza nis2'] },
|
|
{ nav: 'risks', label: 'Rischi', section: 'Gestione', keywords: ['rischio', 'rischi', 'valutazione del rischio', 'risk', 'matrice rischi', 'trattamento'] },
|
|
{ nav: 'incidents', label: 'Incidenti', section: 'Gestione', keywords: ['incidente', 'incidenti', 'notifica', 'art. 25', 'art.25', 'csirt', 'data breach', '24 ore', '72 ore'] },
|
|
{ nav: 'assessment', label: 'Gap Analysis', section: 'Principale', keywords: ['gap analysis', 'gap', 'assessment', 'questionario', 'autovalutazione', '80 domande'] },
|
|
{ nav: 'misure-requisiti', label: 'Misure e Requisiti', section: 'Principale', keywords: ['misure', 'requisiti', 'misura', 'requisito', 'controlli acn', 'determinazione acn'] },
|
|
{ nav: 'isms', label: 'Modello SGSI (ISO 27001)', section: 'Principale', keywords: ['sgsi', 'iso 27001', 'isms', 'soa', 'statement of applicability', 'modello organizzativo', 'modello sgsi'] },
|
|
{ nav: 'policies', label: 'Policy', section: 'Gestione', keywords: ['policy', 'politiche', 'politica', 'procedura', 'procedure', 'documento normativo'] },
|
|
{ nav: 'supply-chain', label: 'Supply Chain', section: 'Gestione', keywords: ['supply chain', 'fornitori', 'fornitore', 'catena di fornitura', 'terze parti'] },
|
|
{ nav: 'training', label: 'Formazione', section: 'Operativo', keywords: ['formazione', 'corsi', 'corso', 'training', 'awareness', 'sensibilizzazione'] },
|
|
{ nav: 'whistleblowing', label: 'Segnalazioni', section: 'Gestione', keywords: ['segnalazione', 'segnalazioni', 'whistleblowing', 'illeciti', 'canale segnalazione'] },
|
|
{ nav: 'normative', label: 'Normative', section: 'Gestione', keywords: ['normativa', 'normative', 'aggiornamenti normativi', 'decreto', 'feed normativo'] },
|
|
{ nav: 'stakeholders', label: 'Stakeholder', section: 'Gestione', keywords: ['stakeholder', 'portatori di interesse', 'mendelow', 'matrice stakeholder'] },
|
|
{ nav: 'stakeholder-activities', label: 'Attività stakeholder', section: 'Gestione', keywords: ['attività stakeholder', 'questionari stakeholder', 'azioni stakeholder'] },
|
|
{ nav: 'organigramma', label: 'Organigramma', section: 'Gestione', keywords: ['organigramma', 'ruoli', 'governance', 'raci', 'responsabilità'] },
|
|
{ nav: 'competenze', label: 'Competenze', section: 'Gestione', keywords: ['competenze', 'skill', 'competenza', 'requisiti ruolo'] },
|
|
{ nav: 'dashboard', label: 'Dashboard', section: 'Principale', keywords: ['dashboard', 'panoramica', 'home', 'punteggio di compliance', 'compliance score', 'cruscotto'] },
|
|
{ nav: 'calendario', label: 'Calendario', section: 'Principale', keywords: ['calendario', 'scadenze', 'scadenziario', 'deadline'] },
|
|
{ nav: 'workflow', label: 'Compliance Journey', section: 'Principale', keywords: ['compliance journey', 'percorso di conformità', 'journey', 'roadmap'] },
|
|
{ nav: 'internal-audits', label: 'Audit interni', section: 'Operativo', keywords: ['audit interni', 'audit interno', '9.2', 'verifica interna'] },
|
|
{ nav: 'controlli-periodici', label: 'Controlli periodici', section: 'Operativo', keywords: ['controlli periodici', 'controllo periodico', 'monitoraggio controlli'] },
|
|
{ nav: 'management-review', label: 'Riesame di Direzione', section: 'Operativo', keywords: ['riesame di direzione', 'riesame', 'management review', '9.3'] },
|
|
{ nav: 'reports', label: 'Audit & Report', section: 'Operativo', keywords: ['report', 'reportistica', 'audit log', 'esporta', 'esportazione', 'audit & report'] },
|
|
{ nav: 'kb', label: 'Knowledge Base', section: 'Gestione', keywords: ['knowledge base', 'documenti caricati', 'carica documento', 'base di conoscenza'] },
|
|
{ nav: 'cross-analysis', label: 'AI Cross-Analysis', section: 'Gestione', keywords: ['cross analysis', 'cross-analysis', 'analisi incrociata'] },
|
|
{ nav: 'settings', label: 'Impostazioni', section: 'Sistema', keywords: ['impostazioni', 'settings', 'membri', 'permessi documentali', 'profilo'] },
|
|
{ nav: 'integrazioniext', label: 'Integrazioni Esterne', section: 'Sistema', keywords: ['integrazioni', 'integrazione', 'api esterne', 'webhook'] }
|
|
];
|
|
|
|
function matchDestination(question) {
|
|
var q = ' ' + String(question || '').toLowerCase().replace(/[«»"'`]/g, ' ') + ' ';
|
|
var best = null, bestLen = 0;
|
|
for (var i = 0; i < DESTINATIONS.length; i++) {
|
|
var d = DESTINATIONS[i];
|
|
for (var k = 0; k < d.keywords.length; k++) {
|
|
var kw = d.keywords[k];
|
|
if (kw.length >= 3 && q.indexOf(kw) !== -1 && kw.length > bestLen) {
|
|
best = d; bestLen = kw.length;
|
|
}
|
|
}
|
|
}
|
|
return best;
|
|
}
|
|
|
|
// ── CSS (iniettato una volta) ───────────────────────────────────────────
|
|
var _css = false;
|
|
function injectCss() {
|
|
if (_css) return; _css = true;
|
|
var s = document.createElement('style');
|
|
s.textContent = [
|
|
'.aria-guide-ov{position:fixed;inset:0;z-index:10050;background:transparent}',
|
|
'.aria-guide-spot{position:fixed;z-index:10051;border:3px solid #0066CC;border-radius:10px;',
|
|
' box-shadow:0 0 0 9999px rgba(15,23,42,.45),0 0 14px rgba(0,102,204,.7);pointer-events:none;',
|
|
' transition:all .35s cubic-bezier(.4,0,.2,1);animation:aria-pulse 1.4s ease-in-out infinite}',
|
|
'@keyframes aria-pulse{0%,100%{box-shadow:0 0 0 9999px rgba(15,23,42,.45),0 0 0 0 rgba(0,102,204,.55)}',
|
|
' 50%{box-shadow:0 0 0 9999px rgba(15,23,42,.45),0 0 0 8px rgba(0,102,204,0)}}',
|
|
'.aria-guide-ptr{position:fixed;z-index:10053;width:34px;height:34px;pointer-events:none;',
|
|
' transition:left .6s cubic-bezier(.4,0,.2,1),top .6s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}',
|
|
'.aria-guide-coach{position:fixed;z-index:10052;max-width:260px;background:#0b2a4a;color:#fff;',
|
|
' padding:10px 12px;border-radius:10px;font:500 13px/1.45 system-ui,Arial,sans-serif;',
|
|
' box-shadow:0 8px 24px rgba(0,0,0,.3)}',
|
|
'.aria-guide-coach b{color:#7ec6ff}',
|
|
'.aria-guide-coach .row{margin-top:8px;display:flex;gap:8px;justify-content:flex-end}',
|
|
'.aria-guide-coach button{border:none;border-radius:7px;padding:6px 12px;font:600 12px system-ui;cursor:pointer}',
|
|
'.aria-guide-go{background:#0066CC;color:#fff}.aria-guide-x{background:#1e3a5f;color:#cbd5e1}',
|
|
'.nav-item.aria-guide-open .mega,.nav-item.aria-guide-open .mega.no-promo{display:flex!important}',
|
|
'@media (prefers-reduced-motion:reduce){.aria-guide-spot,.aria-guide-ptr{transition:none;animation:none}}'
|
|
].join('\n');
|
|
document.head.appendChild(s);
|
|
}
|
|
|
|
var _open = null, _openMega = null;
|
|
function dismiss() {
|
|
if (_openMega) { _openMega.classList.remove('aria-guide-open'); _openMega = null; }
|
|
if (!_open) return;
|
|
_open.forEach(function (el) { if (el && el.parentNode) el.parentNode.removeChild(el); });
|
|
document.removeEventListener('keydown', onKey, true);
|
|
_open = null;
|
|
}
|
|
function onKey(e) { if (e.key === 'Escape') dismiss(); }
|
|
|
|
/**
|
|
* Mostra il puntatore sulla voce di menu `nav` (data-nav). Se la voce non è
|
|
* visibile (sidebar mobile chiusa / pagina senza sidebar) naviga direttamente.
|
|
* @returns {boolean} true se ha mostrato la guida, false se ha fatto fallback.
|
|
*/
|
|
function pointTo(nav, label) {
|
|
dismiss();
|
|
injectCss();
|
|
// V3: menu IN ALTO (data-nav su voci dirette e mega-link). Fallback compat sidebar V2.
|
|
var el = document.querySelector('.bar-nav [data-nav="' + nav + '"]')
|
|
|| document.querySelector('[data-nav="' + nav + '"]')
|
|
|| document.querySelector('.sidebar-nav a[data-nav="' + nav + '"]');
|
|
var href = el ? (el.getAttribute('href') || (nav + '.html')) : (nav + '.html');
|
|
// Se la voce è dentro un mega-menu (dropdown chiuso), aprilo per renderla visibile.
|
|
var megaItem = (el && el.closest && el.closest('.mega')) ? el.closest('.nav-item') : null;
|
|
if (megaItem) megaItem.classList.add('aria-guide-open');
|
|
try { window.scrollTo({ top: 0, behavior: 'auto' }); } catch (e) {}
|
|
var rect = el && el.getBoundingClientRect();
|
|
// fallback: voce non trovata/visibile → vai diretto
|
|
if (!el || !rect || rect.width === 0 || rect.height === 0) {
|
|
if (megaItem) megaItem.classList.remove('aria-guide-open');
|
|
window.location.href = href; return false;
|
|
}
|
|
|
|
var ov = document.createElement('div'); ov.className = 'aria-guide-ov';
|
|
var spot = document.createElement('div'); spot.className = 'aria-guide-spot';
|
|
var ptr = document.createElement('div'); ptr.className = 'aria-guide-ptr';
|
|
ptr.innerHTML = '<svg viewBox="0 0 24 24" fill="#0066CC" stroke="#fff" stroke-width="1.2"><path d="M5 3l14 8-6 1.5L9.5 19 5 3z"/></svg>';
|
|
var coach = document.createElement('div'); coach.className = 'aria-guide-coach';
|
|
coach.innerHTML = 'Eccolo: <b>' + (label || nav) + '</b><br><span style="opacity:.85">È nel menu in alto. Vuoi che ti ci porti?</span>'
|
|
+ '<div class="row"><button class="aria-guide-x" type="button">Chiudi</button><button class="aria-guide-go" type="button">Vai →</button></div>';
|
|
|
|
document.body.appendChild(ov);
|
|
document.body.appendChild(spot);
|
|
document.body.appendChild(ptr);
|
|
document.body.appendChild(coach);
|
|
|
|
function place() {
|
|
var r = el.getBoundingClientRect();
|
|
spot.style.left = (r.left - 4) + 'px'; spot.style.top = (r.top - 4) + 'px';
|
|
spot.style.width = (r.width + 8) + 'px'; spot.style.height = (r.height + 8) + 'px';
|
|
ptr.style.left = (r.right - 6) + 'px'; ptr.style.top = (r.top + r.height / 2) + 'px';
|
|
var cTop = Math.min(r.top, window.innerHeight - 120);
|
|
coach.style.left = (r.right + 16) + 'px'; coach.style.top = Math.max(8, cTop) + 'px';
|
|
}
|
|
// pointer parte dal centro schermo poi va alla voce (animazione)
|
|
ptr.style.left = (window.innerWidth / 2) + 'px'; ptr.style.top = (window.innerHeight / 2) + 'px';
|
|
requestAnimationFrame(function () { requestAnimationFrame(place); });
|
|
|
|
ov.addEventListener('click', dismiss);
|
|
coach.querySelector('.aria-guide-x').addEventListener('click', dismiss);
|
|
coach.querySelector('.aria-guide-go').addEventListener('click', function () { window.location.href = href; });
|
|
document.addEventListener('keydown', onKey, true);
|
|
_open = [ov, spot, ptr, coach];
|
|
_openMega = megaItem;
|
|
return true;
|
|
}
|
|
|
|
window.AriaGuide = { pointTo: pointTo, matchDestination: matchDestination, dismiss: dismiss, DESTINATIONS: DESTINATIONS };
|
|
})();
|