Add Iframe background support

[lutangar]

Hi there,

Regarding #751 , I made few changes to handle an Iframe as a background through the data-background-iframe attribute:

<section data-background-iframe="https://github.com/hakimel/reveal.js">
</section>

This way you can use any webpages as a background.

Cheers,
Lutangar.

[hakimel]

Thanks!

[mkfreeman]

Is there a way to have the background iframes react to click and hover events?

[lutangar]

As a dirty solution, you could tweak the z-index of the backgrounds in reveal.css :

.reveal>.backgrounds {
    ...
    z-index:1;
    ...
}
.reveal .slide-background.present {
    ...
    z-index:1;
    ....
}

[mkfreeman]

Makes sense -- clean enough for me. Thanks!

[AlJohri]

Is there a better solution than this?

Within the showSlide function:

function showSlide( slide ) {
    // ...

    if( background ) {
        // ...
        document.querySelector('.reveal > .backgrounds').style['z-index'] = 0;
        // ...
        if( background.hasAttribute( 'data-loaded' ) === false ) {
            // ...
            if( backgroundImage ) {
                // ...
            }
            // ...
           else if ( backgroundIframe ) {
               // ...
              document.querySelector('.reveal > .backgrounds').style['z-index'] = 1;
           }
       }
   }
}

The two lines added were just:

document.querySelector('.reveal > .backgrounds').style['z-index'] = 0; // reset when not in iframe
document.querySelector('.reveal > .backgrounds').style['z-index'] = 1; // set when in iframe

[justmytwospence]

+1 to @AlJohri's suggestion to adjust the z-index for iframe's exclusively

[gevero]

@AlJohri The solution seems good enough but presents two problems:

• When data are loaded, it works only for the first display of the slide, then if you go back the z-index stays to 0. In order to work one could add the following lines after the data-loaded if block:

if( background.hasAttribute( 'data-loaded' ) === false ) {
            // ...
            if( backgroundImage ) {
                // ...
            }
            // ...
           else if ( backgroundIframe ) {
               // ...
              document.querySelector('.reveal > .backgrounds').style['z-index'] = 1;
           }
}
if (slide.getAttribute( 'data-background-iframe' )) {
     document.querySelector('.reveal > .backgrounds').style['z-index'] = 1;
}

• If viewDistance>1 the z-index settings in changed also for the other loaded slides, since the the changed setting is presentation wide, therefore in order for this hack to work one needs to set viewDistance=1.

[sumitrshah]

@AlJohri Instead of changing the Reveal library, I think the best way to implement this hack is to listen for the 'slidechanged' event and then change the backgrounds z-index if the current slide uses an iFrame background.

For example, if using Reveal in combination with jQuery, I would use the following to make background iFrames reactive:

Reveal.addEventListener('slidechanged', function(event) {               
     if($(event.currentSlide).attr('data-background-iframe')) {
          $('.reveal > .backgrounds').css('z-index', 1);
     } else {
          $('.reveal > .backgrounds').css('z-index', 0);
     }                  
});

Maybe @hakimel will add an option to making iFrame backgrounds active.