Merge pull request #31 from github/src

<details-dialog src=""> + <include-fragment>

Author: muan

README.md

@@ -24,6 +24,23 @@ import 'details-dialog-element'
 </details>
 ```
 
+## Deferred loading
+
+Dialog content can be loaded from a server by embedding an [`<include-fragment>`][fragment] element.
+
+```html
+<details>
+  <summary>Robots</summary>
+  <details-dialog src="/robots" preload>
+    <include-fragment>Loading…</include-fragment>
+  </details-dialog>
+</details>
+```
+
+The `src` attribute value is copied to the `<include-fragment>` the first time the `<details>` button is toggled open, which starts the server fetch.
+
+If the `preload` attribute is present, hovering over the `<details>` element will trigger the server fetch.
+
 ## Events
 
 ### `details-dialog:will-close`
@@ -52,9 +69,6 @@ Browsers without native [custom element support][support] require a [polyfill][]
 - Safari
 - Microsoft Edge
 
-[support]: https://caniuse.com/#feat=custom-elementsv1
-[polyfill]: https://github.com/webcomponents/custom-elements
-
 ## Development
 
 ```
@@ -65,3 +79,7 @@ npm test
 ## License
 
 Distributed under the MIT license. See LICENSE for details.
+
+[fragment]: https://github.com/github/include-fragment-element/
+[support]: https://caniuse.com/#feat=custom-elementsv1
+[polyfill]: https://github.com/webcomponents/custom-elements

content.html

@@ -0,0 +1 @@
+<a href="./content.html">content.html</a>

index.html

@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <!-- <script type="text/javascript" src="dist/index.umd.js"></script> -->
   <script type="text/javascript" src="https://unpkg.com/details-dialog-element@latest"></script>
+  <script type="text/javascript" src="https://unpkg.com/include-fragment-element@latest"></script>
   <title>details-dialog-element demo</title>
   <link href="./index.css" rel="stylesheet">
   <link href="https://unpkg.com/primer@latest/build/build.css" rel="stylesheet">
@@ -63,6 +64,13 @@
     </details-dialog>
   </details>
 
+  <details class="details-reset details-with-dialog mt-4">
+    <summary class="btn">Dialog with &lt;include-fragment&gt;</summary>
+    <details-dialog class="Box details-dialog anim-fade-in fast narrow" src="./content.html">
+      <div class="Box-body"><include-fragment>loading</include-fragment></div>
+    </details-dialog>
+  </details>
+
   <details class="details-reset details-with-dialog mt-4">
     <summary class="btn">Dialog with autofocus</summary>
     <details-dialog class="details-dialog anim-fade-in fast narrow">

index.js

@@ -127,6 +127,23 @@ function toggleDetails(details: Element, open: boolean) {
   }
 }
 
+function loadIncludeFragment(event: Event) {
+  const details = event.currentTarget
+  if (!(details instanceof Element)) return
+  const dialog = details.querySelector('details-dialog')
+  if (!(dialog instanceof DetailsDialogElement)) return
+  const loader = dialog.querySelector('include-fragment:not([src])')
+  if (!loader) return
+
+  const src = dialog.src
+  if (src === null) return
+
+  loader.addEventListener('loadend', () => {
+    autofocus(dialog)
+  })
+  loader.setAttribute('src', src)
+}
+
 type State = {|
   details: ?Element,
   activeElement: ?Element
@@ -157,6 +174,22 @@ class DetailsDialogElement extends HTMLElement {
     })
   }
 
+  get src(): ?string {
+    return this.getAttribute('src')
+  }
+
+  set src(value: string) {
+    this.setAttribute('src', value)
+  }
+
+  get preload(): boolean {
+    return this.hasAttribute('preload')
+  }
+
+  set preload(value: boolean) {
+    value ? this.setAttribute('preload', '') : this.removeAttribute('preload')
+  }
+
   connectedCallback() {
     this.setAttribute('role', 'dialog')
     const state = initialized.get(this)
@@ -194,6 +227,28 @@ class DetailsDialogElement extends HTMLElement {
     if (!details) return
     toggleDetails(details, open)
   }
+
+  static get observedAttributes() {
+    return ['src', 'preload']
+  }
+
+  attributeChangedCallback() {
+    const details = this.parentElement
+    if (!details) return
+    const state = initialized.get(this)
+    if (!state) return
+
+    if (this.src) {
+      details.addEventListener('toggle', loadIncludeFragment, {once: true})
+
+      if (this.preload) {
+        details.addEventListener('mouseover', loadIncludeFragment, {once: true})
+      }
+    } else {
+      details.removeEventListener('toggle', loadIncludeFragment)
+      details.removeEventListener('mouseover', loadIncludeFragment)
+    }
+  }
 }
 
 export default DetailsDialogElement