Merge pull request #3110 from alphagov/element-var-dollar

Rename `target` to `$target` and other tiny code style changes
alphagov · Dec 16, 2022 · 44ebe8c · 44ebe8c
2 parents 0014e4d + b4c4a6e
commit 44ebe8c
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 54 deletions.
diff --git a/src/govuk/components/button/button.mjs b/src/govuk/components/button/button.mjs
@@ -54,11 +54,11 @@ Button.prototype.init = function () {
  * @param {KeyboardEvent} event - Keydown event
  */
 Button.prototype.handleKeyDown = function (event) {
-  var target = event.target
+  var $target = event.target
 
-  if (target.getAttribute('role') === 'button' && event.keyCode === KEY_SPACE) {
+  if ($target.getAttribute('role') === 'button' && event.keyCode === KEY_SPACE) {
     event.preventDefault() // prevent the page from scrolling
-    target.click()
+    $target.click()
   }
 }
 

diff --git a/src/govuk/components/checkboxes/checkboxes.mjs b/src/govuk/components/checkboxes/checkboxes.mjs
@@ -33,17 +33,17 @@ Checkboxes.prototype.init = function () {
   var $inputs = this.$inputs
 
   nodeListForEach($inputs, function ($input) {
-    var target = $input.getAttribute('data-aria-controls')
+    var targetId = $input.getAttribute('data-aria-controls')
 
     // Skip checkboxes without data-aria-controls attributes, or where the
     // target element does not exist.
-    if (!target || !document.getElementById(target)) {
+    if (!targetId || !document.getElementById(targetId)) {
       return
     }
 
     // Promote the data-aria-controls attribute to a aria-controls attribute
     // so that the relationship is exposed in the AOM
-    $input.setAttribute('aria-controls', target)
+    $input.setAttribute('aria-controls', targetId)
     $input.removeAttribute('data-aria-controls')
   })
 
@@ -144,30 +144,30 @@ Checkboxes.prototype.unCheckExclusiveInputs = function ($input) {
  * @param {MouseEvent} event - Click event
  */
 Checkboxes.prototype.handleClick = function (event) {
-  var $target = event.target
+  var $clickedInput = event.target
 
   // Ignore clicks on things that aren't checkbox inputs
-  if ($target.type !== 'checkbox') {
+  if ($clickedInput.type !== 'checkbox') {
     return
   }
 
   // If the checkbox conditionally-reveals some content, sync the state
-  var hasAriaControls = $target.getAttribute('aria-controls')
+  var hasAriaControls = $clickedInput.getAttribute('aria-controls')
   if (hasAriaControls) {
-    this.syncConditionalRevealWithInputState($target)
+    this.syncConditionalRevealWithInputState($clickedInput)
   }
 
   // No further behaviour needed for unchecking
-  if (!$target.checked) {
+  if (!$clickedInput.checked) {
     return
   }
 
   // Handle 'exclusive' checkbox behaviour (ie "None of these")
-  var hasBehaviourExclusive = ($target.getAttribute('data-behaviour') === 'exclusive')
+  var hasBehaviourExclusive = ($clickedInput.getAttribute('data-behaviour') === 'exclusive')
   if (hasBehaviourExclusive) {
-    this.unCheckAllInputsExcept($target)
+    this.unCheckAllInputsExcept($clickedInput)
   } else {
-    this.unCheckExclusiveInputs($target)
+    this.unCheckExclusiveInputs($clickedInput)
   }
 }
 

diff --git a/src/govuk/components/details/details.mjs b/src/govuk/components/details/details.mjs
@@ -85,7 +85,7 @@ Details.prototype.polyfillDetails = function () {
   }
 
   // Bind an event to handle summary elements
-  this.polyfillHandleInputs($summary, this.polyfillSetAttributes.bind(this))
+  this.polyfillHandleInputs(this.polyfillSetAttributes.bind(this))
 }
 
 /**
@@ -110,21 +110,20 @@ Details.prototype.polyfillSetAttributes = function () {
 /**
  * Handle cross-modal click events
  *
- * @param {object} node - element
  * @param {polyfillHandleInputsCallback} callback - function
  */
-Details.prototype.polyfillHandleInputs = function (node, callback) {
-  node.addEventListener('keypress', function (event) {
-    var target = event.target
+Details.prototype.polyfillHandleInputs = function (callback) {
+  this.$summary.addEventListener('keypress', function (event) {
+    var $target = event.target
     // When the key gets pressed - check if it is enter or space
     if (event.keyCode === KEY_ENTER || event.keyCode === KEY_SPACE) {
-      if (target.nodeName.toLowerCase() === 'summary') {
+      if ($target.nodeName.toLowerCase() === 'summary') {
         // Prevent space from scrolling the page
         // and enter from submitting a form
         event.preventDefault()
         // Click to let the click event do all the necessary action
-        if (target.click) {
-          target.click()
+        if ($target.click) {
+          $target.click()
         } else {
           // except Safari 5.1 and under don't support .click() here
           callback(event)
@@ -134,16 +133,16 @@ Details.prototype.polyfillHandleInputs = function (node, callback) {
   })
 
   // Prevent keyup to prevent clicking twice in Firefox when using space key
-  node.addEventListener('keyup', function (event) {
-    var target = event.target
+  this.$summary.addEventListener('keyup', function (event) {
+    var $target = event.target
     if (event.keyCode === KEY_SPACE) {
-      if (target.nodeName.toLowerCase() === 'summary') {
+      if ($target.nodeName.toLowerCase() === 'summary') {
         event.preventDefault()
       }
     }
   })
 
-  node.addEventListener('click', callback)
+  this.$summary.addEventListener('click', callback)
 }
 
 export default Details

diff --git a/src/govuk/components/error-summary/error-summary.mjs b/src/govuk/components/error-summary/error-summary.mjs
@@ -79,8 +79,8 @@ ErrorSummary.prototype.setFocus = function () {
  * @param {MouseEvent} event - Click event
  */
 ErrorSummary.prototype.handleClick = function (event) {
-  var target = event.target
-  if (this.focusTarget(target)) {
+  var $target = event.target
+  if (this.focusTarget($target)) {
     event.preventDefault()
   }
 }
@@ -165,10 +165,10 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
   var $fieldset = $input.closest('fieldset')
 
   if ($fieldset) {
-    var legends = $fieldset.getElementsByTagName('legend')
+    var $legends = $fieldset.getElementsByTagName('legend')
 
-    if (legends.length) {
-      var $candidateLegend = legends[0]
+    if ($legends.length) {
+      var $candidateLegend = $legends[0]
 
       // If the input type is radio or checkbox, always use the legend if there
       // is one.

diff --git a/src/govuk/components/radios/radios.mjs b/src/govuk/components/radios/radios.mjs
@@ -33,17 +33,17 @@ Radios.prototype.init = function () {
   var $inputs = this.$inputs
 
   nodeListForEach($inputs, function ($input) {
-    var target = $input.getAttribute('data-aria-controls')
+    var targetId = $input.getAttribute('data-aria-controls')
 
     // Skip radios without data-aria-controls attributes, or where the
     // target element does not exist.
-    if (!target || !document.getElementById(target)) {
+    if (!targetId || !document.getElementById(targetId)) {
       return
     }
 
     // Promote the data-aria-controls attribute to a aria-controls attribute
     // so that the relationship is exposed in the AOM
-    $input.setAttribute('aria-controls', target)
+    $input.setAttribute('aria-controls', targetId)
     $input.removeAttribute('data-aria-controls')
   })
 

diff --git a/src/govuk/components/tabs/tabs.mjs b/src/govuk/components/tabs/tabs.mjs
@@ -256,11 +256,11 @@ Tabs.prototype.createHistoryEntry = function ($tab) {
 
   // Save and restore the id
   // so the page doesn't jump when a user clicks a tab (which changes the hash)
-  var id = $panel.id
+  var panelId = $panel.id
   $panel.id = ''
   this.changingHash = true
   window.location.hash = this.getHref($tab).slice(1)
-  $panel.id = id
+  $panel.id = panelId
 }
 
 /**
@@ -290,33 +290,45 @@ Tabs.prototype.onTabKeydown = function (event) {
  * Activate next tab
  */
 Tabs.prototype.activateNextTab = function () {
-  var currentTab = this.getCurrentTab()
-  var nextTabListItem = currentTab.parentNode.nextElementSibling
-  if (nextTabListItem) {
-    var nextTab = nextTabListItem.querySelector('.govuk-tabs__tab')
+  var $currentTab = this.getCurrentTab()
+  if (!$currentTab) {
+    return
+  }
+
+  var $nextTabListItem = $currentTab.parentElement.nextElementSibling
+  if (!$nextTabListItem) {
+    return
   }
-  if (nextTab) {
-    this.hideTab(currentTab)
-    this.showTab(nextTab)
-    nextTab.focus()
-    this.createHistoryEntry(nextTab)
+
+  var $nextTab = $nextTabListItem.querySelector('.govuk-tabs__tab')
+  if ($nextTab) {
+    this.hideTab($currentTab)
+    this.showTab($nextTab)
+    $nextTab.focus()
+    this.createHistoryEntry($nextTab)
   }
 }
 
 /**
  * Activate previous tab
  */
 Tabs.prototype.activatePreviousTab = function () {
-  var currentTab = this.getCurrentTab()
-  var previousTabListItem = currentTab.parentNode.previousElementSibling
-  if (previousTabListItem) {
-    var previousTab = previousTabListItem.querySelector('.govuk-tabs__tab')
+  var $currentTab = this.getCurrentTab()
+  if (!$currentTab) {
+    return
+  }
+
+  var $previousTabListItem = $currentTab.parentElement.previousElementSibling
+  if (!$previousTabListItem) {
+    return
   }
-  if (previousTab) {
-    this.hideTab(currentTab)
-    this.showTab(previousTab)
-    previousTab.focus()
-    this.createHistoryEntry(previousTab)
+
+  var $previousTab = $previousTabListItem.querySelector('.govuk-tabs__tab')
+  if ($previousTab) {
+    this.hideTab($currentTab)
+    this.showTab($previousTab)
+    $previousTab.focus()
+    this.createHistoryEntry($previousTab)
   }
 }