[Bps-public-commit] RT-Extension-FeaturedTickets branch, master, updated. 9c4dc0c333b4c8f4cde34d177d0cdefb7f77101d

[Craig Kaiser]

The branch, master has been updated
       via  9c4dc0c333b4c8f4cde34d177d0cdefb7f77101d (commit)
      from  e43b80481b418d3a9c734aacf3606a1f90d35ffd (commit)

Summary of changes:
 html/NoAuth/Featured/index.html | 51 +++++++++++++++++++++++------------------
 static/css/featured-tickets.css |  4 ++++
 static/js/featured-tickets.js   | 20 ++++++++++++----
 3 files changed, 49 insertions(+), 26 deletions(-)

- Log -----------------------------------------------------------------
commit 9c4dc0c333b4c8f4cde34d177d0cdefb7f77101d
Author: craig Kaiser <craig at bestpractical.com>
Date:   Mon Apr 2 11:46:48 2018 -0400

    Switch from flash message alert to modal update

diff --git a/html/NoAuth/Featured/index.html b/html/NoAuth/Featured/index.html
index 05982c2..117b549 100644
--- a/html/NoAuth/Featured/index.html
+++ b/html/NoAuth/Featured/index.html
@@ -46,28 +46,35 @@
 <!-- The Modal -->
 <div class="featured-tickets-modal" id="featured-tickets-modal-modal" align='center'>
     <div class="featured-tickets-modal-content">
-        <form class="pure-form pure-form-aligned" onsubmit="event.preventDefault(); NewSponsor();">
-            <span class="featured-tickets-modal-close" id="featured-tickets-modal-close"></span>
-            <h2><div id="featured-tickets-subject"></div></h2>
-            <h4><div id="featured-tickets-details"></div></h4>
-            <h4><div id="featured-tickets-goal"></div></h4>
-            <fieldset class="featured-tickets-inputs">
-                <div class="pure-control-group">
-                    <label for="featured-tickets-name">Name</label>
-                    <input id="featured-tickets-name" placeholder="Name">
-                </div>
-                <div class="pure-control-group">
-                    <label for="featured-tickets-email">Email</label>
-                    <input id="featured-tickets-email" placeholder="Email" type="email">
-                </div>
-                <div class="pure-control-group">
-                    <label for="featured-tickets-amount">Amount</label>
-                    <input id="featured-tickets-amount" placeholder="Contribution Amount">
-                </div>
-                <input id="featured-tickets-ticket-id" type="hidden">
-                <button type="submit" class="featured-tickets-button-choose pure-button">Submit</button>
-            </fieldset>
-        </form>
+        <div class="featured-tickets-modal-submitted" id="featured-tickets-modal-submitted">
+            <h2>Thanks for your pledge of support!</h2>
+            <h2>You'll receive an email soon with more details.</h2>
+            <button onclick="FeaturedTicketsHideModal();" class="featured-tickets-button-choose pure-button">Close</button>
+        </div>
+        <div id="featured-tickets-modal-unsubmitted">
+            <form class="pure-form pure-form-aligned" onsubmit="event.preventDefault(); NewSponsor();">
+                <span class="featured-tickets-modal-close" id="featured-tickets-modal-close"></span>
+                <h2><div id="featured-tickets-subject"></div></h2>
+                <h4><div id="featured-tickets-details"></div></h4>
+                <h4><div id="featured-tickets-goal"></div></h4>
+                <fieldset class="featured-tickets-inputs">
+                    <div class="pure-control-group">
+                        <label for="featured-tickets-name">Name</label>
+                        <input id="featured-tickets-name" placeholder="Name">
+                    </div>
+                    <div class="pure-control-group">
+                        <label for="featured-tickets-email">Email</label>
+                        <input id="featured-tickets-email" placeholder="Email" type="email" required>
+                    </div>
+                    <div class="pure-control-group">
+                        <label for="featured-tickets-amount">Amount</label>
+                        <input id="featured-tickets-amount" placeholder="Contribution Amount">
+                    </div>
+                    <input id="featured-tickets-ticket-id" type="hidden">
+                    <button type="submit" class="featured-tickets-button-choose pure-button">Submit</button>
+                </fieldset>
+            </form>
+        </div>
     </div>
 </div>
 
diff --git a/static/css/featured-tickets.css b/static/css/featured-tickets.css
index 6c0d3ff..0d63081 100644
--- a/static/css/featured-tickets.css
+++ b/static/css/featured-tickets.css
@@ -302,6 +302,10 @@
     background: url(../../../static/css/images/jquery-modal-close.png) no-repeat 0 0;
 }
 
+.featured-tickets-modal-submitted {
+    display: none;
+}
+
 .featured-tickets-modal-close:hover,
 .featured-tickets-modal-close:focus {
     color: black;
diff --git a/static/js/featured-tickets.js b/static/js/featured-tickets.js
index 3a8edf4..a594b5d 100644
--- a/static/js/featured-tickets.js
+++ b/static/js/featured-tickets.js
@@ -14,19 +14,31 @@ function NewSponsor() {
             data: data,
             success: function( data ) {
                 console.log('AJAX call to NewSponsor created new sponsor ticket');
-                jQuery('body').prepend('<div class="featured-tickets-flash" id="flash"></div>');
-                jQuery('#flash').html('Thanks for your pledge of support! You\'ll receive an email soon with more details.');
-                jQuery('#flash').slideDown('slow');
-                jQuery('#flash').click(function () { jQuery('#flash').toggle('highlight') });
             },
             error: function () {
                 console.log('An error occured with NewSponsor create');
             }
     });
+    FeaturedTicketsSubmitSponsor();
+}
+
+function FeaturedTicketsSubmitSponsor() {
+    var FeaturedTicketsModalUnsubmitted = document.getElementById('featured-tickets-modal-unsubmitted');
+    var FeaturedTicketsModalSubmitted = document.getElementById('featured-tickets-modal-submitted');
 
+    FeaturedTicketsModalUnsubmitted.style.display = "none";
+    FeaturedTicketsModalSubmitted.style.display = "unset";
+}
+
+function FeaturedTicketsHideModal() {
     var FeaturedTicketsModal = document.getElementById('featured-tickets-modal-modal');
     var FeaturedTicketsPage = document.getElementById('featured-tickets-body');
     var FeaturedTicketSpan = document.getElementById('featured-tickets-modal-close');
+    var FeaturedTicketsModalUnsubmitted = document.getElementById('featured-tickets-modal-unsubmitted');
+    var FeaturedTicketsModalSubmitted = document.getElementById('featured-tickets-modal-submitted');
+
+    FeaturedTicketsModalUnsubmitted.style.display = "unset";
+    FeaturedTicketsModalSubmitted.style.display = "none";
 
     FeaturedTicketsModal.style.display = "none";
     FeaturedTicketsPage.style.overflow = 'auto';

-----------------------------------------------------------------------