mirror of
https://github.com/webslides/WebSlides.git
synced 2025-09-21 02:11:33 +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
|
### 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