[(#REM)

	Documentation du plugin

	@author		Jonathan OCHEJ
	@license	GPL - https://www.gnu.org/licenses/gpl-3.0.html

	@param type
	@param documentation
	@param source
]

#SET{afficher,tout}

#SET{dsfr_composants_documentation,#NULL|dsfr_composants_documentation}

[(#ENV{type}|et{#GET{dsfr_composants_documentation/#ENV{type}}}|oui)
	#SET{afficher,liste}
	#SET{documentation,#ENV{type}|dsfr_composants_documentation}

	[(#ENV{documentation}|et{#GET{documentation/liste/#ENV{documentation}}}|oui)
		#SET{afficher,documentation}
		#SET{documentation,#GET{documentation/liste/#ENV{documentation}}}
	]
]

[(#ENV{source}|oui)
	[(#GET{afficher}|=={tout}|oui)
		#SET{afficher,rien}
	]
	[(#ENV{documentation}|et{#GET{afficher}|=={liste}}|oui)
		#SET{afficher,rien}
	]
]

[(#ENV{source}|non)
	<h1 class="grostitre">Documentation [(#PLUGIN{dsfr_composants,nom})]</h1>
]

[(#REM)

	Page d'accueil de la documentation

]
[(#GET{afficher}|=={tout}|oui)
	<p>
		Le Système de Design de l'État (ci-après, le <strong>DSFR</strong>) est un ensemble de composants web HTML,
		CSS et Javascript pour faciliter le travail des équipes projets des sites Internet publics,
		et créer des interfaces numériques de qualité et accessibles.
	</p>
	<p>
		Le plugin SPIP <strong>[(#PLUGIN{dsfr_composants,nom})]</strong> charge automatiquement les scripts CSS et Javascript permettant 
		d'utiliser l'ensemble des composants DSFR sur l'espace public. Il effectue automatiquement et <strong>uniquement sur l'espace public</strong> une mise en conformité DSFR :
	</p>
	<ul class="spip">
		<li>des raccourcis typographiques SPIP (tableaux, liens, notes...).</li>
		<li>de certaines balises SPIP (<code>#VAL{'#'}NOTES</code>, <code>#VAL{'#'}TRI</code>...)</li>
	</ul>
	<p>
		Vous devrez ensuite adapter le contenu de vos squelettes pour pouvoir utiliser ces différents composants.
	</p>

	<BOUCLE_accueil(DATA) {source table,#GET{dsfr_composants_documentation}}>
		<INCLURE{fond=prive/squelettes/inclure/documentation_liste_dsfr_composants,type=#CLE}>
	</BOUCLE_accueil>
]


[(#REM)

	Affiche la liste de ce type de documentation

]
[(#GET{afficher}|=={liste}|oui)
	<INCLURE{fond=prive/squelettes/inclure/documentation_liste_dsfr_composants,type=#ENV{type},source=#ENV{source}}>
]


[(#REM)

	Affiche la documentation demandée

]
[(#GET{afficher}|=={documentation}|oui)
	#BOITE_OUVRIR{#CHEMIN_IMAGE{documentation_dsfr_composants_#ENV{type}.svg}|balise_svg{'',cadre-icone}|concat{<h2>#GET{documentation/titre}</h2>},simple,titrem}

	[(#GET**{documentation/description}|oui)
		[(#GET**{documentation/description}|spip_balisage_code{1,'',#GET{documentation/description-language,markdown}})]
	]

	[(#GET{documentation/demo}|oui)
		<div class="onglets_simple">
			<a name="voir_le_code"></a>
			<a name="voir_la_demo"></a>
			<a name="recalcul_la_demo"></a>
			<ul>
				<li id="voir_composant_[(#ENV{documentation})]_demo"><strong>Démonstration</strong></li>
				<li id="voir_composant_[(#ENV{documentation})]_code"><a href="#voir_le_code">Voir le code</a></li>
				<li><a href="[(#URL_PAGE{demo/dsfr_composants,composant=#ENV{documentation}})]" target="_blank">Ouvrir la démonstration dans une nouvelle page</a></li>
				<li id="recalcul_composant_[(#ENV{documentation})]_demo"><a href="#recalcul_la_demo">Recalculer</a></li>
			</ul>
		</div>
		<div id="composant_[(#ENV{documentation})]_code" style="display:none;">[(#GET{documentation/demo}|contenu_document|spip_balisage_code{1,'',spip-squelette})]</div>
		<iframe id="composant_[(#ENV{documentation})]_demo" onload="redimensionner_demo(this);" src="[(#URL_PAGE{demo/dsfr_composants,composant=#ENV{documentation}}|parametre_url{iframe,oui})]"></iframe>
		<style>
			#composant_[(#ENV{documentation})]_demo {
				width: 100%;
				min-height: 100px;
				border: 0;
				background: url('#CHEMIN_IMAGE{loader.svg}') 50% 50% no-repeat;
			}
		</style>
		<script>
			const demo = 'composant_[(#ENV{documentation})]_demo'
			const code = 'composant_[(#ENV{documentation})]_code'
			
			const bouton_voir_demo = document.getElementById('voir_'+demo)
			const bouton_voir_code = document.getElementById('voir_'+code)
			const bouton_recalcul = document.getElementById('recalcul_'+demo)

			bouton_voir_demo.addEventListener('click', voir_demo)
			bouton_voir_code.addEventListener('click', voir_code)
			bouton_recalcul.addEventListener('click', recalcul_demo)

			function voir_code() {
				document.getElementById(demo).style.display = 'none'
				bouton_voir_demo.innerHTML = '<a href="#voir_la_demo">Démonstration</a>'

				document.getElementById(code).style.display = 'block'
				bouton_voir_code.innerHTML = '<strong>Voir le code</strong>'
			}

			function voir_demo() {
				document.getElementById(code).style.display = 'none'
				bouton_voir_code.innerHTML = '<a href="#voir_le_code">Voir le code</a>'

				document.getElementById(demo).style.display = 'block'
				bouton_voir_demo.innerHTML = '<strong>Démonstration</strong>'
			}

			function recalcul_demo() {
				document.getElementById(demo).remove()
				document.getElementById(code).insertAdjacentHTML('afterend', '<iframe id="composant_[(#ENV{documentation})]_demo" onload="redimensionner_demo(this);" src="[(#URL_PAGE{demo/dsfr_composants,composant=#ENV{documentation}}|parametre_url{iframe,oui}|parametre_url{var_mode,recalcul})]"></iframe>')
				voir_demo()
			}

			function redimensionner_demo(iframe) {
				if ( iframe && iframe.contentWindow ) {
					iframe.height = iframe.contentWindow.document.body.scrollHeight + 2 + "px"
					window.requestAnimationFrame(() => redimensionner_demo(iframe))
				}
			}
		</script>
	]

	#BOITE_FERMER

	[(#ENV{source}|non)
		<B_documentation_associee>
			<h2 class="h1">Documentation associée</h2>
			<BOUCLE_documentation_associee(DATA) {source table,#GET{documentation/documentation_associee}}>#INCLURE{fond=prive/squelettes/inclure/documentation_dsfr_composants,source=#ENV{type}/#ENV{documentation},type=#VALEUR{type},documentation=#VALEUR{documentation}}</BOUCLE_documentation_associee>
		</B_documentation_associee>
	]
]