|
1 | 1 | /* eslint-disable github/no-then */ |
2 | 2 |
|
3 | | -;(function() { |
4 | | - 'use strict' |
5 | | - |
6 | | - const privateData = new WeakMap() |
7 | | - |
8 | | - function fire(name, target) { |
9 | | - setTimeout(function() { |
10 | | - const event = target.ownerDocument.createEvent('Event') |
11 | | - event.initEvent(name, false, false) |
12 | | - target.dispatchEvent(event) |
13 | | - }, 0) |
| 3 | +const privateData = new WeakMap() |
| 4 | + |
| 5 | +function fire(name, target) { |
| 6 | + setTimeout(function() { |
| 7 | + const event = target.ownerDocument.createEvent('Event') |
| 8 | + event.initEvent(name, false, false) |
| 9 | + target.dispatchEvent(event) |
| 10 | + }, 0) |
| 11 | +} |
| 12 | + |
| 13 | +function handleData(el, data) { |
| 14 | + return data.then( |
| 15 | + function(html) { |
| 16 | + const parentNode = el.parentNode |
| 17 | + if (parentNode) { |
| 18 | + el.insertAdjacentHTML('afterend', html) |
| 19 | + parentNode.removeChild(el) |
| 20 | + } |
| 21 | + }, |
| 22 | + function() { |
| 23 | + el.classList.add('is-error') |
| 24 | + } |
| 25 | + ) |
| 26 | +} |
| 27 | + |
| 28 | +function getData(el) { |
| 29 | + const src = el.src |
| 30 | + let data = privateData.get(el) |
| 31 | + if (data && data.src === src) { |
| 32 | + return data.data |
| 33 | + } else { |
| 34 | + if (src) { |
| 35 | + data = el.load() |
| 36 | + } else { |
| 37 | + data = Promise.reject(new Error('missing src')) |
| 38 | + } |
| 39 | + privateData.set(el, {src, data}) |
| 40 | + return data |
14 | 41 | } |
| 42 | +} |
15 | 43 |
|
16 | | - function handleData(el, data) { |
17 | | - return data.then( |
18 | | - function(html) { |
19 | | - const parentNode = el.parentNode |
20 | | - if (parentNode) { |
21 | | - el.insertAdjacentHTML('afterend', html) |
22 | | - parentNode.removeChild(el) |
23 | | - } |
24 | | - }, |
25 | | - function() { |
26 | | - el.classList.add('is-error') |
27 | | - } |
28 | | - ) |
| 44 | +export class IncludeFragmentElement extends HTMLElement { |
| 45 | + constructor() { |
| 46 | + super() |
| 47 | + // Preload data cache |
| 48 | + getData(this)['catch'](function() { |
| 49 | + // Ignore `src missing` error on pre-load. |
| 50 | + }) |
29 | 51 | } |
30 | 52 |
|
31 | | - const IncludeFragmentPrototype = Object.create(window.HTMLElement.prototype) |
32 | | - |
33 | | - Object.defineProperty(IncludeFragmentPrototype, 'src', { |
34 | | - get() { |
35 | | - const src = this.getAttribute('src') |
36 | | - if (src) { |
37 | | - const link = this.ownerDocument.createElement('a') |
38 | | - link.href = src |
39 | | - return link.href |
40 | | - } else { |
41 | | - return '' |
42 | | - } |
43 | | - }, |
| 53 | + static get observedAttributes() { |
| 54 | + return ['src'] |
| 55 | + } |
44 | 56 |
|
45 | | - set(value) { |
46 | | - this.setAttribute('src', value) |
| 57 | + get src() { |
| 58 | + const src = this.getAttribute('src') |
| 59 | + if (src) { |
| 60 | + const link = this.ownerDocument.createElement('a') |
| 61 | + link.href = src |
| 62 | + return link.href |
| 63 | + } else { |
| 64 | + return '' |
47 | 65 | } |
48 | | - }) |
| 66 | + } |
49 | 67 |
|
50 | | - function getData(el) { |
51 | | - const src = el.src |
52 | | - let data = privateData.get(el) |
53 | | - if (data && data.src === src) { |
54 | | - return data.data |
| 68 | + set src(val) { |
| 69 | + if (val) { |
| 70 | + this.setAttribute('src', val) |
55 | 71 | } else { |
56 | | - if (src) { |
57 | | - data = el.load() |
58 | | - } else { |
59 | | - data = Promise.reject(new Error('missing src')) |
60 | | - } |
61 | | - privateData.set(el, {src, data}) |
62 | | - return data |
| 72 | + this.removeAttribute('src') |
63 | 73 | } |
64 | 74 | } |
65 | 75 |
|
66 | | - Object.defineProperty(IncludeFragmentPrototype, 'data', { |
67 | | - get() { |
68 | | - return getData(this) |
69 | | - } |
70 | | - }) |
| 76 | + get data() { |
| 77 | + return getData(this) |
| 78 | + } |
71 | 79 |
|
72 | | - IncludeFragmentPrototype.attributeChangedCallback = function(attrName) { |
73 | | - if (attrName === 'src') { |
| 80 | + attributeChangedCallback(attribute) { |
| 81 | + if (attribute === 'src') { |
74 | 82 | // Reload data load cache. |
75 | 83 | const data = getData(this) |
76 | 84 |
|
|
81 | 89 | } |
82 | 90 | } |
83 | 91 |
|
84 | | - IncludeFragmentPrototype.createdCallback = function() { |
85 | | - // Preload data cache |
86 | | - getData(this)['catch'](function() { |
87 | | - // Ignore `src missing` error on pre-load. |
88 | | - }) |
89 | | - } |
90 | | - |
91 | | - IncludeFragmentPrototype.attachedCallback = function() { |
| 92 | + connectedCallback() { |
92 | 93 | this._attached = true |
93 | 94 | if (this.src) { |
94 | 95 | handleData(this, getData(this)) |
95 | 96 | } |
96 | 97 | } |
97 | 98 |
|
98 | | - IncludeFragmentPrototype.detachedCallback = function() { |
| 99 | + disconnectedCallback() { |
99 | 100 | this._attached = false |
100 | 101 | } |
101 | 102 |
|
102 | | - IncludeFragmentPrototype.request = function() { |
| 103 | + request() { |
103 | 104 | const src = this.src |
104 | 105 | if (!src) { |
105 | 106 | throw new Error('missing src') |
|
114 | 115 | }) |
115 | 116 | } |
116 | 117 |
|
117 | | - IncludeFragmentPrototype.load = function() { |
| 118 | + load() { |
118 | 119 | const self = this |
119 | 120 |
|
120 | 121 | return Promise.resolve() |
|
152 | 153 | ) |
153 | 154 | } |
154 | 155 |
|
155 | | - IncludeFragmentPrototype.fetch = function(request) { |
| 156 | + fetch(request) { |
156 | 157 | return fetch(request) |
157 | 158 | } |
| 159 | +} |
158 | 160 |
|
159 | | - window.IncludeFragmentElement = document.registerElement('include-fragment', { |
160 | | - prototype: IncludeFragmentPrototype |
161 | | - }) |
162 | | -})() |
| 161 | +if (!window.customElements.get('include-fragment')) { |
| 162 | + window.IncludeFragmentElement = IncludeFragmentElement |
| 163 | + window.customElements.define('include-fragment', IncludeFragmentElement) |
| 164 | +} |
0 commit comments