From d33521afd9ad159e6fd2cde94391b8fb948eea86 Mon Sep 17 00:00:00 2001
From: Mattias Bodlund <mattias@oncotype.dk>
Date: Wed, 28 May 2025 16:26:41 +0200
Subject: [PATCH] na

---
 app/assets/stylesheets/application.css | 19 ++++++++++++++++++
 app/javascript/application.js          | 27 +++++++++++++++++++++++---
 app/views/questions/show.html.erb      |  4 ++--
 3 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index ceb8e27..b8fb449 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -265,6 +265,25 @@ footer {
   justify-content: center;
   padding: 0 1em;
   box-sizing: border-box;
+  transition: scale 0.08s ease-in-out;
+  
+  &:not(.wiggle):active {
+    scale: 0.96;        
+  }
+  
+}
+
+@keyframes wiggle {
+    0%, 100% { transform: translateX(0);     }
+    15%      { transform: translateX(-6px); }
+    30%      { transform: translateX(6px);  }
+    45%      { transform: translateX(-4px); }
+    60%      { transform: translateX(4px);  }
+    75%      { transform: translateX(-2px); }
+  }
+
+.wiggle {
+  animation: wiggle 0.45s ease-in-out;
 }
 
 .button__base-light {
diff --git a/app/javascript/application.js b/app/javascript/application.js
index 7b9d132..0440695 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -35,11 +35,33 @@ document.addEventListener('turbo:render', (event) => {
 
 // document.addEventListener("turbo:before-stream-render", animateElements)
 document.addEventListener("turbo:load", animateElements)
+document.addEventListener("turbo:load", validateFormInput)
 
 
+function validateFormInput(event) {
+  const form       = document.getElementById('questionForm');
+  const submitBtn  = document.getElementById('questionSubmitButton');
+
+  form.addEventListener('submit', e => {
+    // If no radio in the group is checked…
+    if (!form.querySelector('input[type=radio]:checked')) {
+      e.preventDefault();                // stop the form from submitting
+      submitBtn.classList.remove('wiggle'); // reset so the animation can retrigger
+      void submitBtn.offsetWidth;           // force reflow (quick trick)
+      submitBtn.classList.add('wiggle');    // start the wiggle
+    }
+  });
+
+  // Tidy up the class once the animation ends
+  submitBtn.addEventListener('animationend', () => {
+    submitBtn.classList.remove('wiggle');
+  });
+}
+  
+
 function animateElements(event) {
 
-  console.info(event.type)
+  // console.info(event.type)
   
   // Copy link to clipboard
   document.querySelectorAll('[data-share-title]').forEach((share_btn) => {  
@@ -72,8 +94,7 @@ function animateElements(event) {
 
   gsap.set(animationElements, {
     height: 0,
-    opacity: 0,
-    overflow: 'hidden'
+    opacity: 0    
   })
 
   let typewriterElements = document.querySelectorAll('.typewriter-text')
diff --git a/app/views/questions/show.html.erb b/app/views/questions/show.html.erb
index 8ad4d3f..fb8cee6 100644
--- a/app/views/questions/show.html.erb
+++ b/app/views/questions/show.html.erb
@@ -15,7 +15,7 @@
 </div>
 <%# end %>
 
-<%= form_with model: @answer, url: url_for(controller: 'answers', action: 'create') do |form| %>
+<%= form_with model: @answer, url: url_for(controller: 'answers', action: 'create'), id: 'questionForm' do |form| %>
   
   <div class="question-container">
   
@@ -43,7 +43,7 @@
     </div>
     
     <div class="animation-element">
-      <%= form.button tag.span(t('submit')), class: 'button__base' %>
+      <%= form.button tag.span(t('submit')), class: 'button__base', id: 'questionSubmitButton' %>
     </div>
   </div>