From f882989c69f8246ab0dc7e78e8de7be58a29b5db Mon Sep 17 00:00:00 2001 From: Runn Vermel Date: Thu, 6 Oct 2016 09:33:36 -0700 Subject: [PATCH 1/6] Firing event when highlight event listener is registered If you place prism highlighter in another component, there's no way to know when the highlight event listener is registered, resulting in a possible race condition - highlight events being sent out before the event listener is even registered. By firing a (prism-highlighter-highlight-event-registered) event after the listener is registered, the host can listen for the fired event, and act accordingly. --- prism-highlighter.html | 1 + 1 file changed, 1 insertion(+) diff --git a/prism-highlighter.html b/prism-highlighter.html index 0458466..22d98c0 100644 --- a/prism-highlighter.html +++ b/prism-highlighter.html @@ -44,6 +44,7 @@ attached: function() { (this.parentElement || this.parentNode.host).addEventListener(HIGHLIGHT_EVENT, this._handler); + this.fire('prism-highlighter-highlight-event-registered'); }, detached: function() { From b582175a799ee362b4a4d5b342d442d99c48e784 Mon Sep 17 00:00:00 2001 From: Runn Vermel Date: Fri, 7 Oct 2016 09:28:29 -0700 Subject: [PATCH 2/6] added @event comment added @event comment so the event shows up in the auto generated docs. --- prism-highlighter.html | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/prism-highlighter.html b/prism-highlighter.html index 22d98c0..b5fbfed 100644 --- a/prism-highlighter.html +++ b/prism-highlighter.html @@ -41,7 +41,12 @@ ready: function() { this._handler = this._highlight.bind(this); }, - +/** +* Fired right after the syntax-highlight event listener is registered on the page. +* this event signifies the prism-element is ready to intercept any highlight events. +* +* @event prism-highlighter-highlight-event-registered +*/ attached: function() { (this.parentElement || this.parentNode.host).addEventListener(HIGHLIGHT_EVENT, this._handler); this.fire('prism-highlighter-highlight-event-registered'); From 0623966787f68f9d469fc38fe97c67fdc3f61153 Mon Sep 17 00:00:00 2001 From: Runn Vermel Date: Fri, 7 Oct 2016 09:30:31 -0700 Subject: [PATCH 3/6] Update prism-highlighter.html --- prism-highlighter.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/prism-highlighter.html b/prism-highlighter.html index b5fbfed..5c9be25 100644 --- a/prism-highlighter.html +++ b/prism-highlighter.html @@ -15,9 +15,13 @@ Syntax highlighting via [Prism](http://prismjs.com/). Place a `` in your document, preferably as a direct child of -``. It will listen for `syntax-highlight` events on its parent element, +``. + +It will listen for `syntax-highlight` events on its parent element, and annotate the code being provided via that event. +a `prism-highlighter-highlight-event-registered` event will be fired when the event listener is registered on the page. + The `syntax-highlight` event's detail is expected to have a `code` property containing the source to highlight. The event detail can optionally contain a `lang` property, containing a string like `"html"`, `"js"`, etc. From d32b354e25f4e04920754135219c78823a7fdeed Mon Sep 17 00:00:00 2001 From: Runn Vermel Date: Fri, 7 Oct 2016 09:35:22 -0700 Subject: [PATCH 4/6] Improve shadow dom documentation Added references to how to make shadow dom work. --- prism-highlighter.html | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/prism-highlighter.html b/prism-highlighter.html index 5c9be25..3e52895 100644 --- a/prism-highlighter.html +++ b/prism-highlighter.html @@ -17,10 +17,21 @@ Place a `` in your document, preferably as a direct child of ``. +For shadow Dom support, make sure to import the html file with the theme: + +``` + +``` +and include the call the style: + +``` + +``` + It will listen for `syntax-highlight` events on its parent element, and annotate the code being provided via that event. -a `prism-highlighter-highlight-event-registered` event will be fired when the event listener is registered on the page. +A `prism-highlighter-highlight-event-registered` event will be fired when the event listener is registered on the page. The `syntax-highlight` event's detail is expected to have a `code` property containing the source to highlight. The event detail can optionally contain a From e2e800b076767c2323fd5c18cc274b0d63a2eb83 Mon Sep 17 00:00:00 2001 From: Runn Vermel Date: Thu, 13 Oct 2016 14:27:32 -0700 Subject: [PATCH 5/6] added test to ensure the event is received. --- test/prism-element.html | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/test/prism-element.html b/test/prism-element.html index 98bd0db..72f5b63 100644 --- a/test/prism-element.html +++ b/test/prism-element.html @@ -155,6 +155,20 @@ }); }); }); + + suite('Prism Highlighter fires a "prism-highlighter-highlight-event-registered" event ', function() { + var eventObj; + + suiteSetup(function(){ + document.addEventListener('prism-highlighter-highlight-event-registered',function(evt){ + eventObj = evt.detail; + }); + }); + + test('impSVG fixture is created', function() { + assert.isDefined(eventObj, 'event is defined'); + }); + }); From 2861960780229f3ed7a41adedd12cc014e273580 Mon Sep 17 00:00:00 2001 From: Runn Vermel Date: Thu, 6 Oct 2016 09:33:36 -0700 Subject: [PATCH 6/6] Fixes #26 Firing event when highlight event listener is registered If you place prism highlighter in another component, there's no way to know when the highlight event listener is registered, resulting in a possible race condition - highlight events being sent out before the event listener is even registered. By firing a (prism-highlighter-highlight-event-registered) event after the listener is registered, the host can listen for the fired event, and act accordingly. I've also improved shadow dom documentation, and added references to how to make shadow dom work. --- prism-highlighter.html | 25 +++++++++++++++++++++++-- test/prism-element.html | 14 ++++++++++++++ 2 files changed, 37 insertions(+), 2 deletions(-) diff --git a/prism-highlighter.html b/prism-highlighter.html index 0458466..3e52895 100644 --- a/prism-highlighter.html +++ b/prism-highlighter.html @@ -15,9 +15,24 @@ Syntax highlighting via [Prism](http://prismjs.com/). Place a `` in your document, preferably as a direct child of -``. It will listen for `syntax-highlight` events on its parent element, +``. + +For shadow Dom support, make sure to import the html file with the theme: + +``` + +``` +and include the call the style: + +``` + +``` + +It will listen for `syntax-highlight` events on its parent element, and annotate the code being provided via that event. +A `prism-highlighter-highlight-event-registered` event will be fired when the event listener is registered on the page. + The `syntax-highlight` event's detail is expected to have a `code` property containing the source to highlight. The event detail can optionally contain a `lang` property, containing a string like `"html"`, `"js"`, etc. @@ -41,9 +56,15 @@ ready: function() { this._handler = this._highlight.bind(this); }, - +/** +* Fired right after the syntax-highlight event listener is registered on the page. +* this event signifies the prism-element is ready to intercept any highlight events. +* +* @event prism-highlighter-highlight-event-registered +*/ attached: function() { (this.parentElement || this.parentNode.host).addEventListener(HIGHLIGHT_EVENT, this._handler); + this.fire('prism-highlighter-highlight-event-registered'); }, detached: function() { diff --git a/test/prism-element.html b/test/prism-element.html index 98bd0db..72f5b63 100644 --- a/test/prism-element.html +++ b/test/prism-element.html @@ -155,6 +155,20 @@ }); }); }); + + suite('Prism Highlighter fires a "prism-highlighter-highlight-event-registered" event ', function() { + var eventObj; + + suiteSetup(function(){ + document.addEventListener('prism-highlighter-highlight-event-registered',function(evt){ + eventObj = evt.detail; + }); + }); + + test('impSVG fixture is created', function() { + assert.isDefined(eventObj, 'event is defined'); + }); + });