englishextra/iframe-lightbox

Event handling

gemmadlou opened this issue · 5 comments

gemmadlou commented

It would be awesome if there was a way of listening to events

  • when the iframe lightbox opens, when it closes
  • when the video starts playing etc

It may be overkill for what you originally intended as it's a great little plugin already. But if it's something you've considered, it'd be a great addition.

englishextra commented

@gemmadlou Hi, there.

What can be done about is to:

  • add those three opened / showing / loaded classes to <HTML> element, and then remove them as this can be easily achieved.

  • Then I guess you'll have to setInterval that waits for these classes added or removed:

var slot;
var onIframeLightboxIsLoaded = function () {
  if (document.documentElement.classList.contains("iframe-lightbox-is-loaded")) {
    clearInterval(slot);
    slot = null;
    // callback
  }
};
slot = setInterval(onIframeLightboxIsLoaded, 100);
gemmadlou commented

Thanks @englishextra. That seems like it would work. I did something different though.

I've forked your project with event handling added to your work. I however, changed the API on how the IframeLightBox constructor function is instantiated. Instead of the rates being its own parameter, I used an options object parameter instead. It changes the core code.

https://github.com/gemmadlou/iframe-lightbox

Hope you don't mind. :)

eg.

new IframeLightbox(el, {
    rates: 500, // default 500
    etc...
});

The event handling is as below:

[].forEach.call(document.getElementsByClassName("iframe-lightbox-link"), function(el) {
   el.lightbox = new IframeLightbox(el, {
       onIframeLoaded: function(instance) {
           console.log('loaded', instance);
       },
       onCreated: function(instance) {
           console.log('created', instance)
       },
       onOpened: function(instance) {
           console.log('opened', instance)
       }
   });
});

If you like it - I could make a pull request back to you.

I've also minified the code here too.

englishextra commented

@gemmadlou

[].forEach.call(document.getElementsByClassName("iframe-lightbox-link"), function(el) {
   el.lightbox = new IframeLightbox(el, {
       onIframeLoaded: function(instance) {
           console.log('loaded', instance);
       },
       onCreated: function(instance) {
           console.log('created', instance)
       },
       onOpened: function(instance) {
           console.log('opened', instance)
       }
   });
});

This is how t's gonna be handled. Sure. everything is fine, please send the PR, so that I could see how onIframeLoaded and others are logically organized.

gemmadlou commented

Great. I've made a pull request. But I can see I'm failing the jslint. I'll amend that.

englishextra commented

@gemmadlou I dont care about jslint, but jshint is important in my case

Closed as discussed changes have been made #3

Many thanks to @gemmadlou

A bit later I'll add a new version tag and publish to npm and register with bower

  • 🎉1