From 79c0cfbcccfb035a9138eb7ebf913374e30300b7 Mon Sep 17 00:00:00 2001 From: Josiah Sprague Date: Tue, 9 Sep 2014 10:36:48 -0400 Subject: [PATCH] [#MmLRZ2E2] Add Universe Support Add support for Universe API Branch: MmLRZ2E2-development Branch: MmLRZ2E2-development --- README.md | 7 ++- demo/index.html | 25 ++-------- gulp/startServer.js | 11 +++++ gulpfile.js | 2 +- package.json | 4 +- src/subscribe-email.js | 72 ++++++++++++++++++++-------- src/templates/BEM-with-messaging.hbs | 7 +-- 7 files changed, 81 insertions(+), 47 deletions(-) create mode 100644 gulp/startServer.js diff --git a/README.md b/README.md index 2eb5491..4beb13b 100644 --- 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 `
` -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 index ae208b9..f9b1fe9 100644 --- a/demo/index.html +++ b/demo/index.html @@ -4,31 +4,14 @@ -

Here's a MailChimp subscribe form!

-
1
-

Here's a SendGrid subscribe form!

-
2

Here's a Universe subscribe form!

-
3
+
No-script fallback can go here.
- - diff --git a/gulp/startServer.js b/gulp/startServer.js new file mode 100644 index 0000000..f7b04e8 --- /dev/null +++ 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'); +}); \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index d725a26..1f9f21b 100644 --- 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']); \ No newline at end of file diff --git a/package.json b/package.json index c9bcbb9..f51b1bd 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "subscribe-email", "version": "0.0.0", "private": true, - "main": "subscribe-email.js", + "main": "src/subscribe-email.js", "browserify": { "transform": [ "hbsfy" @@ -10,6 +10,8 @@ }, "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 index d9bf523..b5f6e16 100644 --- 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) + "&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; })); \ No newline at end of file diff --git a/src/templates/BEM-with-messaging.hbs b/src/templates/BEM-with-messaging.hbs index 752cc21..b2e6eec 100644 --- a/src/templates/BEM-with-messaging.hbs +++ b/src/templates/BEM-with-messaging.hbs @@ -1,4 +1,5 @@ -
- + + -
\ No newline at end of file + +
\ No newline at end of file