newsletter component prototype, ref #61

_src/_assets/javascripts/bigchain.js

@@ -7,6 +7,7 @@
 //=include bigchain/dnt.js
 
 //=include bigchain/form-contact.js
+//=include bigchain/newsletter.js
 
 
 jQuery(function($) {
@@ -16,6 +17,7 @@ jQuery(function($) {
     //
     Forms.init();
     FormContact.init();
+    Newsletter.init();
 
     if (!_dntEnabled()) {
         GoogleAnalytics.init();

_src/_assets/javascripts/bigchain/newsletter.js

@@ -0,0 +1,37 @@
+
+//=include ../vendor/jquery.ajaxchimp.js
+
+var Newsletter = (function(w, d, $) {
+
+    'use strict';
+
+    var app, _private, _config;
+
+    _config = {
+        newsletter: $('#newsletter')
+    },
+
+    _private = {
+        parsley: function() {
+            if (_config.newsletter.length > 0) {
+                _config.newsletter.parsley({
+                    trigger: 'change'
+                });
+            }
+        },
+
+        ajaxChimp: function() {
+            _config.newsletter.ajaxChimp();
+        }
+    };
+
+    app = {
+        init: function() {
+            _private.parsley();
+            _private.ajaxChimp();
+        }
+    };
+
+    return app;
+
+})(window, document, jQuery);

_src/_assets/javascripts/page-front.js

@@ -26,4 +26,6 @@ jQuery(function($) {
 
     new Vivus('bigchain-graph', iconOptions);
 
+    Newsletter.init();
+
 });

_src/_assets/javascripts/vendor/jquery.ajaxchimp.js

@@ -0,0 +1,154 @@
+/*!
+Mailchimp Ajax Submit
+jQuery Plugin
+Author: Siddharth Doshi
+URL: https://github.com/scdoshi/jquery-ajaxchimp
+
+---
+Modified by: Matthias Kretschmann
+- changes to work with our form control feedback styles
+- changes to work with our parsley form validation
+---
+
+Use:
+===
+$('#form_id').ajaxchimp(options);
+
+- Form should have one <input> element with attribute 'type=email'
+- Form should have one label element with attribute 'for=email_input_id' (used to display error/success message)
+- All options are optional.
+
+Options:
+=======
+options = {
+    language: 'en',
+    callback: callbackFunction,
+    url: 'http://blahblah.us1.list-manage.com/subscribe/post?u=5afsdhfuhdsiufdba6f8802&id=4djhfdsh99f'
+}
+
+Notes:
+=====
+To get the mailchimp JSONP url (undocumented), change 'post?' to 'post-json?' and add '&c=?' to the end.
+For e.g. 'http://blahblah.us1.list-manage.com/subscribe/post-json?u=5afsdhfuhdsiufdba6f8802&id=4djhfdsh99f&c=?',
+*/
+
+(function ($) {
+    'use strict';
+
+    $.ajaxChimp = {
+        responses: {
+            'We have sent you a confirmation email'                                             : 0,
+            'Please enter a value'                                                              : 1,
+            'An email address must contain a single @'                                          : 2,
+            'The domain portion of the email address is invalid (the portion after the @: )'    : 3,
+            'The username portion of the email address is invalid (the portion before the @: )' : 4,
+            'This email address looks fake or invalid. Please enter a real email address'       : 5
+        },
+        translations: {
+            'en': null
+        },
+        init: function (selector, options) {
+            $(selector).ajaxChimp(options);
+        }
+    };
+
+    $.fn.ajaxChimp = function (options) {
+        $(this).each(function(i, elem) {
+            var form = $(elem);
+            var email = form.find('input[type=email]');
+            var feedback = form.find('.form-control-feedback');
+            var formgroup = form.find('.form-group');
+
+            var settings = $.extend({
+                'url': form.attr('action'),
+                'language': 'en'
+            }, options);
+
+            var url = settings.url.replace('/post?', '/post-json?').concat('&c=?');
+
+            form.attr('novalidate', 'true');
+            email.attr('name', 'EMAIL');
+
+            form.submit(function () {
+                var msg;
+                function successCallback(resp) {
+                    if (resp.result === 'success') {
+                        msg = 'We have sent you a confirmation email';
+                        formgroup.removeClass('has-error').addClass('has-success');
+                    } else {
+                        formgroup.removeClass('has-success').addClass('has-error');
+                        email.removeClass('parsley-success');
+                        var index = -1;
+                        try {
+                            var parts = resp.msg.split(' - ', 2);
+                            if (parts[1] === undefined) {
+                                msg = resp.msg;
+                            } else {
+                                var i = parseInt(parts[0], 10);
+                                if (i.toString() === parts[0]) {
+                                    index = parts[0];
+                                    msg = parts[1];
+                                } else {
+                                    index = -1;
+                                    msg = resp.msg;
+                                }
+                            }
+                        }
+                        catch (e) {
+                            index = -1;
+                            msg = resp.msg;
+                        }
+                    }
+
+                    // Translate and display message
+                    if (
+                        settings.language !== 'en'
+                        && $.ajaxChimp.responses[msg] !== undefined
+                        && $.ajaxChimp.translations
+                        && $.ajaxChimp.translations[settings.language]
+                        && $.ajaxChimp.translations[settings.language][$.ajaxChimp.responses[msg]]
+                    ) {
+                        msg = $.ajaxChimp.translations[settings.language][$.ajaxChimp.responses[msg]];
+                    }
+                    feedback.html(msg);
+
+                    feedback.show(2000);
+                    if (settings.callback) {
+                        settings.callback(resp);
+                    }
+                }
+
+                var data = {};
+                var dataArray = form.serializeArray();
+                $.each(dataArray, function (index, item) {
+                    data[item.name] = item.value;
+                });
+
+                $.ajax({
+                    url: url,
+                    data: data,
+                    success: successCallback,
+                    dataType: 'jsonp',
+                    error: function (resp, text) {
+                        console.log('mailchimp ajax submit error: ' + text);
+                    }
+                });
+
+                // Translate and display submit message
+                var submitMsg = 'Submitting...';
+                if(
+                    settings.language !== 'en'
+                    && $.ajaxChimp.translations
+                    && $.ajaxChimp.translations[settings.language]
+                    && $.ajaxChimp.translations[settings.language]['submit']
+                ) {
+                    submitMsg = $.ajaxChimp.translations[settings.language]['submit'];
+                }
+                feedback.html(submitMsg).show(2000);
+
+                return false;
+            });
+        });
+        return this;
+    };
+})(jQuery);

_src/_assets/styles/bigchain.scss

@@ -19,6 +19,7 @@
 @import 'bigchain/_tables';
 @import 'bigchain/_buttons';
 @import 'bigchain/_forms';
+@import 'bigchain/_input-group';
 @import 'bigchain/_logo';
 @import 'bigchain/_icons';
 @import 'bigchain/_grid';
@@ -41,6 +42,7 @@
 @import 'bigchain/_content-page';
 @import 'bigchain/_comments';
 @import 'bigchain/_toc';
+@import 'bigchain/_newsletter';
 
 // specific page styles
 @import '_page-front';

_src/_assets/styles/bigchain/_input-group.scss

@@ -0,0 +1,60 @@
+//
+// Base styles
+//
+.input-group {
+    width: 100%;
+    display: flex;
+    align-items: flex-end;
+
+    .form-control {
+        flex: 1;
+        margin-bottom: 0;
+    }
+}
+
+.input-group-btn,
+.input-group .form-control {
+    &:not(:first-child):not(:last-child) {
+        border-radius: 0;
+    }
+}
+
+//
+// Button input groups
+//
+.input-group-btn {
+    white-space: nowrap;
+    vertical-align: middle; // Match the inputs
+    position: relative;
+    // Jankily prevent input button groups from wrapping with `white-space` and
+    // `font-size` in combination with `inline-block` on buttons.
+    font-size: 0;
+    white-space: nowrap;
+
+    > .btn {
+        margin-top: 0 !important;
+    }
+}
+
+
+//
+// Reset rounded corners
+//
+.input-group .form-control:not(:last-child),
+.input-group-btn:not(:last-child) > .btn,
+.input-group-btn:not(:last-child) > .btn-group > .btn,
+.input-group-btn:not(:last-child) > .dropdown-toggle,
+.input-group-btn:not(:first-child) > .btn:not(:last-child):not(.dropdown-toggle),
+.input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+.input-group .form-control:not(:first-child),
+.input-group-btn:not(:first-child) > .btn,
+.input-group-btn:not(:first-child) > .btn-group > .btn,
+.input-group-btn:not(:first-child) > .dropdown-toggle,
+.input-group-btn:not(:last-child) > .btn:not(:first-child),
+.input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}

_src/_assets/styles/bigchain/_newsletter.scss

@@ -0,0 +1,25 @@
+
+.section-newsletter {
+    background: $brand-main-blue-dark;
+
+    // .sections redefinitions
+    padding-top: $spacer;
+    padding-bottom: $spacer;
+
+    @media ($screen-sm) {
+        padding-top: ($spacer * 3);
+        padding-bottom: ($spacer * 3);
+    }
+}
+
+.newsletter {
+    p,
+    .form-group { margin: 0; }
+
+    .grid { margin-bottom: 0; }
+}
+
+.newsletter__title {
+    @extend .h4;
+    margin-top: 0;
+}

_src/_includes/section-newsletter.html

@@ -0,0 +1,36 @@
+
+<section class="section section-newsletter newsletter">
+    <div class="row row--wide">
+
+        <div class="grid grid--full grid-small--half grid--gutters grid--center">
+            <div class="grid__col">
+                <h1 class="newsletter__title">Subscribe to BigchainDB Updates</h1>
+                <p class="newsletter__text">Get updates delivered to your inbox. No more than 1 email per month. We're busy too.</p>
+            </div>
+            <div class="grid__col">
+                <form id="newsletter"
+                    class="form-newsletter js-parsley"
+                    action="//bigchaindb.us9.list-manage.com/subscribe/post?u=xxx&amp;id=xxx"
+                    method="post">
+
+                    <div class="form-group has-feedback">
+                        <div class="input-group">
+
+                            <input class="form-control" type="email" id="email" name="EMAIL" required>
+                            <label class="form-label" for="email">Your Email</label>
+
+                            <span class="input-group-btn">
+                                <button class="btn btn-secondary" type="submit" name="button">
+                                    Subscribe
+                                </button>
+                            </span>
+
+                        </div>
+
+                        <div class="form-control-feedback"></div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</section>

_src/index.html

@@ -60,6 +60,8 @@ js: page-front.min.js
 
 </section>
 
+{% include section-newsletter.html %}
+
 <section class="section section-quickstart background--darker">
     <div class="row row--wide">
         <header class="section-header">