diff --git a/Plugin-development.md b/Plugin-development.md index 7b68b2d..4b5273c 100644 --- a/Plugin-development.md +++ b/Plugin-development.md @@ -41,4 +41,31 @@ The constructor gets the WebSlides instance which allows you to call any of the ### Plugins that affect only some slides -There are times in which you may need to add a feature to only certain slides like we do with videos for example. \ No newline at end of file +There are times in which you may need to add a feature to only certain slides like we do with videos for example. Since plugins have access to the `WebSlides` instance and that has access to the `el` which holds all of the slides, the recommended approach is to `querySelectorAll` the elements that interest you: + +```javascript +class MyPlugin { + constructor(wsInstance) { + const elements = wsInstance.el + .querySelectorAll('[data-my-interesting-elements]'); + } +} +``` + +And then use in conjunction with `Slide.getSectionFromEl` and the [events](Core-Api#events-1) that the Slides provide: + +```javascript +class MyPlugin { + constructor(wsInstance) { + const elements = wsInstance.el + .querySelectorAll('[data-my-interesting-elements]'); + + elements.forEach(element => { + const {i} = Slide.getSectionFromEl(element); + const slide = wsInstance.slides[i - 1]; + + slide.el.addEventListener('slide:enable', MyPlugin.onSectionEnabled); + }); + } +} +``` \ No newline at end of file