mirror of
https://github.com/webslides/WebSlides.git
synced 2025-09-01 17:12:43 +02:00
Updated Plugin development (markdown)
@@ -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);
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
Reference in New Issue
Block a user