1
0
mirror of https://github.com/bigchaindb/site.git synced 2024-12-24 02:16:10 +01:00

newsletter component prototype, ref #61

This commit is contained in:
Matthias Kretschmann 2016-02-18 15:46:44 +01:00
parent 3ed7be03df
commit 988743f901
9 changed files with 320 additions and 0 deletions

View File

@ -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();

View File

@ -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);

View File

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

View File

@ -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);

View File

@ -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';

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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>

View File

@ -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">