Fixed auto scrolling to sign-up errors for intro page

svsticky · Jul 31, 2024 · fd9c6c9 · fd9c6c9
1 parent 28ec2f5
commit fd9c6c9
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 14 deletions.
diff --git a/app/javascript/src/intro.js b/app/javascript/src/intro.js
@@ -5,6 +5,7 @@ import { setup_intl_tel_input } from "./intl_tel_number";
 
 $(document).on("ready page:load turbolinks:load", function () {
   setup_popup_close();
+  setup_auto_scroll_to_signup_error();
   setup_smooth_scroll();
   setup_form_validation();
   setup_form_payment_method_watcher();
@@ -20,16 +21,32 @@ function setup_popup_close() {
   });
 }
 
+function setup_auto_scroll_to_signup_error() {
+  const signupErrors = $("#signup-errors");
+
+  if (signupErrors.length > 0) {
+    const navbarOffset = $(".navbar").outerHeight();
+    const target = $("#enroll");
+
+    $("html,body").animate(
+      {
+        scrollTop: Math.ceil(Math.max(target.offset().top - navbarOffset, 0)),
+      },
+      1000,
+    );
+  }
+}
+
 function setup_smooth_scroll() {
   $("a[href*='#']").on("click", function () {
     if (
       location.pathname.replace(/^\//, "") ===
         this.pathname.replace(/^\//, "") ||
       location.hostname === this.hostname
     ) {
-      let target = $(this.hash);
-      target = target.length ? target : $(`[name=${this.hash.slice(1)}]`);
-      if (target.length) {
+      const target = $(`${this.hash}, [name=${this.hash.slice(1)}]`);
+
+      if (target.length > 0) {
         const navbarOffset = $(".navbar").outerHeight();
 
         $("html,body").animate(
@@ -65,9 +82,8 @@ function setup_form_validation() {
     "phone",
     function (value) {
       return (
-        value &&
-        (value.trim().empty() ||
-          /^\+?(?:[0-9] ?){6,14}[0-9]$/.test(value.trim()))
+        value.trim().length === 0 ||
+        /^\+?(?:[0-9] ?){6,14}[0-9]$/.test(value.trim())
       );
     },
     "Invalid phone number",

diff --git a/app/views/public/home/index.html.haml b/app/views/public/home/index.html.haml
@@ -88,7 +88,7 @@
         .row
           = form_for :member, url: public_path, method: :post, :class => 'form-validation' do |f|
             - if @member.errors.any? || !flash[:error].nil?
-              .bd-callout.bd-callout-danger
+              #signup-errors.bd-callout.bd-callout-danger.mt-0
                 %h4.alert-heading= I18n.t(:incomplete, scope: 'activerecord.errors')
                 %hr
                 .row
@@ -269,10 +269,4 @@
             - if I18n.locale == :nl
               = link_to I18n.t(:privacy, scope: 'footer'), '//public.svsticky.nl/privacystatement.pdf', { :target => '_blank' }
             - else
-              = link_to I18n.t(:privacy, scope: 'footer'), '//public.svsticky.nl/privacystatement_english.pdf', { :target => '_blank' }
-
-- if @member.errors.any? || !flash[:error].nil?
-  :javascript
-    $('html,body').animate({
-      scrollTop: $('#enroll').offset().top
-    }, 0);
+              = link_to I18n.t(:privacy, scope: 'footer'), '//public.svsticky.nl/privacystatement_english.pdf', { :target => '_blank' }