Move back to top code into components folder

src/javascripts/application.js

@@ -1,3 +1,4 @@
+import BackToTop from './components/back-to-top.js'
 import common from 'govuk-frontend/common'
 import CookieBanner from './components/cookie-banner.js'
 import Example from './components/example.js'
@@ -40,44 +41,7 @@ new MobileNav().init()
 var $searchContainer = document.querySelector('[data-module="app-search"]')
 new Search($searchContainer).init()
 
-// Back to top visibility
-var visiblity = 'invisible'
-var intersectionRatio = 0
-
-// Create new IntersectionObserver
-var io = new window.IntersectionObserver(function (entries) {
-  // Available data when an intersection happens
-  // Element enters the viewport
-  if (entries[0].intersectionRatio !== 0) {
-    visiblity = 'visible'
-    // How much of the element is visible
-    intersectionRatio = entries[0].intersectionRatio
-  // Element leaves the viewport
-  } else {
-    visiblity = 'invisible'
-    intersectionRatio = 0
-  }
-  updateStatus(visiblity, intersectionRatio)
-}, {
-  // Call the observer, when the element enters the viewport,
-  // when 25%, 50%, 75% and the whole element are visible
-  threshold: [0, 0.25, 0.5, 0.75, 1]
-})
-
-// Element to be observed
-var subNav = document.querySelector('.app-subnav')
-
-// Start observing .app-back-to-top
-io.observe(subNav)
-
-// Display the current status
-function updateStatus (visiblity, threshold) {
-  var thresholdPercent = (threshold * 100)
-
-  var element = document.getElementById('app-back-to-top')
-  if (thresholdPercent === 100) {
-    element.classList.add('app-back-to-top--hidden')
-  } else if (thresholdPercent < 90) {
-    element.classList.remove('app-back-to-top--hidden')
-  }
-}
+// Initialise back to top
+var $backToTop = document.getElementById('app-back-to-top')
+var $observedElement = document.querySelector('.app-subnav')
+new BackToTop($backToTop, { $observedElement: $observedElement }).init()

src/javascripts/components/back-to-top.js

@@ -0,0 +1,44 @@
+function BackToTop ($module, options) {
+  this.$module = $module
+  this.$observedElement = options.$observedElement
+}
+
+BackToTop.prototype.init = function () {
+  var $module = this.$module
+  var $observedElement = this.$observedElement
+
+  // Create new IntersectionObserver
+  var observer = new window.IntersectionObserver(function (entries) {
+    // Available data when an intersection happens
+    // Back to top visibility
+    var intersectionRatio = 0
+    // Element enters the viewport
+    if (entries[0].intersectionRatio !== 0) {
+      // How much of the element is visible
+      intersectionRatio = entries[0].intersectionRatio
+    // Element leaves the viewport
+    } else {
+      intersectionRatio = 0
+    }
+    updateStatus(intersectionRatio)
+  }, {
+    // Call the observer, when the element enters the viewport,
+    // when 25%, 50%, 75% and the whole element are visible
+    threshold: [0, 0.25, 0.5, 0.75, 1]
+  })
+
+  observer.observe($observedElement)
+
+  // Display the current status
+  function updateStatus (threshold) {
+    var thresholdPercent = (threshold * 100)
+
+    if (thresholdPercent === 100) {
+      $module.classList.add('app-back-to-top--hidden')
+    } else if (thresholdPercent < 90) {
+      $module.classList.remove('app-back-to-top--hidden')
+    }
+  }
+}
+
+export default BackToTop