From 988743f9011d1c1bb499c3e183cb407832066851 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 18 Feb 2016 15:46:44 +0100 Subject: [PATCH 01/10] newsletter component prototype, ref #61 --- _src/_assets/javascripts/bigchain.js | 2 + .../javascripts/bigchain/newsletter.js | 37 +++++ _src/_assets/javascripts/page-front.js | 2 + .../javascripts/vendor/jquery.ajaxchimp.js | 154 ++++++++++++++++++ _src/_assets/styles/bigchain.scss | 2 + .../_assets/styles/bigchain/_input-group.scss | 60 +++++++ _src/_assets/styles/bigchain/_newsletter.scss | 25 +++ _src/_includes/section-newsletter.html | 36 ++++ _src/index.html | 2 + 9 files changed, 320 insertions(+) create mode 100644 _src/_assets/javascripts/bigchain/newsletter.js create mode 100644 _src/_assets/javascripts/vendor/jquery.ajaxchimp.js create mode 100644 _src/_assets/styles/bigchain/_input-group.scss create mode 100644 _src/_assets/styles/bigchain/_newsletter.scss create mode 100644 _src/_includes/section-newsletter.html diff --git a/_src/_assets/javascripts/bigchain.js b/_src/_assets/javascripts/bigchain.js index 89f31f1..150f38c 100644 --- a/_src/_assets/javascripts/bigchain.js +++ b/_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(); diff --git a/_src/_assets/javascripts/bigchain/newsletter.js b/_src/_assets/javascripts/bigchain/newsletter.js new file mode 100644 index 0000000..29316c6 --- /dev/null +++ b/_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); diff --git a/_src/_assets/javascripts/page-front.js b/_src/_assets/javascripts/page-front.js index 8345338..34c5a0e 100644 --- a/_src/_assets/javascripts/page-front.js +++ b/_src/_assets/javascripts/page-front.js @@ -26,4 +26,6 @@ jQuery(function($) { new Vivus('bigchain-graph', iconOptions); + Newsletter.init(); + }); diff --git a/_src/_assets/javascripts/vendor/jquery.ajaxchimp.js b/_src/_assets/javascripts/vendor/jquery.ajaxchimp.js new file mode 100644 index 0000000..0914948 --- /dev/null +++ b/_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 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); diff --git a/_src/_assets/styles/bigchain.scss b/_src/_assets/styles/bigchain.scss index 6abd7a6..bd15754 100644 --- a/_src/_assets/styles/bigchain.scss +++ b/_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'; diff --git a/_src/_assets/styles/bigchain/_input-group.scss b/_src/_assets/styles/bigchain/_input-group.scss new file mode 100644 index 0000000..9dc20c8 --- /dev/null +++ b/_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; +} diff --git a/_src/_assets/styles/bigchain/_newsletter.scss b/_src/_assets/styles/bigchain/_newsletter.scss new file mode 100644 index 0000000..e97f0ed --- /dev/null +++ b/_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; +} diff --git a/_src/_includes/section-newsletter.html b/_src/_includes/section-newsletter.html new file mode 100644 index 0000000..ad643ad --- /dev/null +++ b/_src/_includes/section-newsletter.html @@ -0,0 +1,36 @@ + +
+
+ +
+
+

Subscribe to BigchainDB Updates

+ +
+
+ +
+
+
+
diff --git a/_src/index.html b/_src/index.html index aedcb19..58af21a 100644 --- a/_src/index.html +++ b/_src/index.html @@ -60,6 +60,8 @@ js: page-front.min.js +{% include section-newsletter.html %} +
From b9b10fcfb83602f6ed4f267d8a68f608c1f031b2 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 18 Feb 2016 16:09:37 +0100 Subject: [PATCH 02/10] prepare form interaction, send GA events --- .../javascripts/bigchain/newsletter.js | 31 +++++++++++++------ .../javascripts/vendor/jquery.ajaxchimp.js | 10 ++++-- 2 files changed, 28 insertions(+), 13 deletions(-) diff --git a/_src/_assets/javascripts/bigchain/newsletter.js b/_src/_assets/javascripts/bigchain/newsletter.js index 29316c6..31cdd9b 100644 --- a/_src/_assets/javascripts/bigchain/newsletter.js +++ b/_src/_assets/javascripts/bigchain/newsletter.js @@ -12,22 +12,33 @@ var Newsletter = (function(w, d, $) { }, _private = { - parsley: function() { - if (_config.newsletter.length > 0) { - _config.newsletter.parsley({ - trigger: 'change' - }); - } - }, - ajaxChimp: function() { - _config.newsletter.ajaxChimp(); + _config.newsletter.ajaxChimp({ + callback: formCallback + }); + + function formCallback (resp) { + if (resp.result === 'success') { + + _config.newsletter.find('.input-group').addClass('hide'); + + // send GA event + ga('send', 'event', 'newsletter', 'subscribe', 'success', true); + } + if (resp.result === 'error') { + _config.newsletter.find('.btn') + .removeClass('disabled') + .text('Subscribe'); + + // send GA event + ga('send', 'event', 'newsletter', 'subscribe', 'error', true); + } + } } }; app = { init: function() { - _private.parsley(); _private.ajaxChimp(); } }; diff --git a/_src/_assets/javascripts/vendor/jquery.ajaxchimp.js b/_src/_assets/javascripts/vendor/jquery.ajaxchimp.js index 0914948..4141e90 100644 --- a/_src/_assets/javascripts/vendor/jquery.ajaxchimp.js +++ b/_src/_assets/javascripts/vendor/jquery.ajaxchimp.js @@ -57,7 +57,7 @@ For e.g. 'http://blahblah.us1.list-manage.com/subscribe/post-json?u=5afsdhfuhdsi var form = $(elem); var email = form.find('input[type=email]'); var feedback = form.find('.form-control-feedback'); - var formgroup = form.find('.form-group'); + var formgroup = form.find('.input-group'); var settings = $.extend({ 'url': form.attr('action'), @@ -135,7 +135,7 @@ For e.g. 'http://blahblah.us1.list-manage.com/subscribe/post-json?u=5afsdhfuhdsi }); // Translate and display submit message - var submitMsg = 'Submitting...'; + var submitMsg = 'Sending...'; if( settings.language !== 'en' && $.ajaxChimp.translations @@ -144,7 +144,11 @@ For e.g. 'http://blahblah.us1.list-manage.com/subscribe/post-json?u=5afsdhfuhdsi ) { submitMsg = $.ajaxChimp.translations[settings.language]['submit']; } - feedback.html(submitMsg).show(2000); + form.find('.btn') + .addClass('disabled') + .text(submitMsg); + + //feedback.html(submitMsg).show(2000); return false; }); From bc8681c8166ec98b841e97c8feefc44f6c6b2b96 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 18 Feb 2016 16:27:54 +0100 Subject: [PATCH 03/10] add Gitter link for #62 --- _config.yml | 1 + _src/_assets/images/gitter.svg | 19 +++++++++++++++++++ _src/_assets/styles/_page-community.scss | 8 ++++++++ _src/_assets/styles/bigchain/_icons.scss | 4 ++++ _src/_data/menus.yml | 2 ++ _src/community.html | 12 +++++++++--- 6 files changed, 43 insertions(+), 3 deletions(-) create mode 100644 _src/_assets/images/gitter.svg diff --git a/_config.yml b/_config.yml index 4f6fcd2..179c687 100644 --- a/_config.yml +++ b/_config.yml @@ -17,6 +17,7 @@ github: repo: bigchaindb medium: the-bigchaindb-blog googlegroup: bigchaindb +gitter: bigchaindb disqus: bigchain address: diff --git a/_src/_assets/images/gitter.svg b/_src/_assets/images/gitter.svg new file mode 100644 index 0000000..fae8223 --- /dev/null +++ b/_src/_assets/images/gitter.svg @@ -0,0 +1,19 @@ + + + + + gitter + + + + + + + diff --git a/_src/_assets/styles/_page-community.scss b/_src/_assets/styles/_page-community.scss index 0c4908f..e98b54e 100644 --- a/_src/_assets/styles/_page-community.scss +++ b/_src/_assets/styles/_page-community.scss @@ -46,6 +46,10 @@ fill: lighten($brand-primary, 10%); filter: drop-shadow(0 1px 4px rgba($brand-main-blue-dark, .4)); transform: translateY(-1px); + + &.icon--gitter { + stroke: lighten($brand-primary, 10%); + } } } @@ -63,6 +67,10 @@ fill: $brand-primary; width: 1.5rem; height: 1.5rem; + + &.icon--gitter { + stroke: $brand-primary; + } } } } diff --git a/_src/_assets/styles/bigchain/_icons.scss b/_src/_assets/styles/bigchain/_icons.scss index d8e62f6..0236bbd 100644 --- a/_src/_assets/styles/bigchain/_icons.scss +++ b/_src/_assets/styles/bigchain/_icons.scss @@ -18,6 +18,10 @@ stroke: none; fill: $text-color; margin-bottom: -2px; + + .icon--gitter { + stroke: $text-color; + } } .icon--sm { diff --git a/_src/_data/menus.yml b/_src/_data/menus.yml index 114f199..77e025a 100644 --- a/_src/_data/menus.yml +++ b/_src/_data/menus.yml @@ -22,6 +22,8 @@ community: url: https://github.com/bigchaindb - title: Twitter url: https://twitter.com/BigchainDB + - title: Gitter + url: https://gitter.im/bigchaindb - title: Google Group url: https://groups.google.com/forum/#!forum/bigchaindb diff --git a/_src/community.html b/_src/community.html index 1a1726a..25fce06 100644 --- a/_src/community.html +++ b/_src/community.html @@ -18,8 +18,14 @@ js: page-community.min.js
-

Google Group

-

Participate in our Google Group

+

Join the discussion

+

Participate via Gitter or Google Group

+
-

Social

+

Follow

Follow us for the latest updates

+ +{% include section-newsletter.html %} From ae20fbdffa2999d6bf21c29b73410bf6e2803e67 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 19 Feb 2016 17:32:51 +0100 Subject: [PATCH 10/10] newsletter subscription on whitepaper page --- _src/_assets/javascripts/page-front.js | 2 -- _src/_layouts/page.html | 10 +--------- 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/_src/_assets/javascripts/page-front.js b/_src/_assets/javascripts/page-front.js index 34c5a0e..8345338 100644 --- a/_src/_assets/javascripts/page-front.js +++ b/_src/_assets/javascripts/page-front.js @@ -26,6 +26,4 @@ jQuery(function($) { new Vivus('bigchain-graph', iconOptions); - Newsletter.init(); - }); diff --git a/_src/_layouts/page.html b/_src/_layouts/page.html index a511fba..d1c3701 100644 --- a/_src/_layouts/page.html +++ b/_src/_layouts/page.html @@ -42,15 +42,7 @@ layout: base -
-
-
-

Get In Touch

-
- - {% include form-contact.html %} -
-
+ {% include section-newsletter.html %} {% endif %} {% if page.comments %}