ADG-142 Refactor non-modal dialog widget

pages/examples/widgets/dialog/_examples/non-modal-dialog/example.css

@@ -37,4 +37,4 @@ svg#definition {
   width: 16px;
   height: 16px;
   fill: #000;
-}
+}

pages/examples/widgets/dialog/_examples/non-modal-dialog/example.js

@@ -1,70 +1,73 @@
-;(function () {
-  var AdgDialog
+class AdgDialog {
+  constructor (el) {
+    this.openButton = el
+    this.elementToOpenId = this.openButton.getAttribute('data-adg-dialog')
+    this.initContainer(this.elementToOpenId)
+    this.initOpenButton()
+    this.hide()
+  }
+
+  initOpenButton () {
+    this.openButton.setAttribute('aria-expanded', 'false')
 
-  AdgDialog = class AdgDialog {
-    constructor(el) {
-      this.$openButton = $(el)
-      this.initContainer(this.$openButton.attr('data-adg-dialog'))
-      this.initOpenButton()
-    }
+    const dialogHintElement = document.createElement('span')
+    dialogHintElement.classList.add('adg-visually-hidden')
+    dialogHintElement.innerText = ' (dialog)'
 
-    initOpenButton() {
-      this.$openButton.attr('aria-expanded', false)
-      this.$openButton.append(
-        '<span class="adg-visually-hidden"> (dialog)</span>'
-      )
-      return this.$openButton.click(e => {
-        if (this.$container.is(':visible')) {
-          return this.hide()
-        } else {
-          return this.show()
-        }
-      })
-    }
+    this.openButton.appendChild(dialogHintElement)
 
-    initContainer(id) {
-      this.$container = $(`#${id}`)
-      this.$container.attr('data-adg-dialog-container', true)
-      this.initCloseButton()
-      return this.initConfirmButton()
-    }
+    this.openButton.addEventListener('click', () => {
+      if (this.container.hidden) {
+        this.show()
+      } else {
+        this.hide()
+      }
+    })
+  }
 
-    initConfirmButton() {
-      this.$confirmButton = $(
-        '<button>Confirm<span class="adg-visually-hidden"> (close)</span></button>'
-      )
-      this.$container.append(this.$confirmButton)
-      return this.$confirmButton.click(() => {
-        return this.hide()
-      })
-    }
+  initContainer (id) {
+    this.container = document.getElementById(id)
+    this.container.setAttribute('data-adg-dialog-container', '')
+    this.initCloseButton()
+    this.initConfirmButton()
+  }
 
-    initCloseButton() {
-      this.$closeButton = $(
-        '<button class="adg-dialog-icon"><svg class="icon" focusable="false"><use xlink:href="#tooltip" /></svg></span><span class="adg-visually-hidden">Close dialog</span></button>'
-      )
-      this.$container.prepend(this.$closeButton)
-      return this.$closeButton.click(() => {
-        return this.hide()
-      })
-    }
+  initConfirmButton () {
+    this.confirmButton = document.createElement('button')
+    this.confirmButton.setAttribute('type', 'button')
+    this.confirmButton.innerHTML = 'Confirm<span class="adg-visually-hidden"> (close)</span>'
 
-    show() {
-      this.$container.attr('hidden', false)
-      this.$openButton.attr('aria-expanded', true)
-      return this.$closeButton.focus()
-    }
+    this.confirmButton.addEventListener('click', () => this.hide())
 
-    hide() {
-      this.$container.attr('hidden', true)
-      this.$openButton.attr('aria-expanded', false)
-      return this.$openButton.focus()
-    }
+    this.container.append(this.confirmButton)
   }
 
-  $(document).ready(function () {
-    return $('[data-adg-dialog]').each(function () {
-      return new AdgDialog(this)
-    })
-  })
-}).call(this)
+  initCloseButton () {
+    this.closeButton = document.createElement('button')
+    this.closeButton.setAttribute('type', 'button')
+    this.closeButton.classList.add('adg-dialog-icon')
+    this.closeButton.innerHTML = '<svg class="icon" focusable="false"><use xlink:href="#tooltip" /></svg></span><span class="adg-visually-hidden">Close dialog</span>'
+
+    this.closeButton.addEventListener('click', () => this.hide())
+
+    this.container.prepend(this.closeButton)
+  }
+
+  show () {
+    this.container.hidden = false
+    this.openButton.setAttribute('aria-expanded', 'true')
+    this.closeButton.focus()
+  }
+
+  hide () {
+    this.container.hidden = true
+    this.openButton.setAttribute('aria-expanded', 'false')
+    this.openButton.focus()
+  }
+}
+
+const dialogs = []
+
+document
+  .querySelectorAll('[data-adg-dialog]')
+  .forEach((element) => dialogs.push(new AdgDialog(element)))

pages/examples/widgets/dialog/_examples/non-modal-dialog/index.html

@@ -1,4 +1,12 @@
-<svg id="definition" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><symbol id="tooltip" viewbox="0 0 51.976 51.976"><g><path d="M44.373,7.603c-10.137-10.137-26.632-10.138-36.77,0c-10.138,10.138-10.137,26.632,0,36.77s26.632,10.138,36.77,0 		C54.51,34.235,54.51,17.74,44.373,7.603z M36.241,36.241c-0.781,0.781-2.047,0.781-2.828,0l-7.425-7.425l-7.778,7.778 		c-0.781,0.781-2.047,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l7.778-7.778l-7.425-7.425c-0.781-0.781-0.781-2.048,0-2.828 		c0.781-0.781,2.047-0.781,2.828,0l7.425,7.425l7.071-7.071c0.781-0.781,2.047-0.781,2.828,0c0.781,0.781,0.781,2.047,0,2.828 		l-7.071,7.071l7.425,7.425C37.022,34.194,37.022,35.46,36.241,36.241z"></path></g></symbol></defs></svg>
+<svg id="definition" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <symbol id="tooltip" viewbox="0 0 51.976 51.976">
+      <g>
+        <path d="M44.373,7.603c-10.137-10.137-26.632-10.138-36.77,0c-10.138,10.138-10.137,26.632,0,36.77s26.632,10.138,36.77,0 		C54.51,34.235,54.51,17.74,44.373,7.603z M36.241,36.241c-0.781,0.781-2.047,0.781-2.828,0l-7.425-7.425l-7.778,7.778 		c-0.781,0.781-2.047,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l7.778-7.778l-7.425-7.425c-0.781-0.781-0.781-2.048,0-2.828 		c0.781-0.781,2.047-0.781,2.828,0l7.425,7.425l7.071-7.071c0.781-0.781,2.047-0.781,2.828,0c0.781,0.781,0.781,2.047,0,2.828 		l-7.071,7.071l7.425,7.425C37.022,34.194,37.022,35.46,36.241,36.241z"></path>
+      </g>
+    </symbol>
+  </defs>
+</svg>
 <p>
   <button>Focusable element before</button>
 </p>
@@ -12,11 +20,11 @@
   Some text after.
 </p>
 <button>Focusable element after</button>
-<div hidden="" id="my-dialog">
+<div id="my-dialog">
   <p>
     Here are the terms and conditions.
   </p>
   <p>
     Please read them carefully...
   </p>
-</div>
+</div>