diff --git a/app/assets/javascripts/core.js b/app/assets/javascripts/core.js deleted file mode 100644 index 50eed1d1d..000000000 --- a/app/assets/javascripts/core.js +++ /dev/null @@ -1,30 +0,0 @@ -$(document).ready(function () { - $('.print-link a').attr('target', '_blank') - - var $searchFocus = $('.js-search-focus') - $searchFocus.each(function (i, el) { - if ($(el).val() !== '') { - $(el).addClass('focus') - } - }) - - $searchFocus.on('focus', function (e) { - $(e.target).addClass('focus') - }) - - $searchFocus.on('blur', function (e) { - if ($(e.target).val() === '') { - $(e.target).removeClass('focus') - } - }) - - if (window.GOVUK) { - // for radio buttons and checkboxes - var buttonsSelector = "label.selectable input[type='radio'], label.selectable input[type='checkbox']" - new GOVUK.SelectionButtons(buttonsSelector) // eslint-disable-line no-new - - if (GOVUK.shimLinksWithButtonRole) { - GOVUK.shimLinksWithButtonRole.init() - } - } -}) diff --git a/app/assets/javascripts/header-footer-only.js b/app/assets/javascripts/header-footer-only.js index de0fa4653..fce047065 100644 --- a/app/assets/javascripts/header-footer-only.js +++ b/app/assets/javascripts/header-footer-only.js @@ -2,7 +2,4 @@ //= require vendor/polyfills/bind //= require analytics //= require start-modules -//= require govuk/selection-buttons -//= require govuk/shim-links-with-button-role //= require govuk_publishing_components/components/layout-header -//= require core diff --git a/app/assets/javascripts/modules/sticky-element-container.js b/app/assets/javascripts/modules/sticky-element-container.js deleted file mode 100644 index 22daeb380..000000000 --- a/app/assets/javascripts/modules/sticky-element-container.js +++ /dev/null @@ -1,117 +0,0 @@ -/* - This module will cause a child in the target element to: - - hide when the top of the target element is visible; - - stick to the bottom of the window while the parent element is in view; - - stick to the bottom of the target when the user scrolls past the bottom. - - Use 'data-module="sticky-element-container"' to instantiate, and add - `[data-sticky-element]` to the child you want to position. -*/ -(function (Modules, root) { - 'use strict' - - var $ = root.$ - var $window = $(root) - - Modules.StickyElementContainer = function () { - var self = this - - self._getWindowDimensions = function _getWindowDimensions () { - return { - height: $window.height(), - width: $window.width() - } - } - - self._getWindowPositions = function _getWindowPositions () { - return { - scrollTop: $window.scrollTop() - } - } - - self.start = function start ($el) { - var $element = $el.find('[data-sticky-element]') - var _hasResized = true - var _hasScrolled = true - var _interval = 50 - var _windowVerticalPosition = 1 - var _startPosition, _stopPosition - - initialise() - - function initialise () { - $window.resize(onResize) - $window.scroll(onScroll) - setInterval(checkResize, _interval) - setInterval(checkScroll, _interval) - checkResize() - checkScroll() - $element.addClass('govuk-sticky-element--enabled') - } - - function onResize () { - _hasResized = true - } - - function onScroll () { - _hasScrolled = true - } - - function checkResize () { - if (_hasResized) { - _hasResized = false - _hasScrolled = true - - var windowDimensions = self._getWindowDimensions() - _startPosition = $el.offset().top - _stopPosition = $el.offset().top + $el.height() - windowDimensions.height - } - } - - function checkScroll () { - if (_hasScrolled) { - _hasScrolled = false - - _windowVerticalPosition = self._getWindowPositions().scrollTop - - updateVisibility() - updatePosition() - } - } - - function updateVisibility () { - var isPastStart = _startPosition < _windowVerticalPosition - if (isPastStart) { - show() - } else { - hide() - } - } - - function updatePosition () { - var isPastEnd = _stopPosition < _windowVerticalPosition - if (isPastEnd) { - stickToParent() - } else { - stickToWindow() - } - } - - function stickToWindow () { - $element.addClass('govuk-sticky-element--stuck-to-window') - } - - function stickToParent () { - $element.removeClass('govuk-sticky-element--stuck-to-window') - } - - function show () { - $element.removeClass('govuk-sticky-element--hidden') - } - - function hide () { - $element.addClass('govuk-sticky-element--hidden') - } - } - } -})(window.GOVUK.Modules, window) diff --git a/app/assets/javascripts/modules/toggle.js b/app/assets/javascripts/modules/toggle.js deleted file mode 100644 index d503369bf..000000000 --- a/app/assets/javascripts/modules/toggle.js +++ /dev/null @@ -1,64 +0,0 @@ -/* - Toggle the display of elements - - Use `data-controls` and `data-expanded` to indicate the - starting state and the IDs of the elements that the toggle - controls. This is synonymous with ARIA attributes, which - get added when starting. -*/ -(function (Modules) { - 'use strict' - - Modules.Toggle = function () { - this.start = function ($el) { - var toggleSelector = '[data-controls][data-expanded]' - - $el.on('click', toggleSelector, toggle) - $el.find(toggleSelector).each(addAriaAttrs) - - // Add the ARIA attributes with JavaScript - // If the JS fails and there's no interactive elements, having - // no aria attributes is an accurate representation. - function addAriaAttrs () { - var $toggle = $(this) - $toggle.attr('role', 'button') - $toggle.attr('aria-controls', $toggle.data('controls')) - $toggle.attr('aria-expanded', $toggle.data('expanded')) - - var $targets = getTargetElements($toggle) - $targets.attr('aria-live', 'polite') - $targets.attr('role', 'region') - $toggle.data('$targets', $targets) - } - - function toggle (event) { - var $toggle = $(event.target) - var expanded = $toggle.attr('aria-expanded') === 'true' - var $targets = $toggle.data('$targets') - - if (expanded) { - $toggle.attr('aria-expanded', false) - $targets.addClass('js-hidden') - } else { - $toggle.attr('aria-expanded', true) - $targets.removeClass('js-hidden') - } - - var toggledText = $toggle.data('toggled-text') - if (typeof toggledText === 'string') { - $toggle.data('toggled-text', $toggle.text()) - $toggle.text(toggledText) - } - - event.preventDefault() - } - - function getTargetElements ($toggle) { - var ids = $toggle.attr('aria-controls').split(' ') - var selector = '#' + ids.join(', #') - - return $el.find(selector) - } - } - } -})(window.GOVUK.Modules) diff --git a/app/assets/javascripts/modules/track-click.js b/app/assets/javascripts/modules/track-click.js deleted file mode 100644 index 9f39ac9ab..000000000 --- a/app/assets/javascripts/modules/track-click.js +++ /dev/null @@ -1,54 +0,0 @@ -window.GOVUK.Modules = window.GOVUK.Modules || {}; - -(function (Modules) { - 'use strict' - - Modules.TrackClick = function () { - this.start = function (element) { - var trackable = '[data-track-category][data-track-action]' - - if (element.is(trackable)) { - element.on('click', trackClick) - } else { - element.on('click', trackable, trackClick) - } - - function trackClick (evt) { - var $el = $(evt.target) - var options = { transport: 'beacon' } - - if (!$el.is(trackable)) { - $el = $el.parents(trackable) - } - - var category = $el.attr('data-track-category') - var action = $el.attr('data-track-action') - var label = $el.attr('data-track-label') - var value = $el.attr('data-track-value') - var dimension = $el.attr('data-track-dimension') - var dimensionIndex = $el.attr('data-track-dimension-index') - var extraOptions = $el.attr('data-track-options') - - if (label) { - options.label = label - } - - if (value) { - options.value = value - } - - if (dimension && dimensionIndex) { - options['dimension' + dimensionIndex] = dimension - } - - if (extraOptions) { - $.extend(options, JSON.parse(extraOptions)) - } - - if (GOVUK.analytics && GOVUK.analytics.trackEvent) { - GOVUK.analytics.trackEvent(category, action, options) - } - } - } - } -})(window.GOVUK.Modules) diff --git a/app/assets/javascripts/start-modules.js b/app/assets/javascripts/start-modules.js index db5d46074..6747295d7 100644 --- a/app/assets/javascripts/start-modules.js +++ b/app/assets/javascripts/start-modules.js @@ -1,10 +1,8 @@ -// = require govuk_publishing_components/modules -// = require govuk_publishing_components/components/cookie-banner -// = require modules/global-bar -// = require modules/sticky-element-container -// = require modules/toggle -// = require modules/track-click -// = require modules/cross-domain-tracking +//= require govuk_publishing_components/modules +//= require govuk_publishing_components/components/cookie-banner +//= require govuk_publishing_components/lib/track-click +//= require modules/global-bar +//= require modules/cross-domain-tracking $(document).ready(function () { GOVUK.modules.start() diff --git a/app/assets/stylesheets/header-footer-only.scss b/app/assets/stylesheets/header-footer-only.scss index af453bc9e..414613232 100644 --- a/app/assets/stylesheets/header-footer-only.scss +++ b/app/assets/stylesheets/header-footer-only.scss @@ -26,12 +26,6 @@ $govuk-use-legacy-palette: false; @import "helpers/footer"; @import "helpers/header"; @import "helpers/emergency-banner"; -@import "modules/*"; - -// This should be a component in the future. As the JavaScript and current -// implementation existing in multiple apps would need to be updated to make -// that change just make it available globally for the moment. -@import "helpers/selectable"; // The following overrides are in place to allow the govuk-header play nicely // with govuk_template in our attempt to show account navigation in certain apps diff --git a/app/assets/stylesheets/helpers/_selectable.scss b/app/assets/stylesheets/helpers/_selectable.scss deleted file mode 100644 index 1789b6f91..000000000 --- a/app/assets/stylesheets/helpers/_selectable.scss +++ /dev/null @@ -1,63 +0,0 @@ -// Large hit area -// Radio buttons & checkboxes - -//scoped to label to reduce the possibility of class name clash - -// stylelint-disable selector-no-qualifying-type -label.selectable { - display: block; - float: none; - clear: left; - position: relative; - - background: $panel-colour; - border: 1px solid $panel-colour; - padding: (govuk-spacing(4) govuk-spacing(6) govuk-spacing(3) govuk-spacing(5)); - margin-top: govuk-spacing(2); - margin-bottom: govuk-spacing(2); - - cursor: pointer; // Encourage clicking on block labels - - @include govuk-media-query($from: tablet) { - float: left; - margin-top: govuk-spacing(1); - margin-bottom: govuk-spacing(1); - } - - &:hover { - border-color: $black; - } - - // Position checkbox within label, to allow text to wrap - input { - position: absolute; - top: 18px; - left: govuk-spacing(3); - cursor: pointer; - } - - // Use inline, to sit block labels next to each other - .inline & { - clear: none; - margin-right: govuk-spacing(3); - } - - // Only if JavaScript is enabled - .js-enabled & { - // Remove focus styles from radio and checkbox inputs - input:focus { - outline: none; - } - - // Add selected state to block labels - &.selected { - background: $white; - border-color: $black; - } - - // Add focus styles to block labels - &.focused { - outline: 3px solid $yellow; - } - } -} diff --git a/app/assets/stylesheets/modules/_sticky-element-container.scss b/app/assets/stylesheets/modules/_sticky-element-container.scss deleted file mode 100644 index 418fc6567..000000000 --- a/app/assets/stylesheets/modules/_sticky-element-container.scss +++ /dev/null @@ -1,23 +0,0 @@ -.js-enabled .govuk-sticky-element { - position: absolute; - bottom: 0; - - &--stuck-to-window { - bottom: 0; - position: fixed; - } - - &--enabled { - @include transition (opacity, .3s, ease); - opacity: 1; - - @include govuk-media-query($until: tablet) { - position: static; - } - } - - &--hidden { - opacity: 0; - pointer-events: none; - } -} diff --git a/app/views/layouts/govuk_template.html.erb b/app/views/layouts/govuk_template.html.erb index 55687cc8b..85f6e5dbe 100644 --- a/app/views/layouts/govuk_template.html.erb +++ b/app/views/layouts/govuk_template.html.erb @@ -56,7 +56,7 @@ title="<%= content_for?(:logo_link_title) ? yield(:logo_link_title) : "Go to the GOV.UK homepage" %>" class="content govuk-header__link govuk-header__link--homepage" id="logo" - data-module="track-click" + data-module="gem-track-click" data-track-category="homeLinkClicked" data-track-action="homeHeader"> diff --git a/app/views/root/_base.html.erb b/app/views/root/_base.html.erb index a2ac167f6..f84924b13 100644 --- a/app/views/root/_base.html.erb +++ b/app/views/root/_base.html.erb @@ -75,7 +75,7 @@ <% content_for :footer_top do %> <% unless local_assigns[:hide_footer_links] %> -
+

Coronavirus (COVID-19)

    @@ -105,7 +105,7 @@
-
+

Services and information

diff --git a/spec/javascripts/modules/sticky-element-container.spec.js b/spec/javascripts/modules/sticky-element-container.spec.js deleted file mode 100644 index e841d91b7..000000000 --- a/spec/javascripts/modules/sticky-element-container.spec.js +++ /dev/null @@ -1,63 +0,0 @@ -describe('A sticky-element-container module', function () { - 'use strict' - - var GOVUK = window.GOVUK - var $ = window.$ - var instance - - beforeEach(function () { - instance = new GOVUK.Modules.StickyElementContainer() - }) - - describe('in a large parent element', function () { - var $element = $( - '
' + - '
' + - 'Content' + - '
' + - '
' - ) - var $footer = $element.find('[data-sticky-element]') - - describe('on desktop', function () { - beforeEach(function () { - instance._getWindowDimensions = function () { - return { - height: 768, - width: 1024 - } - } - }) - - it('hides the element, when scrolled at the top', function () { - instance.start($element) - - expect($footer.hasClass('govuk-sticky-element--hidden')).toBe(true) - }) - - it('shows the element, stuck to the window, when scrolled in the middle', function () { - instance._getWindowPositions = function () { - return { - scrollTop: 5000 - } - } - instance.start($element) - - expect($footer.hasClass('govuk-sticky-element--hidden')).toBe(false) - expect($footer.hasClass('govuk-sticky-element--stuck-to-window')).toBe(true) - }) - - it('shows the element, stuck to the parent, when scrolled at the bottom', function () { - instance._getWindowPositions = function () { - return { - scrollTop: 9800 - } - } - instance.start($element) - - expect($footer.hasClass('govuk-sticky-element--hidden')).toBe(false) - expect($footer.hasClass('govuk-sticky-element--stuck-to-window')).toBe(false) - }) - }) - }) -}) diff --git a/spec/javascripts/modules/toggle.spec.js b/spec/javascripts/modules/toggle.spec.js deleted file mode 100644 index ee67fb93d..000000000 --- a/spec/javascripts/modules/toggle.spec.js +++ /dev/null @@ -1,88 +0,0 @@ -describe('A toggle module', function () { - 'use strict' - - var toggle - - beforeEach(function () { - toggle = new GOVUK.Modules.Toggle() - }) - - describe('when starting', function () { - var element = $( - '
' + - 'Toggle' + - '
Target
' + - '
' - ) - - it('adds aria attributes to toggles', function () { - toggle.start(element) - - var $toggle = element.find('.my-toggle') - expect($toggle.attr('role')).toBe('button') - expect($toggle.attr('aria-expanded')).toBe('false') - expect($toggle.attr('aria-controls')).toBe('target') - }) - }) - - describe('when clicking a toggle', function () { - var element - - beforeEach(function () { - element = $( - '
' + - 'Toggle' + - '
Target
' + - '
' - ) - - toggle.start(element) - element.find('.my-toggle').trigger('click') - }) - - it('toggles the display of a target', function () { - expect(element.find('#target').is('.js-hidden')).toBe(false) - element.find('.my-toggle').trigger('click') - expect(element.find('#target').is('.js-hidden')).toBe(true) - }) - - it('updates the aria-expanded attribute on the toggle', function () { - expect(element.find('.my-toggle').attr('aria-expanded')).toBe('true') - - element.find('.my-toggle').trigger('click') - expect(element.find('.my-toggle').attr('aria-expanded')).toBe('false') - }) - - it('updates the text shown in the toggle link when expanded if such text is supplied', function () { - expect(element.find('.my-toggle').data('toggled-text')).toBe('Toggle') - expect(element.find('.my-toggle').text()).toBe('Show fewer') - element.find('.my-toggle').trigger('click') - expect(element.find('.my-toggle').data('toggled-text')).toBe('Show fewer') - expect(element.find('.my-toggle').text()).toBe('Toggle') - }) - }) - - describe('when clicking a toggle that controls multiple targets', function () { - it('toggles the display of each target', function () { - var element = $( - '
' + - 'Toggle' + - '
Target
' + - '
Another target
' + - '
' - ) - - toggle.start(element) - expect(element.find('#target').is('.js-hidden')).toBe(true) - expect(element.find('#another-target').is('.js-hidden')).toBe(true) - - element.find('.my-toggle').trigger('click') - expect(element.find('#target').is('.js-hidden')).toBe(false) - expect(element.find('#another-target').is('.js-hidden')).toBe(false) - - element.find('.my-toggle').trigger('click') - expect(element.find('#target').is('.js-hidden')).toBe(true) - expect(element.find('#another-target').is('.js-hidden')).toBe(true) - }) - }) -}) diff --git a/spec/javascripts/modules/track-click.spec.js b/spec/javascripts/modules/track-click.spec.js deleted file mode 100644 index d99a75016..000000000 --- a/spec/javascripts/modules/track-click.spec.js +++ /dev/null @@ -1,195 +0,0 @@ -describe('A click tracker', function () { - 'use strict' - - var GOVUK = window.GOVUK - var tracker, - element - - beforeEach(function () { - tracker = new GOVUK.Modules.TrackClick() - }) - - it('tracks click events using "beacon" as transport', function () { - GOVUK.analytics = { trackEvent: function () {} } - spyOn(GOVUK.analytics, 'trackEvent') - - element = $( - '
' + - 'Bar!' + - '
' - ) - - tracker.start(element) - - element.trigger('click') - - expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('category', 'action', { label: 'Foo', transport: 'beacon' }) - }) - - it('tracks clicks with custom dimensions', function () { - GOVUK.analytics = { trackEvent: function () {} } - spyOn(GOVUK.analytics, 'trackEvent') - - element = $( - 'Home' - ) - - tracker.start(element) - - element.trigger('click') - - expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith( - 'category', - '1', - { label: '/', dimension29: 'dimension-value', transport: 'beacon' } - ) - }) - - it('does not set dimension if dimension is not present', function () { - GOVUK.analytics = { trackEvent: function () {} } - spyOn(GOVUK.analytics, 'trackEvent') - - element = $( - '
' + - 'Bar!' + - '
' - ) - - tracker.start(element) - - element.trigger('click') - - expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('category', 'action', { label: 'Foo', transport: 'beacon' }) - }) - - it('does not set dimension if dimension index is not present', function () { - GOVUK.analytics = { trackEvent: function () {} } - spyOn(GOVUK.analytics, 'trackEvent') - - element = $( - '
' + - 'Bar!' + - '
' - ) - - tracker.start(element) - - element.trigger('click') - - expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('category', 'action', { label: 'Foo', transport: 'beacon' }) - }) - - it('tracks clicks with values', function () { - GOVUK.analytics = { trackEvent: function () {} } - spyOn(GOVUK.analytics, 'trackEvent') - - element = $( - 'Home' - ) - - tracker.start(element) - - element.trigger('click') - - expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith( - 'category', - '1', - { label: '/', value: '9', transport: 'beacon' } - ) - }) - - it('tracks clicks with arbitrary JSON', function () { - GOVUK.analytics = { trackEvent: function () {} } - spyOn(GOVUK.analytics, 'trackEvent') - - element = $( - 'Home' - ) - - tracker.start(element) - - element.trigger('click') - - expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith( - 'category', - '1', - { label: '/', dimension28: 'foo', dimension29: 'bar', transport: 'beacon' } - ) - }) - - it('tracks all trackable links within a container', function () { - GOVUK.analytics = { trackEvent: function () {} } - spyOn(GOVUK.analytics, 'trackEvent') - - element = $( - '
' + - '' + - 'Link 1' + - '' + - '' + - 'Link 2' + - '' + - '' + - '
' - ) - - tracker.start(element) - - element.find('.nothing').trigger('click') - expect(GOVUK.analytics.trackEvent).not.toHaveBeenCalled() - - element.find('a.first').trigger('click') - expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('cat1', 'action1', { label: 'label1', transport: 'beacon' }) - - element.find('a.second').trigger('click') - expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('cat2', 'action2', { label: 'label2', transport: 'beacon' }) - }) - - it('tracks a click correctly when event target is a child element of trackable element', function () { - GOVUK.analytics = { trackEvent: function () {} } - spyOn(GOVUK.analytics, 'trackEvent') - - element = $( - '' - ) - - tracker.start(element) - - element.find('.child-of-link').trigger('click') - expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('parent-category', 'parent-action', { label: 'parent-label', transport: 'beacon' }) - }) -})