Skip to content

Add event when highlight event listener is registered #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Add event when highlight event listener is registered #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f882989
Firing event when highlight event listener is registered
runn-vermel Oct 6, 2016
b582175
added @event comment
runn-vermel Oct 7, 2016
0623966
Update prism-highlighter.html
runn-vermel Oct 7, 2016
d32b354
Improve shadow dom documentation
runn-vermel Oct 7, 2016
e2e800b
added test to ensure the event is received.
runn-vermel Oct 13, 2016
2861960
Fixes #26
runn-vermel Oct 6, 2016
a47fd40
Merge branch 'master' of https://github.com/runn-vermel/prism-element
Oct 13, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 23 additions & 2 deletions prism-highlighter.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,24 @@
Syntax highlighting via [Prism](http://prismjs.com/).

Place a `<prism-highlighter>` in your document, preferably as a direct child of
`<body>`. It will listen for `syntax-highlight` events on its parent element,
`<body>`.

For shadow Dom support, make sure to import the html file with the theme:

```
<link rel="import" href="bower_components/prism-element/prism-theme-default.html">
```
and include the call the style:

```
<style is="custom-style" include="prism-theme-default"></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.
Expand All @@ -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() {
Expand Down
14 changes: 14 additions & 0 deletions test/prism-element.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
});
</script>
</body>
</html>