diff --git a/CHANGES.md b/CHANGES.md index 69554925..d26768b0 100644 --- a/CHANGES.md +++ b/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 diff --git a/core/core.js.php b/core/core.js.php index 6543aa5c..40bdfdb6 100755 --- a/core/core.js.php +++ b/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); + }); + }); +}); \ No newline at end of file diff --git a/core/layout/common.css b/core/layout/common.css index 4f6e1469..4930848e 100755 --- a/core/layout/common.css +++ b/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; +} \ No newline at end of file diff --git a/core/vendor/tinymce/init.js b/core/vendor/tinymce/init.js index ffb1b795..76fa6ec5 100755 --- a/core/vendor/tinymce/init.js +++ b/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", diff --git a/core/vendor/tinymce/templates/accordion.html b/core/vendor/tinymce/templates/accordion.html new file mode 100644 index 00000000..dda96b22 --- /dev/null +++ b/core/vendor/tinymce/templates/accordion.html @@ -0,0 +1,15 @@ + \ No newline at end of file