mirror of
https://github.com/bigchaindb/site.git
synced 2024-06-17 18:13:19 +02:00
newsletter component prototype, ref #61
This commit is contained in:
parent
3ed7be03df
commit
988743f901
|
|
@ -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();
|
||||
|
|
|
|||
37
_src/_assets/javascripts/bigchain/newsletter.js
Normal file
37
_src/_assets/javascripts/bigchain/newsletter.js
Normal 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);
|
||||
|
|
@ -26,4 +26,6 @@ jQuery(function($) {
|
|||
|
||||
new Vivus('bigchain-graph', iconOptions);
|
||||
|
||||
Newsletter.init();
|
||||
|
||||
});
|
||||
|
|
|
|||
154
_src/_assets/javascripts/vendor/jquery.ajaxchimp.js
vendored
Normal file
154
_src/_assets/javascripts/vendor/jquery.ajaxchimp.js
vendored
Normal 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);
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
60
_src/_assets/styles/bigchain/_input-group.scss
Normal file
60
_src/_assets/styles/bigchain/_input-group.scss
Normal 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;
|
||||
}
|
||||
25
_src/_assets/styles/bigchain/_newsletter.scss
Normal file
25
_src/_assets/styles/bigchain/_newsletter.scss
Normal 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;
|
||||
}
|
||||
36
_src/_includes/section-newsletter.html
Normal file
36
_src/_includes/section-newsletter.html
Normal 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&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>
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user