Feature subscribe form streamline

assets/js/main.js

@@ -1,5 +1,44 @@
 $(document).ready(function () {
 
+    ////////////////////////////////////////
+    // Shared helpers
+    ////////////////////////////////////////
+
+    const trackSubscribeClick = function (event) {
+        if ( typeof gtag !== 'function' ) {
+            return;
+        }
+
+        const subscribe_target = event.currentTarget;
+
+        gtag('event', 'click_subscribe', {
+            page: window.location.pathname,
+            place: subscribe_target.dataset.subscribeClick,
+        });
+    };
+
+    const queueSubscribeModal = function (subscribe_trigger) {
+        const parent_modal_selector = subscribe_trigger.data('subscribe-parent-modal');
+        const subscribe_modal = $('#subscribeModal');
+
+        if ( !parent_modal_selector || !subscribe_modal.length ) {
+            return;
+        }
+
+        const parent_modal = $(parent_modal_selector);
+
+        if ( !parent_modal.length ) {
+            subscribe_modal.modal('show');
+            return;
+        }
+
+        parent_modal.one('hidden.bs.modal', function () {
+            subscribe_modal.modal('show');
+        });
+
+        parent_modal.modal('hide');
+    };
+
     ////////////////////////////////////////
     // Mutation observer - watch for RTL
     ////////////////////////////////////////
@@ -8,9 +47,10 @@ $(document).ready(function () {
 
     const observer = new MutationObserver( function(mutations) {
         mutations.forEach( function() {
-            var classes = target.getAttribute('class');
-            var single_class = 'translated-rtl';
-            if (classes.includes(single_class)) {
+            const classes = target.getAttribute('class') || '';
+            const single_class = 'translated-rtl';
+
+            if ( classes.includes(single_class) ) {
                 target.setAttribute('dir', 'rtl');
             } else {
                 target.setAttribute('dir', 'ltr');
@@ -22,7 +62,7 @@ $(document).ready(function () {
         attributes: true,
         attributeFilter: ['class']
     }
-    
+
     observer.observe(target, config);
 
     ////////////////////////////////////////
@@ -61,9 +101,24 @@ $(document).ready(function () {
     });
 
     ////////////////////////////////////////
-    // Email Subscription Modal
+    // Subscribe links and modal
     ////////////////////////////////////////
 
+    const subscribe_triggers = $('[data-subscribe-click]');
+
+    if ( subscribe_triggers.length ) {
+        subscribe_triggers.on('click', function (event) {
+            const subscribe_trigger = $(this);
+
+            trackSubscribeClick(event);
+
+            if ( subscribe_trigger.data('subscribe-parent-modal') ) {
+                event.preventDefault();
+                queueSubscribeModal(subscribe_trigger);
+            }
+        });
+    }
+
     const subscribe_modal = $('#subscribeModal');
 
     if ( subscribe_modal.length ) {
@@ -80,19 +135,23 @@ $(document).ready(function () {
 
             const subscribe_iframe = $('<iframe>', {
                 'class': 'subscribe-form-frame',
-                src: subscribe_form_url,
                 width: '100%',
                 height: '100%',
                 frameborder: '0',
-                loading: 'lazy',
                 title: 'Subscription form'
-            }).css('display', 'none');
+            }).css({
+                display: 'none',
+                position: 'absolute',
+                inset: 0,
+                border: 0,
+            });
 
-            subscribe_iframe.on('load', function () {
-                subscribe_placeholder.addClass('d-none');
-                $(this).css('display', 'block');
+            subscribe_iframe.one('load', function () {
+                subscribe_placeholder.hide();
+                subscribe_iframe.css('display', 'block');
             });
 
+            subscribe_iframe.attr('src', subscribe_form_url);
             subscribe_modal_body.append(subscribe_iframe);
         });
     }

content/about/_index.md

@@ -13,7 +13,7 @@ The Environment & Health Data Portal is a project by the NYC Department of Healt
 
 <i class="fas fa-info-circle mr-1"></i>[Check out open positions in our bureau]({{< relURL >}}about/jobs/).
 
-<i class="fas fa-envelope mr-1"></i>Email us with thoughts, questions, or concerns at <a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#101;&#104;&#100;&#112;&#64;&#104;&#101;&#97;&#108;&#116;&#104;&#46;&#110;&#121;&#99;&#46;&#103;&#111;&#118;">&#101;&#104;&#100;&#112;&#64;&#104;&#101;&#97;&#108;&#116;&#104;&#46;&#110;&#121;&#99;&#46;&#103;&#111;&#118;</a>, or <a class="subscribe-link" href="{{< relURL >}}about/subscribe/">sign up for our email list</a>. We won't share your email address.</p>
+<i class="fas fa-envelope mr-1"></i>Email us with thoughts, questions, or concerns at <a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#101;&#104;&#100;&#112;&#64;&#104;&#101;&#97;&#108;&#116;&#104;&#46;&#110;&#121;&#99;&#46;&#103;&#111;&#118;">&#101;&#104;&#100;&#112;&#64;&#104;&#101;&#97;&#108;&#116;&#104;&#46;&#110;&#121;&#99;&#46;&#103;&#111;&#118;</a>, or <a href="#" data-subscribe-click="about" data-toggle="modal" data-target="#subscribeModal">sign up for our email list</a>. We won't share your email address.</p>
 
 <i class="fas fa-question-circle mr-1"></i>[Questions about the data? Visit our Github repo for info or to file an issue](https://www.github.com/nychealth/EH-dataportal).
 

content/about/redesign/index.md

@@ -88,7 +88,7 @@ If you’re curious about the nuts and bolts, you can find out more in our [site
 
 We built this site for you, so please help us continue developing it: 
 
-* [Sign up for our email list](https://docs.google.com/forms/d/e/1FAIpQLSfUg3JE5ODNc6aqBPJwM8mZ80TYtK6ISw-OM7PBwKuoN3M--g/viewform?embedded=true) – we'll send occasional requests for users to participate in user testing or co-design work 
+* <a href="#" data-subscribe-click="about-redesign" data-toggle="modal" data-target="#subscribeModal">Sign up for our email list</a>&nbsp;– we'll send occasional requests for users to participate in user testing or co-design work&nbsp;
 * Visit our Github repositories ([site](https://github.com/nychealth/EH-dataportal), [data](https://github.com/nychealth/EHDP-data)) and explore the code, file an issue, or suggest features&nbsp;
 * Email us with any questions you have at <a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#101;&#104;&#100;&#112;&#64;&#104;&#101;&#97;&#108;&#116;&#104;&#46;&#110;&#121;&#99;&#46;&#103;&#111;&#118;">&#101;&#104;&#100;&#112;&#64;&#104;&#101;&#97;&#108;&#116;&#104;&#46;&#110;&#121;&#99;&#46;&#103;&#111;&#118;</a> – we're here to help.&nbsp;&nbsp;
 

content/about/roadmap/index.md

@@ -40,7 +40,7 @@ Open Tech Strategies prepared a report with recommendations for our strategy and
 
 We built this site for you, so please help us continue developing it: 
 
-- [Sign up for our email list](https://docs.google.com/forms/d/e/1FAIpQLSfUg3JE5ODNc6aqBPJwM8mZ80TYtK6ISw-OM7PBwKuoN3M--g/viewform?embedded=true) – we'll send occasional requests for users to participate in user testing or co-design work 
+- <a href="#" data-subscribe-click="roadmap" data-toggle="modal" data-target="#subscribeModal">Sign up for our email list</a>&nbsp;– we'll send occasional requests for users to participate in user testing or co-design work&nbsp;
 - Visit our Github repositories ([site](https://github.com/nychealth/EH-dataportal), [data](https://github.com/nychealth/EHDP-data)) and explore the code, file an issue, or suggest features&nbsp;
 - Email us with any questions you have at <a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#101;&#104;&#100;&#112;&#64;&#104;&#101;&#97;&#108;&#116;&#104;&#46;&#110;&#121;&#99;&#46;&#103;&#111;&#118;">&#101;&#104;&#100;&#112;&#64;&#104;&#101;&#97;&#108;&#116;&#104;&#46;&#110;&#121;&#99;&#46;&#103;&#111;&#118;</a> – we're here to help.&nbsp;&nbsp;
 

content/about/subscribe.md

@@ -12,5 +12,5 @@ Thanks for visiting the Environment and Health Data Portal.
 We'd like to add you to our email list. We'll email you every few months with site updates, and occasional opportunities to participate in user research. We won't share your email and you can unsubscribe at any time.
 
 <div class="my-2">
-<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfUg3JE5ODNc6aqBPJwM8mZ80TYtK6ISw-OM7PBwKuoN3M--g/viewform?embedded=true" style="width:100%; height: 600px" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
+	<a class="btn btn-primary" href="#" data-subscribe-click="subscribe-page" data-toggle="modal" data-target="#subscribeModal">Open the subscription form</a>
 </div>

content/data-stories/redesign/index.md

@@ -93,7 +93,7 @@ If you’re curious about the nuts and bolts, you can find out more in our [site
 
 We built this site for you, so please help us continue developing it: 
 
-- [Sign up for our email list](https://docs.google.com/forms/d/e/1FAIpQLSfUg3JE5ODNc6aqBPJwM8mZ80TYtK6ISw-OM7PBwKuoN3M--g/viewform?embedded=true) – we'll send occasional requests for users to participate in user testing or co-design work 
+- <a href="#" data-subscribe-click="redesign-story" data-toggle="modal" data-target="#subscribeModal">Sign up for our email list</a>&nbsp;– we'll send occasional requests for users to participate in user testing or co-design work&nbsp;
 - Visit our Github repositories ([site](https://github.com/nychealth/EH-dataportal), [data](https://github.com/nychealth/EHDP-data)) and explore the code, file an issue, or suggest features&nbsp;
 - Email us with any questions you have at <a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#101;&#104;&#100;&#112;&#64;&#104;&#101;&#97;&#108;&#116;&#104;&#46;&#110;&#121;&#99;&#46;&#103;&#111;&#118;">&#101;&#104;&#100;&#112;&#64;&#104;&#101;&#97;&#108;&#116;&#104;&#46;&#110;&#121;&#99;&#46;&#103;&#111;&#118;</a> – we're here to help.&nbsp;&nbsp;
 

themes/dohmh/layouts/data-stories/single.html

@@ -62,7 +62,7 @@ <h1 class="h2 data-stories mb-3"><i class="fas fa-passport" aria-hidden="true" s
                     <ul class="extensible-list text-muted mt-3">
                         <li>
                             <p class="text-muted" >
-                                <span class="fa fa-envelope"></span> Like this story? <a href={{ relURL "about/subscribe" }} class="subscribe-link" data-subscribe-click="data-story"> Sign up to find out when we post something new.</a></p> 
+                                <span class="fa fa-envelope"></span> Like this story? <a href="#" data-subscribe-click="data-story" data-toggle="modal" data-target="#subscribeModal"> Sign up to find out when we post something new.</a></p> 
                         </li>
                     </ul>
                 </div>

themes/dohmh/layouts/index.html

@@ -138,7 +138,7 @@ <h3 class="text-black fs-xl pr-2 mb-2">Get updates and announcements</h3>
                 <i class="fas fa-bullhorn h2 text-primary" aria-hidden="true"></i>
               </div>
             </div>
-            <p class="text-black mb-4"><a class="font-weight-bold subscribe-link" data-subscribe-click="homepage" href={{ relURL "About/subscribe" }}>Sign up here!</a> We won't share your email address.</p>
+            <p class="text-black mb-4"><a class="font-weight-bold" href="#" data-subscribe-click="homepage" data-toggle="modal" data-target="#subscribeModal">Sign up here!</a> We won't share your email address.</p>
           </div>
 
           <div class="shadow-sm mb-3 p-3 card-left-border" data-homepage-section="site-search">

themes/dohmh/layouts/partials/conditional-modal.html

@@ -16,7 +16,7 @@ <h5 class='modal-title'>Welcome to the Environment & Health Data Portal. </h5>
             <div class='modal-body'>
                 <p><strong>Please sign up for our email list</strong>. We will email you every few months with updates,
                     or opportunities to participate in user research. 
-                    <a href='https://docs.google.com/forms/d/e/1FAIpQLSfUg3JE5ODNc6aqBPJwM8mZ80TYtK6ISw-OM7PBwKuoN3M--g/viewform'>Click here to sign up</a>.
+                    <a href="#" data-subscribe-click="prototype-modal" data-subscribe-parent-modal="#prototypeModal">Click here to sign up</a>.
                 </p>
             </div>
             <hr>
@@ -86,7 +86,7 @@ <h5 class='modal-title'>Welcome to the new Environment & Health Data Portal site
                 </p>
                 <p><strong>Please sign up for our email list</strong>. We will email you every few months with updates,
                     or opportunities to participate in user research. 
-                    <a href='https://docs.google.com/forms/d/e/1FAIpQLSfUg3JE5ODNc6aqBPJwM8mZ80TYtK6ISw-OM7PBwKuoN3M--g/viewform'>Click here to sign up</a>.
+                    <a href="#" data-subscribe-click="prototype-modal" data-subscribe-parent-modal="#prototypeModal">Click here to sign up</a>.
                 </p>
             </div>
             <hr>

themes/dohmh/layouts/partials/header.html

@@ -195,10 +195,7 @@
                                     <!-- .nav-item -->
                                     <div class="nav-item bg-none text-white border border-white ml-1">
 
-                                        <a class="nav-link text-white subscribe-link" data-subscribe-click="header-nav" href={{ relURL "About/subscribe" }}>Subscribe</a>
-
-
-                                        </a>
+                                        <a class="nav-link text-white" href="#" data-subscribe-click="header" data-toggle="modal" data-target="#subscribeModal">Subscribe</a>
                                     </div>
 
                                 </nav>
@@ -356,7 +353,7 @@
 
                                             <!-- .nav-item -->
                                             <div class="nav-item bg-none text-primary border">
-        
+
                                                 <a href="#" class="nav-link text-primary " data-subscribe-click="header-modal" data-toggle="modal" data-target="#subscribeModal">
                                                     Subscribe
                                                 </a>
@@ -367,19 +364,7 @@
                                     </div>
     </div>
 
-        <div class="modal" tabindex="-1" role="dialog" id="subscribeModal" data-subscribe-form-url="https://docs.google.com/forms/d/e/1FAIpQLSfUg3JE5ODNc6aqBPJwM8mZ80TYtK6ISw-OM7PBwKuoN3M--g/viewform">
-            <div class='modal-dialog modal-lg modal-dialog-centered' role='document'>
-                <div class='modal-content'>
-                    <div class='modal-body' style="height:75vh;">
-                        <div class='subscribe-form-placeholder d-flex align-items-center justify-content-center h-100'>
-                            <p class='mb-0'>Loading subscription form...</p>
-                        </div>
-                    </div>
-                    <hr>
-                    <button type="button" class="btn btn-outline-primary close-dialog" data-dismiss="modal">Close</button>
-                </div>
-            </div>
-        </div>
+        {{- partial "subscribe-modal.html" . -}}
 
 </header>
 <!-- #global-header -->

themes/dohmh/layouts/partials/signup.html

@@ -1,3 +1,3 @@
 <div class="fs-sm">
-<a href="https://docs.google.com/forms/d/e/1FAIpQLSfUg3JE5ODNc6aqBPJwM8mZ80TYtK6ISw-OM7PBwKuoN3M--g/viewform?embedded=true" target="_blank" rel="noopener noreferrer">Sign up for our email list.</a> <em>We will send occasional announcements. We won't share your email address with anybody. </em>
+    <a href="#" data-subscribe-click="signup-partial" data-toggle="modal" data-target="#subscribeModal">Sign up for our email list.</a> <em>We will send occasional announcements. We won't share your email address with anybody. </em>
 </div>

themes/dohmh/layouts/partials/subscribe-modal.html

@@ -0,0 +1,15 @@
+{{- $subscribe_form_url := "https://docs.google.com/forms/d/e/1FAIpQLSfUg3JE5ODNc6aqBPJwM8mZ80TYtK6ISw-OM7PBwKuoN3M--g/viewform?embedded=true" -}}
+
+<div class="modal" tabindex="-1" role="dialog" id="subscribeModal" data-subscribe-form-url="{{ $subscribe_form_url }}">
+    <div class='modal-dialog modal-lg modal-dialog-centered' role='document'>
+        <div class='modal-content'>
+            <div class='modal-body' style="height:75vh;">
+                <div class='subscribe-form-placeholder d-flex align-items-center justify-content-center h-100'>
+                    <p class='mb-0'>Loading subscription form...</p>
+                </div>
+            </div>
+            <hr>
+            <button type="button" class="btn btn-outline-primary close-dialog" data-dismiss="modal">Close</button>
+        </div>
+    </div>
+</div>