lightbox.js

Go to the documentation of this file.

define(function (require) {

    var elgg = require('elgg');
    var $ = require('jquery');
    require('elgg/init');
    require('jquery.colorbox');

    var lightbox = {

        getOptions: function (opts) {
            if (!$.isPlainObject(opts)) {
                opts = {};
            }

            // data set server side using elgg.data,site hook
            var defaults = elgg.data.lightbox;

            if (!defaults.reposition) {
                // don't move colorbox on small viewports https://github.com/Elgg/Elgg/issues/5312
                defaults.reposition = $(window).height() > 600;
            }

            elgg.provide('elgg.ui.lightbox');
            
            var settings = $.extend({}, defaults, opts);

            return elgg.trigger_hook('getOptions', 'ui.lightbox', null, settings);
        },

        bind: function (selector, opts, use_element_data) {
            if (!$.isPlainObject(opts)) {
                opts = {};
            }

            // Allow direct binding to allow grouping by rel attribute
            if (use_element_data === false) {
                $(selector).colorbox(lightbox.getOptions(opts));
                return;
            }

            $(document)
                .off('click.lightbox', selector)
                .on('click.lightbox', selector, function (e) {
                    // trigger a click event on document to close open menus / dropdowns like the entity menu #11748
                    $(document).click();
                    
                    // remove system messages when opening a lightbox
                    $('.elgg-system-messages .elgg-message').remove();
                    
                    e.preventDefault();
                    var $this = $(this),
                            href = $this.prop('href') || $this.prop('src'),
                            // Note: data-colorbox was reserved https://github.com/jackmoore/colorbox/issues/435
                            dataOpts = $this.data('colorboxOpts'),
                            currentOpts = {};

                    if (!$.isPlainObject(dataOpts)) {
                        dataOpts = {};
                    }

                    if (!dataOpts.href && href) {
                        dataOpts.href = href;
                    }

                    // merge data- options into opts
                    $.extend(currentOpts, opts, dataOpts);
                    if (currentOpts.inline && currentOpts.href) {
                        currentOpts.href = elgg.getSelectorFromUrlFragment(currentOpts.href);
                    }

                    if (currentOpts.photo || currentOpts.inline || currentOpts.iframe || currentOpts.html) {
                        lightbox.open(currentOpts);
                        return;
                    }
                        
                    href = currentOpts.href;
                    currentOpts.href = false;
                    var data = currentOpts.data;
                    currentOpts.data = undefined;
                    
                    // open lightbox without a href so we get a loader
                    lightbox.open(currentOpts);
                    
                    require(['elgg/Ajax'], function(Ajax) {
                        var ajax = new Ajax(false);
                        ajax.path(href, {data: data}).done(function(output) {
                            currentOpts.html = output;
                            lightbox.open(currentOpts);
                            
                            // clear data so next fetch will refresh contents
                            currentOpts.html = undefined;
                        });
                    });
                });

            $(window)
                .off('resize.lightbox')
                .on('resize.lightbox', function() {
                    elgg.data.lightbox.reposition = $(window).height() > 600;
                    lightbox.resize();
                });
        },

        open: function (opts) {
            $.colorbox(lightbox.getOptions(opts));
        },

        close: $.colorbox.close,
        
        resize: $.colorbox.resize
    };

    lightbox.bind(".elgg-lightbox");
    lightbox.bind(".elgg-lightbox-photo", {photo: true});
    lightbox.bind(".elgg-lightbox-inline", {inline: true});
    lightbox.bind(".elgg-lightbox-iframe", {iframe: true});

    return lightbox;
});