https://monsterland.it/assets/plugins/ns-lc-modules/moduli/faq/faq.js

1/**
2 * FAQ — i tasti per gestire domande e gruppi.
3 *
4 * La risposta è già modificabile: è testo. La **domanda** no, e per un motivo che vale
5 * la pena ricordare: sta dentro il `<button>` che apre e chiude la risposta. Renderla
6 * modificabile lì significherebbe che ogni clic per scrivere apre o chiude
7 * l'accordion, e che scrivendoci sopra si può cancellare la freccia. Si modifica
8 * invece dal pannello, che il tasto «✎ Domanda» apre.
9 *
10 * I tasti vivono nell'anteprima e non finiscono mai nel salvato.
11 */
12( function () {
13	'use strict';
14
15	function inEditor() {
16		try {
17			return !! ( window.frameElement && window.frameElement.id === 'previewiframe' );
18		} catch ( e ) {
19			return false;
20		}
21	}
22
23	if ( ! inEditor() ) {
24		return;
25	}
26
27	var STILE_BARRA = 'position:absolute;z-index:22;display:flex;gap:4px;'
28		+ 'font:500 12px/1 system-ui,sans-serif;';
29	var STILE_TASTO = 'appearance:none;border:0;border-radius:5px;padding:5px 8px;'
30		+ 'background:#111;color:#fff;cursor:pointer;white-space:nowrap;'
31		+ 'box-shadow:0 1px 4px rgba(0,0,0,.4);opacity:.92;';
32
33	function tasto( etichetta, titolo, azione ) {
34		var b = document.createElement( 'button' );
35		b.type = 'button';
36		b.textContent = etichetta;
37		b.title = titolo;
38		b.setAttribute( 'style', STILE_TASTO );
39		b.className = 'ns-editor-ui';
40		b.addEventListener( 'click', function ( e ) {
41			// Senza questo, il clic arriva al bottone dell'accordion e apre la risposta.
42			e.preventDefault();
43			e.stopPropagation();
44			azione();
45		} );
46		b.addEventListener( 'mouseenter', function ( e ) { e.stopPropagation(); } );
47
48		return b;
49	}
50
51	function azione( nome, el, extra ) {
52		try {
53			window.parent.nsFaqAzione( nome, el, extra );
54		} catch ( e ) {
55			/* editor non pronto */
56		}
57	}
58
59	function barra( stile ) {
60		var d = document.createElement( 'div' );
61		d.className = 'ns-faq-barra ns-editor-ui lc-no-selection';
62		d.setAttribute( 'style', STILE_BARRA + stile );
63
64		return d;
65	}
66
67	function disegna() {
68		var gruppi = document.querySelectorAll( 'main .accordion' );
69
70		Array.prototype.forEach.call( gruppi, function ( acc ) {
71			if ( ! acc.querySelector( ':scope > .ns-faq-barra' ) ) {
72				if ( 'static' === getComputedStyle( acc ).position ) {
73					acc.style.position = 'relative';
74				}
75				var b = barra( 'top:-14px;left:0;' );
76				b.appendChild( tasto( '＋ Domanda', 'Aggiungi una domanda in fondo a questo gruppo', function () {
77					azione( 'aggiungi', acc );
78				} ) );
79				b.appendChild( tasto( '＋ Gruppo', 'Crea un nuovo gruppo di domande sotto a questo', function () {
80					azione( 'nuovo-gruppo', acc );
81				} ) );
82				acc.appendChild( b );
83			}
84
85			var voci = acc.querySelectorAll( ':scope > .accordion-item' );
86			Array.prototype.forEach.call( voci, function ( voce, i ) {
87				if ( voce.querySelector( ':scope > .ns-faq-barra' ) ) {
88					return;
89				}
90				if ( 'static' === getComputedStyle( voce ).position ) {
91					voce.style.position = 'relative';
92				}
93				// In basso a destra: in alto ci sta il bottone della domanda, e i tasti
94				// gli finirebbero sopra proprio dove si clicca per aprirla.
95				var b = barra( 'bottom:2px;right:2px;' );
96				b.appendChild( tasto( '✎ Domanda', 'Modifica il testo della domanda e il suo gruppo', function () {
97					azione( 'modifica', voce );
98				} ) );
99				b.appendChild( tasto( '＋ Immagine', 'Aggiungi un\'immagine nella risposta', function () {
100					azione( 'immagine', voce );
101				} ) );
102				if ( i > 0 ) {
103					b.appendChild( tasto( '↑', 'Sposta più in alto', function () { azione( 'su', voce ); } ) );
104				}
105				if ( i < voci.length - 1 ) {
106					b.appendChild( tasto( '↓', 'Sposta più in basso', function () { azione( 'giu', voce ); } ) );
107				}
108				b.appendChild( tasto( '✕', 'Rimuovi questa domanda', function () { azione( 'rimuovi', voce ); } ) );
109				voce.appendChild( b );
110			} );
111		} );
112	}
113
114	var attesa = null;
115	function programma() {
116		clearTimeout( attesa );
117		attesa = setTimeout( disegna, 200 );
118	}
119
120	if ( document.readyState === 'loading' ) {
121		document.addEventListener( 'DOMContentLoaded', programma );
122	} else {
123		programma();
124	}
125
126	new MutationObserver( function ( m ) {
127		for ( var i = 0; i < m.length; i++ ) {
128			if ( m[ i ].addedNodes.length ) {
129				programma();
130
131				return;
132			}
133		}
134	} ).observe( document.body, { childList: true, subtree: true } );
135} )();