Implement Mailchimp integration to create subscriptions.

Changes
- Implement mailchimp integration by using the subbscribe library.
- Integrate subbscribe library into repo, this will be moved into a bower package later.
- Fix: show reading time on  mobile devices.

.jshintrc

@@ -38,6 +38,7 @@
     "globals": {
         "$": true,
         "CaffeineTheme": true,
-        "ScrollReveal": true
+        "ScrollReveal": true,
+        "jQuery": true
     }
 }

DOCUMENTATION.md

@@ -161,6 +161,36 @@ var tag_names = ['code', 'career'];
 </script>
 ```
 
+### Mailchimp
+
+This theme supports Mailchimp subscribing. We are using [Hello Byte's subbscribe](https://github.com/shlomnissan/subbscribe) library to create an opt-in popup form. Due to its lack of support for a package manager, I have included its assets as part of this project. I will try to keep that updated regularly.
+
+To enable this feature, you'll need to obtain your Mailchimp embed signup form action URL, which is documented [here](http://kb.mailchimp.com/lists/signup-forms/host-your-own-signup-forms). Then inject it into your blog header like the example below.
+
+Go to Ghost Admin panel → `Code Injection` → `Blog Header` and add:
+
+```html
+<script>
+var mailchimp_url = "//1bytebeta.us9.list-manage.com/subscribe/post?u=1c261e60d8259c0c636801494&amp;id=7fa99bf359";
+</script>
+```
+
+To modify its contents, go to `cover.js` and modify the code block below to your liking:
+
+```
+if (window.mailchimp_url) {
+    $("body").subbscribe({
+        title: "Never miss a post!",
+        text: "Stay up to the date with the latest posts from Caffeine Coding!",
+        name: "<a href='https://www.facebook.com/caffeinecoding' target='_blank'>@caffeinecoding</a>",
+        color: "#56817A",
+        thumbnail: "http://i.imgur.com/39erIwp.png",
+        list: "MailChimp",
+        url : window.mailchimp_url
+    });
+}
+```
+
 ### Colors
 
 Edit the file `assets/scss/modules/_variables.scss`. Remember that before you deploy your changes to prod, it is necessary to compile the build to rebuild your new stylesheet, so keep running your gulp process in background.

README.md

@@ -20,6 +20,8 @@ Like the original Uno-zen theme that helped provide the skeleton for this projec
  - Bigger emphasis on the splash page
  - Smoother animations and style
  - Masonry and scroll reveal support
+ - Mailchimp integration
+ - Use font-awesome to get the latest icons
 
 ## Installation
 

assets/js/src/cover.js

@@ -54,7 +54,7 @@ $(function() {
         _toggleTagsOverlay();
     });
 
-    $(".nav-blog > a").click(function(event) {
+    $(".home-link").click(function(event) {
         if (CaffeineTheme.is("page", "home")) {
             event.preventDefault();
             CaffeineTheme.showIndexPage();
@@ -66,6 +66,22 @@ $(function() {
         }
     });
 
+    $(".subscribe-link").click(function(event) {
+        event.preventDefault();
+
+        if (window.mailchimp_url) {
+            $("body").subbscribe({
+                title: "Never miss a post!",
+                text: "Stay up to the date with the latest posts from Caffeine Coding!",
+                name: "<a href='https://www.facebook.com/caffeinecoding' target='_blank'>@caffeinecoding</a>",
+                color: "#56817A",
+                thumbnail: "http://i.imgur.com/39erIwp.png",
+                list: "MailChimp",
+                url : window.mailchimp_url
+            });
+        }
+    });
+
     $homeButton.click(_defaultLogoNavEvent);
     $(".open-link").click(_defaultLogoNavEvent);
 

assets/js/src/libs/subbscribe.js

@@ -0,0 +1,236 @@
+/**
+ * Subbscribe.js (http://www.subbscribe.com)
+ * Copyright (c) 2014 (v2.0) Shlomi Nissan, 1ByteBeta (http://www.1bytebeta.com)
+ * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
+ */
+"use strict";
+
+(function($) {
+    $.fn.subbscribe = function(options) {
+        // Default settings
+        var settings = $.extend({
+            list: "MailChimp",
+            url: "",
+            title: "Never miss a post!",
+            text: "Get our latest posts and announcements in your inbox. You won't regret it!",
+            name: "Subbscribe",
+            color: "#ee6262",
+            thumbnail: "https://s3-ap-southeast-2.amazonaws.com/subbscribe/img/avatar.png",
+            emailonly: false,
+            cm_mail_field: "",
+            delay: 0,
+
+        }, options);
+
+         /*
+        ===============================================================================
+          Helpers
+        ===============================================================================
+        */
+
+        function isError(data) {
+            console.log(data);
+
+            if (settings.list === "MailChimp") {
+                if (data.result !== "success") {
+                    return true;
+                }
+
+                return false;
+            } else if (settings.list === "CampaignMonitor") {
+                if (data.Status === 400) {
+                    return true;
+                }
+
+                return false;
+            }
+
+            return true;
+        }
+
+        function resetFormFields() {
+            $("#subbscribe input").each(function() {
+                $(this).val("");
+            });
+        }
+
+        function validateEmail(email) {
+            var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+            return re.test(email);
+        }
+
+        function formValidation() {
+            var valid = true;
+            var name = $("#subb-NAME");
+            var email = $("#subb-EMAIL");
+
+            if (!settings.emailonly) {
+                if (name.val().length < 2) {
+                    valid = false;
+                    name.addClass("error");
+                } else {
+                    name.removeClass("error");
+                }
+            }
+
+            if (!validateEmail(email.val())) {
+                valid = false;
+                email.addClass("error");
+            } else {
+                email.removeClass("error");
+            }
+
+            return valid;
+        }
+
+        function setCookie(cname, cvalue, exdays) {
+            var d = new Date();
+            d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
+            var expires = "expires=" + d.toUTCString();
+            document.cookie = cname + "=" + cvalue + "; " + expires + "; path=/";
+        }
+
+        function getCookie(cname) {
+            var name = cname + "=";
+            var ca = document.cookie.split(";");
+            for (var i = 0; i < ca.length; i++) {
+                var c = ca[i];
+
+                while (c.charAt(0) === " ") {
+                    c = c.substring(1);
+                }
+
+                if (c.indexOf(name) === 0) {
+                    return c.substring(name.length, c.length);
+                }
+            }
+
+            return "";
+        }
+
+        // Make sure a URL has been passed through
+        if (settings.url === "") {
+            console.log("Subbscribe Error: You must provide a valid MailChimp form URL.");
+            return;
+        }
+
+        //make sure the cm_mail_field is set when using Campaign Monitor
+        if (settings.list === "CampaignMonitor" && !settings.cm_mail_field.length) {
+            console.log("You must provide the mail input name. Found in the form code from Campaign Monitor");
+            return;
+
+        }
+
+        var _name = "";
+        var _email = "";
+        var _url = "";
+        var _action = "";
+
+        // Make sure list is either set to MailChimp or CampaignMonitor
+        // Change field names if yours don’t match
+        if (settings.list === "MailChimp") {
+            _name = "NAME";
+            _email = "EMAIL";
+            _action = settings.url.replace("/post?", "/post-json?").concat("&c=?");
+        } else if (settings.list === "CampaignMonitor") {
+            _name = "cm-name";
+            _email = settings.cm_mail_field;
+            _action = settings.url + "?callback=?";
+        } else {
+            console.log("Subbscribe Error: list value must be set to MailChimp or CampaignMonitor");
+            return;
+
+        }
+
+        // Separate the input fields from the HTML
+        // if emailonly is set, nameInput should be blank
+        var nameInput = "";
+        var emailInput = '<input type="email" name="' + _email + '" id="subb-EMAIL" placeholder="Email Address" />';
+
+        if (!settings.emailonly) {
+            nameInput = ' <input type="text" name="' + _name + '" id="subb-NAME" placeholder="Name" />';
+        }
+
+        // HTML
+        var html = '<div id="subbscribe" style="display: none"><div class="subb-title">' + settings.title + ' <img class="close-x" src="https://s3-ap-southeast-2.amazonaws.com/subbscribe/img/close.svg" />  </div> <div class="subb-body"> <div class="subb-hidden"> <div class="subb-thumbnail"> <img style="width: 40px; height: 40px;" src="' + settings.thumbnail + '" /> </div> <div class="subb-hidden"> <div class="subb-site"> &nbsp;' + settings.name + ' </div> <button class="subb-button show-form">Subscribe</button> </div> </div> <div class="subb-form" style="display: none"> <p>' + settings.text + '</p> <form id="mc-embedded-subbscribe-form" method="post" action="' + settings.url + '"> <div class="subbscribe-alert subbscribe-error" style="display: none">Oops! Check your details and try again.</div> <div class="subbscribe-alert subbscribe-success" style="display: none">Thanks! Check your email for confirmation.</div> <div class="text-input"> ' + nameInput + ' </div> <div class="text-input"> ' + emailInput + ' </div> <button class="subb-button submit-form" type="submit" style="width: 100%; margin-bottom: 10px;">Subscribe</button></form></div> </div> </div>';
+
+        if (getCookie("subbscribe-hidden") !== 1 && $(this).find("#subbscribe").length === 0) {
+            this.append(html);
+
+            setTimeout(function() {
+                $("#subbscribe").css("display", "block");
+                $("#subbscribe").css("width", $(".subb-site").width() + 200);
+                $("#subbscribe").addClass("animated slideInRight");
+            }, settings.delay * 1000);
+        }
+
+        // Update CSS classes
+        $("#subbscribe .subb-button").css("background-color", settings.color);
+
+        /*
+        ===============================================================================
+          Events
+        ===============================================================================
+        */
+
+        $("#subbscribe .close-x").click(function() {
+            $("#subbscribe").toggleClass("slideInRight fadeOut");
+            $("#subbscribe").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {
+
+                $("#subbscribe").remove();
+                // setCookie('subbscribe-hidden', 1, 1); // Hide for a day
+            });
+
+            if (typeof settings.onClose === "function") {
+                settings.onClose.call();
+            }
+        });
+
+        $("#subbscribe .show-form").click(function() {
+
+            $("#subbscribe .subb-hidden").hide();
+            $("#subbscribe .subb-form").show();
+
+        });
+
+        $("#mc-embedded-subbscribe-form").submit(function(e) {
+            e.preventDefault();
+
+            if (formValidation()) {
+                $("#subbscribe .subbscribe-error").slideUp();
+                $("#subbscribe .submit-form").attr("disabled", "disabled");
+
+                $.ajax({
+                    url: _action,
+                    type: "post",
+                    data: $(this).serialize(),
+                    dataType: "json",
+                    contentType: "application/json; charset=utf-8",
+
+                    success: function(data) {
+                        if (isError(data)) {
+                            console.log("Subbscribe Error: submission failed.");
+                        } else {
+                            //SUCCESS
+                            resetFormFields();
+                            $(".subbscribe-success").slideDown();
+
+                            setTimeout(function() { $("#subbscribe").addClass("animated fadeOut"); }, 2000);
+                            $("#subbscribe").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {
+                                $("#subbscribe").remove();
+                                // setCookie('subbscribe-hidden', 1, 365); // Hide for a year
+
+                                if (typeof settings.onSubbscribe === "function") {
+                                    settings.onSubbscribe.call();
+                                }
+                            });
+                        }
+                    }
+                });
+            } else {
+                $("#subbscribe .subbscribe-error").slideDown();
+            }
+        });
+    };
+
+}(jQuery));

assets/js/src/main.js

@@ -39,6 +39,11 @@ $(function() {
         }
     }
 
+    // Subscribe button
+    if (window.mailchimp_url) {
+        $(".subscribe-button").removeClass("hide");
+    }
+
     if (CaffeineTheme.is("page", "home")) {
         if (!CaffeineTheme.isOpen()) {
             CaffeineTheme.hideIndexPage();

assets/scss/caffeine-theme.scss

@@ -4,6 +4,7 @@
 
 @import '../vendor/bourbon/app/assets/stylesheets/bourbon.scss';
 @import 'modules/mixins.scss';
+@import 'components/subbscribe.scss';
 
 // ------------------------------
 // MODULES

assets/scss/components/_aside.scss

@@ -129,10 +129,14 @@
                 border: none;
             }
 
+            &.hide {
+                display: none;
+            }
+
             a {
                 display: block;
                 float: none;
-                padding: 8px 20px;
+                padding: 8px 20px 8px 22px;
                 font-size: 18px;
                 color: $slate-white;
 

assets/scss/components/_media-queries.scss

@@ -107,10 +107,6 @@
 // ------------------------------
 @media all and (max-width:600px) {
     .post {
-        .reading-time {
-            display: none
-        }
-
         .post-related,
         .post-card {
             margin: 0 20px;