Browse Source

[9.2.12] Effet accordéon dans TinyMCE

pull/5/head
fredtempez 3 years ago
parent
commit
af0d235d4a
  1. 1
      CHANGES.md
  2. 32
      core/core.js.php
  3. 24
      core/layout/common.css
  4. 7
      core/vendor/tinymce/init.js
  5. 15
      core/vendor/tinymce/templates/accordion.html

1
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

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

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

7
core/vendor/tinymce/init.js vendored

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

15
core/vendor/tinymce/templates/accordion.html vendored

@ -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>
Loading…
Cancel
Save