lightbox.js

Go to the documentation of this file.

define(['jquery', 'elgg', 'elgg/Ajax', 'elgg/hooks', 'jquery.colorbox'], function ($, elgg, Ajax, hooks) {

    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;
            }
            
            var settings = $.extend({}, defaults, opts);

            return hooks.trigger('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;
                    }
                    
                    currentOpts.ajaxLoadWithDependencies = true;
                    lightbox.open(currentOpts);
                });

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

        open: function (opts) {
            var currentOpts = lightbox.getOptions(opts);
            
            if (!currentOpts.ajaxLoadWithDependencies) {
                $.colorbox(currentOpts);
                return;
            }
            
            var href = currentOpts.href;
            currentOpts.href = false;
            var data = currentOpts.data;
            currentOpts.data = undefined;
            
            // open lightbox without a href so we get a loader
            $.colorbox(currentOpts);

            var ajax = new Ajax(false);
            ajax.path(href, {
                data: data
            }).done(function(output) {
                currentOpts.html = output;
                $.colorbox(currentOpts);
                
                // clear data so next fetch will refresh contents
                currentOpts.html = undefined;
            });
        },

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