10

Plugin development

José Luis Antúnez edited this page 2017-08-15 17:50:47 +02:00

Table of Contents

• Getting started
• Plugins that affect only some slides

Almost every single feature of WebSlides is a plugin. The core only consists of methods that allows you to navigate through the slides while the plugins do the rest. They can be overwritten and you are able to create your custom plugins. Just call registerPlugin (as seen on the API) before creating the instance:

// Adding the constructor to WebSlides
WebSlides.registerPlugin('myPlugin', MyPlugin);

// Starting WebSlides
// Your plugin will be constructed at this time and it will receive the webslides instance as the only parameter.
const ws = new WebSlides();
// You can also access ws.plugins.myPlugin now

This allows you to rewrite the navigation to use a menu (for example) or add that missing piece of functionality you'd like to see. See this part of the code to see all the plugins we're using.

Here's the list with links to any plugins that have any relevant information:

• autoslide - Autosliding plugin that will autoadvance the slides over the time.
• clickNav - Allows to click on the page to get to the next slide.
• grid - Shows a grid over the page for easy prototyping by pressing ENTER.
• hash - In charge of updating the hash and reacting to any changes to it.
• keyboard - Handles keyboard shortcuts.
• nav - Shows the navigation on the bottom with the arrows and numbers. And keeps it updated!
• scroll - Allows to navigate with scroll.
• touch - Allows to navigate with touch gestures.
• video - Allows to pause video and autoplay them upon entering the slide.
• youtube - Allows to control YouTube videos.
• zoom - Controls the slides index.

Getting started

When creating a new plugin you can use Classes. Something like this:

class MyPlugin {
  constructor(wsInstance) {
    // Do your magic 🌟
  }
}

The constructor gets the WebSlides instance which allows you to call any of the public methods.

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. 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:

class MyPlugin {
  constructor(wsInstance) {
    const elements = wsInstance.el
        .querySelectorAll('[data-my-interesting-elements]');
  }
}

And then use in conjunction with Slide.getSectionFromEl and the events that the Slides provide:

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);
    });
  }
}

Tutorials:

• Components
• Classes (CSS Syntax)
• Media (images, videos...)

Create stories with karma — webslides.tv