Merge pull request #119 from watermarkchurch/contact-js

Contact js

.eslintrc.json

@@ -4,5 +4,9 @@
     "semi": ["error", "never"],
     "quotes": ["error", "single"],
     "no-console": 2
+  },
+  "env": {
+    "browser": true,
+    "node": true
   }
-}
+}

wcc-contentful-app/app/assets/javascripts/wcc/contentful/app/contact-form.js

@@ -1,22 +1,37 @@
-$(window).load(function() {
-  $('[data-contact-form]').each((_, input) => {
-    const $form = $(input);
+if (typeof window.$ == 'undefined' ) {
+  var $ = window.jQuery
+}
 
-    function handleResponse(status, responseJSON) {
-      if (responseJSON) {
-        alert(responseJSON.message);
-      } else {
-        alert('Sorry, something went wrong.');
-      }
-      $('input:visible, textarea', $form).val('');
+$(function() {
+  function handleResponse($form, event, status, xhr) {
+    // Handle backwards compat for [rails/jquery]-ujs ajax callbacks
+    var json
+    if (event.detail) {
+      json = JSON.parse(event.detail[2].response)
+      status = event.detail[1]
+    } else {
+      json = xhr.responseJSON
     }
 
-    $form.on('ajax:success', (event, data, status, xhr) => {
-      handleResponse(status, xhr.responseJSON);
-    });
+    if (status == 'OK') {
+      $form.append(
+        $('<span>').text(json.message).delay(2000).fadeOut(2000, function() { $(this).remove() })
+      )
+      $('input:visible, textarea', $form).val('')
+    } else {
+      alert('Sorry, something went wrong.')
+    }
+  }
+
+  $('[data-contact-form]').each(function(_, input) {
+    var $form = $(input)
+
+    $form.on('ajax:success', function(event, data, status, xhr) {
+      handleResponse($form, event, status, xhr)
+    })
 
-    $form.on('ajax:error', (event, xhr, status) => {
-      handleResponse(status, xhr.responseJSON);
-    });
-  });
-})
+    $form.on('ajax:error', function(event, xhr, status) {
+      handleResponse($form, event, status, xhr)
+    })
+  })
+})

wcc-contentful-app/app/views/sections/_contact_form.html.erb

@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="column">
+  <div class="col">
     <div class="contact-panel -mt5">
       <div class="contact-panel__header">
         <%= markdown(section.text) %>

wcc-contentful-app/app/views/sections/_http_error.html.erb

@@ -1,6 +1,6 @@
 <div class="section-error-page" style="background-image: url(<%= section.background_image&.file&.url %>);">
   <div class="row">
-    <div class="column">
+    <div class="col">
       <div class="error-page__content">
         <h2 class="error-page__content__title"><%= section.errorCode %></h2>
         <p class="error-page__content__text"><%= markdown(section.text) if section.text.present? %></p>

wcc-contentful-app/app/views/sections/_testimonials.html.erb

@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="column">
+  <div class="col">
     <% section.testimonials&.each do |testimonial|
       next unless testimonial %>
       <div class="section-testimonials__item">