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