Handle animation on thumbs-up when clicked

Author: yepzdk

web/themes/custom/hoeringsportal/assets/css/module/_animated-svg.scss

@@ -9,6 +9,7 @@ a:has(svg) {
 
   display: flex;
   gap: var(--sp2);
+  text-decoration: none;
 
   svg {
     /* Comment */
@@ -38,7 +39,7 @@ a:has(svg) {
 
       path:first-of-type {
         transform-origin: center left;
-        transition: stroke 200ms var(--ease-spring-glide);
+        transition: fill 200ms var(--ease-spring-glide);
       }
     }
   }
@@ -68,15 +69,34 @@ a:has(svg) {
     /* Thumbs-up hover */
     g.thumbs-up {
       path:last-child {
-        transition: fill 200ms 300ms var(--ease-spring-lazy);
+        transition: fill 200ms 200ms var(--ease-spring-lazy);
         fill: var(--bs-primary);
       }
-
       path:first-of-type {
-        animation:
-          pop 400ms var(--ease-spring-lazy),
-          rotate 200ms var(--ease-spring-lazy);
+        transform: rotate(-3deg);
+        transition: transform 200ms var(--ease-spring-lazy);
       }
     }
   }
 }
+
+/* Click on <a> with thumbs-up svg */
+.liked a:has(svg) {
+  g.thumbs-up {
+    path:first-of-type {
+      animation: rotatePop 500ms var(--ease-spring-lazy);
+    }
+    path:last-child {
+      fill: var(--bs-primary);
+    }
+  }
+}
+
+/* Thumbs-up already set*/
+.action-unflag a:has(svg) {
+  g.thumbs-up {
+    path:last-child {
+      fill: var(--bs-primary);
+    }
+  }
+}

web/themes/custom/hoeringsportal/assets/css/module/_animation.scss

@@ -28,6 +28,18 @@
   }
 }
 
+@keyframes rotatePop {
+  50% {
+    transform: rotate(10deg) translateX(-1px);
+  }
+  75% {
+    transform: scale(1.2) rotate(-10deg) translateX(-2px);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
 @keyframes stretchX {
   50% {
     transform: scaleX(1.1);

web/themes/custom/hoeringsportal/assets/js/animated-svg.js

@@ -0,0 +1,26 @@
+document.addEventListener(
+  "click",
+  function (e) {
+    // Find the closest <a> tag that's inside .flag-wrapper
+    const link = e.target.closest(".flag-wrapper");
+
+    if (link) {
+      // Find the child div with the flag classes
+      const flagDiv = link.querySelector(".flag");
+
+      // Only add animation if action-unflag does NOT exist
+      if (flagDiv && !flagDiv.classList.contains("action-unflag")) {
+        e.preventDefault();
+        link.classList.add("liked");
+
+        // Cleanup class after animation
+        window.setTimeout(() => {
+          link.classList.remove("liked");
+        }, 400);
+      } else {
+        e.preventDefault();
+      }
+    }
+  },
+  true,
+);

web/themes/custom/hoeringsportal/assets/js/hoeringsportal.js

@@ -19,6 +19,7 @@ require("./filter-collapse.js");
 require("./icons.js");
 require("./modify-dialogue-form.js");
 require("./modify-dialogue-proposal-comments.js");
+require("./animated-svg.js");
 
 // Enable popovers.
 $(function () {

web/themes/custom/hoeringsportal/templates/comment/comment.html.twig

@@ -78,7 +78,7 @@
       </div>
       <div class="d-flex mb-2">
         <div class="flag-wrapper me-3">{{ content.flag_support_comment }}</div>
-        <div class="comment-reply"><a class="use-ajax" data-dialog-options="{&quot;width&quot;:400}" data-dialog-type="modal" href="{{ path('comment.reply', {entity_type: 'node', entity: comment.entity_id.value[0].target_id, field_name: 'field_comments', pid: comment.cid.value}) }}">{{ include('themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-reply.svg.html.twig') }}{{ 'Reply'|t({}, {context: 'Comment reply  '}) }}</a></div>
+        <div class="comment-reply"><a class="use-ajax text-secondary" data-dialog-options="{&quot;width&quot;:400}" data-dialog-type="modal" href="{{ path('comment.reply', {entity_type: 'node', entity: comment.entity_id.value[0].target_id, field_name: 'field_comments', pid: comment.cid.value}) }}">{{ include('themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-reply.svg.html.twig') }}{{ 'Reply'|t({}, {context: 'Comment reply  '}) }}</a></div>
       </div>
     {% endif %}
   </div>

web/themes/custom/hoeringsportal/templates/content/node--dialogue-proposal--full.html.twig

@@ -24,7 +24,7 @@
                 <span class="flag-wrapper">{{ content.flag_support_proposal }}</span>
               </div>
               <div>
-                <a href="#comments" class="text-decoration-none text-secondary">{{ include('themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-comment.svg.html.twig') }}<span>{{ node.field_comments.comment_count }}</span><span>{{ 'Comments'|t }}</span></a>
+                <a href="#comments" class="text-secondary">{{ include('themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-comment.svg.html.twig') }}<span>{{ node.field_comments.comment_count }}</span><span>{{ 'Comments'|t }}</span></a>
               </div>
             </div>
           </div>