[#MmLRZ2E2] Add Universe Support

Add support for Universe API Branch: MmLRZ2E2-development Branch: MmLRZ2E2-development
sparkartgroup · Sep 9, 2014 · 79c0cfb · 79c0cfb
1 parent 327f21b
commit 79c0cfb
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 47 deletions.
diff --git a/README.md b/README.md
@@ -21,11 +21,12 @@ After you've gotten the module and included it in your page, you can start using
 
 `<div id="subscribe-form"></div>`
 
-2) Create a new `SubscribeEmail` instance somewhere in the page's JavaScript. The only parameters that are required are `element`, which is a DOM element, jQuery element, or selector string to refer to the placeholder element and `service` which is the name of mailing list platform you are using.
+2) Create a new `SubscribeEmail` instance somewhere in the page's JavaScript. The only parameters that are required are `element`, which is a DOM element, jQuery element, or selector string to refer to the placeholder element and `service` which is the name of mailing list platform you are using. Depending on the service, you may need an API key, which you can define with the `key` parameter.
 ```
   new SubscribeEmail({
     element: '#subscribe-form',
-    service: 'mailchimp'
+    service: 'universe',
+    key: 'your-api-key-here'
   });
 ```
 
@@ -38,6 +39,8 @@ The module can be configured with several optional parameters passed to it's con
 
 - `element`: **(Required)** A DOM element, jQuery element, or selector string to refer to the placeholder element.
 - `service`: **(Required)** The mailing list platform you are using. Available options are `mailchimp`, `sendgrid` and `universe`.
+- `key`: An API key if required by your mailing list platform.
+- `submitText`: A string to be used on the form's submit button. Defaults to "Subscribe".
 - `template`: A string of the name of the compiled handlebars template to use to render the form. Available templates are `'BEM-with-messaging'` or `'BEM-minimal'` (default). See "Customizing the Templates" below for more information.
 - `async`: Whether the form with be submitted asynchronously (defaults to false).
 

diff --git a/demo/index.html b/demo/index.html
@@ -4,31 +4,14 @@
     <script src="../build/subscribe-email.js"></script>
   </head>
   <body>
-    <p>Here's a MailChimp subscribe form!</p>
-    <div id="subscribe-form1">1</div>
-    <p>Here's a SendGrid subscribe form!</p>
-    <div id="subscribe-form2">2</div>
     <p>Here's a Universe subscribe form!</p>
-    <div id="subscribe-form3">3</div>
+    <div id="subscribe-form">No-script fallback can go here.</div>
     <script>
       new SubscribeEmail({
-        element: '#subscribe-form1',
-        submitText: 'Sign Up',
-        service: 'mailchimp'
-      });
-    </script>
-    <script>
-      new SubscribeEmail({
-        element: '#subscribe-form2',
+        element: '#subscribe-form',
         submitText: 'Subscribe',
-        service: 'sendgrid'
-      });
-    </script>
-    <script>
-      new SubscribeEmail({
-        element: '#subscribe-form3',
-        submitText: 'Send',
-        service: 'universe'
+        service: 'universe',
+        key: 'd54e8487-e44e-4c6f-bdd7-6ab9c2eae1e9'
       });
     </script>
   </body>

diff --git a/gulp/startServer.js b/gulp/startServer.js
@@ -0,0 +1,11 @@
+var gulp = require('gulp');
+var http = require('http');
+var ecstatic = require('ecstatic');
+
+gulp.task('startServer', function() {
+  http.createServer(
+    ecstatic({ root: './' })
+  ).listen(8080);
+
+  console.log('Listening on :8080');
+});
diff --git a/gulpfile.js b/gulpfile.js
@@ -15,5 +15,5 @@ var requireDir = require('require-dir');
 requireDir('./gulp', { recurse: true });
 
 // Task groups
-gulp.task('default', ['build']);
+gulp.task('default', ['build', 'startServer']);
 gulp.task('build', ['browserify']);
diff --git a/package.json b/package.json
@@ -2,14 +2,16 @@
   "name": "subscribe-email",
   "version": "0.0.0",
   "private": true,
-  "main": "subscribe-email.js",
+  "main": "src/subscribe-email.js",
   "browserify": {
     "transform": [
       "hbsfy"
     ]
   },
   "devDependencies": {
     "browserify": "^5.11.1",
+    "ecstatic": "^0.5.4",
+    "form-serialize": "^0.3.0",
     "gulp": "^3.8.7",
     "gulp-notify": "^1.5.1",
     "gulp-util": "^3.0.1",

diff --git a/src/subscribe-email.js b/src/subscribe-email.js
@@ -5,41 +5,75 @@
   if (typeof define === 'function' && define.amd) {
     define(['handlebars'], factory);
   } else if (typeof exports === 'object') {
-    module.exports = factory(require('./templates/BEM-with-messaging.hbs'));
+    module.exports = factory(require('./templates/BEM-with-messaging.hbs'), require('form-serialize'), function(a){console.log(a);});
   } else {
     root.SubscribeEmail = factory(root.handlebars);
   }
-}(this, function (template) {
+}(this, function (template, serialize) {
 
   this.SubscribeEmail = function(options){
+
     var placeholder = document.querySelector(options.element);
+    var serviceConfig = configureService(options.service);
+
+    //Merge the serviceConfig object into the template options
+    for (var attrname in serviceConfig) { options[attrname] = serviceConfig[attrname]; }
+
+    //Render Template
+    placeholder.innerHTML = template(options);
+
+    //Over-ride Default Submit Action with CORS request
+    placeholder.querySelector('form').addEventListener("submit", function(e) {
+      e.preventDefault();
+      var requestData = serialize(this) + "&amp;key=" + options.key;
+      makeCorsRequest(serviceConfig.formAction, requestData);
+    });
+
+  };
+
+  function configureService(service) {
     var serviceConfig = {};
-    switch (options.service) {
-      case 'mailchimp':
+    switch (service) {
+      case 'universe':
         serviceConfig = {
-          formAction: 'http://mailchimp-api.com/route',
-          formMethod: 'POST',
-          emailName: 'EMAIL'
-        };
-        break;
-      case 'sendgrid':
-        serviceConfig = {
-          formAction: 'http://sendgrid-api.com/route',
-          formMethod: 'POST'
+          formAction: 'http://staging.services.sparkart.net/api/v1/contacts',
+          emailName: 'contact[email]'
         };
         break;
       default:
         serviceConfig = {
-          formAction: '',
-          formMethod: ''
+          formAction: ''
         };
         break;
     }
-    //Merge the serviceConfig object into the template options
-    for (var attrname in serviceConfig) { options[attrname] = serviceConfig[attrname]; }
+    return serviceConfig;
+  }
 
-    placeholder.innerHTML = template(options);
-  };
+  function makeCorsRequest(url, data) {
+    var xhr = createCorsRequest('POST', url);
+    if (!xhr) {
+      console.log('CORS not supported');
+      return;
+    }
+    xhr.onload = function() {
+      console.log(xhr.responseText);
+    };
+    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+    xhr.send(data);
+  }
+
+  function createCorsRequest(method, url) {
+    var xhr = new XMLHttpRequest();
+    if ("withCredentials" in xhr) {
+      xhr.open(method, url, true);
+    } else if (typeof XDomainRequest != "undefined") {
+      xhr = new XDomainRequest();
+      xhr.open(method, url);
+    } else {
+      xhr = null;
+    }
+    return xhr;
+  }
 
   return this.SubscribeEmail;
 }));
diff --git a/src/templates/BEM-with-messaging.hbs b/src/templates/BEM-with-messaging.hbs
@@ -1,4 +1,5 @@
-<form action="{{formAction}}" method="{{formMethod}}">
-  <input type="email" value="" name="{{emailName}}">
+<form action="{{formAction}}" method="post">
+  <input type="email" name="{{emailName}}">
   <input type="submit" value="{{submitText}}" name="{{submitName}}">
-</form>
+</form>
+<div id="yo"></div>