govuk_publishing_components 24.21.1 → 25.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/javascripts/govuk_publishing_components/analytics.js +2 -0
- data/app/assets/javascripts/govuk_publishing_components/{lib → analytics}/track-click.js +0 -0
- data/app/assets/javascripts/govuk_publishing_components/{lib/select.js → analytics/track-select-change.js} +0 -0
- data/app/assets/javascripts/govuk_publishing_components/components/intervention.js +16 -0
- data/app/assets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js +234 -40
- data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement.js +6 -0
- data/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js +34 -5
- data/app/assets/javascripts/govuk_publishing_components/modules.js +11 -17
- data/app/assets/stylesheets/govuk_publishing_components/component_support.scss +0 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/_intervention.scss +12 -10
- data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss +606 -41
- data/app/assets/stylesheets/govuk_publishing_components/components/_notice.scss +2 -17
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss +5 -0
- data/app/views/govuk_publishing_components/components/_fieldset.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_input.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_intervention.html.erb +26 -8
- data/app/views/govuk_publishing_components/components/_label.html.erb +6 -4
- data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb +265 -63
- data/app/views/govuk_publishing_components/components/_notice.html.erb +19 -13
- data/app/views/govuk_publishing_components/components/_radio.html.erb +5 -6
- data/app/views/govuk_publishing_components/components/_search.html.erb +11 -3
- data/app/views/govuk_publishing_components/components/_select.html.erb +3 -1
- data/app/views/govuk_publishing_components/components/_summary_list.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_title.html.erb +14 -7
- data/app/views/govuk_publishing_components/components/docs/notice.yml +15 -0
- data/app/views/govuk_publishing_components/components/docs/radio.yml +4 -15
- data/app/views/govuk_publishing_components/components/docs/search.yml +5 -0
- data/app/views/govuk_publishing_components/components/docs/title.yml +7 -12
- data/config/locales/ar.yml +5 -3
- data/config/locales/az.yml +5 -3
- data/config/locales/be.yml +5 -3
- data/config/locales/bg.yml +5 -3
- data/config/locales/bn.yml +5 -3
- data/config/locales/cs.yml +5 -3
- data/config/locales/cy.yml +8 -6
- data/config/locales/da.yml +5 -3
- data/config/locales/de.yml +5 -3
- data/config/locales/dr.yml +5 -3
- data/config/locales/el.yml +5 -3
- data/config/locales/en.yml +91 -84
- data/config/locales/es-419.yml +5 -3
- data/config/locales/es.yml +5 -3
- data/config/locales/et.yml +5 -3
- data/config/locales/fa.yml +5 -3
- data/config/locales/fi.yml +5 -3
- data/config/locales/fr.yml +5 -3
- data/config/locales/gd.yml +5 -3
- data/config/locales/gu.yml +5 -3
- data/config/locales/he.yml +5 -3
- data/config/locales/hi.yml +5 -3
- data/config/locales/hr.yml +5 -3
- data/config/locales/hu.yml +5 -3
- data/config/locales/hy.yml +5 -3
- data/config/locales/id.yml +5 -3
- data/config/locales/is.yml +5 -3
- data/config/locales/it.yml +5 -3
- data/config/locales/ja.yml +5 -3
- data/config/locales/ka.yml +5 -3
- data/config/locales/kk.yml +5 -3
- data/config/locales/ko.yml +5 -3
- data/config/locales/lt.yml +5 -3
- data/config/locales/lv.yml +5 -3
- data/config/locales/ms.yml +5 -3
- data/config/locales/mt.yml +5 -3
- data/config/locales/nl.yml +5 -3
- data/config/locales/no.yml +5 -3
- data/config/locales/pa-pk.yml +5 -3
- data/config/locales/pa.yml +5 -3
- data/config/locales/pl.yml +5 -3
- data/config/locales/ps.yml +5 -3
- data/config/locales/pt.yml +5 -3
- data/config/locales/ro.yml +5 -3
- data/config/locales/ru.yml +5 -3
- data/config/locales/si.yml +5 -3
- data/config/locales/sk.yml +5 -3
- data/config/locales/sl.yml +5 -3
- data/config/locales/so.yml +5 -3
- data/config/locales/sq.yml +5 -3
- data/config/locales/sr.yml +5 -3
- data/config/locales/sv.yml +5 -3
- data/config/locales/sw.yml +5 -3
- data/config/locales/ta.yml +5 -3
- data/config/locales/th.yml +5 -3
- data/config/locales/tk.yml +5 -3
- data/config/locales/tr.yml +5 -3
- data/config/locales/uk.yml +5 -3
- data/config/locales/ur.yml +5 -3
- data/config/locales/uz.yml +5 -3
- data/config/locales/vi.yml +5 -3
- data/config/locales/zh-hk.yml +5 -3
- data/config/locales/zh-tw.yml +5 -3
- data/config/locales/zh.yml +5 -3
- data/lib/govuk_publishing_components/presenters/shared_helper.rb +5 -1
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +5 -16
- data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_px-to-em.scss +0 -12
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_attachment.scss +0 -2
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_back-link.scss +0 -2
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_feedback.scss +0 -2
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_layout-footer.scss +0 -2
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_layout-header.scss +0 -2
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_metadata.scss +0 -2
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_search.scss +0 -2
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_share-links.scss +0 -2
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_skip-link.scss +0 -2
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_subscription-links.scss +0 -2
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_translation-nav.scss +0 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 0fc516835586ed0098df4390f5fd9bfe2c9dd97c9dcd91d0d41c2cc0b8ad9864
|
4
|
+
data.tar.gz: 4a4e410ac48855b9ba8d7c7f014c37b4049587824cf147daa51b2b9c35870dd2
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: e5ba63ec97ec65250980ba70482fbdb1efa191c203cb693a5c76b054480edb63562b68d955bb22b06364dc447071b1f2642784a732c73098c604282bebe882c0
|
7
|
+
data.tar.gz: 12c1d8b7dc34e97e9faf28b58d5cff71f23ab86eb79b0faf567ea23f89f2043a805f8b9de57f46a04fd4ea8d87c3f8f4364dabaf3d0d4b849ac81badf1767d0f
|
File without changes
|
File without changes
|
@@ -0,0 +1,16 @@
|
|
1
|
+
window.GOVUK = window.GOVUK || {}
|
2
|
+
window.GOVUK.Modules = window.GOVUK.Modules || {};
|
3
|
+
|
4
|
+
(function (Modules) {
|
5
|
+
function Intervention ($module) {
|
6
|
+
this.$module = $module
|
7
|
+
}
|
8
|
+
|
9
|
+
Intervention.prototype.init = function () {
|
10
|
+
if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
|
11
|
+
window.GOVUK.analytics.trackEvent('interventionBanner', 'interventionShown')
|
12
|
+
}
|
13
|
+
}
|
14
|
+
|
15
|
+
Modules.Intervention = Intervention
|
16
|
+
})(window.GOVUK.Modules)
|
data/app/assets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js
CHANGED
@@ -4,68 +4,262 @@ window.GOVUK = window.GOVUK || {}
|
|
4
4
|
window.GOVUK.Modules = window.GOVUK.Modules || {};
|
5
5
|
|
6
6
|
(function (Modules) {
|
7
|
-
|
8
|
-
|
7
|
+
var SETTINGS = {
|
8
|
+
breakpoint: {
|
9
|
+
desktop: 769
|
10
|
+
},
|
11
|
+
label: {
|
12
|
+
hide: 'data-text-for-hide',
|
13
|
+
show: 'data-text-for-show'
|
14
|
+
}
|
15
|
+
}
|
9
16
|
|
10
|
-
|
11
|
-
|
12
|
-
|
17
|
+
// Small helpers that update the label when the state of the button has
|
18
|
+
// changed:
|
19
|
+
var setLabel = function ($button, showOrHide) {
|
20
|
+
var newLabel = $button.getAttribute(SETTINGS.label[showOrHide])
|
13
21
|
|
14
|
-
|
22
|
+
if (newLabel) {
|
23
|
+
$button.setAttribute('aria-label', newLabel)
|
24
|
+
}
|
25
|
+
}
|
15
26
|
|
16
|
-
|
27
|
+
// Wrapper functions to contain all of the mechanisms needed for hiding and
|
28
|
+
// toggling the menus.
|
29
|
+
var hide = function ($button, $menu) {
|
30
|
+
$button.setAttribute('aria-expanded', false)
|
31
|
+
$button.classList.remove('gem-c-layout-super-navigation-header__open-button')
|
32
|
+
$menu.setAttribute('hidden', 'hidden')
|
33
|
+
setLabel($button, 'show')
|
34
|
+
}
|
35
|
+
var show = function ($button, $menu) {
|
36
|
+
$button.setAttribute('aria-expanded', true)
|
37
|
+
$button.classList.add('gem-c-layout-super-navigation-header__open-button')
|
38
|
+
$menu.removeAttribute('hidden')
|
39
|
+
setLabel($button, 'hide')
|
40
|
+
}
|
17
41
|
|
18
|
-
|
42
|
+
var toggle = function ($button, $menu) {
|
43
|
+
var isOpen = $button.getAttribute('aria-expanded') === 'true'
|
44
|
+
var trackingLabel = $button.getAttribute('data-tracking-key')
|
45
|
+
if (isOpen) {
|
46
|
+
hide($button, $menu)
|
47
|
+
} else {
|
48
|
+
show($button, $menu)
|
49
|
+
}
|
50
|
+
|
51
|
+
// Fire analytics if analytics are available
|
52
|
+
if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent && trackingLabel) {
|
53
|
+
window.GOVUK.analytics.trackEvent('headerClicked', trackingLabel + (isOpen ? 'Closed' : 'Opened'), { label: 'none' })
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
// Clicking an element inside a `button` element causes the `event.target` to
|
58
|
+
// be the inside element, not the button. This can be taken care of by setting
|
59
|
+
// the CSS pointer-events to be none, but that doesn't work for older
|
60
|
+
// browsers, won't work for people with CSS turned off, or for people who are
|
61
|
+
// using CSS overrides.
|
62
|
+
// This checks if the $element is the `elementType`; if it is, it gets
|
63
|
+
// returned; if not it recursively checks to see if the parent element is a
|
64
|
+
// `elementType`. This means that it can be used with `pointer-events: none`.
|
65
|
+
var closestParentIncluding = function ($element, elementType) {
|
66
|
+
if ($element.tagName.toLowerCase() === elementType.toLowerCase()) {
|
67
|
+
return $element
|
68
|
+
}
|
69
|
+
return closestParentIncluding($element.parentNode, elementType)
|
19
70
|
}
|
20
71
|
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
72
|
+
// Searched the previous elements to find one with the same tag as set in
|
73
|
+
// `elementType` . If it's found the element is returned; if not, it returns
|
74
|
+
// null.
|
75
|
+
var closestPrevious = function ($element, elementType) {
|
76
|
+
if ($element === null) {
|
77
|
+
return null
|
78
|
+
}
|
25
79
|
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
80
|
+
// Using `previousSibling` means that there is a possibility that the
|
81
|
+
// $element could be a text node or a comment node - checking the `nodeType`
|
82
|
+
// of the element will ensure that it's a real element.
|
83
|
+
if ($element.nodeType === 1 && $element.tagName.toLowerCase() === elementType.toLowerCase()) {
|
84
|
+
return $element
|
85
|
+
}
|
32
86
|
|
33
|
-
|
34
|
-
|
87
|
+
// If `previousElementSibling` can be used then let's use it as it'll be
|
88
|
+
// slightly faster since it skips things that aren't elements. If not,
|
89
|
+
// `previousSibling` can still be used as there's a `nodeType` check.
|
90
|
+
var previousElement = $element.previousElementSibling || $element.previousSibling
|
35
91
|
|
36
|
-
return
|
92
|
+
return closestPrevious(previousElement, elementType)
|
37
93
|
}
|
38
94
|
|
39
|
-
|
40
|
-
|
95
|
+
// When moving from one screen size to another (eg mobile to desktop) we need
|
96
|
+
// to find out whether a submenu is open so the parent menu can be kept open.
|
97
|
+
var hasSubMenusOpen = function ($menu) {
|
98
|
+
return $menu.querySelectorAll('button[aria-expanded="true"]').length > 0
|
41
99
|
}
|
42
100
|
|
43
|
-
|
44
|
-
|
101
|
+
// Returns what screen size the window is currently. Returns a string of
|
102
|
+
// either `desktop` or `mobile` so it can be interpolated to access the
|
103
|
+
// `data-toggle-{desktop|mobile}-group` attribute.
|
104
|
+
var windowSize = function () {
|
105
|
+
return window.innerWidth >= SETTINGS.breakpoint.desktop ? 'desktop' : 'mobile'
|
106
|
+
}
|
45
107
|
|
46
|
-
|
47
|
-
this.$
|
48
|
-
this.$
|
108
|
+
function SuperNavigationMegaMenu ($module) {
|
109
|
+
this.$module = $module
|
110
|
+
this.$navigationToggle = this.$module.querySelector('#super-navigation-menu-toggle')
|
111
|
+
this.$navigationMenu = this.$module.querySelector('#super-navigation-menu')
|
112
|
+
this.$searchToggle = this.$module.querySelector('#super-search-menu-toggle')
|
113
|
+
this.$searchMenu = this.$module.querySelector('#super-search-menu')
|
114
|
+
|
115
|
+
// The menu toggler buttons need three attributes for this to work:
|
116
|
+
// - `aria-controls` contains the id of the menu to be toggled
|
117
|
+
// - `data-toggle-mobile-group` is the group that the menu belongs to on
|
118
|
+
// smaller screens
|
119
|
+
// - `data-toggle-desktop-group` is the group that the menu belongs to on
|
120
|
+
// larger screens
|
121
|
+
this.$buttons = this.$module.querySelectorAll(
|
122
|
+
'button[aria-controls][data-toggle-mobile-group][data-toggle-desktop-group]'
|
123
|
+
)
|
124
|
+
|
125
|
+
this.hiddenButtons = this.$module.querySelectorAll('button[hidden]')
|
126
|
+
|
127
|
+
this.lastWindowSize = undefined
|
49
128
|
}
|
50
129
|
|
51
|
-
|
52
|
-
this.$menu.classList.add('gem-c-layout-super-navigation-header__items--open')
|
130
|
+
SuperNavigationMegaMenu.prototype.windowSize = windowSize
|
53
131
|
|
54
|
-
|
55
|
-
|
56
|
-
|
132
|
+
// Resizes the space needed for the dropdown menu so that it doesn't overlap
|
133
|
+
// with the page content. As this is an event that needs to be added and
|
134
|
+
// removed it can't be be bound to `this` because that changes the fingerprint
|
135
|
+
// of the function, and makes it unable to be removed with
|
136
|
+
// `removeEventListener`.
|
137
|
+
SuperNavigationMegaMenu.prototype.resizeHandler = function () {
|
138
|
+
var $module = document.querySelector('[data-module="super-navigation-mega-menu"]')
|
139
|
+
var $openButton = $module.querySelector('[aria-expanded="true"][data-toggle-desktop-group="top"]')
|
140
|
+
var $openMenu = $openButton ? $module.querySelector('#' + $openButton.getAttribute('aria-controls')) : null
|
141
|
+
var margin = $openMenu && windowSize() === 'desktop' ? $openMenu.offsetHeight : 0
|
142
|
+
|
143
|
+
$module.style.marginBottom = margin + 'px'
|
57
144
|
}
|
58
145
|
|
59
|
-
|
60
|
-
if (this.
|
61
|
-
|
146
|
+
SuperNavigationMegaMenu.prototype.updateStates = function () {
|
147
|
+
if (this.windowSize() === 'mobile' && this.lastWindowSize !== 'mobile') {
|
148
|
+
this.$navigationToggle.removeAttribute('hidden')
|
149
|
+
|
150
|
+
// Hides navigation menu unless a submenu is open - this could be common
|
151
|
+
// as the desktop view has the navigation submenu as top level in the
|
152
|
+
// menu.
|
153
|
+
if (!hasSubMenusOpen(this.$navigationMenu)) {
|
154
|
+
hide(this.$navigationToggle, this.$navigationMenu)
|
155
|
+
}
|
156
|
+
|
157
|
+
this.$module.style.marginBottom = '0'
|
158
|
+
|
159
|
+
window.removeEventListener('resize', this.resizeHandler, { passive: true })
|
62
160
|
|
63
|
-
|
161
|
+
this.lastWindowSize = this.windowSize()
|
162
|
+
}
|
163
|
+
|
164
|
+
// Hide the navigation toggle button and show the navigation submenu:
|
165
|
+
if (this.windowSize() === 'desktop' && this.lastWindowSize !== 'desktop') {
|
166
|
+
this.$navigationToggle.setAttribute('hidden', 'hidden')
|
167
|
+
this.$navigationMenu.removeAttribute('hidden')
|
168
|
+
|
169
|
+
window.addEventListener('resize', this.resizeHandler, { passive: true })
|
170
|
+
|
171
|
+
this.lastWindowSize = this.windowSize()
|
172
|
+
}
|
173
|
+
}
|
174
|
+
|
175
|
+
SuperNavigationMegaMenu.prototype.buttonHandler = function (event) {
|
176
|
+
var $target = closestParentIncluding(event.target, 'button')
|
177
|
+
var $targetMenu = this.$module.querySelector('#' + $target.getAttribute('aria-controls'))
|
178
|
+
|
179
|
+
var toggleGroupAttribute = 'data-toggle-' + this.windowSize() + '-group'
|
180
|
+
var toggleGroupName = $target.getAttribute(toggleGroupAttribute)
|
181
|
+
var toggleGroupList = this.$module.querySelectorAll('[' + toggleGroupAttribute + '="' + toggleGroupName + '"]')
|
182
|
+
|
183
|
+
for (var k = 0; k < toggleGroupList.length; k++) {
|
184
|
+
var $element = toggleGroupList[k]
|
185
|
+
if ($element !== $target) {
|
186
|
+
var $menu = this.$module.querySelector('#' + $element.getAttribute('aria-controls'))
|
187
|
+
hide($element, $menu)
|
188
|
+
}
|
189
|
+
}
|
190
|
+
|
191
|
+
toggle($target, $targetMenu)
|
192
|
+
|
193
|
+
if (this.windowSize() === 'desktop') {
|
194
|
+
this.$module.style.marginBottom = $targetMenu.offsetHeight + 'px'
|
195
|
+
}
|
64
196
|
}
|
65
197
|
|
66
|
-
|
67
|
-
this.$
|
198
|
+
SuperNavigationMegaMenu.prototype.init = function () {
|
199
|
+
for (var j = 0; j < this.$buttons.length; j++) {
|
200
|
+
var $button = this.$buttons[j]
|
201
|
+
$button.addEventListener('click', this.buttonHandler.bind(this), true)
|
202
|
+
}
|
203
|
+
|
204
|
+
// The toggle buttons are hardcoded to be hidden in the markup - this means
|
205
|
+
// that people without JavaScript turned on won't have buttons present that
|
206
|
+
// don't do anything.
|
207
|
+
// Since JavaScript is enabled we can remove the hidden attribute from
|
208
|
+
// the buttons so that they're perceivable by users.
|
209
|
+
// As the toggle buttons are now selectable, we should prevent the links
|
210
|
+
// from being selectable to avoid confusion.
|
211
|
+
for (var i = 0; i < this.hiddenButtons.length; i++) {
|
212
|
+
var $element = this.hiddenButtons[i]
|
213
|
+
$element.removeAttribute('hidden')
|
214
|
+
|
215
|
+
var closestSiblingLink = closestPrevious($element, 'a')
|
216
|
+
if (closestSiblingLink) {
|
217
|
+
closestSiblingLink.setAttribute('hidden', 'hidden')
|
218
|
+
}
|
219
|
+
}
|
220
|
+
|
221
|
+
this.$module.querySelector('.gem-c-layout-super-navigation-header__search-item-link')
|
222
|
+
.setAttribute('hidden', 'hidden')
|
223
|
+
|
224
|
+
// Navigation menu and search menu are hardcoded to be open in the markup -
|
225
|
+
// this means that the menu still makes sense with CSS and JavaScript turned
|
226
|
+
// off.
|
227
|
+
// The menus now need to be hidden as part of the JavaScript
|
228
|
+
// initialisation.
|
229
|
+
// - On both mobile and desktop, this means hiding the search menu
|
230
|
+
// - On mobile, this means hiding the navigation
|
231
|
+
// - On desktop, this means hiding the navigation button, showing the
|
232
|
+
// second level navigation menu
|
233
|
+
hide(this.$searchToggle, this.$searchMenu)
|
234
|
+
this.updateStates()
|
235
|
+
|
236
|
+
this.lastWindowSize = this.windowSize()
|
237
|
+
|
238
|
+
// The menu needs to be updated when the window is resized - specifically,
|
239
|
+
// the top level navigation toggle needs to be shown or hidden.
|
240
|
+
// Using `matchMedia` to listen for both resize events means that this
|
241
|
+
// will only fire when the media query is matched so is more efficient. The
|
242
|
+
// fallback is the `window.resize` event with a check to make sure that it
|
243
|
+
// only does things when moving from mobile to desktop view.
|
244
|
+
var setupResizeListener = function () {
|
245
|
+
window.addEventListener('resize', this.updateStates.bind(this), { passive: true })
|
246
|
+
}.bind(this)
|
247
|
+
|
248
|
+
if (typeof window.matchMedia === 'function') {
|
249
|
+
// Internet Explorer 11 supports `matchMedia`, but doesn't support
|
250
|
+
// the `change` event[1] - so we try it, and then fail back to using
|
251
|
+
// `window.resize`.
|
252
|
+
// [1]: https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/onchange
|
253
|
+
try {
|
254
|
+
window.matchMedia('screen and (min-width:' + SETTINGS.breakpoint.desktop + 'px)')
|
255
|
+
.addEventListener('change', this.updateStates.bind(this))
|
256
|
+
} catch (error) {
|
257
|
+
setupResizeListener()
|
258
|
+
}
|
259
|
+
} else {
|
260
|
+
setupResizeListener()
|
261
|
+
}
|
68
262
|
}
|
69
263
|
|
70
|
-
Modules.
|
264
|
+
Modules.SuperNavigationMegaMenu = SuperNavigationMegaMenu
|
71
265
|
})(window.GOVUK.Modules)
|
data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement.js
CHANGED
@@ -9,9 +9,15 @@
|
|
9
9
|
|
10
10
|
YoutubeLinkEnhancement.prototype.init = function () {
|
11
11
|
if (!this.campaignCookiesAllowed()) {
|
12
|
+
this.startModule = this.startModule.bind(this)
|
13
|
+
window.addEventListener('cookie-consent', this.startModule)
|
12
14
|
return
|
13
15
|
}
|
16
|
+
this.startModule()
|
17
|
+
}
|
14
18
|
|
19
|
+
YoutubeLinkEnhancement.prototype.startModule = function () {
|
20
|
+
window.removeEventListener('cookie-consent', this.startModule)
|
15
21
|
var $youtubeLinks = this.$element.querySelectorAll('a[href*="youtube.com"], a[href*="youtu.be"]')
|
16
22
|
|
17
23
|
if ($youtubeLinks.length > 0) {
|
@@ -7,12 +7,41 @@
|
|
7
7
|
|
8
8
|
if (document.querySelectorAll && document.addEventListener) {
|
9
9
|
var els = document.querySelectorAll('.js-header-toggle')
|
10
|
-
var i
|
11
|
-
|
12
|
-
|
13
|
-
|
10
|
+
for (var i = 0; i < els.length; i++) {
|
11
|
+
// Reassign current index to bypass rules in Chrome and Firefox around indexed property setting
|
12
|
+
var thisEl = els[i]
|
13
|
+
|
14
|
+
// If the element is an a tag, convert it to a button
|
15
|
+
// This is to target instances where we want to change behaviour between a js and a no-js view eg: the search button on the mobile menu for some government pages. On no-js it's just a link to /search
|
16
|
+
// This swaps a link for no-js to a button, making it interactable. Using a link for interactivity is poor accessibility as it's a misuse of the link tag and can be confusing to assistive tech users
|
17
|
+
|
18
|
+
if (thisEl.tagName === 'A') {
|
19
|
+
var attributes = thisEl.attributes
|
20
|
+
var button = document.createElement('button')
|
21
|
+
|
22
|
+
for (var k = 0; k < attributes.length; k++) {
|
23
|
+
var thisAttr = attributes[k].name
|
24
|
+
|
25
|
+
if (thisAttr === 'href') {
|
26
|
+
if (button.getAttribute('data-search-toggle-for')) {
|
27
|
+
continue
|
28
|
+
} else {
|
29
|
+
button.setAttribute('data-search-toggle-for', thisEl.getAttribute('href').substr(1))
|
30
|
+
}
|
31
|
+
} else if (thisAttr !== 'data-button-text') {
|
32
|
+
button.setAttribute(thisAttr, thisEl.getAttribute(thisAttr))
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
button.innerText = thisEl.getAttribute('data-button-text') || thisEl.innerText
|
37
|
+
|
38
|
+
thisEl.parentNode.replaceChild(button, thisEl)
|
39
|
+
thisEl = button
|
40
|
+
}
|
41
|
+
|
42
|
+
thisEl.addEventListener('click', function (e) {
|
14
43
|
e.preventDefault()
|
15
|
-
var target =
|
44
|
+
var target = document.getElementById(this.getAttribute('data-search-toggle-for'))
|
16
45
|
var targetClass = target.getAttribute('class') || ''
|
17
46
|
var sourceClass = this.getAttribute('class') || ''
|
18
47
|
var isSearchToggle = sourceClass.match('search-toggle')
|
@@ -30,27 +30,21 @@
|
|
30
30
|
var moduleNames = element.data('module').split(' ')
|
31
31
|
|
32
32
|
for (var j = 0, k = moduleNames.length; j < k; j++) {
|
33
|
-
var module
|
34
33
|
var moduleName = camelCaseAndCapitalise(moduleNames[j])
|
35
34
|
var started = element.data(moduleNames[j] + '-module-started')
|
36
35
|
|
37
|
-
if (
|
38
|
-
|
39
|
-
!GOVUK.Modules[moduleName].prototype.init
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
module.start(element)
|
44
|
-
element.data(moduleNames[j] + '-module-started', true)
|
45
|
-
}
|
36
|
+
if (typeof GOVUK.Modules[moduleName] === 'function' && !started) {
|
37
|
+
// GOV.UK Legacy Modules using jQuery
|
38
|
+
if (!GOVUK.Modules[moduleName].prototype.init) {
|
39
|
+
new GOVUK.Modules[moduleName]().start(element)
|
40
|
+
element.data(moduleNames[j] + '-module-started', true)
|
41
|
+
}
|
46
42
|
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
module = new GOVUK.Modules[moduleName](element[0]).init()
|
53
|
-
element.data(moduleNames[j] + '-module-started', true)
|
43
|
+
// Vanilla JavaScript GOV.UK Modules and GOV.UK Frontend Modules
|
44
|
+
if (GOVUK.Modules[moduleName].prototype.init) {
|
45
|
+
new GOVUK.Modules[moduleName](element[0]).init()
|
46
|
+
element.data(moduleNames[j] + '-module-started', true)
|
47
|
+
}
|
54
48
|
}
|
55
49
|
}
|
56
50
|
}
|