ui.js

Go to the documentation of this file.

elgg.provide('elgg.ui');

elgg.ui.init = function () {
    // @todo we need better documentation for this hack
    // iOS Hover Event Class Fix
    $('.elgg-page').attr("onclick", "return true");

    // add user hover menus
    elgg.ui.initHoverMenu();

    //if the user clicks a system message, make it disappear
    $('.elgg-system-messages li').live('click', function() {
        $(this).stop().fadeOut('fast');
    });

    $('.elgg-system-messages li').animate({opacity: 0.9}, 6000);
    $('.elgg-system-messages li.elgg-state-success').fadeOut('slow');

    $('[rel=toggle]').live('click', elgg.ui.toggles);

    $('[rel=popup]').live('click', elgg.ui.popupOpen);

    $('.elgg-menu-page .elgg-menu-parent').live('click', elgg.ui.toggleMenu);

    $('.elgg-requires-confirmation').live('click', elgg.ui.requiresConfirmation);

    $('.elgg-autofocus').focus();
    if ($('.elgg-autofocus').length > 0) {
        elgg.deprecated_notice('Use of .elgg-autofocus is deprecated by html5 autofocus', 1.9);
    }

    elgg.ui.initAccessInputs();
};

elgg.ui.toggles = function(event) {
    event.preventDefault();

    // @todo might want to switch this to elgg.getSelectorFromUrlFragment().
    var target = $(this).toggleClass('elgg-state-active').attr('href');

    $(target).slideToggle('medium');
};

elgg.ui.popupOpen = function(event) {
    event.preventDefault();
    event.stopPropagation();

    var target = elgg.getSelectorFromUrlFragment($(this).toggleClass('elgg-state-active').attr('href'));
    var $target = $(target);

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

    var options = {
        my: 'center top',
        at: 'center bottom',
        of: $(this),
        collision: 'fit fit'
    };

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

    // allow plugins to cancel event
    if (!options) {
        return;
    }

    // hide if already open
    if ($target.is(':visible')) {
        $target.fadeOut();
        $('body').die('click', elgg.ui.popupClose);
        return;
    }

    $target.appendTo('body')
        .fadeIn()
        .position(options);

    $('body')
        .die('click', elgg.ui.popupClose)
        .live('click', elgg.ui.popupClose);
};

elgg.ui.popupClose = function(event) {
    $eventTarget = $(event.target);
    var inTarget = false;
    var $popups = $('[rel=popup]');

    // if the click event target isn't in a popup target, fade all of them out.
    $popups.each(function(i, e) {
        var target = elgg.getSelectorFromUrlFragment($(e).attr('href')) + ':visible';
        var $target = $(target);

        if (!$target.is(':visible')) {
            return;
        }

        // didn't click inside the target
        if ($eventTarget.closest(target).length > 0) {
            inTarget = true;
            return false;
        }
    });

    if (!inTarget) {
        $popups.each(function(i, e) {
            var $e = $(e);
            var $target = $(elgg.getSelectorFromUrlFragment($e.attr('href')) + ':visible');
            if ($target.length > 0) {
                $target.fadeOut();
                $e.removeClass('elgg-state-active');
            }
        });

        $('body').die('click', elgg.ui.popClose);
    }
};

elgg.ui.toggleMenu = function(event) {
    $(this).siblings().slideToggle('medium');
    $(this).toggleClass('elgg-menu-closed elgg-menu-opened');
    event.preventDefault();
};

elgg.ui.initHoverMenu = function(parent) {
    if (!parent) {
        parent = document;
    }

    // avatar image menu link
    $(parent).find(".elgg-avatar").live('mouseover', function() {
        $(this).children(".elgg-icon-hover-menu").show();
    })
    .live('mouseout', function() {
        $(this).children(".elgg-icon-hover-menu").hide();
    });


    // avatar contextual menu
    $(".elgg-avatar > .elgg-icon-hover-menu").live('click', function(e) {
        // check if we've attached the menu to this element already
        var $hovermenu = $(this).data('hovermenu') || null;

        if (!$hovermenu) {
            $hovermenu = $(this).parent().find(".elgg-menu-hover");
            $(this).data('hovermenu', $hovermenu);
        }

        // close hovermenu if arrow is clicked & menu already open
        if ($hovermenu.css('display') == "block") {
            $hovermenu.fadeOut();
        } else {
            $avatar = $(this).closest(".elgg-avatar");

            // @todo Use jQuery-ui position library instead -- much simpler
            var offset = $avatar.offset();
            var top = $avatar.height() + offset.top + 'px';
            var left = $avatar.width() - 15 + offset.left + 'px';

            $hovermenu.appendTo('body')
                    .css('position', 'absolute')
                    .css("top", top)
                    .css("left", left)
                    .fadeIn('normal');
        }

        // hide any other open hover menus
        $(".elgg-menu-hover:visible").not($hovermenu).fadeOut();
    });

    // hide avatar menu when user clicks elsewhere
    $(document).click(function(event) {
        if ($(event.target).parents(".elgg-avatar").length === 0) {
            $(".elgg-menu-hover").fadeOut();
        }
    });
};

elgg.ui.requiresConfirmation = function(e) {
    var confirmText = $(this).data('confirm') || elgg.echo('question:areyousure');
    if (!confirm(confirmText)) {
        e.preventDefault();
    }
};

elgg.ui.loginHandler = function(hook, type, params, options) {
    if (params.target.attr('id') == 'login-dropdown-box') {
        options.my = 'right top';
        options.at = 'right bottom';
        return options;
    }
    return null;
};

elgg.ui.initDatePicker = function() {
    var loadDatePicker = function() {
        $('.elgg-input-date').datepicker({
            // ISO-8601
            dateFormat: 'yy-mm-dd',
            onSelect: function(dateText) {
                if ($(this).is('.elgg-input-timestamp')) {
                    // convert to unix timestamp
                    var dateParts = dateText.split("-");
                    var timestamp = Date.UTC(dateParts[0], dateParts[1] - 1, dateParts[2]);
                    timestamp = timestamp / 1000;

                    var id = $(this).attr('id');
                    $('input[name="' + id + '"]').val(timestamp);
                }
            }
        });
    };

    if ($('.elgg-input-date').length && elgg.get_language() == 'en') {
        loadDatePicker();
    } else if ($('.elgg-input-date').length) {
        elgg.get({
            url: elgg.config.wwwroot + 'vendors/jquery/i18n/jquery.ui.datepicker-'+ elgg.get_language() +'.js',
            dataType: "script",
            cache: true,
            success: loadDatePicker,
            error: loadDatePicker // english language is already loaded.
        });
    }
};

elgg.ui.registerTogglableMenuItems = function(menuItemNameA, menuItemNameB) {
    // Handles clicking the first button.
    $('.elgg-menu-item-' + menuItemNameA + ' a').live('click', function() {
        var $menu = $(this).closest('.elgg-menu');

        // Be optimistic about success
        elgg.ui.toggleMenuItems($menu, menuItemNameB, menuItemNameA);

        // Send the ajax request
        elgg.action($(this).attr('href'), {
            success: function(json) {
                if (json.system_messages.error.length) {
                    // Something went wrong, so undo the optimistic changes
                    elgg.ui.toggleMenuItems($menu, menuItemNameA, menuItemNameB);
                }
            },
            error: function() {
                // Something went wrong, so undo the optimistic changes
                elgg.ui.toggleMenuItems($menu, menuItemNameA, menuItemNameB);
            }
        });

        // Don't want to actually click the link
        return false;
    });

    // Handles clicking the second button
    $('.elgg-menu-item-' + menuItemNameB + ' a').live('click', function() {
        var $menu = $(this).closest('.elgg-menu');

        // Be optimistic about success
        elgg.ui.toggleMenuItems($menu, menuItemNameA, menuItemNameB);

        // Send the ajax request
        elgg.action($(this).attr('href'), {
            success: function(json) {
                if (json.system_messages.error.length) {
                    // Something went wrong, so undo the optimistic changes
                    elgg.ui.toggleMenuItems($menu, menuItemNameB, menuItemNameA);
                }
            },
            error: function() {
                // Something went wrong, so undo the optimistic changes
                elgg.ui.toggleMenuItems($menu, menuItemNameB, menuItemNameA);
            }
        });

        // Don't want to actually click the link
        return false;
    });
};

elgg.ui.toggleMenuItems = function($menu, nameOfItemToShow, nameOfItemToHide) {
    $menu.find('.elgg-menu-item-' + nameOfItemToShow).removeClass('hidden').find('a').focus();
    $menu.find('.elgg-menu-item-' + nameOfItemToHide).addClass('hidden');
};

elgg.ui.initAccessInputs = function () {
    $('.elgg-input-access').each(function () {
        function updateMembersonlyNote() {
            var val = $select.val();
            if (val != acl && val !== 0) {
                // .show() failed in Chrome. Maybe a float/jQuery bug
                $note.css('visibility', 'visible');
            } else {
                $note.css('visibility', 'hidden');
            }
        }
        var $select = $(this),
            acl = $select.data('group-acl'),
            $note = $('.elgg-input-access-membersonly', this.parentNode);
        if ($note) {
            updateMembersonlyNote();
            $select.change(updateMembersonlyNote);
        }
    });
};

elgg.register_hook_handler('init', 'system', elgg.ui.init);
elgg.register_hook_handler('init', 'system', elgg.ui.initDatePicker);
elgg.register_hook_handler('getOptions', 'ui.popup', elgg.ui.loginHandler);
elgg.ui.registerTogglableMenuItems('add-friend', 'remove-friend');