Intégration d'une boucle DATA dans un article avec le fichier .CSV en document joint

Bonjour,

Nous nous permettons de vous partager une nouvelle situation. La mise en place d’une boucle DATA afin de générer une chronologie à partir d’un fichier en format CSV.

Nous avons déjà ce "générateur" qui a été codé par un volontaire mais entant qu’intégrateur, nous souhaitons connaitre la meilleur façon de placer ce fichier chronologie.html qui contient l’ensemble de la boucle et la meilleure façon de l’intégrer dans un article.

Nous sommes disponible pour toute autre renseignement supplémentaire, et si notre chronologie fonctionne nous souhaitons par la suite proposer un plug-in en coopération avec les spécialistes. Si quelqu’un est intéressé par le bout de code réalisé nous le partagerons avec plaisir même s’il n’est pas encore optimisé.

En attendant vos conseil et préconisation,

Librement

1 « J'aime »

Nous avons déjà ce "générateur" qui a été codé par un volontaire mais entant qu’intégrateur, nous souhaitons connaitre la meilleur façon de placer ce fichier chronologie.html qui contient l’ensemble de la boucle et la meilleure façon de l’intégrer dans un article.

Hello,

possiblement que 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) avec les classiques : <monmodele|param=valeur|param2=valeur2>.

Dans là quelque chose du genre modeles/chronologie_csv.html, qui serait ensuite appelé avec un <chronologie_csv1234> où « 1234 » serait par exemple l’identifiant d’un document joint en CSV.

···
-- 
RastaPopoulos

@RastaPopoulos Effectivement, je suis aller entre temps discuter sur l’IRC et oui la solution est bien de mettre le « chronologie.html » dans le dossier « modeles » et l’appeler dans l’article avec <chronologie|>.

Et la pouf tout s’affiche, de plus il est tout à fait possible de mettre en pièce jointe de l’article le .csv et le déclarer en tant que source dans le html, ainsi les utilisateurs peuvent mettre les données à jour ! C’est top du top !

Un grand merci pour votre présence, une fois le code propre et optimisé je mettrais l’ensemble disponible sur ce fil.

1 « J'aime »

Sans trop attendre 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 c’est que du CSS, concretement, ça fonctionne très bien. Si vous souhaitez avoir le CSS faites nous savoir, nous ne pouvons pas le mettre en pièce jointe car cela n’est pas autorisé dans le forum.
  • A 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, IMG/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>

Et on peut voir ce que ça donne ?

Oui, mais attention, il nous reste à corriger l’affichage des liens qui pose problème.

1 « J'aime »

Chouette.
J’ai synthétisé les infos sur le wiki : Boucle DATA et CSV associés à un article
Si tu veux, tu pourrais associer le fichier CSS à cet article quand ce sera prêt.

Bien reçu, par contre je viens de me rendre compte qu’il reste un point que je n’ai pas réussit, c’est le chemin spécifique du fichier CSV. Actuellement le fichier est à la base du site, et il est interprété automatiquement, savez vous quelle option dois-je ajouter pour préciser le chemin du .CSV qui est en pièce jointe de l’article ?

La solution à la question précédente a été résolue grâce à cet article Les itérateurs de SPIP - la boucle (DATA) - SPIP

Le critère {source format, données} définit les données sur lesquelles la boucle va itérer.

Donc j’ai corrigé le chemin du CSV dans le code ci-dessus.

Bonjour,
Tu peux également demander explicitement le document csv qui est lié à l’article, et pour parfaire, demander exactement le 1er fichier lié à l’article ayant l’extension .csv trié par son titre (numéro espace) 00. titredetafeuille qui retournera un seul résultat.
<BOUCLE_csv(DOCUMENTS){id_article}{extension=csv}{par num titre}{0,1}> #SET{source_csv,#FICHIER} </BOUCLE_csv>
Puis tu utilises #GET{source_csv} dans la boucle DATA
Cela permet de charger une autre feuille le moment venu sans avoir le même nom de fichier, ou d’utiliser le modèle sur d’autres articles.

1 « J'aime »

C’est précisément ce qui est décrit là : Tutoriel : Afficher sur une carte GIS des points dont on n’a que l’adresse - SPIP-Contrib

1 « J'aime »

@JLuc Il fallait le trouver quand même, @touti en tout cas un grand merci pour ces conseils, qui nous ont permis de réaliser cette chronologie qui nous servira de modèle pour d’autres articles. :slight_smile:
Ce que nous avons pas dit non plus c’est que avec la valeur {8} nous avons pu mettre en ordre chronologique en fonction des années d’adoption des traités.

Code définitif - chronologie.html

<div class="chrono"> <!--mise en forme du contenu -->
<B_documents_joints> <!-- début de la boucle -->
  <BOUCLE_csv(DOCUMENTS){id_article}{extension=csv}{par num titre}{0,1}> #SET{source_csv,#FICHIER} </BOUCLE_csv>
  
  <BOUCLE_chrono(DATA){source csv, #GET{source_csv}}
  {par /8}]
  {"<br>"}>
    <!-- Bloc date -->
    <div class="chrono_bloc">
      <!-- Bloc texte -->
      <div class="chrono_text">
        <h2>#VALEUR{3}</h2>
        <!-- colonne traité (surement col 2) -->
        <p>Nom complet du traité : #VALEUR{2}</p>
        <p>Adoption : #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{8}</div>
      </div>
      
    </div>
    </BOUCLE_chrono>
  </B_documents_joints>
</div>

SCRIPT dans le même fichier

<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>