govuk_publishing_components 34.0.0 → 34.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d27a853451e7e5d792f6d4844c3192d325093a13bb352e726a7d5917186d9207
-  data.tar.gz: f564406c3fe69d492b3c1f86713b0d8e7fd4f9bba214e3056fa4de42cea452b4
+  metadata.gz: 2070abba195716c8e72ea85dc7d7f207df27c52e497e808c8bc5d79c7b56b8af
+  data.tar.gz: f9978ff5d94c66b454978bc58346b8a76f7ff5408210695fd38372e4e5d29c20
 SHA512:
-  metadata.gz: e4323ecea03126f79bf1dc2e173a6c19504341b956a92bd8bcf85dd82bcd6003fe68dec8a835f3c35874044b4e7bd6542b029ad885976fc6efc18527ab6e707a
-  data.tar.gz: f5463262a5c4069311287fd9ba13f36191a4675bcc6c70e0c6b36d0a04f7c3a11d4229bc2f5caa9d194194dbda264264723d0d65846b85aa62b29c289892f716
+  metadata.gz: c587c35eadec57a5515587e2064f5d55154cc9767a823015e4fb103bab8599bf367e2cfdbd5f58e65fd2612d690ba85b7760dd6535899ff5b90ad479b19a4ef9
+  data.tar.gz: c888b0e1e6ef2f1fde331e163009bd6f84077bb8011fcc799612af5d00d72f52cec00935f7cd71e347dd2d357f6c9e98ccc91a0c277b0bc4763ca9cdf4123591

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-core.js

@@ -11,34 +11,23 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
       var newScript = document.createElement('script')
       newScript.async = true
 
-      if (window.GOVUK.analyticsGa4.vars.gtag_id) {
-        // initialise gtag
-        window.dataLayer = window.dataLayer || []
-        var gtag = function () { window.dataLayer.push(arguments) }
-        gtag('js', new Date())
-        gtag('config', window.GOVUK.analyticsGa4.vars.gtag_id)
-
-        newScript.src = '//www.googletagmanager.com/gtag/js?id=' + window.GOVUK.analyticsGa4.vars.gtag_id
-        firstScript.parentNode.insertBefore(newScript, firstScript)
-      } else {
-        // initialise GTM
-        window.dataLayer = window.dataLayer || []
-        window.dataLayer.push({ 'gtm.blocklist': ['customPixels', 'customScripts', 'html', 'nonGoogleScripts'] })
-        window.dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' })
-
-        var auth = window.GOVUK.analyticsGa4.vars.auth || ''
-        var preview = window.GOVUK.analyticsGa4.vars.preview || ''
-        if (auth) {
-          auth = '&gtm_auth=' + auth
-        }
-        if (preview) {
-          preview = '&gtm_preview=' + preview + '&gtm_cookies_win=x'
-        }
-
-        this.googleSrc = 'https://www.googletagmanager.com/gtm.js?id=' + window.GOVUK.analyticsGa4.vars.id + auth + preview
-        newScript.src = this.googleSrc
-        firstScript.parentNode.insertBefore(newScript, firstScript)
+      // initialise GTM
+      window.dataLayer = window.dataLayer || []
+      window.dataLayer.push({ 'gtm.blocklist': ['customPixels', 'customScripts', 'html', 'nonGoogleScripts'] })
+      window.dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' })
+
+      var auth = window.GOVUK.analyticsGa4.vars.auth || ''
+      var preview = window.GOVUK.analyticsGa4.vars.preview || ''
+      if (auth) {
+        auth = '&gtm_auth=' + auth
       }
+      if (preview) {
+        preview = '&gtm_preview=' + preview + '&gtm_cookies_win=x'
+      }
+
+      this.googleSrc = 'https://www.googletagmanager.com/gtm.js?id=' + window.GOVUK.analyticsGa4.vars.id + auth + preview
+      newScript.src = this.googleSrc
+      firstScript.parentNode.insertBefore(newScript, firstScript)
     },
 
     sendData: function (data) {

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.js

@@ -42,6 +42,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         return
       }
 
+      var text = data.text || event.target.textContent
+      data.text = window.GOVUK.analyticsGa4.core.trackFunctions.removeLinesAndExtraSpaces(text)
       schema.event = 'event_data'
       // get attributes from the data attribute to send to GA
       // only allow it if it already exists in the schema

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js

@@ -28,11 +28,11 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
             content_id: this.getMetaContent('content-id'),
 
             browse_topic: this.getMetaContent('section'),
-            taxon_slug: this.getMetaContent('taxon-slug'),
-            taxon_id: this.getMetaContent('taxon-id'),
             taxonomy_level1: this.getMetaContent('themes'),
-            taxon_slugs: this.getMetaContent('taxon-slugs'),
-            taxon_ids: this.getMetaContent('taxon-ids'),
+            taxonomy_main: this.getMetaContent('taxon-slug'),
+            taxonomy_main_id: this.getMetaContent('taxon-id'),
+            taxonomy_all: this.getMetaContent('taxon-slugs'),
+            taxonomy_all_ids: this.getMetaContent('taxon-ids'),
 
             language: this.getLanguage(),
             history: this.getHistory(),

data/app/assets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js

@@ -92,32 +92,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     return closestPrevious(previousElement, elementType)
   }
 
-  // When moving from one screen size to another (eg mobile to desktop) we need
-  // to find out whether a submenu is open so the parent menu can be kept open.
-  var hasSubMenusOpen = function ($menu) {
-    return $menu.querySelectorAll('button[aria-expanded="true"]').length > 0
-  }
-
-  // Detect the current viewport width. Return the string `desktop` or `mobile` so it can be interpolated to access the
-  // `data-toggle-{desktop|mobile}-group` attribute.
-  //
-  // Use `matchedia` which mitigates issues in modern browsers when scrollbars are forced in MacOS (using `document.documentElement.clientWidth`
-  // for viewport width detection has issues in Chrome and Firefox, and `window.innerWidth` has issues in Safari).
-  //
-  //  Fall back to `document.documentElement.clientWidth` for legacy browsers.
-  var windowSize = function () {
-    var viewport = false
-    if (typeof window.matchMedia === 'function') {
-      viewport = window.matchMedia('(min-width:' + SETTINGS.breakpoint.desktop + 'px)').matches
-    } else {
-      viewport = document.documentElement.clientWidth >= SETTINGS.breakpoint.desktop
-    }
-    return viewport ? 'desktop' : 'mobile'
-  }
   function SuperNavigationMegaMenu ($module) {
     this.$module = $module
-    this.$navigationToggle = this.$module.querySelector('#super-navigation-menu-toggle')
-    this.$navigationMenu = this.$module.querySelector('#super-navigation-menu')
     this.$searchToggle = this.$module.querySelector('#super-search-menu-toggle')
     this.$searchMenu = this.$module.querySelector('#super-search-menu')
 
@@ -132,55 +108,25 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     )
 
     this.hiddenButtons = this.$module.querySelectorAll('button[hidden]')
-
-    this.lastWindowSize = null
   }
 
-  SuperNavigationMegaMenu.prototype.windowSize = windowSize
-
   SuperNavigationMegaMenu.prototype.updateStates = function () {
-    if (this.windowSize() === 'mobile' && this.lastWindowSize !== 'mobile') {
-      this.$navigationToggle.removeAttribute('hidden')
-
-      // Hides navigation menu unless a submenu is open - this could be common
-      // as the desktop view has the navigation submenu as top level in the
-      // menu.
-      if (!hasSubMenusOpen(this.$navigationMenu)) {
-        hide(this.$navigationToggle, this.$navigationMenu)
-      }
-
-      this.$module.style.marginBottom = '0'
-    }
-
-    // Hide the navigation toggle button and show the navigation submenu:
-    if (this.windowSize() === 'desktop' && this.lastWindowSize !== 'desktop') {
-      this.$navigationToggle.setAttribute('hidden', 'hidden')
-      this.$navigationMenu.removeAttribute('hidden')
-    }
-
-    // The dropdown menu height is only needed when in desktop mode as this is
-    // when the dropdown menu is using `absolute` positioning. This requires
-    // JavaScript to work out the height and make space for the dropdown menu.
-    if (windowSize() === 'desktop') {
-      // Check whether any of the dropdown menus are open.
-      var $openButton = this.$module.querySelector('[aria-expanded="true"][data-toggle-desktop-group="top"]')
-      // Gets the open dropdown menu
-      var $openMenu = $openButton ? this.$module.querySelector('#' + $openButton.getAttribute('aria-controls')) : null
-      // If there is an open dropdown menu, get the height of the dropdown menu.
-      var margin = $openMenu ? $openMenu.offsetHeight : 0
-
-      // Make space for the dropdown menu.
-      this.$module.style.marginBottom = margin + 'px'
-    }
-
-    this.lastWindowSize = this.windowSize()
+    // Check whether any of the dropdown menus are open.
+    var $openButton = this.$module.querySelector('[aria-expanded="true"][data-toggle-desktop-group="top"]')
+    // Gets the open dropdown menu
+    var $openMenu = $openButton ? this.$module.querySelector('#' + $openButton.getAttribute('aria-controls')) : null
+    // If there is an open dropdown menu, get the height of the dropdown menu.
+    var margin = $openMenu ? $openMenu.offsetHeight : 0
+
+    // Make space for the dropdown menu.
+    this.$module.style.marginBottom = margin + 'px'
   }
 
   SuperNavigationMegaMenu.prototype.buttonHandler = function (event) {
     var $target = closestParentIncluding(event.target, 'button')
     var $targetMenu = this.$module.querySelector('#' + $target.getAttribute('aria-controls'))
 
-    var toggleGroupAttribute = 'data-toggle-' + this.windowSize() + '-group'
+    var toggleGroupAttribute = 'data-toggle-desktop-group'
     var toggleGroupName = $target.getAttribute(toggleGroupAttribute)
     var toggleGroupList = this.$module.querySelectorAll('[' + toggleGroupAttribute + '="' + toggleGroupName + '"]')
 
@@ -194,9 +140,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     toggle($target, $targetMenu)
 
-    if (this.windowSize() === 'desktop') {
-      this.$module.style.marginBottom = $targetMenu.offsetHeight + 'px'
-    }
+    this.$module.style.marginBottom = $targetMenu.offsetHeight + 'px'
   }
 
   SuperNavigationMegaMenu.prototype.init = function () {
@@ -217,6 +161,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       $element.removeAttribute('hidden')
 
       var closestSiblingLink = closestPrevious($element, 'a')
+
       if (closestSiblingLink) {
         closestSiblingLink.setAttribute('hidden', 'hidden')
       }
@@ -237,8 +182,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     hide(this.$searchToggle, this.$searchMenu)
     this.updateStates()
 
-    this.lastWindowSize = this.windowSize()
-
     // The menu needs to be updated when the window is resized to make sure that
     // the space needed for the dropdown menu is correct.
     window.addEventListener('resize', this.updateStates.bind(this), { passive: true })

data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js

@@ -178,30 +178,31 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var title = thisel.querySelectorAll('.js-step-title')[0]
       var contentId = thisel.querySelectorAll('.js-panel')[0].getAttribute('id')
       var titleText = title.textContent || title.innerText // IE8 fallback
-      var ga4Data = ''
-
-      if (this.$module.isGa4Enabled) {
-        var ga4JSON = {
-          event_name: 'select_content',
-          type: 'step by step',
-          text: titleText.trim(),
-          index: i + 1,
-          index_total: this.$module.totalSteps
-        }
-        ga4Data = "data-ga4-event='" + JSON.stringify(ga4JSON) + "'" // Construct GA4 data-attributes for ga4-event-tracker.
-      }
 
       title.outerHTML =
         '<span class="js-step-title">' +
           '<button ' +
             'class="gem-c-step-nav__button gem-c-step-nav__button--title js-step-title-button" ' +
-            'aria-expanded="false" aria-controls="' + contentId + '" ' + ga4Data + '>' +
+            'aria-expanded="false" aria-controls="' + contentId + '"' + '>' +
               '<span class="gem-c-step-nav____title-text-focus">' +
                   '<span class="gem-c-step-nav__title-text js-step-title-text">' + titleText + '</span>' +
                   '<span class="govuk-visually-hidden gem-c-step-nav__section-heading-divider">, </span>' +
               '</span>' +
           '</button>' +
         '</span>'
+
+      if (this.$module.isGa4Enabled) {
+        var ga4JSON = {
+          event_name: 'select_content',
+          type: 'step by step',
+          text: titleText.trim(),
+          index: i + 1,
+          index_total: this.$module.totalSteps
+        }
+
+        var button = thisel.querySelector('.js-step-title-button')
+        button.setAttribute('data-ga4-event', JSON.stringify(ga4JSON))
+      }
     }
   }