Merge pull request #39 from bnjamin/fix-dialog-with-include-fragment

Fix dialog with include fragment

Author: muan

index.js

@@ -143,6 +143,23 @@ function loadIncludeFragment(event: Event) {
   loader.setAttribute('src', src)
 }
 
+function updateIncludeFragmentEventListeners(details: Element, src: ?string, preload: boolean) {
+  removeIncludeFragmentEventListeners(details)
+
+  if (src) {
+    details.addEventListener('toggle', loadIncludeFragment, {once: true})
+  }
+
+  if (src && preload) {
+    details.addEventListener('mouseover', loadIncludeFragment, {once: true})
+  }
+}
+
+function removeIncludeFragmentEventListeners(details: Element) {
+  details.removeEventListener('toggle', loadIncludeFragment)
+  details.removeEventListener('mouseover', loadIncludeFragment)
+}
+
 type State = {|
   details: ?Element,
   activeElement: ?Element
@@ -202,6 +219,8 @@ class DetailsDialogElement extends HTMLElement {
 
     details.addEventListener('toggle', toggle)
     state.details = details
+
+    updateIncludeFragmentEventListeners(details, this.src, this.preload)
   }
 
   disconnectedCallback() {
@@ -210,6 +229,7 @@ class DetailsDialogElement extends HTMLElement {
     const {details} = state
     if (!details) return
     details.removeEventListener('toggle', toggle)
+    removeIncludeFragmentEventListeners(details)
     const summary = details.querySelector('summary')
     if (summary) {
       summary.removeEventListener('click', onSummaryClick, {capture: true})
@@ -235,17 +255,7 @@ class DetailsDialogElement extends HTMLElement {
     const state = initialized.get(this)
     if (!state) return
 
-    if (this.src) {
-      details.addEventListener('toggle', loadIncludeFragment, {once: true})
-    } else {
-      details.removeEventListener('toggle', loadIncludeFragment)
-    }
-
-    if (this.src && this.preload) {
-      details.addEventListener('mouseover', loadIncludeFragment, {once: true})
-    } else {
-      details.removeEventListener('mouseover', loadIncludeFragment)
-    }
+    updateIncludeFragmentEventListeners(details, this.src, this.preload)
   }
 }
 

test/test.js

@@ -200,6 +200,69 @@ describe('details-dialog-element', function() {
         assert(!details.open)
       })
     })
+
+    describe('when using with inlcude-fragment', function() {
+      let includeFragment
+      beforeEach(function() {
+        includeFragment = document.createElement('include-fragment')
+        dialog.innerHTML = ''
+        dialog.append(includeFragment)
+        dialog.src = '/404'
+      })
+
+      afterEach(function() {
+        dialog.innerHTML = ''
+        dialog.removeAttribute('src')
+      })
+
+      it('transfers src on toggle', async function() {
+        assert(!details.open)
+        assert.notOk(includeFragment.getAttribute('src'))
+        dialog.toggle(true)
+        await waitForToggleEvent(details)
+        assert(details.open)
+        assert.equal(includeFragment.getAttribute('src'), '/404')
+      })
+
+      it('transfers src on mouseover when preload is true', async function() {
+        assert(!details.open)
+        dialog.preload = true
+        assert(dialog.hasAttribute('preload'))
+        assert.notOk(includeFragment.getAttribute('src'))
+        triggerEvent(details, 'mouseover')
+        assert.equal(includeFragment.getAttribute('src'), '/404')
+      })
+    })
+
+    describe('with inlcude-fragment works for script made dialogs', function() {
+      let includeFragment
+      beforeEach(function() {
+        dialog.remove()
+        dialog = document.createElement('details-dialog')
+        dialog.src = '/404'
+        dialog.preload = true
+        includeFragment = document.createElement('include-fragment')
+        dialog.append(includeFragment)
+        details.append(dialog)
+        includeFragment = document.querySelector('include-fragment')
+      })
+
+      it('transfers src on toggle', async function() {
+        assert(!details.open)
+        assert.notOk(includeFragment.getAttribute('src'))
+        dialog.toggle(true)
+        await waitForToggleEvent(details)
+        assert(details.open)
+        assert.equal(includeFragment.getAttribute('src'), '/404')
+      })
+
+      it('transfers src on mouseover', async function() {
+        assert(!details.open)
+        assert.notOk(includeFragment.getAttribute('src'))
+        triggerEvent(details, 'mouseover')
+        assert.equal(includeFragment.getAttribute('src'), '/404')
+      })
+    })
   })
 })
 
@@ -215,16 +278,17 @@ function waitForToggleEvent(details) {
   })
 }
 
+function triggerEvent(element, name, key) {
+  const event = document.createEvent('Event')
+  event.initEvent(name, true, true)
+  if (key) event.key = key
+  element.dispatchEvent(event)
+}
+
 function pressEscape(details) {
-  const escapeEvent = document.createEvent('Event')
-  escapeEvent.initEvent('keydown', true, true)
-  escapeEvent.key = 'Escape'
-  details.dispatchEvent(escapeEvent)
+  triggerEvent(details, 'keydown', 'Escape')
 }
 
 function pressTab(details) {
-  const escapeEvent = document.createEvent('Event')
-  escapeEvent.initEvent('keydown', true, true)
-  escapeEvent.key = 'Tab'
-  details.dispatchEvent(escapeEvent)
+  triggerEvent(details, 'keydown', 'Tab')
 }