Merge branch 'release/2.5.2' into main

Pixel-Open · Oct 16, 2024 · dc55f8f · dc55f8f
2 parents b4d31a5 + 6de6fa6
commit dc55f8f
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -164,7 +164,7 @@ This function must be placed in the head tag and takes one parameter:
     {{ display_flash_info_modal_on_click('flashInfo') }}
 </head>
 <body>
-    <button id="flashInfo">Open the news flashes</button>
+    <button class="flashInfo">Open the news flashes</button>
 </body>
 ```
 

diff --git a/changelog.md b/changelog.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.5.2 (16/10/2024)
+
++ Replace id with class to open modal
+
 ## 2.5.1 (08/10/2024)
 
 + Add cookie duration parameter for news flashes

diff --git a/src/Resources/views/twig/flash_info_modal_click.html.twig b/src/Resources/views/twig/flash_info_modal_click.html.twig
@@ -2,25 +2,27 @@
 <script src="{{ asset("bundles/flashinfo/tingle.min.js") }}"></script>
 <script>
     document.addEventListener("DOMContentLoaded", function(){
-        let buttonFlashInfo = document.querySelector("#{{ elementId }}");
-        buttonFlashInfo.addEventListener("click", function(event){
-            event.preventDefault();
-            fetch("{{ path('flash_infos_click') }}")
-                .then(function(response){
-                    if (response.ok) {
-                        return response.json();
-                    }
-                    return Promise.reject()
-                }).then(function(data){
-                if (data.displayModal) {
-                    let flashInfoModal = new tingle.modal();
-                    flashInfoModal.setContent(data.template);
+        let buttonsFlashInfo = document.querySelectorAll(".{{ elementClass }}");
+        for (let buttonFlashInfo of buttonsFlashInfo) {
+            buttonFlashInfo.addEventListener("click", function(event){
+                event.preventDefault();
+                fetch("{{ path('flash_infos_click') }}")
+                    .then(function(response){
+                        if (response.ok) {
+                            return response.json();
+                        }
+                        return Promise.reject()
+                    }).then(function(data){
+                    if (data.displayModal) {
+                        let flashInfoModal = new tingle.modal();
+                        flashInfoModal.setContent(data.template);
 
-                    flashInfoModal.open();
-                }
-            }).catch(function(error){
-                console.error(error);
+                        flashInfoModal.open();
+                    }
+                }).catch(function(error){
+                    console.error(error);
+                });
             });
-        });
+        }
     });
 </script>
diff --git a/src/Twig/FlashInfoExtension.php b/src/Twig/FlashInfoExtension.php
@@ -32,10 +32,10 @@ public function autoDisplayFlashInfoModal(): string
         return $this->environment->render("@FlashInfo/twig/flash_info_modal_auto.html.twig");
     }
 
-    public function displayFlashInfoMessageOnClick(string $elementId): string
+    public function displayFlashInfoMessageOnClick(string $elementClass): string
     {
         return $this->environment->render('@FlashInfo/twig/flash_info_modal_click.html.twig', [
-            'elementId' => $elementId,
+            'elementClass' => $elementClass,
         ]);
     }
 }
-Original file line number
+Diff line change
@@ Expand Up @@
         {{ display_flash_info_modal_on_click('flashInfo') }}
     </head>
     <body>
-        <button id="flashInfo">Open the news flashes</button>
+        <button class="flashInfo">Open the news flashes</button>
     </body>
     ```
@@ Expand Down @@