AddThis Layers in Full Screen mode

I’m making a slideshow with full screen functionality (FancyBox 3), it’s using the RequestFullScreen method on the container div, which means any other element in the body is not accessible in full screen mode. (correct me if i’m wrong)

I would like to include an AddThis Expanding Share button in the slideshow, but because it’s created dynamically by the AddThis js, it appends the Smart Layers before the end of the body, not at the end of the slideshow container div therefore it’s not included in the full screen slideshow.

I couldn’t find any info on Smart Layers DOM placement in the AddThis API.

What I’ve tried is seems like a bad idea, to manually appendTo the necessary divs to the slideshow container after the divs are created by AddThis, I managed to “cut and paste” the '.at-expanding-share-button' and it’s working so far, but I can’t “catch” the '#at-expanded-menu-host' (which is the layer created by AddThis for more sharing options, with the dark background), and I’m not even sure if this method will work properly…

Any help would be appreciated.

Answer

I figured it out! 🙂 I thought I share my experience/solution, if anyone has similar difficulties.

What won’t work and why:

• First I’ve tried to communicate with the AddThis API to tell it to put its layers to a premade container, which looks like impossible and the AddThis team also told me that there is no solution for manual layer DOM placement, it’s always appending those to the end of the body (at least for now, maybe they will implement this option into their API).

• Then I’ve tried to manually append those layers to the Fancy-Box container, which was a dead end because when the slideshow closes, it removes its container from the markup, so the AddThis layers disappeared and I couldn’t reinit it (maybe others have some solution for that, but I just couldn’t figure it out).

• By the way, the “More Sharing Options” layer is created when the share + button is clicked.

My solution:

• Instead of appending the layers to the dynamic slideshow container, I’ve created a static div at the end of the body, appended the layers to it when they are created, and set the Fancy-Box parent div to my container (note that Fancy-Box full screen functionality makes its own div into full screen, so I had to use my own full screen function for the container with the layers and the slideshow).

I’ve used sindresorhus’s screenfull for easier/cross-browser full screen functions.

    var FullScreenContainer = $('#container');

    // Check if AddThis Layers are ready
    var checkLayers = setInterval(function() { appendLayers(); }, 1000);
        // Append the layers to FullScreenContainer
        function appendLayers() {
            var layers = $('.at-expanding-share-button, #_atssh');
            if(layers.length > 0){
                addthis.layers.refresh();
                layers.appendTo(FullScreenContainer);
                clearInterval(checkLayers);
                console.log('layers added');
            }
            else {
                console.log('not found')
            }
        }
    // Check for more layers when the share icon clicked
    $(document).on('click', ".at-expanding-share-button-toggle", function() {
            var checkMoreLayers = setInterval(function() { catchLayers(); }, 1000);
            function catchLayers() {
                var morelayers = $('#at-expanded-menu-host');
                if(morelayers.length > 0){
                    morelayers.appendTo(FullScreenContainer);
                    clearInterval(checkMoreLayers);
                    console.log('more layers added');
                }
                else {
                    console.log('did not found more')
                }
            }
    });

    // Don't forget to disable the full screen function in Fancy-Box, 
    // then call them when necessary (onInit, clickSlide, clickOutside 
    // and the close button)
    function enterFullscreen() {
        screenfull.request($('#container')[0]);
    }
    function exitFullscreen() {
        if (screenfull.isFullscreen) {
            screenfull.exit();
            $.fancybox.getInstance().close();
        }
        if (!screenfull.isFullscreen) {
            $.fancybox.getInstance().close();
        }
    }

And you are good to go. I hope this helps for anybody else! 🙂