Skip to content

Commit

Permalink
Remove subscribe functionality, refer to basket example
Browse files Browse the repository at this point in the history
  • Loading branch information
@craigcook
craigcook committed May 15, 2018
1 parent 6d3e457 commit 9a6db15
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 114 deletions.
111 changes: 7 additions & 104 deletions src/assets/js/protocol/protocol-newsletter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,38 +3,9 @@

// !! This file assumes only one # form per page !!

var newsletterForm = document.getElementById('newsletter-form');

// Handle errors
var errorArray = [];
var newsletterErrors = document.getElementById('newsletter-errors');
function newsletterError() {
var errorList = document.createElement('ul');

if(errorArray.length) {
for (var i = 0; i < errorArray.length; i++) {
var item = document.createElement('li');
item.appendChild(document.createTextNode(errorArray[i]));
errorList.appendChild(item);
}
} else {
// No error messages, forward to server for better troubleshooting
newsletterForm.setAttribute('data-skip-xhr', true);
newsletterForm.submit();
}

newsletterErrors.appendChild(errorList);
newsletterErrors.style.display = 'block';
}

// Show success message
function newsletterThanks() {
var thanks = document.getElementById('newsletter-thanks');
thanks.style.display = 'block';
}

// Expand email form on input focus or submit if details aren't visible
function initEmailForm() {
var newsletterForm = document.getElementById('newsletter-form');
var submitButton = document.getElementById('newsletter-submit');
var formDetails = document.getElementById('newsletter-details');
var formControls = document.querySelectorAll('.mzp-c-newsletter-form input, .mzp-c-newsletter-form select');
Expand All @@ -57,82 +28,14 @@
emailFormShowDetails();
}
});
}
initEmailForm();

// XHR subscribe; handle errors; display thanks message on success.
function newsletterSubscribe(evt) {
var skipXHR = newsletterForm.getAttribute('data-skip-xhr');
if (skipXHR) {
return true;
}
evt.preventDefault();
evt.stopPropagation();

// New submission, clear old errors
errorArray = [];
newsletterErrors.style.display = 'none';
while (newsletterErrors.firstChild) {
newsletterErrors.removeChild(newsletterErrors.firstChild);
}

var email = document.getElementById('email').value;
var newsletter = document.getElementById('newsletters').value;
var privacy = document.querySelector('input[name="privacy"]:checked') ? '&privacy=true' : '';
var lang = document.getElementById('language').value;
var fmt = document.querySelector('input[name="fmt"]:checked').value;
var sourceUrl = document.getElementById('source-url').value;
var params = 'email=' + encodeURIComponent(email) +
'&newsletters=' + newsletter +
privacy +
'&lang=' + lang +
'&fmt=' + fmt +
'&source_url=' + sourceUrl;

var xhr = new XMLHttpRequest();

xhr.onload = function(r) {
if (r.target.status >= 200 && r.target.status < 300) {
// response is null if handled by service worker
if(response === null ) {
newsletterError(new Error());
return;
}
var response = r.target.response;
if (response.success === true) {
newsletterForm.style.display = 'none';
newsletterThanks();
}
else {
if(response.errors) {
for (var i = 0; i < response.errors.length; i++) {
errorArray.push(response.errors[i]);
}
}
newsletterError(new Error());
}
}
else {
newsletterError(new Error());
newsletterForm.addEventListener('submit', function(e) {
if (window.getComputedStyle(formDetails).display === 'none') {
e.preventDefault();
emailFormShowDetails();
}
};

xhr.onerror = function(e) {
newsletterError(e);
};

var url = newsletterForm.getAttribute('action');

xhr.open('POST', url, true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');
xhr.timeout = 5000;
xhr.ontimeout = newsletterError;
xhr.responseType = 'json';
xhr.send(params);

return false;
});
}
initEmailForm();

newsletterForm.addEventListener('submit', newsletterSubscribe, false);
})();
16 changes: 6 additions & 10 deletions src/patterns/organisms/newsletter/newsletter.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,18 @@ description: |
The standard newsletter subscription form.
The example below is **better viewed in isolation** on the [newsletter demo page](/demos/newsletter.html), where it can be viewed full screen.
This example only provides the essentials of the form component. Making this subscription form fully functional requires some additional functionality. See the [Basket example](https://github.com/mozilla/basket-example/) for more.
notes: |
- Some newsletters are only available in one language, so don’t require a language selection.
- This example is a fully-functional form that will attempt to subscribe any submitted address to the actual Mozilla newsletter. Use the mock addresses "success@example.com" and "failure@example.com" for testing.
---

<aside class="mzp-c-newsletter">
<div class="mzp-c-newsletter-image">
<img src="{{@root.baseurl}}/static/img/newsletter/newsletter-image.png" width="346" height="346" alt="">
</div>

<form id="newsletter-form" class="mzp-c-newsletter-form" name="newsletter-form" action="https://www.mozilla.org/en-US/newsletter/" method="post">
<input type="hidden" id="newsletters" name="newsletters" value="mozilla-foundation">
<input type="hidden" id="source-url" name="source-url" value="address of current page">

<form id="newsletter-form" class="mzp-c-newsletter-form" name="newsletter-form" action="/path/to/handler/" method="post">
<header class="mzp-c-newsletter-header">
<h3 class="mzp-c-newsletter-title">Love the Web?</h3>
<p class="mzp-c-newsletter-tagline">Get the Mozilla newsletter and help us keep it open and free.</p>
Expand Down Expand Up @@ -45,11 +43,9 @@ notes: |
<p>
<label for="language">Language</label>
<select id="language" name="lang" required aria-required="true">
<option value="de">Deutsch</option>
<option value="en" selected="selected">English</option>
<option value="es">Español</option>
<option value="fr">Français</option>
<option value="pl">Polski</option>
{{#each (data "items")}}
<option value="{{language}}">{{language}}</option>
{{/each}}
</select>
</p>

Expand Down

0 comments on commit 9a6db15

Please # to comment.