Remove component init() functions

Author: colinrotherham

packages/components/button/button.js

@@ -1,10 +1,21 @@
+const KEY_SPACE = 32
+const DEBOUNCE_TIMEOUT_IN_SECONDS = 1
+
 class Button {
   constructor($module) {
-    this.KEY_SPACE = 32
-    this.DEBOUNCE_TIMEOUT_IN_SECONDS = 1
+    if (!$module) {
+      return this
+    }
 
     this.$module = $module
     this.debounceFormSubmitTimer = null
+
+    /**
+     * Initialise an event listener for keydown at document level
+     * this will help listening for later inserted elements with a role="button"
+     */
+    this.$module.addEventListener('keydown', this.handleKeyDown.bind(this))
+    this.$module.addEventListener('click', this.debounce.bind(this))
   }
 
   /**
@@ -23,7 +34,7 @@ class Button {
     // if the element has a role='button' and the pressed key is a space, we'll simulate a click
     if (
       target.getAttribute('role') === 'button' &&
-      event.keyCode === this.KEY_SPACE
+      event.keyCode === KEY_SPACE
     ) {
       event.preventDefault()
       // trigger the target's click event
@@ -51,22 +62,13 @@ class Button {
 
     this.debounceFormSubmitTimer = setTimeout(() => {
       this.debounceFormSubmitTimer = null
-    }, this.DEBOUNCE_TIMEOUT_IN_SECONDS * 1000)
-  }
-
-  /**
-   * Initialise an event listener for keydown at document level
-   * this will help listening for later inserted elements with a role="button"
-   */
-  init() {
-    this.$module.addEventListener('keydown', this.handleKeyDown.bind(this))
-    this.$module.addEventListener('click', this.debounce.bind(this))
+    }, DEBOUNCE_TIMEOUT_IN_SECONDS * 1000)
   }
 }
 
 module.exports = ({ scope = document } = {}) => {
   const buttons = scope.querySelectorAll('[data-module="nhsuk-button"]')
   buttons.forEach((el) => {
-    new Button(el).init()
+    new Button(el)
   })
 }

packages/components/character-count/character-count.js

@@ -1,29 +1,28 @@
 class CharacterCount {
   constructor($module) {
+    if (!$module) {
+      return this
+    }
+
+    const $textarea = $module.querySelector('.nhsuk-js-character-count')
+    if (!$textarea) {
+      return this
+    }
+
     this.$module = $module
-    this.$textarea = $module.querySelector('.nhsuk-js-character-count')
+    this.$textarea = $textarea
     this.$visibleCountMessage = null
     this.$screenReaderCountMessage = null
     this.lastInputTimestamp = null
-  }
-
-  // Initialise component
-  init() {
-    // Check that required elements are present
-    if (!this.$textarea) {
-      return
-    }
 
     // Check for module
-    const { $module } = this
-    const { $textarea } = this
     const $fallbackLimitMessage = document.getElementById(
-      `${$textarea.id}-info`
+      `${this.$textarea.id}-info`
     )
 
     // Move the fallback count message to be immediately after the textarea
     // Kept for backwards compatibility
-    $textarea.insertAdjacentElement('afterend', $fallbackLimitMessage)
+    this.$textarea.insertAdjacentElement('afterend', $fallbackLimitMessage)
 
     // Create the *screen reader* specific live-updating counter
     // This doesn't need any styling classes, as it is never visible
@@ -53,7 +52,7 @@ class CharacterCount {
     $fallbackLimitMessage.classList.add('nhsuk-u-visually-hidden')
 
     // Read options set using dataset ('data-' values)
-    this.options = CharacterCount.getDataset($module)
+    this.options = CharacterCount.getDataset(this.$module)
 
     // Determine the limit attribute (characters or words)
     let countAttribute = this.defaults.characterCountAttribute
@@ -62,15 +61,15 @@ class CharacterCount {
     }
 
     // Save the element limit
-    this.maxLength = $module.getAttribute(countAttribute)
+    this.maxLength = this.$module.getAttribute(countAttribute)
 
     // Check for limit
     if (!this.maxLength) {
       return
     }
 
     // Remove hard limit if set
-    $textarea.removeAttribute('maxlength')
+    this.$textarea.removeAttribute('maxlength')
 
     this.bindChangeEvents()
 
@@ -273,6 +272,6 @@ module.exports = ({ scope = document } = {}) => {
     '[data-module="nhsuk-character-count"]'
   )
   characterCounts.forEach((el) => {
-    new CharacterCount(el).init()
+    new CharacterCount(el)
   })
 }

packages/components/header/header.js

@@ -5,47 +5,41 @@
 
 class Header {
   constructor() {
-    this.menuIsEnabled = false
-    this.menuIsOpen = false
-
-    this.navigation = document.querySelector('.nhsuk-navigation')
-    this.navigationList = null
-    this.navigationItems = null
-
-    if (!this.navigation) {
+    const $navigation = document.querySelector('.nhsuk-navigation')
+    if (!$navigation) {
       return
     }
 
+    this.navigation = $navigation
+
     this.navigationList = this.navigation.querySelector(
       '.nhsuk-header__navigation-list'
     )
     this.navigationItems = this.navigation.querySelectorAll(
       '.nhsuk-header__navigation-item'
     )
 
-    this.mobileMenu = document.createElement('ul')
     this.mobileMenuToggleButton = document.querySelector(
       '.nhsuk-header__menu-toggle'
     )
     this.mobileMenuContainer = document.querySelector(
       '.nhsuk-mobile-menu-container'
     )
 
-    this.width = 0
-  }
-
-  init() {
     if (
-      !this.navigation ||
       !this.navigationList ||
       !this.navigationItems ||
       !this.navigationItems.length ||
       !this.mobileMenuToggleButton ||
       !this.mobileMenuContainer
     ) {
-      return
+      return this
     }
 
+    this.mobileMenu = document.createElement('ul')
+    this.menuIsEnabled = false
+    this.menuIsOpen = false
+
     this.handleEscapeKey = this.onEscapeKey.bind(this)
     this.handleUpdateNavigation = this.debounce(this.updateNavigation)
     this.handleToggleMobileMenu = this.toggleMobileMenu.bind(this)
@@ -280,5 +274,5 @@ class Header {
 }
 
 module.exports = () => {
-  new Header().init()
+  new Header()
 }

packages/components/tabs/tabs.js

@@ -16,9 +16,7 @@ class Tabs {
 
     this.showEvent = new CustomEvent('tab.show')
     this.hideEvent = new CustomEvent('tab.hide')
-  }
 
-  init() {
     if (typeof window.matchMedia === 'function' && this.responsive) {
       this.setupResponsiveChecks()
     } else {
@@ -340,6 +338,6 @@ module.exports = ({
 } = {}) => {
   const tabs = scope.querySelectorAll(`[data-module="${namespace}"]`)
   tabs.forEach((el) => {
-    new Tabs(el, namespace, responsive, historyEnabled).init()
+    new Tabs(el, namespace, responsive, historyEnabled)
   })
 }