[9.2.12] Effet accordéon dans TinyMCE

CHANGES.md

@@ -3,6 +3,7 @@
 ## version 9.2.12
 - Modifications 
     - TinyMCE :
+        - Ajout d'un template effet accordéon.
         - Supprimer le filtrage des éléments.
         - Supprimer le forçage de l'affichage des médias à 100%
         - Activer le dimensionnement des médias

core/core.js.php

@@ -398,4 +398,34 @@ $(document).ready(function(){
 		$("#navfixedlogout .navLevel2").css({ 'pointer-events' : 'none' });
 		$("#navfixedconnected .navLevel2").css({ 'pointer-events' : 'none' });
 	});
-});
+
+	/**
+	 * Effet accordéon
+	 */
+	$('.accordion').each(function(e) {
+		// on stocke l'accordéon dans une variable locale
+		var accordion = $(this);
+		// on récupère la valeur data-speed si elle existe
+		var toggleSpeed = accordion.attr('data-speed') || 100;
+
+		// fonction pour afficher un élément   
+		function open(item, speed) {
+			// on récupère tous les éléments, on enlève l'élément actif de ce résultat, et on les cache
+			accordion.find('.accordion-item').not(item).removeClass('active')
+				.find('.accordion-content').slideUp(speed);
+			// on affiche l'élément actif
+			item.addClass('active')
+				.find('.accordion-content').slideDown(speed);
+		}
+
+		// on initialise l'accordéon, sans animation 
+		open(accordion.find('.active:first'), 0);
+
+		// au clic sur un titre...
+		accordion.on('click', '.accordion-title', function(ev) {
+			ev.preventDefault();
+			// ...on lance l'affichage de l'élément, avec animation
+			open($(this).closest('.accordion-item'), toggleSpeed);
+		});
+	});
+});

core/layout/common.css

@@ -1272,3 +1272,27 @@ th.col12 {
 .colorOrange {
 	color: #F39C12;
 }
+
+
+/*
+* Effet accordéon
+*/
+
+.accordion {
+	padding: 0;
+	list-style: none; 
+}
+.accordion-title {
+	display: block;
+	margin: 0;
+	//padding: 0 7px;
+	line-height: 34px;
+	text-decoration: none;
+	cursor: pointer;
+}
+.accordion-title:hover {
+	background: lightgrey;
+}
+.accordion-content {
+	padding: 7px;
+}

core/vendor/tinymce/init.js

@@ -72,6 +72,8 @@ tinymce.init({
 	// Autorise tous les éléments
 	valid_elements :"*[*]",
 	valid_children : "*[*]",
+	// Autorise l'ajout de script
+	// extended_valid_elements: "script[language|type|src]",
 	// Bloque le dimensionnement des médias (car automatiquement en fullsize avec fitvids pour le responsive)
 	media_dimensions: true,
 	// Désactiver la dimension des images
@@ -133,6 +135,11 @@ tinymce.init({
 			url: baseUrl + "core/vendor/tinymce/templates/block.html",
 			description: "Bloc de texte avec un titre."
 		},
+		{
+			title: "Effet accordéon",
+			url: baseUrl + "core/vendor/tinymce/templates/accordion.html",
+			description: "Bloc de texte avec effet accordéon."
+		},
 		{
 			title: "Grille symétrique : 6 - 6",
 			url: baseUrl + "core/vendor/tinymce/templates/col6.html",

core/vendor/tinymce/templates/accordion.html

@@ -0,0 +1,15 @@
+<ul class="accordion" data-speed="150">
+		<li class="accordion-item active">
+			<h3 class="accordion-title">Premier bloc</h3>
+			<div class="accordion-content">
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum, neque non vulputate hendrerit, arcu turpis dapibus nisl, id scelerisque metus lectus vitae nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec feugiat dolor et turpis finibus condimentum. Cras sit amet ligula sagittis justo.</p>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum, neque non vulputate hendrerit, arcu turpis dapibus nisl, id scelerisque metus lectus vitae nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec feugiat dolor et turpis finibus condimentum. Cras sit amet ligula sagittis justo.</p>
+			</div>
+		</li>
+		<li class="accordion-item">
+			<h3 class="accordion-title">Second bloc</h3>
+			<div class="accordion-content">				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum, neque non vulputate hendrerit, arcu turpis dapibus nisl, id scelerisque metus lectus vitae nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec feugiat dolor et turpis finibus condimentum. Cras sit amet ligula sagittis justo.</p>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum, neque non vulputate hendrerit, arcu turpis dapibus nisl, id scelerisque metus lectus vitae nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec feugiat dolor et turpis finibus condimentum. Cras sit amet ligula sagittis justo.</p>
+			</div>
+		</li>
+</ul>