Version 3 — Juin 2023 — JLuc
Question : Comment mettre en place une boucle DATA afin de générer une chronologie à partir d’un fichier en format CSV ?
Réponse : La meilleure façon serait de l’intégrer dans un « modèle » (dossier « modeles/ » de n’importe quel plugin ou squelettes) afin ensuite de pouvoir l’appeler dans les textes de n’importe quel contenu SPIP (article ou autres) : <chronologie_csv|param_a=valeur_a|param_b=valeur_b>. modeles/chronologie_csv.html pourrait ensuite être intégré à un article avec un <chronologie_csv1234> où « 1234 » serait l’identifiant du document CSV associé à l’article.
Suite OK : voici le code actuellement fonctionnel avec quelques explications ;
- VALEUR {X} : X est le numéro de la colonne, à rappeler que X=0 est la premiere colonne du tableur (Librecalc)
- Par la suite, la mise en forme se fait en c’est que du CSS
- À la fin de la boucle on trouve le bouton et le script qui permet de dérouler ou réduire les informations complémentaires .Si vous souhaitez avoir le CSS faites nous savoir.
- À la fin de la boucle vous avez le bouton et le script qui permet de dérouler et/ou réduire les informations complémentaires.
[(#REM) 3. Vos feuilles de style pour l'habillage de la chronologie]
[<link rel="stylesheet" href="(#CHEMIN{css/chrono.css}|direction_css|timestamp)" type="text/css" />]
#INSERT_HEAD
<div class="chrono"> <!--mise en forme du contenu -->
<B_documents_joints> <!-- début de la boucle -->
<!-- type et nom du doc [dans /], colone de classement -->
<BOUCLE_csv(DATA){source csv, chronologie_desarmement_source.csv}
{par /9} ]
{"<br>"}>
<!-- Bloc date -->
<div class="chrono_bloc">
<!-- Bloc texte -->
<div class="chrono_text">
<!-- Titre principale du traité -->
<h2>#VALEUR{3}</h2>
<p>Nom complet du traité : #VALEUR{2}</p>
<p>Signature : #VALEUR{0}</p>
<p>Entrée en vigueur : #VALEUR{1}</p>
<div class="chrono_content">
<h3>Historique</h3>
<p>#VALEUR{4}</p>
<h3>Position de la France</h3>
<p>#VALEUR{5}</p>
<h3>Actualité du traité</h3>
<p>#VALEUR{6}</p>
<h3>Ressources et références</h3>
<p>#VALEUR{7}</p>
</div>
</div>
<button class="unroll" type="button">+</button>
<div class="chrono_date_box">
<div class="chrono_date">#VALEUR{9}</div>
</div>
</div>
</BOUCLE_csv>
</B_documents_joints>
</div>
<script>
// on click the current .unroll unroll the sibling .chrono_content and change the button' text
document.querySelectorAll('.unroll').forEach(item => {
item.addEventListener('click', event => {
item.previousElementSibling.classList.toggle('unrolled');
if (item.innerHTML == '+') {
item.innerHTML = '-';
} else {
item.innerHTML = '+';
}
})
})
</script>
Page résultat : https://www.obsarm.info/spip.php?article561