diff --git a/app/cdn/assets/_js/components/postcodeSearch.js b/app/cdn/assets/_js/components/postcodeSearch.js index 063d5f9ccb..e97e495df9 100644 --- a/app/cdn/assets/_js/components/postcodeSearch.js +++ b/app/cdn/assets/_js/components/postcodeSearch.js @@ -4,24 +4,26 @@ var OLCS = OLCS || {}; * Postcode search */ -OLCS.postcodeSearch = (function (document, $, undefined) { - "use strict"; +OLCS.postcodeSearch = (function(document, $, undefined) { + + 'use strict'; // jshint newcap:false return function init(options) { + var container = options.container; // store a list of fields considered to make up the // 'address' part of a postcode component var fields = options.fields || [ - "addressLine1", - "addressLine2", - "addressLine3", - "addressLine4", - "town", - "postcode", - "countryCode", + 'addressLine1', + 'addressLine2', + 'addressLine3', + 'addressLine4', + 'town', + 'postcode', + 'countryCode' ]; // store a list of possible root elements within which we'll render @@ -29,40 +31,38 @@ OLCS.postcodeSearch = (function (document, $, undefined) { // proximity because the first match will win var roots = [ // if we're in a modal, render in there... - ".modal__content", + '.modal__content', // ... otherwise, fall back to one of the top-level body selectors - ".js-body__main", - ".js-body", + '.js-body__main', + '.js-body' ]; - var selectClass = ".address__select"; + var selectClass = '.address__select'; - var inputSelector = container + " .js-input"; - var submitSelector = container + " button"; - var selectSelector = container + " " + selectClass; - var manualSelector = container + " .hint a"; + var inputSelector = container + ' .js-input'; + var submitSelector = container + ' button'; + var selectSelector = container + ' ' + selectClass; + var manualSelector = container + ' .hint a'; var F = OLCS.formHelper; //Does the component contain any data or errors? function isClean(component) { - var group = $(component).data("group"); + var group = $(component).data('group'); for (var i = 0, j = fields.length; i < j; i++) { var input = F(group, fields[i]); - if (input.attr("type") !== "text") { + if (input.attr('type') !== 'text') { continue; } - if (input.val() !== "") { + if (input.val() !== '') { return false; } } - return ( - $(component) - .children(".validation-wrapper") // find any errors wrappers... - .children(".field").length === 0 - ); // which *also* have direct field children + return $(component) + .children('.validation-wrapper') // find any errors wrappers... + .children('.field').length === 0; // which *also* have direct field children } // Is the component currently in its interim state of showing the @@ -73,28 +73,29 @@ OLCS.postcodeSearch = (function (document, $, undefined) { // Has the user requested to enter the address manually? function manualSpecified(component) { - return $(component).hasClass("manual-address"); + return $(component).hasClass('manual-address'); } function hasSearchField(component) { - return $(component).find(".js-find").length > 0; + return $(component).find('.js-find').length > 0; } function formatUKPostcode(element) { - var val = element.val().toUpperCase(); + var val = element.val().toUpperCase(); element.val(val); var parts = val.match(/^([A-Z]{1,2}\d{1,2}[A-Z]?)\s*(\d[A-Z]{2})$/); - if (val.indexOf(" ") >= 0) { + if (val.indexOf(' ') >= 0) { return; } else if (parts) { parts.shift(); - element.val(parts.join(" ")); + element.val(parts.join(' ')); } else { return; } + } // Work out what our most appropriate root element is in which @@ -119,13 +120,13 @@ OLCS.postcodeSearch = (function (document, $, undefined) { if (root !== null) { return root; } - throw new Error("No valid root selector found"); + throw new Error('No valid root selector found'); } // Handle either the click of the 'find' button or the change // of the 'select' input; either way, we perform the same action function handleInput(selector) { - return function (e) { + return function(e) { e.preventDefault(); // we have to prevent this event bubbling; not only to ancestors @@ -136,9 +137,9 @@ OLCS.postcodeSearch = (function (document, $, undefined) { e.stopImmediatePropagation(); var fieldset = $(this).parents(container); - var button = fieldset.find(selector); - var form = fieldset.parents("form"); - var input = fieldset.find(".js-input"); + var button = fieldset.find(selector); + var form = fieldset.parents('form'); + var input = fieldset.find('.js-input'); // ensure the backend knows which button was pressed F.pressButton(form, button); @@ -149,28 +150,27 @@ OLCS.postcodeSearch = (function (document, $, undefined) { OLCS.submitForm({ form: form, - success: OLCS.normaliseResponse(function (response) { + success: OLCS.normaliseResponse(function(response) { var root = getRootSelector(fieldset); F.render(root, response.body); - if (response.hasErrors === false) { + if(response.hasErrors === false) { var rootElem = document.querySelector(root); - var fieldsetSelector = 'fieldset[data-group="' + fieldset[0].getAttribute("data-group") + '"]'; + var fieldsetSelector = 'fieldset[data-group="' + fieldset[0].getAttribute('data-group') + '"]'; var fieldSetElement = rootElem.querySelector(fieldsetSelector); - var selectElement = fieldSetElement.querySelector(".address__select select"); + var selectElement = fieldSetElement.querySelector('.address__select select'); if (null === selectElement) { - var nextInputElement = fieldSetElement.querySelector( - 'input:not([type="hidden"]):not([id^="postcodeInput"])', - ); + var nextInputElement = fieldSetElement.querySelector('input:not([type="hidden"]):not([id^="postcodeInput"])'); nextInputElement.focus(); } else { selectElement.focus(); } } }), - error: OLCS.normaliseResponse(function () { + error: OLCS.normaliseResponse(function() { lookupError(); }), }); + }; } @@ -178,7 +178,7 @@ OLCS.postcodeSearch = (function (document, $, undefined) { // and initialise their state. We call this on initialisation and on // each render to keep things in sync function setup() { - $(container).each(function (i, component) { + $(container).each(function(i, component) { if (!hasSearchField(component)) { return; } @@ -188,10 +188,10 @@ OLCS.postcodeSearch = (function (document, $, undefined) { if ((inProgress(component) || isClean(component)) && !manualSpecified(component)) { // this selector looks a bit loose but it works fine; we use children // rather than find which is equivalent to foo > bar. - $(component).children(".field").hide(); + $(component).children('.field').hide(); } else { // otherwise we hide the 'enter address manually' button - $(component).find(".hint").hide(); + $(component).find('.hint').hide(); } }); } @@ -199,55 +199,59 @@ OLCS.postcodeSearch = (function (document, $, undefined) { // if we can't connect to the postcode API we need to let the user know function lookupError() { $(selectClass).hide(); - $(".postcode-connectionLost").removeClass("govuk-visually-hidden"); + $('.postcode-connectionLost').removeClass('govuk-visually-hidden'); // Remove form__action if defined; else submitting the form will result in another lookup and potential error. $(container) - .closest("form") // Traverse up to the nearest parent form - .find(".form__action") // Find the form__action + .closest('form') // Traverse up to the nearest parent form + .find('.form__action') // Find the form__action .first() .remove(); } // Ensure any time the page is re-rendered we resolve our components' state // properly - OLCS.eventEmitter.on("render", setup); + OLCS.eventEmitter.on('render', setup); // when we click 'find'... - $(document).on("click", submitSelector, function (e) { - $(this).addClass("js-active"); - handleInput(".js-find").call(this, e); + $(document).on('click', submitSelector, function(e) { + $(this).addClass('js-active'); + handleInput('.js-find').call(this, e); }); // or we hit enter within the postcode input... - $(document).on("keypress", inputSelector, function (e) { + $(document).on('keypress', inputSelector, function(e) { // keyCode is normalised; 13 is always enter if (e.keyCode === 13) { // we need .call here because it relies on 'this' for context - handleInput(".js-find").call(this, e); + handleInput('.js-find').call(this, e); } }); // when we select an address from the dropdown... - $(document).on("change", selectSelector, function (e) { - $(this).closest(".field").prev(".field").find(".js-find").addClass("js-active"); - - handleInput(".js-select").call(this, e); + $(document).on('change', selectSelector, function(e) { + $(this) + .closest('.field') + .prev('.field') + .find('.js-find') + .addClass('js-active'); + + handleInput('.js-select').call(this, e); }); // when we click the 'enter address manualy' button... - $(document).on("click", manualSelector, function (e) { + $(document).on('click', manualSelector, function(e) { e.preventDefault(); var fieldset = $(this).parents(container); // We add a class to the parent to let the component know we // are entering the address manually - fieldset.addClass("manual-address"); + fieldset.addClass('manual-address'); // we have to show our pristine address fields - var inputs = fieldset.children(".field"); - inputs.find("[type=text]").val(""); + var inputs = fieldset.children('.field'); + inputs.find('[type=text]').val(''); inputs.show(); // ditch the address options, if present... @@ -256,5 +260,7 @@ OLCS.postcodeSearch = (function (document, $, undefined) { // and finally, remove this button's container $(this).parent().hide(); }); + }; -})(document, window.jQuery); + +}(document, window.jQuery));