Fwd: [Spip] bloc dépliant et pagination

Général
1

Je reviens sur mon problème toujours pas résolu.

Une idée ?
Ou un autre moyen de déplier/replier un bloc au clic ?

JC

-------- Message transféré --------
Sujet : [Spip] bloc dépliant et pagination
Date : Thu, 12 Sep 2019 10:59:59 +0200
De : Jean-Christophe Villeneuve jcvilleneuve@cegetel.net
Pour : liste SPIP users spip@rezo.net

Bonjour

Dans Escal, j’utilise un script qui permet de déplier ou replier un bloc.
Mais si ce bloc contient une pagination, une fois qu’on a cliqué sur un
lien de pagination, la possibilité de repli disparaît.

Un exemple pour mieux comprendre avec le bloc « dans la même rubrique »
http://escal.ac-lyon.fr/spip/spip.php?article428&lang=fr
http://escal.ac-lyon.fr/spip/spip.php?article428&lang=fr

Si quelqu’un qui comprend le js peut m’aider, merci à lui.

Le code html (simplifié) est celui-ci

<h1>
     Dans la même rubrique
</h1>
<div class="toggle" >
     <p class="pagination">#PAGINATION</p>
...

Et le javascript est celui-ci

// Andy Langton’s show/hide/mini-accordion - updated 23/11/2009
// Latest version @ http://andylangton.co.uk/jquery-show-hide

// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {

// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText=’’;
var hideText=’’;

// initialise the visibility check
var is_visible = false;

// append show/hide links to the element directly preceding the element
with a class of « toggle »
$(’.toggle’).prev().append(’ ‹ +showText+ ›’);

// hide all of the elements with a class of ‹ toggle ›
$(’.toggle’).hide();

// capture clicks on the toggle links
$(‹ a.toggleLink ›).click(function() {

// switch visibility
is_visible = !is_visible;

// change the link depending on whether the element is shown or hidden
$(this).html( ($(this).html() == hideText) ? showText : hideText);

// toggle the display - uncomment the next line for a basic « accordion »
style
//$(’.toggle’).hide();$(‹ a.toggleLink ›).html(showText);
$(this).parent().next(’.toggle’).toggle(‹ slow ›);

// return false so any link destination is not followed
return false;

});
});

Portion de message joint (351 Bytes)

2

Il faut relancer la fonction lors des rechargements ajax au moyen de onAjaxLoad().
Par exemple :

function bidule () { … }
// Au chargement de la page
bidule();
// Lors des rechargements ajax
onAjaxLoad(bidule);

Donc là il faut aussi wrapper ton code dans une fonction.

1 « J'aime »
3

Ouh là, jamais fait ça moi !
Je vais essayer.

4

Bon, étant quasi ignare en php et en js, j’avoue que ce que j’ai lu me laisse perplexe et je suis comme une poule devant un couteau.

Sachant que pour l’instant j’ai un fichier bloc_depliant.js.html appelé dans le pied de page.

et que dans les fichiers html je mets une div avec class=« toggle »

Peux-tu m’en dire un peu plus sur la procédure à suivre : quel(s) fichier créer et/ou modifier et avec quoi dedans ? ça veut dire quoi « wrapper » le code ?

5

Un exemple pour le même problème : javascript/blocs_depliables.js · master · jeanmarie / zcm · GitLab

Il faut adapter ton code pour le mettre entre les lignes 5 et 10

6

Ah, cool, merci pour le partage.
Je regarderai ça dès demain.

7

En m’inspirant du code de Jean-Marie, j’ai presque pu arriver à mes fins mais j’ai un petit souci :
Lorsque je clique sur un item de pagination, le bloc se replie au lieu de rester ouvert, comme si je cliquais sur l’icône permettant le repliement du bloc.
Je suppose que c’est au niveau du code js qu’il faut intervenir mais ce n’est pas dans mes compétences.

8

Il faudrait voir le code précis, tu as mis quoi à la place de ‹ a.toggleLink › ? Est-ce que le lien est suffisamment ciblé ?

9

Voici le code in extenso du fichier.
J’ai laissé la class toggleLink

(function($){
	$(document).ready(function(){

		function escal_bloc_depliables(){


					// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
					// Latest version @ http://andylangton.co.uk/jquery-show-hide
					
					// this tells jquery to run the function below once the DOM is ready
					$(document).ready(function() {
					
						// choose text for the show/hide link - can contain HTML (e.g. an image)
						var showText='<span class="toggleimage1"></span>';
						var hideText='<span class="toggleimage2"></span>';
						
						// initialise the visibility check
						var is_visible = false;
						
						// append show/hide links to the element directly preceding the element with a class of "toggle"
						$('.toggle').prev().append(' <a href="<:escal:deplier_replier:>" class="toggleLink">'+showText+'</a>');
						
						// hide all of the elements with a class of 'toggle'
						$('.toggle').hide();
						
						// capture clicks on the toggle links
						$('a.toggleLink').click(function() {
						
							// switch visibility
							is_visible = !is_visible;
							
							// change the link depending on whether the element is shown or hidden
							$(this).html( ($(this).html() == hideText) ? showText : hideText);
							
							// toggle the display - uncomment the next line for a basic "accordion" style
							//$('.toggle').hide();$('a.toggleLink').html(showText);
							$(this).parent().next('.toggle').toggle('slow');
							
							// return false so any link destination is not followed
							return false;
							
						});
					});

			}
		escal_bloc_depliables();
		onAjaxLoad(escal_bloc_depliables);
	});
})(jQuery);
10

ces lignes sont certainement superflues

Cela implique de revoir complètement la syntaxe des ouvertures et fermetures des accolades

(function($){
	$(document).ready(function(){

		function escal_bloc_depliables(){

					// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
					// Latest version @ [http://andylangton.co.uk/jquery-show-hide](http://andylangton.co.uk/jquery-show-hide)

Le 21 juin 2021 à 14:23, Jean-Christophe Villeneuve via Discuter de SPIP <noreply@discuter.spip.net> a écrit :

Jean-Christophe Villeneuve JC-Villeneuve
Juin 21

Voici le code in extenso du fichier.
J’ai laissé la class toggleLink

(function($){
	$(document).ready(function(){

		function escal_bloc_depliables(){

					// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
					// Latest version @ [http://andylangton.co.uk/jquery-show-hide](http://andylangton.co.uk/jquery-show-hide)
					
					// this tells jquery to run the function below once the DOM is ready
					$(document).ready(function() {
					
						// choose text for the show/hide link - can contain HTML (e.g. an image)
						var showText='<span class="toggleimage1"></span>';
						var hideText='<span class="toggleimage2"></span>';
						
						// initialise the visibility check
						var is_visible = false;
						
						// append show/hide links to the element directly preceding the element with a class of "toggle"
						$('.toggle').prev().append(' <a href="<:escal:deplier_replier:>" class="toggleLink">'+showText+'</a>');
						
						// hide all of the elements with a class of 'toggle'
						$('.toggle').hide();
						
						// capture clicks on the toggle links
						$('a.toggleLink').click(function() {
						
							// switch visibility
							is_visible = !is_visible;
							
							// change the link depending on whether the element is shown or hidden
							$(this).html( ($(this).html() == hideText) ? showText : hideText);
							
							// toggle the display - uncomment the next line for a basic "accordion" style
							//$('.toggle').hide();$('a.toggleLink').html(showText);
							$(this).parent().next('.toggle').toggle('slow');
							
							// return false so any link destination is not followed
							return false;
							
						});
					});

			}
		escal_bloc_depliables();
		onAjaxLoad(escal_bloc_depliables);
	});
})(jQuery);

Voir le sujet ou répondre à ce courriel pour répondre.

Pour se désabonner de ces courriels, cliquez ici.

11

En effet, 2 fois $(document).ready(function() ça fait 1 de trop mais tu es sur pour le reste ?

Ce que je ne comprends pas c’est que la fonction ne devrait (si j’ai bien capté) s’appliquer qu’au clic sur un lien avec la class toggleLink. Et là elle s’applique aussi au lien de pagination qui n’a pas cette class.