UserPicker.js

Go to the documentation of this file.

define(function(require) {
    var $ = require('jquery');
    var elgg = require('elgg');
    require('jquery.ui.autocomplete.html');

    function UserPicker(wrapper) {
        this.$wrapper = $(wrapper);
        this.$input = $('.elgg-input-user-picker', wrapper);
        this.$ul = $('.elgg-user-picker-list', wrapper);

        var self = this,
            data = this.$wrapper.data();

        this.name = data.name || 'members';
        this.handler = data.handler || 'livesearch';
        this.limit = data.limit || 0;
        this.minLength = data.minLength || 2;
        this.isSealed = false;

        this.$input.autocomplete({
            source: function(request, response) {
                // note: "this" below will not be bound to the input, but rather
                // to an object created by the autocomplete component

                if (self.isSealed) {
                    return;
                }

                elgg.get(self.handler, {
                    data: {
                        term: this.term,
                        "match_on[]": ($('[name=match_on]', self.$wrapper).prop('checked') ? 'friends' : 'users'),
                        name: self.name
                    },
                    dataType: 'json',
                    success: function(data) {
                        response(data);
                    }
                });
            },
            minLength: self.minLength,
            html: "html",
            select: function(event, ui) {
                self.addUser(event, ui.item.guid, ui.item.html);
            },
            // turn off experimental live help - no i18n support and a little buggy
            messages: {
                noResults: '',
                results: function() {}
            }
        });

        this.$wrapper.on('click', '.elgg-user-picker-remove', function(event) {
            self.removeUser(event);
        });

        this.enforceLimit();
    }

    UserPicker.prototype = {
        addUser : function(event, guid, html) {
            // do not allow users to be added multiple times
            if (!$('li[data-guid="' + guid + '"]', this.$ul).length) {
                this.$ul.append(html);
            }
            this.$input.val('');

            this.enforceLimit();

            event.preventDefault();
        },

        removeUser : function(event) {
            $(event.target).closest('.elgg-user-picker-list > li').remove();

            this.enforceLimit();

            event.preventDefault();
        },

        enforceLimit : function() {
            if (this.limit) {
                if ($('li[data-guid]', this.$ul).length >= this.limit) {
                    if (!this.isSealed) {
                        this.seal();
                    }
                } else {
                    if (this.isSealed) {
                        this.unseal();
                    }
                }
            }
        },

        seal : function() {
            this.$input.prop('disabled', true);
            this.$wrapper.addClass('elgg-state-disabled');
            this.isSealed = true;
        },

        unseal : function() {
            this.$input.prop('disabled', false);
            this.$wrapper.removeClass('elgg-state-disabled');
            this.isSealed = false;
        }
    };

    UserPicker.setup = function(selector) {
        elgg.register_hook_handler('init', 'system', function () {
            $(selector).each(function () {
                // we only want to wrap each picker once
                if (!$(this).data('initialized')) {
                    new UserPicker(this);
                    $(this).data('initialized', 1);
                }
            });
        });
    };

    return UserPicker;
});