/** * Cookie directive banner. * * A banner appended to the top of the page that informs the user whether they would like to accept all cookies * or instead be taken to the page that allows them to choose them. */ $(function () { /** * Cookie directive banner markup and text for both English and Welsh. * * @type {{cy: ([]|jQuery), en: ([]|jQuery)}} */ var $cookieBanner = { en: $(''), cy: $('') }; /** * Success message banner to be shown after accepting all cookies. * * @type {{cy: ([]|jQuery), en: ([]|jQuery)}} */ var $cookieBannerSuccess = { en: $(''), cy: $('') }; // Append the banner before the navigation skip links so that it is the first thing that assistive technology // can find. if (!window.legGlobals.cookiePolicy.isSet()) { $('#top') .after($cookieBanner[LANG]); } var isCookiePolicyPage = window.location.pathname.split('/').pop() === 'cookiepolicy'; // Event listeners are placed on the body (and use event bubbling) to prevent duplication of listeners on // different language banners. $('body') .on('click', function (event) { var $target = $(event.target); // User has accepted all cookies if ($target.hasClass('accept-all-cookies')) { window.legGlobals.cookiePolicy.setValues(true, true); $('body').trigger('cookie.preferences.saved.banner'); bannerActions(); } // User has rejected all cookies if ($target.hasClass('reject-all-cookies')) { window.legGlobals.cookiePolicy.setValues(false, false); bannerActions(); } if ($target.hasClass('dismiss-banner')) { $cookieBannerSuccess[LANG] .slideUp(); } }); bannerActions = function() { // Remove the cookie banner and replace with a success message. $cookieBanner[LANG] .slideUp(function () { $(this).remove(); $('#top') .after($cookieBannerSuccess[LANG]); $cookieBannerSuccess[LANG] .hide(); $cookieBannerSuccess[LANG] .slideDown(); }); } if (isCookiePolicyPage) { $cookieBanner[LANG] .find('.cookie-policy-link') .on('click', function (e) { e.preventDefault(); $('html,body') .animate({ scrollTop: $('#pageTitle').offset().top }, 'fast'); }); // If the cookie preferences form is saved then show the success message. $('body') .on('cookie.preferences.saved', function () { $cookieBanner[LANG].remove(); $('#top') .after($cookieBannerSuccess[LANG]); $cookieBannerSuccess[LANG].show(); }); } // If cookies are not accepted then images are injected onto the site for server-side analytics if (!window.legGlobals.cookiePolicy.userSet) { $('body').append(''); } else if (!window.legGlobals.cookiePolicy.analytics) { $('body').append(''); } }); /** * Cookie directive page form. * * Injects form elements onto the page for cookie preferences to be collected and set via JS *only*. * * Requires a
with the ID of "cookie-preferences-management" to be available. In this form there should be * elements matching the selectors: * - .cookie-form-hook.settings-cookies * - .cookie-form-hook.analytics-cookies * - .cookie-form-hook.essential-cookies * * Will not be added to any page other than the urls: * - /cookiepolicy * - /cy/cookiepolicy * */ $(function () { // Only run this script if we are on the cookie policy page. if (window.location.pathname.split('/').pop() !== 'cookiepolicy') { return; } /** * Create & return a jQuery radio button element and associated label. * * @param {boolean} isSelected * Whether this element should be selected/checked. * @param {string|boolean} value * The value that the radio should have. * @param {string} name * The name of the input group. * @param {string} id * Input ID. * @param {string} label * Text label associated with element. * @returns {jQuery} * Newly created radio button jQuery element. */ function createRadioElement(isSelected, value, name, id, label) { var $el = $(''); var $input = $(''); var $label = $(''); $label .attr('for', id); $input .attr('name', name) .attr('id', id) .attr('value', value); if (isSelected) { $input.attr('checked', 'checked'); } $el .append($input) .append($label); return $el; } /** * Create the form elements and event handler to save cookie preferences individually. */ function createForm() { var preferences = window.legGlobals.cookiePolicy.getCookie() || {}; var isSet = window.legGlobals.cookiePolicy.isSet(); var $form = $('#cookie-preferences-management'); var $settingsSection = $form.find('.cookie-form-hook.settings-cookies'); var $analyticsSection = $form.find('.cookie-form-hook.analytics-cookies'); // Create the radio buttons and append them to the appropriate portion of the page. var settingsEls = [ createRadioElement((isSet) ? preferences.settings : false, true, 'cookie-settings', 'cookie-settings-accept', 'Use cookies that remember my settings on legislation.gov.uk'), createRadioElement((isSet) ? !preferences.settings : false, false, 'cookie-settings', 'cookie-settings-reject', 'Do not use cookies that remember my settings on legislation.gov.uk') ]; var analyticsEls = [ createRadioElement((isSet) ? preferences.analytics : false, true, 'cookie-analytics', 'cookie-analytics-accept', 'Use cookies that help the Legislation team understand how people use legislation.gov.uk'), createRadioElement((isSet) ? !preferences.analytics : false, false, 'cookie-analytics', 'cookie-analytics-reject', 'Do not use cookies that help the Legislation team understand how people use legislation.gov.uk') ] $.each(settingsEls, function (idx, $el) { $settingsSection.append($el); }); $.each(analyticsEls, function (idx, $el) { $analyticsSection.append($el); }); // Create the button that submits the form. var $button = $('').appendTo($form); // If the settings are updated by the banner then update the radios on the page. $('body').on('cookie.preferences.saved.banner', function () { preferences = window.legGlobals.cookiePolicy.getCookie(); $('#cookie-settings-accept').prop('checked', preferences.settings); $('#cookie-settings-reject').prop('checked', !preferences.settings); $('#cookie-analytics-accept').prop('checked', preferences.analytics); $('#cookie-analytics-reject').prop('checked', !preferences.analytics); }); $button .text(window.config.cookieFormSave[LANG]) .on('click', function (e) { e.preventDefault(); var userPreferences = {}; $.each($('#cookie-preferences-management').serializeArray(), function (idx, setting) { userPreferences[setting.name.split('-').pop()] = setting.value === 'true'; }); window.legGlobals.cookiePolicy.setValues( userPreferences.analytics, userPreferences.settings ); // Inform the banner that the preferences have been updated. $('body').trigger('cookie.preferences.saved'); $('html, body').animate({scrollTop: 0}, 'fast'); }); } /** * Remove the non-JS messaging to prevent confusing messages. */ function removeNonJsMessaging() { $('.cookie-form-hook').find('.no-js').remove(); } // Initialisation createForm(); removeNonJsMessaging(); }); /** * Cookie page expand/collapse headers. * * The functionality for these expand and collapse section headers is unique as they are injected into the page * so this custom code manages this. */ $(function () { /** * Inject and expand/collapse link into the text when a heading doesn't already exist. * * @param {{show: string, hide: string}} text * @param {string} targetSelector * @returns {jQuery} */ function createExpandCollapseLink(text, targetSelector) { var $button = $(''); var $target = $(targetSelector); var isHidden = true; var isAnimating = false; // Hide the target element by default $target.hide(); $button.on('click', function (e) { e.preventDefault(); if (isAnimating) { return; } // Set the state of the animation and end state. isAnimating = true; isHidden = !isHidden; $button .html(isHidden ? text.show : text.hide) .toggleClass('close'); $target.slideToggle(400, function () { isAnimating = false; }); }); return $button; } // @todo these text strings to be brought out into the EN/CY translation block $('.details.settings-cookies') .before(createExpandCollapseLink({ show: window.config.cookieShowHideTable.settings.show[LANG], hide: window.config.cookieShowHideTable.settings.hide[LANG] }, '.details.settings-cookies')); $('.details.analytics-cookies') .before(createExpandCollapseLink({ show: window.config.cookieShowHideTable.analytics.show[LANG], hide: window.config.cookieShowHideTable.analytics.hide[LANG] }, '.details.analytics-cookies')); $('.details.essential-cookies') .before(createExpandCollapseLink({ show: window.config.cookieShowHideTable.essential.show[LANG], hide: window.config.cookieShowHideTable.essential.hide[LANG] }, '.details.essential-cookies')) });