From af4a47a2313889727ec3d030eb376b430f10ec29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomek=20Wytr=C4=99bowicz?= Date: Tue, 4 Sep 2018 01:13:52 +0200 Subject: [PATCH 1/7] Forward `onload` and `error` events on itself, Allows preventing FOUC in https://github.com/Starcounter/starcounter-include/issues/93 --- README.md | 11 ++++++ enlighted-link.html | 12 ++++++- test/events.html | 84 +++++++++++++++++++++++++++++++++++++++++++++ test/index.html | 3 +- 4 files changed, 108 insertions(+), 2 deletions(-) create mode 100644 test/events.html diff --git a/README.md b/README.md index c8ef649..6f90191 100644 --- a/README.md +++ b/README.md @@ -56,6 +56,17 @@ The element forwards [`link` element's content attributes](https://dev.w3.org/ht - sizes - title +## Properties + +Property | Options | Default | Description +--- | --- | --- | --- +`link` | *HTMLLinkElement* | | Created `` element, bare in mind that it may not be disconnected from `document.head`, if `` is disconnected, or `null` if the element was not connected at all. + +## Events + +The element forwards following events from created ``: +- `load`, +- `error` ## [Contributing and Development](CONTRIBUTING.md) diff --git a/enlighted-link.html b/enlighted-link.html index 7296aa3..63a4bf6 100644 --- a/enlighted-link.html +++ b/enlighted-link.html @@ -14,7 +14,17 @@ ] } connectedCallback(){ - const link = this.link = this.link || document.createElement('link'); + const forwardEvent = (oldEvent)=>{ + this.dispatchEvent(new oldEvent.constructor(oldEvent.type, oldEvent)); + } + let link; + if(this.link){ + link = this.link; + } else { + link = this.link = this.link || document.createElement('link'); + link.addEventListener('load', forwardEvent); + link.addEventListener('error', forwardEvent); + } for(let attrNo = 0, len = this.attributes.length; attrNo < len; attrNo++){ link.setAttribute(this.attributes[attrNo].name, this.attributes[attrNo].value); diff --git a/test/events.html b/test/events.html new file mode 100644 index 0000000..003edff --- /dev/null +++ b/test/events.html @@ -0,0 +1,84 @@ + + + + + + + + + + + + + + + + + + diff --git a/test/index.html b/test/index.html index 263794d..a120f9c 100644 --- a/test/index.html +++ b/test/index.html @@ -19,7 +19,8 @@ 'spec.html', 'added-in-shadow.html', 'attributes.html', - 're-attached.html' + 're-attached.html', + 'events.html' ]); From 200943a0d1b54b416ce68dd23e887841e0febc37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomek=20Wytr=C4=99bowicz?= Date: Tue, 4 Sep 2018 01:26:04 +0200 Subject: [PATCH 2/7] Update OSX for WCT --- wct.conf.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/wct.conf.json b/wct.conf.json index c565c22..5b0f648 100644 --- a/wct.conf.json +++ b/wct.conf.json @@ -10,8 +10,7 @@ "platform": "Windows 10" }, { "browserName": "safari", - "platform": "OS X 10.11", - "version": "10" + "platform": "OS X 10.13" }] } } From f8047ca6412ba9846279c30d001759b7cad4ed83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomek=20Wytr=C4=99bowicz?= Date: Tue, 4 Sep 2018 01:48:32 +0200 Subject: [PATCH 3/7] Give more time for polyfill in Edge and Safari --- test/events.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/test/events.html b/test/events.html index 003edff..c4ae9e3 100644 --- a/test/events.html +++ b/test/events.html @@ -22,9 +22,9 @@ errorSpy = sinon.spy(); shadowHost = document.createElement('div'); shadowHost.attachShadow({mode:'open'}); - shadowHost.shadowRoot.innerHTML = ``; - shadowHost.shadowRoot.innerHTML = ``; - enlightedLink = shadowHost.shadowRoot.querySelector('enlighted-link'); + enlightedLink = document.createElement('enlighted-link'); + enlightedLink.setAttribute('rel', 'import'); + shadowHost.shadowRoot.appendChild(enlightedLink); }); afterEach(function() { shadowHost.remove(); @@ -39,7 +39,7 @@ expect(loadSpy).to.be.calledOnce; expect(loadSpy.args[0][0].type).to.equal('load'); done(); - },100); + }, 200); document.body.appendChild(shadowHost); }); it(`only one \`load\` event when link is loaded for re-attached element`, function(done) { @@ -51,7 +51,7 @@ expect(loadSpy).to.be.calledOnce; expect(loadSpy.args[0][0].type).to.equal('load'); done(); - },100); + }, 200); document.body.appendChild(shadowHost); }); it(`\`error\` event when link is errored`, function(done) { @@ -62,7 +62,7 @@ expect(errorSpy).to.be.calledOnce; expect(errorSpy.args[0][0].type).to.equal('error'); done(); - },100); + }, 200); document.body.appendChild(shadowHost); }); it(`only one \`error\` event when link is errored for re-attached element`, function(done) { @@ -74,7 +74,7 @@ expect(errorSpy).to.be.calledOnce; expect(errorSpy.args[0][0].type).to.equal('error'); done(); - },100); + }, 200); document.body.appendChild(shadowHost); }); From 28301ff2fcc36b8013b188ac0d174d58814cc444 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomek=20Wytr=C4=99bowicz?= Date: Tue, 4 Sep 2018 11:20:23 +0200 Subject: [PATCH 4/7] Change quotes in test descriptions, https://github.com/Juicy/enlighted-link/pull/3#discussion_r214836440 --- test/events.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/test/events.html b/test/events.html index c4ae9e3..9a76b2e 100644 --- a/test/events.html +++ b/test/events.html @@ -15,7 +15,7 @@