Des blocs dépliables

Cet outil du Couteau Suisse vous permet de créer des blocs dont le titre cliquable peut rendre un contenu visible ou invisible, voire de les munir d’une adresse pour que le bloc visible soit récupéré en AJAX. Ces blocs sont disponibles dans tous vos contenus SPIP (articles, rubriques, etc.) ainsi que dans vos squelettes.

Présentation

Cet outil permet de créer des blocs dont le titre cliquable peut rendre un contenu visible ou invisible, voire de les munir d’une adresse pour que le bloc visible soit récupéré en AJAX. Ces blocs sont disponibles dans tous vos contenus SPIP (articles, rubriques, etc.) ainsi que dans vos squelettes (fichiers .html). Ils sont facilement configurables et imbricables.

Les fonctionnalités décrites ici font partie du plugin Le Couteau Suisse que vous pouvez trouver ici : Le Couteau Suisse. Pour avoir accès aux blocs dépliables présentés dans cet article, il vous faut donc avoir préalablement installé ce plugin.

Dans les contenus SPIP

Les rédacteurs ont à disposition les nouvelles balises <bloc> (ou <invisible>) et <visible> à utiliser dans leurs textes (articles, rubriques, etc.) comme ceci :

<bloc>
 Un titre qui deviendra cliquable
	    
 Le texte, initialement caché, à montrer/cacher, après deux sauts de ligne...
</bloc>
<visible>
 Un titre qui deviendra cliquable
	 
 Le texte, initialement affiché, à cacher/montrer, après deux sauts de ligne...
</visible>

A noter : si le texte du bloc ne comporte pas deux sauts de ligne délimitant le titre et le futur texte dépliable, alors le Couteau Suisse crée un titre qui deviendra cliquable en prenant les 30 premiers caractères du texte présent dans le bloc. Si besoin, ce paramètre est directement modifiable sur la page de configuration du plugin.

• Résumé

Pour qu’un résumé puisse alterner avec le contenu du bloc initialement caché, vos rédacteurs peuvent utiliser les balises <resume></resume> après le double saut de ligne comme ceci :

<bloc>
Le titre
	   
<resume>Un résumé</resume>
Le contenu du bloc plus développé
</bloc>

Dans les squelettes

Vous avez à votre disposition les nouvelles balises #BLOC_TITRE, #BLOC_RESUME, #BLOC_DEBUT et #BLOC_FIN à utiliser comme ceci :

 #BLOC_TITRE
 Mon titre
#BLOC_RESUME
Le résumé de la suite
#BLOC_DEBUT
 Mon bloc dépliable
 #BLOC_FIN

• Résumé

La balise #BLOC_RESUME est facultative. En cas d’utilisation, le résumé entre #BLOC_RESUME et #BLOC_DEBUT sera masqué lorsque le bloc est rendu visible.

Toutefois, seul le titre reste cliquable.

• Ajax

Pour utiliser Ajax, il faut préciser l’URL à charger grâce à la balise #BLOC_TITRE{mon_URL} à laquelle vous ajoutez un paramètre. Le fichier (ou l’adresse) pointée par l’url sera alors chargée dans le BLOC (entre #BLOC_DEBUT et #BLOC_FIN) avant que le bloc ne soit rendu visible.

Exemple dans une boucle (ARTICLES) : [(#BLOC_TITRE{[(#URL_PAGE{monajax}|parametre_url{id_article,#ID_ARTICLE})]})]
Ici, le fond monajax.html ne sera donc appelé que lorsque le visiteur voudra déplier le bloc.

Ce mécanisme permet d’alléger le poids de la page initiale et pourra augmenter la vitesse de navigation...

Notez cependant que #URL_PAGE n’aime pas les sous-répertoires sous SPIP : vous risquez un accès interdit. Remplacez donc #URL_PAGE{inc/qqchose} par #URL_PAGE{qqchose}.

Un exemple appelant le 1er article en base et transmettant le paramètre var_mode indispensable développement du site :

[(#BLOC_TITRE{[(#URL_PAGE{monajax}|parametre_url{id_article,1}|parametre_url{var_mode,#ENV{var_mode}})]})]
	My qualifications
#BLOC_DEBUT
	Wait please...
#BLOC_FIN

• Bloc visible

Pour produire un bloc déplié (dont le contenu est visible), ajoutez simplement l’argument {visible} à la balise #BLOC_TITRE. Exemple : #BLOC_TITRE{visible}

Installation

L’outil décrit ici est une fonctionnalité du plugin « Le Couteau Suisse » que vous pouvez trouver ici : Le Couteau Suisse.

Pour avoir accès aux raccourcis et aux balises décrits dans cet article, il vous faut donc avoir préalablement installé ce plugin en suivant la procédure normale d’installation des plugins SPIP.

Ensuite, veuillez activer l’outil « Blocs Dépliables » en vous rendant sur la page d’administration du plugin en espace privé (Bouton Configuration, et onglet "Le Couteau Suisse").

Une fois cet outil activé, vous aurez enfin la possibilité d’insérer dans vos articles ou dans vos squelettes des blocs dépliables/repliables.

Dépendances

Cet outil a besoin de la librairie jQuery. Le site officiel (en anglais) est : http://jquery.com/. D’autres informations sont disponibles en français ici : http://www.jquery.info/. Cette librairie de fonctions JavaScript a été complètement intégrée dans SPIP à partir de la version 1.92. Pour les versions antérieures, il vous faudra installer un plugin spécifique que vous pouvez télécharger ici : http://files.spip.org/spip-zone/jqu...

Si vous remarquez un conflit avec votre squelette ou un autre plugin (dysfonctionnement des blocs par exemple), tentez de modifier l’option de configuration « Balise pour les titres ». La valeur par défaut est h4, mais elle peut être changée en h5 ou même div.

Personnalisation des blocs

Les CSS doivent être ajoutées dans le fichier habituel de vos squelettes. En ce qui concerne la dist SVN de SPIP, il s’agit du fichier « habillage.css ». On le surcharge souvent à la racine du squelette utilisé pour le site.

Il y a une autre possibilité encore, celle de surcharger directement le fichier couteau_suisse/outils/blocs.css.html en le recopiant dans monsquelette/outils/blocs.css.html et en y modifiant les styles proposés ou en y ajoutant vos propres styles.

Attention : toute modification d’un fichier surchargé nécessite une recompilation des outils du Couteau suisse, obtenue en se rendant simplement sur la page de configuration du plugin ou en ré-affichant celle-ci. N’hésitez pas à vider également les caches de SPIP, ou de travailler sans cache durant le développement du site.

Un bloc <bloc> (ou un #BLOC_XXX) est construit comme ceci :

<div class="cs_blocs">
<h4 class="blocs_titre blocs_replie">
<a href="#">un titre</a></h4>
<div class="blocs_invisible">le contenu</div>
</div>

Si l’on veut en modifier l’apparence, il suffit donc de déclarer un style perso comme ceci :

div.cs_blocs>div {
	border:solid 2px;
}

h4.blocs_titre, h4.blocs_replie {
	background:transparent none;
}

Dans cet exemple, tous les <bloc> auront un cadre noir autour du contenu et les tous les titres de blocs repliables h4 seront privés de leur petit triangle.

Pour y voir plus clair, je conseille toujours de débuguer son site avec FireFox et l’excellente extension FireBug. On peut y gérer les CSS et débugger le JS à la volée, c’est très pratique. (Modif. 2018 : Chrome le permet également très bien).

Il se peut que, si vous placez une image dans un bloc dépliable, le bloc ne soit pas correctement déplié. Essayez alors d’ajouter le style CSS suivant :

.blocs_destination { overflow: hidden; }

Blocs numérotés

Vous avez la possibilité d’ajouter un numéro à vos raccourcis, afin de mieux cibler l’apparence que vous pourriez donner à vos blocs dépliables. La numérotation des blocs est également fort utile pour créer des blocs imbriqués. En utilisant par exemple <bloc#2> (ou <invisible#2> ou <visible#2>), la classe « cs_bloc2 » sera ajoutée au bloc <div principal :

<bloc#2>
 Un titre qui deviendra cliquable
	    
 Le texte à cacher/montrer, après deux sauts de ligne...
</bloc#2>

Ce bloc <bloc#2> est construit comme ceci :

<div class="cs_blocs cs_bloc2">
<h4 class="blocs_titre blocs_replie">
<a href="#">un titre</a></h4>
<div class="blocs_invisible">le contenu</div>
</div>

Si l’on veut en modifier l’apparence, il suffit donc de déclarer un style perso comme ceci :

div.cs_bloc2>div {
	border:solid 2px;
}

div.cs_bloc2 h4.blocs_titre, div.cs_bloc2 h4.blocs_replie {
	background:transparent none;
}

Dans cet exemple, tous les <bloc#2> auront un cadre noir autour du contenu et seuls les titres de ces blocs h4 seront privés de leur petit triangle.

Petite précision : l’ancienne syntaxe <bloc2></bloc2> (sans le dièse) devient obsolète et doit être évitée car SPIP 2.0 considère désormais que cette notation est un modèle. Si vos rédacteurs ont utilisé cette notation, je crains qu’il faille corriger toutes les occurrences directement en base de données... Pour rechercher les fautifs, la syntaxe SQL à utiliser est par exemple : SELECT id_article FROM spip_articles WHERE texte REGEXP '</?bloc[[:digit:]]+>'. Pour effectuer les remplacements, alors essayez peut-être : UPDATE spip_articles SET texte = REPLACE(texte, 'bloc2>', 'bloc#2>') (je ne pense pas qu’on puisse utiliser les regexp avec un replace...)

Dans vos squelettes, la balise titre à utiliser est alors :
#BLOC_TITRE{un_numero} ou #BLOC_TITRE{un_numero, mon_URL} à la place de : #BLOC_TITRE ou #BLOC_TITRE{mon_URL}. Les classes générées sont les mêmes que précédemment. Exemples : #BLOC_TITRE{1} ou #BLOC_TITRE{#ID_ARTICLE}. Pour un bloc déplié (bloc dont le contenu est visible), utilisez alors la syntaxe #BLOC_TITRE{visible, un_numero, mon_URL}. L’ordre des arguments n’importe pas.

Balise <h4>

Puisque le titre du bloc est transformé en titre HTML (balise <h4> par défaut), il est bien entendu déconseillé de rédiger un bloc comme :

<bloc>
{{{Un intertitre à éviter !!}}}
	    
Ceci est une mauvaise syntaxe...</bloc>

De même, il est conseillé d’agir directement sur les styles, plutôt que de mettre un attribut en dur sur un titre de bloc. Exemple :

<bloc>
{{Un titre en gras}}
 	   
Le gras sur le titre est complètement inutile si vous avez défini ce style :
h4.blocs_titre {
	font-weight:bold;
}
</bloc>

Enfin, si le choix de la balise <h4> ne vous convient pas pour le titre cliquable de vos blocs, il suffit de la modifier sur la page d’administration du Couteau Suisse en indiquant h5, h6 ou h7, en fonction de vos CSS.... Si vous voulez utiliser la balise <h3> que SPIP utilise lui-même pour les intertitres (notation : {{{Mon intertitre}}}), alors le sommaire automatique prendra en compte vos titres de blocs.

L’attribut title du titre

Depuis la version 1.8.15.01 du plugin, le titre d’un bloc est automatiquement affublé d’un title par défaut : "Déplier" ou "Replier". La source brute du bloc ne possède pas de title, mais JavaScript s’en charge au chargement de la page en cherchant le dernier div de classe blocs_titre (cette classe est invisible par défaut). Si cette classe est trouvée, JavaScript en lit le contenu HTML qui doit contenir le séparateur « || » et modifie le title du titre du bloc en fonction de son état (déplié ou replié).

Exemple : <div class="blocs_title">Déplier||Replier</div>.

Personnalisation : dans le fichier mes_fonctions.php de votre squelette, créez la fonction blocs_title($titre='', $corps='', $num=''). Celle-ci doit renvoyer un tableau contenant le texte pour chaque état du bloc (déplié ou replié). Exemple :

function blocs_title($titre='', $corps='', $num='') {
	$titre = couper($titre, 30);
	return array("D&eacute;plier le bloc &laquo;$titre&raquo;", "Replier le bloc &laquo;$titre&raquo;");
}

Pour un bloc dans un squelette, il suffit d’ajouter la div.blocs_title décrite ci-dessus en clair :

#BLOC_TITRE #TITRE
#BLOC_RESUME #INTRODUCTION
#BLOC_DEBUT #TEXTE
<div class="blocs_title">Déplier mon bloc||Replier mon bloc</div>
#BLOC_FIN

Déplier un bloc au chargement de la page

Cela peux se faire directement en jQuery (code JavaScript à insérer dans votre squelette) en simulant un clic de souris.

Blocs classiques

La fonction eq(index) permet de choisir le bloc à déplier, sachant que la variable index commence à zéro. L’exemple suivant déplie le premier bloc de la page :

jQuery(document).ready(function() {
	jQuery('h4.blocs_titre').eq(0).click();
});

Dès la version de SPIP 2.0, utilisez plutôt la balise #BLOC_DEPLIER{index} que vous pouvez placer n’importe où dans la page. Exemple pour déplier le 5e bloc une fois la page chargée : #BLOC_DEPLIER{4}.

Blocs numérotés

Le code jQuery est plus facile : il suffit de repérer le sélecteur « div.cs_blocXX » où XX est le numéro du bloc. L’exemple suivant déplie le bloc #4 de la page :

jQuery(document).ready(function() {
	jQuery('div.cs_bloc4')
		.children('.blocs_titre').eq(0).click();
});

Dès la version de SPIP 2.0, utilisez plutôt la balise #BLOC_DEPLIER_NUM{index} que vous pouvez placer n’importe où dans la page. Exemple pour déplier le bloc #4 une fois la page chargée : #BLOC_DEPLIER_NUM{4}.

Ancre et paramètres d’URL

Le but ici est de faciliter les dépliages/repliages de blocs par URL. Pour déplier plusieurs blocs, il faut lister leur identifiant séparés par une virgule. Voici la syntaxe à utiliser pour vos liens (NN, XX, YY et ZZ sont les identifiants numériques de vos blocs) :

  • Blocs numérotés : &deplier_num=NN ou &deplier_num=XX,YY,ZZ
  • Blocs simples : &deplier=NN ou &deplier=XX,YY,ZZ

Attention, les blocs non numérotés sont repérés à partir de zéro : 0 = 1er bloc, 1 = 2e bloc, etc. Ce chiffrage inclus tous les blocs de la page finale, y compris les blocs numérotés éventuels.

Les ancres#deplierNN et #deplier_numNN fonctionnent aussi, mais seuls les blocs numérotés ont un id pour l’instant et provoqueront un défilement de la page jusqu’au bloc voulu... Il est en effet plus prudent d’ancrer des blocs numérotés, histoire d’éviter toute erreur en cas de modification du contenu de la page.

Variable JS

Dès que la page est chargée, le plugin consulte deux variables JavaScript pour savoir qu’il faut ouvrir un bloc ou non. En fonction des besoins, cette variable peut donc être initialisée (avant l’appel des scripts du Couteau suisse) de cette façon :

	// déplier le 2e bloc non numéroté :
	var bloc_actif = 1; 
	// déplier le bloc numéroté #2 :
	var bloc_actif_num = 2; 

Si l’URL de la page comporte un paramètre sur les blocs (voir paragraphe précédent), alors ces variables (dans la catégorie concernée) seront ignorées.

Pagination à l’intérieur d’un bloc

Pour être sûr que le bloc contenant une pagination s’ouvre automatiquement au rechargement de la page, il vous faut d’abord numéroter vos blocs en utilisant pour le titre le même numéro que celui de la pagination.

Par exemple : #BLOC_TITRE{#ID_ARTICLE} pour un critère de pagination comme celui-ci : {pagination 5 #ID_ARTICLE}.
Vous pouvez aussi remplacer l’exemple #ID_ARTICLE par #COMPTEUR_BOUCLE, #_NomDeMaBoucle:COMPTEUR_BOUCLE, ou tout autre numéro.

Enfin, insérez simplement dans votre page le code Javascript suivant [1] :

jQuery(document).ready(function() {
  if(blocs_pagination) {
    jQuery('div.cs_bloc' + blocs_pagination 
       + ' .blocs_titre').eq(0).click();
    window.location.hash = '#pagination' + blocs_pagination;
  }
});

La variable blocs_pagination est automatiquement calculée par le plugin. Elle représente le numéro de la pagination appelée (ce numéro est présent dans l’ancre de l’URL).
Exemple : « 11 » si l’url contient l’ancre « #pagination11 ».

Impression

Dans votre navigateur, ajouter à l’adresse d’une page le paramètre « cs=print » force le Couteau Suisse à déplier les blocs en vue d’une impression. Par exemple : www.monsite.ici/spip?article999&cs=print
Aussi, ce paramétrage est automatique dans les squelettes suivants : « print.html », « imprimer.html », « imprimir_articulo.html », « imprimir_breve.html » ou « article_pdf.html » (donc ici : « page=print », « page=imprimer », etc.). Lisez ici le paragraphe « Particularités » pour en savoir davantage.

Autre méthode (astuce de Commetou) : Javascript. « Si on veut faire un bouton imprimer (sans passer par une page intermédiaire) avec la commande onclick="window.print(); return false;" sur un lien, il faut modifier [2] la CSS d’impression avec le code div.cs_blocs div.blocs_invisible{display: block;} pour que les blocs soient ouverts. »

Zoom sur vos squelettes...

Les balises #BLOC_TITRE, #BLOC_RESUME, #BLOC_DEBUT et #BLOC_FIN ne font qu’envelopper vos blocs à l’aide de trois balises HTML : <div>, <h4> et <a>.

Allez, un exemple vaut mieux qu’un long discours. Voici comment le plugin transforme :

	#BLOC_TITRE Un dépliage simple sans résumé
	#BLOC_DEBUT COUCOU !!
	#BLOC_FIN

	#BLOC_TITRE Un dépliage simple avec résumé
	#BLOC_RESUME Un résumé...
	#BLOC_DEBUT COUCOU !!
	#BLOC_FIN

en :

	<div class="cs_blocs"><h4 class="blocs_titre blocs_replie "><a href="javascript:;"> Un dépliage simple sans résumé
	</a></h4><div class="blocs_invisible blocs_destination"> COUCOU !!
	</div></div>

	<div class="cs_blocs"><h4 class="blocs_titre blocs_replie "><a href="javascript:;"> Un dépliage simple avec résumé
	</a></h4><div class="blocs_resume"> Un résumé...
	</div><div class="blocs_invisible blocs_destination"> COUCOU !!
	</div></div>

Notez que les retours à la ligne sont respectés.

Donc, attention à votre syntaxe HTML !

Il faut veiller à ce que les blocs entre les différentes balises #BLOC (#BLOC_TITRE et #BLOC_DEBUT, puis entre #BLOC_DEBUT et #BLOC_FIN par exemple) soient corrects dans leur syntaxe HTML : pas de balise ouverte non fermée ou fermée et non ouverte.
-  Exemple incorrect : <b>#BLOC_TITRE[(#DATE|annee)]</b>
-  Exemple correct : #BLOC_TITRE<b>[(#DATE|annee)]</b>

Étant donné que le plugin place entre <h4><a> et </a></h4> tout ce qui se trouve entre #BLOC_TITRE et #BLOC_DEBUT, n’y placez pas des liens ou des balises block (<hX>, <p> ou <div>). Les balises inline (comme <span>) en revanche sont permises. En cas de doute référez-vous à la syntaxe HTML des balises imbriquées.
-  Exemple incorrect : #BLOC_TITRE{#ID_RUBRIQUE}<a href="#URL_RUBRIQUE">#TITRE</a>#BLOC_DEBUT
-  Exemple correct : #BLOC_TITRE{#ID_RUBRIQUE}#TITRE#BLOC_DEBUT

De même, au sein de vos articles, ne mettez pas de liens dans le titre du bloc, et surtout par d’intertitre non plus.

Voici un exemple de tri des articles par date, utilisant les listes <ul><li> :

<B1><ul>
<BOUCLE1(ARTICLES){par date}{inverse}{fusion YEAR(date)}>
  <li>#BLOC_TITRE<b class="texte">[(#DATE|annee)]</b>
  <B2>
     #BLOC_DEBUT<ul>
     <BOUCLE2(ARTICLES){annee_relatif}{par date}{inverse}{lang_select=non}{fusion MONTH(date)}>
     <li>#BLOC_TITRE<small>[(#DATE|nom_mois)]</small>
     <B3>
        #BLOC_DEBUT<ul>
        <BOUCLE3(ARTICLES){mois_relatif}{par date}{inverse}>

           <li><small><a href="#URL_ARTICLE">#TITRE</a></small></li>
        </BOUCLE3>
        </ul>#BLOC_FIN
     </B3>
     </BOUCLE2>
     </ul>#BLOC_FIN
  </B2></li>
</BOUCLE1></ul>
</B1>

Voici un exemple listant les brèves dans un bloc avec une pagination :

<B_breves><ul><li>
#BLOC_TITRE
Les Br&egrave;ves du site !
#BLOC_DEBUT
	#ANCRE_PAGINATION
	[<p class="pagination">(#PAGINATION)</p>]
	<ul>
		<BOUCLE_breves(BREVES){tous}{par date}{inverse}{pagination 5}>
			<li>
			<divclass="titredebreve">#TITRE ([(#DATE|affdate_court)])</div>
			[<div class="textedebreve">(#TEXTE)</div>]
			</li>
		</BOUCLE_breves>
	</ul>
	[<p class="pagination">(#PAGINATION)</p>]
#BLOC_FIN</li></ul>
</B_breves>

Voici un exemple de blocs imbriqués [3] :

<B_rubriques>
   <ul>
      <BOUCLE_rubriques(RUBRIQUES) {id_parent} {par titre}>
          <li>
              #BLOC_TITRE{#ID_RUBRIQUE}
              [(#TITRE|supprimer_numero)]
              #BLOC_DEBUT
              <B_articles2>
                  <ul>
                      <BOUCLE_articles2(ARTICLES) {id_rubrique} {par titre}>
                          [<li><a href="#URL_ARTICLE">(#TITRE|supprimer_numero)</a></li>]
                      </BOUCLE_articles2>
                  </ul>
              </B_articles2>
              <BOUCLE_sous_rubriques(BOUCLE_rubriques)>
              </BOUCLE_sous_rubriques>
              #BLOC_FIN
          </li>
       </BOUCLE_rubriques>
   </ul>
</B_rubriques>

Lien cliquable permettant de replier le bloc par l’intérieur

Par défaut, le plugin possède une fonction jQuery qui prendra automatiquement en compte un « lien de repliage » placé dans un bloc déplié, c’est à dire : entre les balises #BLOC_DEBUT et #BLOC_FIN. Ce lien doit être affublé de la classe replier_bloc. Exemple :

#BLOC_TITRE #TITRE
#BLOC_DEBUT #TEXTE
<a href="javascript:;" class="replier_bloc">[Replier l'article]</a>
#BLOC_FIN

Utilisation de la Balise #INTRODUCTION

Cet outil du Couteau Suisse vous permet de paramétrer la balise SPIP #INTRODUCTION et la doter par exemple de points de suite cliquables. Si par hasard vous désirez que ces points de suite produisent l’ouverture du bloc, alors voici comment faire.

Si les points de suite cliquables sont bien activés et que, dans votre squelette, votre bloc dépliable ressemble à :

	<BOUCLE_art(ARTICLES)>
		#BLOC_TITRE #TITRE
		#BLOC_RESUME #INTRODUCTION
		#BLOC_DEBUT #TEXTE
		#BLOC_FIN
	</BOUCLE_art>

... alors le code code JavaScript à insérer dans la page, ou dans le header de votre squelette APRÈS les appels du Couteau Suisse est :

jQuery(document).ready(function(){
	jQuery('.blocs_resume a.pts_suite')
	  .click( function(){
		jQuery(this).parents('.cs_blocs:first').children('.blocs_titre')
			.blocs_replie_tout().blocs_toggle();
		// annulation du clic
		return false;
		});
});

Déplier un bloc éloigné de son titre

Depuis la version 1.8.10.11 du Couteau Suisse, il est possible de déplier un bloc à distance. Le titre cliquable du bloc et son contenu peuvent être éloigné dans la page et placés où vous voulez de façon totalement indépendante, à conditions :
-  d’ouvrir et fermer vos blocs grâce aux couples de balises #BLOC_TITRE_DEBUT/#BLOC_TITRE_FIN (enfermant le futur bouton de dépliage/repliage du bloc) et #BLOC_DEBUT/#BLOC_FIN (enfermant le contenu dépliable/repliable du bouton associé)
-  de choisir un identifiant unique à préciser obligatoirement aux balises #BLOC_TITRE_DEBUT{identifiant_unique} et #BLOC_DEBUT{identifiant_unique} qui permet d’associer le bouton de dépliage/repliage (titre cliquable) à son contenu. Cet identifiant doit être le premier argument de la balise.

Un deuxième argument ’visible’ ou ’invisible’ est autorisé. Il permet de choisir l’état du bloc au démarrage de la page.

Par exemple :

#BLOC_TITRE_DEBUT{toto}
	Bouton pour un bloc éloigné invisible
#BLOC_TITRE_FIN
<p>Allez, un peu de texte, histoire de mettre de la distance... Voyez que le bouton du bloc 'toto' est construit avant son contenu replié que voici :</p>
#BLOC_DEBUT{toto}
	UN COUCOU ELOIGNE !!
#BLOC_FIN

#BLOC_DEBUT{titi,visible}
	UN COUCOU ELOIGNE !!
#BLOC_FIN
<p>Allez, un peu de texte, histoire de mettre de la distance... Voyez que le contenu déplié du bloc 'titi' est constuit avant son titre cliquable que voici :</p>
#BLOC_TITRE_DEBUT{titi,visible}
	Bouton pour un bloc éloigné visible
#BLOC_TITRE_FIN

Attention toutefois à ne pas oublier de changer d’identifiant à chaque tour si vous placez un bloc dépliable à distance à l’intérieur d’une boucle. Si votre identifiant est fixe, alors tous les blocs produits par la boucle s’ouvriraient et se fermeraient ensemble... La balise #COMPTEUR_BOUCLE est ici indispensable :

 <B1><ul>
<BOUCLE1(ARTICLES)>
 <li>
#BLOC_TITRE_DEBUT{toto#COMPTEUR_BOUCLE}
       #COMPTEUR_BOUCLE. #TITRE
#BLOC_TITRE_FIN
blablabla 
 #BLOC_DEBUT{toto#COMPTEUR_BOUCLE}
       #INTRODUCTION
 #BLOC_FIN
</li>
</BOUCL1></ul>
</B1>

Court-circuiter les réglages généraux

Dans une page particulière, pour ignorer le paramétrage général « Un seul bloc ouvert sur la page » [4], placez dans votre page la balise #BLOC_UNIQUE avec l’argument qui correspond à cette page.
-  Syntaxe pour n’avoir qu’un seul bloc ouvert à la fois sur la page : #BLOC_UNIQUE, #BLOC_UNIQUE{oui}, #BLOC_UNIQUE{1}
-  Syntaxe pour permettre au visiteur d’ouvrir plusieurs blocs à la fois sur la page (réglage général par défaut) : #BLOC_UNIQUE{non}, #BLOC_UNIQUE{0}, #BLOC_UNIQUE{-1}

Bien entendu, si vous placez dans la même page la balise #BLOC_UNIQUE{oui} et plusieurs balises valides #BLOC_DEPLIER (ou #BLOC_DEPLIER_NUM), seule la dernière de ces dernières sera prise en compte !

Ouvrir un bloc contenant un formulaire

Si vous décidez de mettre un formulaire SVT dans un bloc, alors il sera nécessaire d’ouvrir le bloc au chargement de la page au cas où le formulaire renvoie une erreur de saisie.

Voici une petite commande JS qui veillera à ouvrir automatiquement un bloc contenant une erreur :

jQuery(document).ready(function() {
  jQuery('.cs_blocs').has('.erreur_message')
    .find('.blocs_titre.blocs_replie').blocs_toggle();
});

Notes

[1dans le corps de votre page ou dans le header APRÈS les appels du Couteau Suisse

[2NDLR : en la surchargeant dans votre squelette

[3Utile pour le plan d’un site par exemple

[4paramètre que vous pourrez trouver sur la page d’administration du Couteau Suisse après avoir sélectionné l’outil « Blocs Dépliables »

Discussion

146 discussions

  • 16

    Bonjour,
    J’utilise les blocs dépliables dans mon site https://keraluc.com mais je souhaite aussi utiliser des ancres dans ma page à l’intérieur des blocs. Un appel d’un lien dans la page n’ouvre pas le bloc qui contient l’ancre. Comment faire pour obtenir cela, si c’est possible ?

    • Bonjour !
      En principe, un petit script jQuery pourra facilement ouvrir le bloc en présence d’une ancre...
      Tu as peut-être déjà résolu ton problème ?

    • Bonjour,
      Non, pas cette fonctionnalité car je n’ai pas les compétences pour développer un script. Dommage car je trouve que cette fonctionnalité pourrais vraiment enrichir ce plugin.

    • Si tu utilises le Couteau Suisse, ce pourra être en effet une fonctionnalité intégrée à la prochaine version du plugin. Sinon voici à quoi pourrait ressembler le script en question :

      <script>
      // Si une ancre est contenue dans un bloc ?
      jQuery(document).ready(function() {
      	var ancre = window.location.hash;
      	if(ancre) {
      		ancre = jQuery(ancre);
      		var bloc = ancre.parents('.cs_blocs').find('.blocs_titre.blocs_replie');
      		if(bloc.length && (ancre.length == 1)) {
      			bloc.blocs_toggle();
          	jQuery('html,body').animate({scrollTop: ancre.offset().top}, 'slow');
      		}
      	}
      });
      </script>

      (non testé en dehors du Couteau Suisse)

    • Merci pour cette réponse très concrète. Excusez ma question de néophyte, mais où faut-il que le place ce script pour le tester ?
      Merci pour l’attention portée à mon souci.

    • J’ai placé ce script dans le header après #INSERT_HEAD
      mais cela ne fonctionne pas. Le lien pointe bien vers l’ancre mais le bloc ne s’ouvre pas en même temps que ce déplacement dans la page.

    • Bonjour.
      J’ai finalement modifié le Couteau Suisse pour que cette fonction soit incluse dans le plugin, moyennant une option à activer dans7la config. Une mise à jour vers la version 1.14.8 devrait répondre à votre question.
      Cordialement

    • Bonjour,
      J’ai désactivé Blocs Dépliables 1.2.8 et réinstallé Le Couteau Suisse 1.14.8 avec l’option Déplier un bloc contenant une ancre : OUI
      mais ce la ne fonctionne pas. Je suis en SPIP 4.1.12, sa mise à jour est-elle nécessaire pour cette nouvelle fonctionnalité du CS.
      Voir cette page que j’aimerais gérer avec la commande permettant d’ouvrir les blocs lus bas dans la page à partir d’un lien dans le texte. En quelque sorte un menu interne à l’article.
      https://www.keraluc.com/Autres-artistes.html

    • En fait, je ne comprends plus très bien ta demande....

      Après avoir regardé ta page, je ne trouve pas d’ancre insérée dans les blocs, sauf erreur ?

      Le raccourci SPIP pour insérer une ancre est : [nom_ancre<-].
      Si cette ancre est insérée au beau milieu du texte d’un bloc alors l’url https://www.keraluc.com/Autres-artistes.html#nom_ancre est censée ouvrir le bloc et défiler la page jusqu’à l’ancre en question...

      En revanche, je vois des ancres insérées dans les titres, est-ce voulu ? Si oui, cette pratique est proscrite car elle crée un lien dans un lien, il faut donc les retirer.

      Si ta demande est simplement d’ouvrir les blocs au chargement de la page, alors est-ce que le paragraphe ci-dessus Ancre et paramètres d’URL répond à ta question ?

      Je vois déjà ce qui fonctionne : l’ancre #deplier2 ouvre bien le bloc de « Georges Allier », tout comme le paramètre ?deplier=2

    • Je me suis sans doute mal exprimé. Mon objectif n’est pas l’ouverture des blocs dépliables au chargement de la page.
      Je souhaite que le clic sur le nom d’un artiste dans le premier paragraphe (chapeau de l’article) dirige vers le titre du bloc correspondant tout en le dépliant.
      Soit sur le nom de l’artiste dans le chapeau et son ancre sur le titre de son bloc dans le texte de l’article.
      Quand je place l’ancre à l’intérieur du texte de son bloc cela provoque un déplacement de la page vers le haut et non pas vers le titre du bloc concerné ?

    • Ah ok,

      Dans ce cas il faut plutôt utiliser les blocs numérotés : <bloc#2>, <bloc#3>, ....

      J’ai fait un test ici : https://vnf.ovh/_SPIP32/spip.php?article1

      Pas besoin d’ancre insérée dans les blocs, mais juste un petit script qui repère le clic dans le chapo et scrolle vers la bio correspondante, bloc ouvert :

      <script>
       // un clic sur une personne qui produit l'ouverture du bloc correspondant.
       jQuery(document).ready(function(){
        jQuery('.spip_ancre[href^="#"]').click( function() {
         // recherche du bloc numéroté désiré
         var sel = '.cs_blocs.cs_bloc'
          + this.getAttribute("href").replace('#', '') 
          + ' .blocs_titre';
         jQuery(sel + '.blocs_replie').blocs_toggle();
         jQuery('html,body').animate({scrollTop: jQuery(sel).offset().top}, 'slow')
         // annulation du clic
         return false;
        });
       });
      </script>
    • Merci pour ces explications et la page de test.
      Mais cela n’est pas très clair pour moi. Ceci peut être géré directement dans l’article Spip avec des blocs numérotés , ... sans intervention dans le squelette de l’article. Si oui, pouvez-vous de communiquer le texte de votre article de test pour que je puisse comprendre les balises à utiliser et la manière de les insérer dans l’article Spip.
      Merci beaucoup pour l’attention que vous portez à ma demande émanant d’un « bricoleur » du net.

    • Ecoute, si tu utilises le Couteau Suisse, autant profiter alors de ses lames persos.

      Voici le code à placer dans config/mes_options.php ;

      ############## COUTEAU SUISSE : LAME PERSO #################
      
      // Installation d'une nouvelle lame personnalisée
      $GLOBALS['mes_outils']['ancre_blocs'] = array(
      	'nom'         => 'Ancres sur les personnes',
      	'description' => 'Permettre de déplier à distance le bloc numéroté contenant la bio d\'une personne.',
      	'auteur'      => 'Pat',
      	'categorie'   => 'public',
      	'code:jq_init' => '	 //	un clic sur une personne qui produit l\'ouverture du bloc correspondant.
        jQuery(\'.spip_ancre[href^="#"]\').click( function() {
         // recherche du bloc numéroté désiré
         var sel = "#deplier_num" + this.getAttribute("href").replace("#", "") + " .blocs_titre";
         jQuery(sel + ".blocs_replie").blocs_toggle();
         jQuery("html,body").animate({scrollTop: jQuery(sel).offset().top}, "slow");
         // annulation du clic
         return false;
        });',
      );

      Ensuite, il faut l’activer, comme toutes les autres lames. Tu la trouveras dans la catégorie « Affichage public ».

      Dans le chapo de ton article, tu mets simplement :

      Georges ALLIER, [André L’HELGUEN->#1] et [André HORELLOU->#2] sont restés fidèles à Keraluc durant plusieurs décennies.

      Et dans le texte, ce sont des blocs numérotés ;

      <bloc#1>
      {{André L’Helguen}} (1935-2017)
      
      bla bla bla 1
      </bloc#1>
      
      <bloc#2>
      {{André Horellou}} (1943-1999)
      
      bla bla bla 2
      </bloc#2>
    • Bravo, magnifique, tout cela fonctionne maintenant très bien. Ces explications sont parfaites et faciles à mettre en œuvre. Je reprends maintenant plaisir à utiliser Spip qui m’accompagne depuis de très nombreuses années.
      J’ai dernièrement eu à me battre pour faire en sorte que mon site hébergé chez IONOS passe bien en https et soit indexé par Google. Pour cela il a fallut « bidouiller » laborieusement en ajoutant du code dans le .htacces, le robots.txt et en modifiant une valeur dans ecran_securite.php.
      Cela ne contribue pas à la facilité de mise en œuvre du CMS pour les néophytes.
      Merci beaucoup.

    • Bonjour,
      Afin d’optimiser la navigation dans la page avec ces blocs numérotés dépliés à distance, j’aimerais qu’un bloc déjà ouvert se referme automatiquement quand une autre URL interne est cliquée. Ce comportement est actif dans ma page en utilisant directement les titres des blocs dépliables, mais en revanche les blocs dépliables déclenchés à distance restent ouverts.
      Merci

    • Pour cela, il faut :

      -  ajouter une fonction « blocs_replie_tout » dans la lame perso en modifiant la ligne suivante :
      jQuery(sel + ".blocs_replie").blocs_replie_tout().blocs_toggle();

      -  activer l’option « Un seul bloc ouvert sur la page » dans la config du Couteau Suiise

      -  vider le cache du navigateur

    • À nouveau un grand merci, cela fonctionne bien. J’ai toujours du mal à vider complètement le cache de Firefox, mais en changeant de navigateur j’ai pu constater que cette modification était bien active.

    Répondre à ce message

  • 7

    Bonjour,

    Je m’aperçois que les blocs dépliables ne sont pas fonctionnels dans l’espace privé, mais qu’ils fonctionnent très bien côté public : est-ce le comportement normal ?

    J’avoue que je n’y avais jamais prêté attention depuis que j’utilise cet outil ;-))).......

    Merci,
    françois

    • Hello, c’est qu’il doit y avoir une erreur javascript sur la page... Un conflit avec autre chose peut-être.... Possible d’inspecter cela avec les outils de développement du navigateur ?

    • Rien dans la console.
      Le souci est présent sur 3 SPIP de versions différentes :
      -  SPIP 3.1.11 [24407] : installation toute fraîche, pour le test, avec 1 seul article, aucun autre plugin (local)
      -  SPIP 3.2.5 [24404] : tous les autres plugins sont désactivés (local et en ligne)
      -  SPIP 3.3.0-dev [24418] : tous les autres plugins sont désactivés (local et en ligne)

      Personne ne reproduit en local ou en ligne ?

    • Hello rassure toi ça a toujours été le cas depuis que j’utilise le plugin spip 2.1
      je pensé a un comportement normal

    • Laëtitia

      Bonjour,

      avec un SPIP 3.2.19 dans l’espace privé, j’ai une erreur qui n’était pas visible jusqu’ à présent, je vois que l’erreur est connue, donc on laisse comme ça ?

      Merci de confirmer... ou pas.

    • Cet avertissement jaune est bénin et n’empêche pas les blocs de fonctionner dans l’espace privé.

      Ce n’est pas esthétique mais c’est dû à SPIP qui n’est pas content de trouver un href="javascript:;" dans le corps de l’article.

      A voir comment contourner ce souci, je n’ai pas encore la solution...

    • Bonjour,

      L’utilisation de href='javascript:;' n’est pas recommandée : https://stackoverflow.com/questions/134845/which-href-value-should-i-use-for-javascript-links-or-javascriptvoid0

      On pourrait utiliser à la place : href='#bloc_non_ajax', ou une autre ancre avec un nom improbable.

    • Merci, super idée !

    Répondre à ce message

  • 1

    Bonjour,
    Je ne peux plus utiliser ce plugin qui empêche l’indexation de mon site si les blocs dépliables sont activé.
    Pourquoi ? Tout le design de mon site s’organise avec cette fonctionnalité et j’aimerais pouvoir la conserver.
    Merci de m’aider à trouver une solution. https://keraluc.com

    Répondre à ce message

  • 1

    Avec Spip 4.2.6, Blocs dépliables 1.2.8 et PHP 8.2
    J’ai un pb avec la balise « bloc » et l’affichage d’images svg si j’insère l’image via la balise « emb » : la page s’affiche, mais le corps de l’article apparaît vide à la fois dans l’espace privé et sur la page publique.

    Si j’insère cette image via la balise « doc », c’est OK.
    Mais pour ce cas précis, j’ai besoin de « emb » qui affiche les title du svg au survol de la souris.

    Répondre à ce message

  • 1

    Bonjour,

    J’ai ouvert un ticket concernant le remplacement (ou pas) de la fonction JavaScript document.write() :

    https://git.spip.net/spip-contrib-extensions/blocsdepliables/issues/1#issue-712

    françois

    Répondre à ce message

  • 2

    Bonjour à tous,
    Quelqu’un peut-il me donner la syntaxe pour ouvrir un bloc par defaut ?
    Pas dans un squelette, comme expliqué dans la doc, mais dans un article SPIP, en utilisant la balise bloc.
    Merci mille fois,
    Enzo.

    • Trr.. Je viens de comprendre... remplacer la balise ’quote’ par une balise ’visible’.. Duh !.. Honnêtement, on pourrait effacer cette question réponse...

    • Oui ;-)

      Les rédacteurs ont à disposition les nouvelles balises <bloc> (ou <invisible>) et <visible>.

    Répondre à ce message

  • Bonjour,
    Rien à voir directement avec le plugin (qui est parfait).
    Je suis les fils de discussions avec le lien RSS (en bas de la page) de mes plugins et SPIP dans Thunderbird.
    J’ai un problème avec le votre qui m’affiche 10 fois par jour le poste de René Picard du 26/09/2013 (voir PJ) !
    Pouvez-vous y remédier ?
    Merci
    Patrice

    Répondre à ce message

  • En haut de cet article, les 2 liens vers le code source et les tickets pointent vers CS au lieu de pointer vers Blocs Dépliables.

    Répondre à ce message

  • Bonjour,
    cette lame du couteau suisse a été sortie en plugin seul, mais il n’a pas de page sur contrib, ce qui est logique puisque c’est exactement la même chose que la présente page : il devrait peut-être être notifié quelque part dans cette page que ce plugin existe seul ? avec un lien vers sa page sur https://plugins.spip.net/blocsdepliables.html?compatible_spip=3.2 ?

    Répondre à ce message

  • 1

    Problème https : bonjour Patrice, j’ai un souci avec les blocs dépliables pour un site en https.
    l’url des images de fonds (triangle.gif, triangle_bas.gif) est indiquée en http et non pas en https:

    .bloc_replie{background:transparent url(http://mondoine.tld/prive/images/triangle.gif);}

    Comment faut-il procéder pour corriger ce défaut de protocole ?
    Merci beaucoup d’avance de ton aide

    • Même problème avez vous trouvé une solution depuis ?
      Merci

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom