fix/issue-395/dialogs (#409)

* Update dialog.js

* Replaced arrow functions in event listeners with bind to properly manage context.

src/components/dialog/dialog.js

@@ -1,59 +1,67 @@
+/* eslint-disable max-len */
 class Dialog {
   constructor(element) {
-    this.dialog = element
-    this.dialogWrapper = element.querySelector('.nsw-dialog__wrapper')
-    this.openBtn = document.querySelectorAll('.js-open-dialog-'.concat(element.getAttribute('id')))
-    this.closeBtn = element.querySelectorAll('.js-close-dialog')
-    // eslint-disable-next-line max-len
-    this.focusableEls = element.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])')
+    this.element = element
+    this.elementWrapper = this.element.querySelector('.nsw-dialog__wrapper')
+    this.openBtn = document.querySelectorAll(`.js-open-dialog-${this.element.getAttribute('id')}`)
+    this.closeBtn = this.element.querySelectorAll('.js-close-dialog')
+    this.focusableEls = this.element.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])')
     this.body = document.body
-    this.openEvent = (e) => this.openDialog(e)
-    this.closeEvent = (e) => this.closeDialog(e)
-    this.clickEvent = (e) => this.clickDialog(e)
-    this.trapEvent = (e) => this.trapFocus(e)
+    this.openEvent = this.openDialog.bind(this)
+    this.closeEvent = this.closeDialog.bind(this)
+    this.clickEvent = this.clickDialog.bind(this)
+    this.trapEvent = this.trapFocus.bind(this)
   }
 
   init() {
     this.controls()
   }
 
   controls() {
+    if (!this.elementWrapper) return
+
     this.openBtn.forEach((btn) => {
       btn.addEventListener('click', this.openEvent, false)
     })
     this.closeBtn.forEach((btn) => {
       btn.addEventListener('click', this.closeEvent, false)
     })
 
-    if (this.dialog.classList.contains('js-dialog-dismiss')) {
-      this.dialog.addEventListener('click', this.clickEvent, false)
+    if (this.element.classList.contains('js-dialog-dismiss')) {
+      this.element.addEventListener('click', this.clickEvent, false)
     }
 
-    this.focusableEls[this.focusableEls.length - 1].addEventListener('blur', this.trapEvent, false)
+    if (this.focusableEls.length > 0) {
+      this.focusableEls[this.focusableEls.length - 1].addEventListener('blur', this.trapEvent, false)
+    }
   }
 
   openDialog() {
-    this.dialog.setAttribute('aria-expanded', 'true')
-    this.dialog.classList.add('active')
+    this.element.setAttribute('aria-expanded', 'true')
+    this.element.classList.add('active')
     this.body.classList.add('dialog-active')
-    this.focusableEls[0].focus()
+    if (this.focusableEls.length > 0) {
+      this.focusableEls[0].focus()
+    }
   }
 
   closeDialog() {
-    this.dialog.setAttribute('aria-expanded', 'false')
-    this.dialog.classList.remove('active')
+    this.element.setAttribute('aria-expanded', 'false')
+    this.element.classList.remove('active')
     this.body.classList.remove('dialog-active')
   }
 
-  clickDialog(e) {
-    if (!this.dialogWrapper.contains(e.target)) {
+  clickDialog(event) {
+    if (!this.elementWrapper.contains(event.target)) {
       this.closeDialog()
     }
   }
 
-  trapFocus(e) {
-    e.preventDefault()
-    this.focusableEls[0].focus()
+  trapFocus(event) {
+    event.preventDefault()
+    if (this.focusableEls.length > 0) {
+      this.focusableEls[0].focus()
+    }
   }
 }