From f8f471fba3d664cb345354a3306d8e3868dabdcb Mon Sep 17 00:00:00 2001
From: Mark Moser <mark.moser@perficient.com>
Date: Thu, 4 Aug 2016 09:38:27 -0500
Subject: [PATCH] fade away resolved error messages on questions

---
 app/assets/javascripts/form-animation.js      | 26 ++++++++++++++-----
 app/assets/stylesheets/application.scss       |  5 +++-
 app/assets/stylesheets/core/_animations.scss  |  5 ++++
 .../stylesheets/{atoms => core}/_fonts.scss   |  0
 app/assets/stylesheets/molecules/_forms.scss  |  7 +++++
 .../stylesheets/templates/_summary.scss       |  6 -----
 6 files changed, 35 insertions(+), 14 deletions(-)
 create mode 100644 app/assets/stylesheets/core/_animations.scss
 rename app/assets/stylesheets/{atoms => core}/_fonts.scss (100%)

diff --git a/app/assets/javascripts/form-animation.js b/app/assets/javascripts/form-animation.js
index 8601b37..ad71014 100644
--- a/app/assets/javascripts/form-animation.js
+++ b/app/assets/javascripts/form-animation.js
@@ -1,17 +1,29 @@
+var $textInput = $('[type="color"], [type="date"], [type="datetime"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], input:not([type]), textarea');
+
 // Text Input Label Animation
-
-var textInput = $('[type="color"], [type="date"], [type="datetime"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], input:not([type]), textarea');
-
-textInput.prev('label').addClass('loaded');
-$(textInput).each(function() {
+$textInput.prev('label').addClass('loaded');
+$textInput.each(function() {
   if( $(this).val() ) {
     $(this).prev('label').addClass('animate');
   }
 });
-$(textInput).on('focus', function() {
+$textInput.on('focus', function() {
   $(this).prev('label').addClass('animate');
 }).on('focusout', function() {
   if( !$(this).val() ) {
     $(this).prev('label').removeClass('animate');
   }
-});
\ No newline at end of file
+});
+
+// form error resolutions
+$('form').has('.error').each(function(){
+  var $form = $(this);
+
+  $form.on('keyup', $textInput, function(){
+    $form.find(".error").addClass('resolve-error');
+  });
+
+  $form.on('change', $("[type=radio], [type=checkbox]"), function(){
+    $form.find(".error").addClass('resolve-error');
+  });
+});
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 4928999..9dd519e 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -16,7 +16,10 @@
 @import 'base'; // bitters
 @import 'neat';
 
-@import 'core/**/*';
+@import 'core/fonts';
+@import 'core/variables';
+@import 'core/animations';
+
 @import 'atoms/**/*';
 @import 'molecules/**/*';
 // @import 'organisms/**/*';
diff --git a/app/assets/stylesheets/core/_animations.scss b/app/assets/stylesheets/core/_animations.scss
new file mode 100644
index 0000000..8ac0eaa
--- /dev/null
+++ b/app/assets/stylesheets/core/_animations.scss
@@ -0,0 +1,5 @@
+@keyframes success-fadeout {
+  0% { opacity: 1; max-height: 40px; }
+  85% { opacity: 0; max-height: 40px; padding: .5rem 0; margin-bottom: .5rem; }
+  100% { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
+}
diff --git a/app/assets/stylesheets/atoms/_fonts.scss b/app/assets/stylesheets/core/_fonts.scss
similarity index 100%
rename from app/assets/stylesheets/atoms/_fonts.scss
rename to app/assets/stylesheets/core/_fonts.scss
diff --git a/app/assets/stylesheets/molecules/_forms.scss b/app/assets/stylesheets/molecules/_forms.scss
index 3409745..c432e40 100644
--- a/app/assets/stylesheets/molecules/_forms.scss
+++ b/app/assets/stylesheets/molecules/_forms.scss
@@ -266,6 +266,13 @@ select {
   margin-top: 2rem;
 }
 
+.resolve-error {
+  animation-name: success-fadeout;
+  animation-duration: 1.5s;
+  animation-delay: 0;
+  animation-fill-mode: forwards;
+}
+
 html.no-js {
   .chars {
     display: none;
diff --git a/app/assets/stylesheets/templates/_summary.scss b/app/assets/stylesheets/templates/_summary.scss
index 042a741..00a62d3 100644
--- a/app/assets/stylesheets/templates/_summary.scss
+++ b/app/assets/stylesheets/templates/_summary.scss
@@ -43,12 +43,6 @@
   margin-top: 3rem;
 }
 
-@keyframes success-fadeout {
-  0% { opacity: 1; max-height: 40px; }
-  85% { opacity: 0; max-height: 40px; padding: .5rem 0; margin-bottom: .5rem; }
-  100% { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
-}
-
 .success {
     box-sizing: border-box;
     text-align: center;