popup.js

Go to the documentation of this file.

define('elgg/popup', ['elgg', 'jquery', 'jquery-ui'], function (elgg, $) {

    var popup = {
        init: function () {
            $(document).on('click', function (e) {
                if (e.isDefaultPrevented()) {
                    return;
                }
                var $eventTargets = $(e.target).parents().andSelf();
                if ($eventTargets.is('.elgg-state-popped')) {
                    return;
                }
                popup.close();
            });
            // Bind events only once
            popup.init = elgg.nullFunction;
        },
        bind: function ($triggers) {
            $triggers.off('click.popup')
                    .on('click.popup', function (e) {
                        if (e.isDefaultPrevented()) {
                            return;
                        }
                        e.preventDefault();
                        e.stopPropagation();
                        popup.open($(this));
                    });
        },
        open: function ($trigger, $target, position) {
            if (typeof $trigger === 'undefined' || !$trigger.length) {
                return;
            }

            if (typeof $target === 'undefined') {
                var href = $trigger.attr('href') || $trigger.data('href') || '';
                var targetSelector = elgg.getSelectorFromUrlFragment(href);
                $target = $(targetSelector);
            } else {
                $target.uniqueId();
                var targetSelector = '#' + $target.attr('id');
            }

            if (!$target.length) {
                return;
            }

            // emit a hook to allow plugins to position and control popups
            var params = {
                targetSelector: targetSelector,
                target: $target,
                source: $trigger
            };

            position = position || {
                my: 'center top',
                at: 'center bottom',
                of: $trigger,
                collision: 'fit fit'
            };

            $.extend(position, $trigger.data('position'));

            position = elgg.trigger_hook('getOptions', 'ui.popup', params, position);

            if (!position) {
                return;
            }

            popup.init();

            // If the user is clicking on the trigger while the popup is open
            // we should just close the popup
            if ($target.is('.elgg-state-popped')) {
                popup.close($target);
                return;
            }
            
            popup.close(); // close any open popup modules

            $target.data('trigger', $trigger); // used to remove elgg-state-active class when popup is closed
            $target.data('position', position); // used to reposition the popup module on window manipulations

            if (!$trigger.is('.elgg-popup-inline')) {
                $target.appendTo('body');

                // when a popup is absolutely positioned, close the popup on scroll
                $(document).one('scroll', function() {
                    popup.close();
                });
            }
            
            // need to do a double position because of positioning issues during fadeIn() in Opera
            // https://github.com/Elgg/Elgg/issues/6452
            $target.position(position).fadeIn()
                   .addClass('elgg-state-active elgg-state-popped')
                   .position(position);

            $trigger.addClass('elgg-state-active');

            $target.trigger('open');
        },
        close: function ($targets) {
            if (typeof $targets === 'undefined') {
                $targets = $('.elgg-state-popped');
            }
            if (!$targets.length) {
                return;
            }
            $targets.each(function () {
                var $target = $(this);
                if (!$target.is(':visible')) {
                    return;
                }

                var $trigger = $target.data('trigger');
                if ($trigger.length) {
                    $trigger.removeClass('elgg-state-active');
                }

                // @todo: use css transitions instead of $.fadeOut()
                $target.fadeOut().removeClass('elgg-state-active elgg-state-popped');

                $target.trigger('close');
            });
        }
    };

    return popup;
});