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