[9.2.12] Effet accordéon dans TinyMCE

This commit is contained in:
fredtempez 2019-11-28 14:55:02 +01:00
parent ae023db6bb
commit af0d235d4a
5 changed files with 78 additions and 1 deletions

View File

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

View File

@ -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);
});
});
});

View File

@ -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;
}

View File

@ -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",

View File

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