1
0
mirror of https://github.com/webslides/WebSlides.git synced 2025-09-01 17:12:43 +02:00

Updated Plugin development (markdown)

Antonio Laguna
2017-04-19 22:18:47 +02:00
parent b8f2a14ff2
commit 9eaf91b7a6

@@ -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.
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);
});
}
}
```