bookends 0.5.2 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 4d32726c8ea41db71974f1274b8ac7799aca24ce
-  data.tar.gz: 0e01d59b583a88fb6cb9b1c8b82bb38f07d65b35
+  metadata.gz: 0afe580982cefaaaf366a337b970d463e012a6de
+  data.tar.gz: 7310cdefffb24ae207aa3e133c5cdf8246f7e468
 SHA512:
-  metadata.gz: c1d3f7e4e5e1e12ca803fd9d2c91d3c44cadff460844e6ecf4fdc27d8c35d9bd9672aa845f76aabc2d33d2ef946d9ce62561d9788073600f8f74108339ec67d1
-  data.tar.gz: 52273def94416f1ddcddb7c1e1cec51b994f6a9d1e34bf1efd9582af3a40669293dff71e1d077a530760884b5418a4907e3be7a78a692d07bb31a83927fb0f5e
+  metadata.gz: b65d2c5be5360dc30775c6702dfa156ed6117b4c77ffd53b1068b8a0465412387f25a87904e004e5ff8e1e2eec880db293e57392d9ca01b96b79203760627bc0
+  data.tar.gz: cddf3716609911800f7a7507383e8c62ac1afb0c0ea56bc80c6f60a15d876d89c25841399c0152acc6e745600ec4e9ebd8cae0c156f38a2945bca0bc0097241e

data/README.md

@@ -1,6 +1,10 @@
 # Bookends
 Shared footer (and eventually header) for Heroku properties.
 
+## Requirements
+Bookends assumes the presence of:
+* jQuery
+
 ## Installation
 
 Add this line to your application's Gemfile:
@@ -16,8 +20,10 @@ And then execute:
 ## Usage
 
 * `rails g bookends:install`
-* add `@import 'bookends/footer';` to your application.css.scss
+* add `@import 'bookends/footer';` to your application.scss
 * add `<%= render 'bookends/footer' %>` to your layout where you want the footer.
+* ensure that your JavaScript manifest includes the bookends JavaScript
+  * e.g. `//= require_tree ./bookends`
 
 ## Development
 

data/bookends.gemspec

@@ -24,4 +24,5 @@ Gem::Specification.new do |spec|
   spec.add_development_dependency "rake", "~> 10.0"
   spec.add_development_dependency "rspec"
   spec.add_development_dependency "sqlite3"
+  spec.add_development_dependency "jquery-rails"
 end

data/lib/bookends/version.rb

@@ -1,3 +1,3 @@
 module Bookends
-  VERSION = "0.5.2"
+  VERSION = "0.6.0"
 end

data/lib/generators/bookends/install/install_generator.rb

@@ -12,7 +12,8 @@ module Bookends
         FileUtils.mkdir_p 'app/views/bookends'
 
         copy_file 'footer.html.erb', 'app/views/bookends/_footer.html.erb'
-        copy_file 'footer.css.scss', 'app/assets/stylesheets/bookends/_footer.css.scss'
+        copy_file 'footer.scss', 'app/assets/stylesheets/bookends/_footer.scss'
+        copy_file 'newsletter.js', 'app/assets/javascripts/bookends/newsletter.js'
         directory 'footer_images'  , 'app/assets/images/bookends/footer/'
       end
     end

data/lib/generators/bookends/install/templates/footer.html.erb

@@ -43,7 +43,13 @@
     </div>
     <div class="col heroku-footer-social">
       <h3><span class="heroku-footer-icon-newsletter"></span>Subscribe to our monthly newsletter</h3>
-      <iframe src="https://go.pardot.com/l/36622/2015-07-20/5l8m8r" name="footer-newsletter" width="100%" height="80" type="text/html" frameborder="0" allowTransparency="true" scrolling="no"></iframe>
+      <form id="bookends-newsletter" accept-charset="UTF-8" action="https://www.heroku.com/newsletter_signups" method="post">
+        <input name="utf8" type="hidden" value="✓">
+        <input type="text" name="website" id="bookends-website" placeholder="do not fill this in" tabindex="-1">
+        <input type="email" name="newsletter_signup[email]" id="newsletter_signup_email" placeholder="Your email address" required="required">
+        <input type="submit" name="commit" value="Go">
+        <p id="bookends-newsletter-result" class="hide"></p>
+      </form>
       <ul class="social-list">
         <li><a class="heroku-footer-icon-rss" href="http://feeds2.feedburner.com/heroku" target="_blank">RSS Feed</a></li>
         <li><a class="heroku-footer-icon-twitter" href="https://twitter.com/heroku" target="_blank">Twitter</a></li>

data/lib/generators/bookends/install/templates/{footer.css.scss → footer.scss}

@@ -1,4 +1,12 @@
 #heroku-footer {
+  #bookends-website { //honeypot
+    position: absolute;
+    left: -9999px;
+  }
+
+  .hide {
+    display: none;
+  }
 
   $asset-path: 'bookends/footer';
 
@@ -189,53 +197,76 @@
       }
     }
 
-    // This has been commented out because the form is styled inside of Pardot.
-    // See template "Newsletter Signup - WWW Footer" to style the newsletter form.
-
-    // form {
-    //   $input-height: 40px;
-
-    //   position: relative;
-    //   width: 100%;
-    //   padding-bottom: 10px;
-    //   @include screen(min-width, $threshold-tablet) {
-    //     border-bottom: 1px solid $color-border;
-    //   }
-
-    //   input[type="text"],
-    //   input[type="email"], {
-    //     -webkit-appearance: none;
-    //     width: 100%;
-    //     height: $input-height;
-    //     padding: 0 10px;
-    //     border-radius: 4px;
-    //     border: 1px solid $color-border;
-    //     box-shadow: 0 0 4px fade-out($color-purple, 1);
-    //     transition: all .2s ease;
-    //     -webkit-transition: all .2s ease;
-    //     &:focus {
-    //       outline: none;
-    //       box-shadow: 0 0 4px fade-out($color-purple, .5);
-    //       border-color: $color-purple;
-    //     }
-    //   }
-
-    //   button {
-    //     -webkit-appearance: none;
-    //     position: absolute;
-    //     top: 0;
-    //     right: 0;
-    //     width: $input-height;
-    //     height: $input-height;
-    //     border: 0;
-    //     background-color: transparent;
-    //     border-radius: 3px;
-    //     &:focus {
-    //       outline: none;
-    //       border: 1px solid fade-out($color-purple, .5);
-    //     }
-    //   }
-    // }
+    #bookends-newsletter {
+      $input-height: 40px;
+
+      position: relative;
+      width: 100%;
+      padding-bottom: 10px;
+      @include screen(min-width, $threshold-tablet) {
+        border-bottom: 1px solid $color-border;
+      }
+
+      input[type="text"],
+      input[type="email"], {
+        -webkit-appearance: none;
+        width: 100%;
+        height: $input-height;
+        padding: 0 10px;
+        border-radius: 4px;
+        border: 1px solid $color-border;
+        box-shadow: 0 0 4px fade-out($color-purple, 1);
+        transition: all .2s ease;
+        -webkit-transition: all .2s ease;
+
+        &:focus {
+          outline: none;
+          box-shadow: 0 0 4px fade-out($color-purple, .5);
+          border-color: $color-purple;
+        }
+      }
+
+      input[type="submit"] {
+        -webkit-appearance: none;
+        position: absolute;
+        top: 0;
+        right: 0;
+        margin: 5px;
+        width: $input-height;
+        height: ($input-height - 10);
+        border: 0;
+        background-color: $color-purple;
+        border-radius: 3px;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        font-weight: bold;
+        text-align: center;
+        color: #fff;
+
+        &:focus {
+          outline: none;
+          border: 1px solid fade-out($color-purple, .5);
+        }
+
+        &:hover {
+          background-color: darken($color-purple, 5%);
+        }
+      }
+
+      p {
+        margin: 6px 0;
+        padding: 8px;
+        border-radius: 3px;
+        font-size: 11px;
+        text-align: left;
+        background-color: #fff;
+        height: $input-height;
+
+        &.error {
+          background-color: tomato;
+        }
+      }
+    }
 
     .social-list {
       margin: 0;

data/lib/generators/bookends/install/templates/newsletter.js

@@ -0,0 +1,58 @@
+var Heroku = Heroku || {};
+var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+
+Heroku.NewsletterSignup = (function() {
+  function NewsletterSignup() {
+    this.handleSubmit     = bind(this.handleSubmit, this);
+    this.$container       = $("#bookends-newsletter");
+    this.$honeyPot        = this.$container.find("#bookends-website");
+    this.$input           = this.$container.find("input[type=email]");
+    this.$submit          = this.$container.find(":submit");
+    this.$resultContainer = $("#bookends-newsletter-result");
+
+    this.$container.on("submit", this.handleSubmit);
+  }
+
+  NewsletterSignup.prototype.handleSubmit = function(e) {
+    var val;
+    var self;
+
+    e.preventDefault();
+    if(this.$honeyPot.val() !== "") {
+      return this.handleSuccess();
+    }
+
+    val  = this.$input.val();
+    self = this;
+    $.ajax({
+      url: "https://www.heroku.com/newsletter_signups",
+      type: "POST",
+      crossDomain: true,
+      data: { newsletter_signup: { email: val } }
+    })
+   .done(function(res) {
+      return self.handleSuccess();
+    })
+    .fail(function(err) {
+      return self.handleFailure();
+    });
+  };
+
+  NewsletterSignup.prototype.handleSuccess = function() {
+    this.$input.replaceWith("<p>Check your email now to confirm your sign-up.</p>");
+  };
+
+  NewsletterSignup.prototype.handleFailure = function() {
+    this.$input.val("");
+    this.$resultContainer
+      .removeClass("hide")
+      .text("There was an error registering you. Please refresh.");
+  };
+
+  return NewsletterSignup;
+
+})();
+
+$(function() {
+  return window.Heroku.newsletterSignup = new Heroku.NewsletterSignup();
+});

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bookends
 version: !ruby/object:Gem::Version
-  version: 0.5.2
+  version: 0.6.0
 platform: ruby
 authors:
 - Marketing Web Ops at heroku
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2015-10-13 00:00:00.000000000 Z
+date: 2015-11-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -94,6 +94,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: jquery-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 description: an engine to abstract common html/css elements across Heroku properties
 email:
 - max.beizer@gmail.com
@@ -115,11 +129,12 @@ files:
 - lib/bookends/engine.rb
 - lib/bookends/version.rb
 - lib/generators/bookends/install/install_generator.rb
-- lib/generators/bookends/install/templates/footer.css.scss
 - lib/generators/bookends/install/templates/footer.html.erb
+- lib/generators/bookends/install/templates/footer.scss
 - lib/generators/bookends/install/templates/footer_images/footer_sprite.png
 - lib/generators/bookends/install/templates/footer_images/footer_sprite@2x.png
 - lib/generators/bookends/install/templates/footer_images/salesforce_heroku_gray.png
+- lib/generators/bookends/install/templates/newsletter.js
 homepage: https://www.heroku.com
 licenses: []
 metadata: {}