Proyectos de Subversion Moodle

/**

 * JavaScript for the user selectors.

 * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

 * @package userselector

 */

// Define the core_user namespace if it has not already been defined

M.core_user = M.core_user || {};

// Define a user selectors array for against the cure_user namespace

M.core_user.user_selectors = [];

/**

 * Retrieves an instantiated user selector or null if there isn't one by the requested name

 * @param {string} name The name of the selector to retrieve

 * @return bool

 */

M.core_user.get_user_selector = function (name) {

    return this.user_selectors[name] || null;

};

/**

 * Initialise a new user selector.

 *

 * @param {YUI} Y The YUI3 instance

 * @param {string} name the control name/id.

 * @param {string} hash the hash that identifies this selector in the user's session.

 * @param {array} extrafields extra fields we are displaying for each user in addition to fullname.

 * @param {string} lastsearch The last search that took place

 * @param {int} searchtype the last search option that took place

 */

M.core_user.init_user_selector = function(Y, name, hash, extrafields, lastsearch, searchtype) {

    // Creates a new user_selector object

    var user_selector = {

        /** This id/name used for this control in the HTML. */

        name : name,

        /** Array of fields to display for each user, in addition to fullname. */

        extrafields: extrafields,

        /** Number of seconds to delay before submitting a query request */

        querydelay : 0.5,

        /** The input element that contains the search term. */

        searchfield : Y.one('#' + name + '_searchtext'),

        /** The clear button. */

        clearbutton : null,

        /** The select element that contains the list of users. */

        listbox : Y.one('#' + name),

        /** Used to hold the timeout id of the timeout that waits before doing a search. */

        timeoutid : null,

        /** Stores any in-progress remote requests. */

        iotransactions : {},

        /** The last string that we searched for, so we can avoid unnecessary repeat searches. */

        lastsearch : lastsearch,

        /** Whether any options where selected last time we checked. Used by

         *  handle_selection_change to track when this status changes. */

        selectionempty : true,

        /** The last search option that we use for*/

        searchtype: searchtype,

        /**

         * Initialises the user selector object

         * @constructor

         */

        init : function() {

            // Hide the search button and replace it with a label.

            var searchbutton = Y.one('#' + this.name + '_searchbutton');

            this.searchfield.insert(Y.Node.create('<label for="' + this.name + '_searchtext">' + searchbutton.get('value') + '</label>'), this.searchfield);

            searchbutton.remove();

            // Hook up the event handler for when the search text changes.

            this.searchfield.on('keyup', this.handle_keyup, this);

            // Hook up the event handler for when the selection changes.

            this.listbox.on('keyup', this.handle_selection_change, this);

            this.listbox.on('click', this.handle_selection_change, this);

            this.listbox.on('change', this.handle_selection_change, this);

            // And when the search any substring preference changes. Do an immediate re-search.

            Y.one('#userselector_searchfromstartid').on('click', this.handle_searchtype_change, this);

            Y.one('#userselector_searchanywhereid').on('click', this.handle_searchtype_change, this);

            Y.one('#userselector_searchexactmatchesonlyid').on('click', this.handle_searchtype_change, this);

            // Define our custom event.

            //this.createEvent('selectionchanged');

            this.selectionempty = this.is_selection_empty();

            // Replace the Clear submit button with a clone that is not a submit button.

            var clearbtn = Y.one('#' + this.name + '_clearbutton');

            this.clearbutton = Y.Node.create('<input type="button" value="' + clearbtn.get('value') + '" class="btn btn-secondary mx-1"/>');

            clearbtn.replace(Y.Node.getDOMNode(this.clearbutton));

            this.clearbutton.set('id', this.name + "_clearbutton");

            this.clearbutton.on('click', this.handle_clear, this);

            this.clearbutton.set('disabled', (this.get_search_text() == ''));

            this.send_query(false);

        },

        /**

         * Key up hander for the search text box.

         * @param {Y.Event} e the keyup event.

         */

        handle_keyup : function(e) {

            //  Trigger an ajax search after a delay.

            this.cancel_timeout();

            this.timeoutid = Y.later(this.querydelay * 1000, e, function(obj){obj.send_query(false)}, this);

            // Enable or diable the clear button.

            this.clearbutton.set('disabled', (this.get_search_text() == ''));

            // If enter was pressed, prevent a form submission from happening.

            if (e.keyCode == 13) {

                e.halt();

            }

        },

        /**

         * Handles when the selection has changed. If the selection has changed from

         * empty to not-empty, or vice versa, then fire the event handlers.

         */

        handle_selection_change : function() {

            var isselectionempty = this.is_selection_empty();

            if (isselectionempty !== this.selectionempty) {

                this.fire('user_selector:selectionchanged', isselectionempty);

            }

            this.selectionempty = isselectionempty;

        },

        /**

         * Trigger a re-search and set the user prefs when the search radio option is changed.

         *

         *  @param {Y.Event} e the change event.

         */

        handle_searchtype_change: function(e) {

            this.clear_search_radio_state();

            e.currentTarget.set('checked', 1);

            this.searchtype = e.currentTarget.get('value');

            require(['core_user/repository'], function(UserRepository) {

                UserRepository.setUserPreference('userselector_searchtype', e.currentTarget.get('value'));

            });

            if (this.lastsearch != '' && this.get_search_text() != '') {

                this.send_query(true);

            }

        },

        /**

         * Click handler for the clear button..

         */

        handle_clear : function() {

            this.searchfield.set('value', '');

            this.clearbutton.set('disabled',true);

            this.send_query(false);

        },

        /**

         * Clear all checked state in the radio search option.

         */

        clear_search_radio_state: function() {

            Y.one('#userselector_searchfromstartid').set('checked', 0);

            Y.one('#userselector_searchanywhereid').set('checked', 0);

            Y.one('#userselector_searchexactmatchesonlyid').set('checked', 0);

        },

        /**

         * Fires off the ajax search request.

         */

        send_query : function(forceresearch) {

            // Cancel any pending timeout.

            this.cancel_timeout();

            var value = this.get_search_text();

            this.searchfield.set('class', '');

            if (this.lastsearch == value && !forceresearch) {

                return;

            }

            // Try to cancel existing transactions.

            Y.Object.each(this.iotransactions, function(trans) {

                trans.abort();

            });

            var iotrans = Y.io(M.cfg.wwwroot + '/user/selector/search.php', {

                method: 'POST',

                data: 'selectorid=' + hash + '&sesskey=' + M.cfg.sesskey +

                    '&search=' + value + '&userselector_searchtype=' + this.searchtype,

                on: {

                    complete: this.handle_response

                },

                context:this

            });

            this.iotransactions[iotrans.id] = iotrans;

            this.lastsearch = value;

            this.listbox.setStyle('background', 'url(' + M.util.image_url('i/loading', 'moodle') + ') no-repeat center center');

            this.listbox.setStyle('background-size', '3em');

        },

        /**

         * Handle what happens when we get some data back from the search.

         * @param {int} requestid not used.

         * @param {object} response the list of users that was returned.

         */

        handle_response : function(requestid, response) {

            try {

                delete this.iotransactions[requestid];

                if (!Y.Object.isEmpty(this.iotransactions)) {

                    // More searches pending. Wait until they are all done.

                    return;

                }

                this.listbox.setStyle('background','');

                var data = Y.JSON.parse(response.responseText);

                if (data.error) {

                    this.searchfield.addClass('error');

                    return new M.core.ajaxException(data);

                }

                this.output_options(data);

                // If updated userSummaries are present, overwrite the global variable

                // that's output by group_non_members_selector::print_user_summaries() in user/selector/lib.php

                if (typeof data.userSummaries !== "undefined") {

                    /* global userSummaries:true */

                    /* exported userSummaries */

                    userSummaries = data.userSummaries;

                }

            } catch (e) {

                this.listbox.setStyle('background','');

                this.searchfield.addClass('error');

                return new M.core.exception(e);

            }

        },

        /**

         * This method should do the same sort of thing as the PHP method

         * user_selector_base::output_options.

         * @param {object} data the list of users to populate the list box with.

         */

        output_options : function(data) {

            // Clear out the existing options, keeping any ones that are already selected.

            var selectedusers = {};

            this.listbox.all('optgroup').each(function(optgroup){

                optgroup.all('option').each(function(option){

                    if (option.get('selected')) {

                        selectedusers[option.get('value')] = {

                            id : option.get('value'),

                            name : option.get('innerText') || option.get('textContent'),

                            disabled: option.get('disabled')

                        }

                    }

                    option.remove();

                }, this);

                optgroup.remove();

            }, this);

            // Output each optgroup.

            var count = 0;

            for (var key in data.results) {

                var groupdata = data.results[key];

                this.output_group(groupdata.name, groupdata.users, selectedusers, true);

                count ++;

            }

            if (!count) {

                var searchstr = (this.lastsearch != '') ? this.insert_search_into_str(M.util.get_string('nomatchingusers', 'moodle'), this.lastsearch) : M.util.get_string('none', 'moodle');

                this.output_group(searchstr, {}, selectedusers, true)

            }

            // If there were previously selected users who do not match the search, show them too.

            if (this.get_option('preserveselected') && selectedusers) {

                this.output_group(this.insert_search_into_str(M.util.get_string('previouslyselectedusers', 'moodle'), this.lastsearch), selectedusers, true, false);

            }

            this.handle_selection_change();

        },

        /**

         * This method should do the same sort of thing as the PHP method

         * user_selector_base::output_optgroup.

         *

         * @param {string} groupname the label for this optgroup.v

         * @param {object} users the users to put in this optgroup.

         * @param {boolean|object} selectedusers if true, select the users in this group.

         * @param {boolean} processsingle

         */

        output_group : function(groupname, users, selectedusers, processsingle) {

            var optgroup = Y.Node.create('<optgroup></optgroup>');

            this.listbox.append(optgroup);

            var count = 0;

            for (var key in users) {

                var user = users[key];

                var option = Y.Node.create('<option value="' + user.id + '">' + user.name + '</option>');

                if (user.disabled) {

                    option.setAttribute('disabled', 'disabled');

                } else if (selectedusers === true || selectedusers[user.id]) {

                    option.setAttribute('selected', 'selected');

                    delete selectedusers[user.id];

                }

                optgroup.append(option);

                if (user.infobelow) {

                    extraoption = Y.Node.create('<option disabled="disabled" class="userselector-infobelow"/>');

                    extraoption.appendChild(document.createTextNode(user.infobelow));

                    optgroup.append(extraoption);

                }

                count ++;

            }

            if (count > 0) {

                optgroup.set('label', groupname + ' (' + count + ')');

                if (processsingle && count === 1 && this.get_option('autoselectunique') && option.get('disabled') == false) {

                    option.setAttribute('selected', 'selected');

                }

            } else {

                optgroup.set('label', groupname);

                optgroup.append(Y.Node.create('<option disabled="disabled">\u00A0</option>'));

            }

        },

        /**

         * Replace

         * @param {string} str

         * @param {string} search The search term

         * @return string

         */

        insert_search_into_str : function(str, search) {

            return str.replace("%%SEARCHTERM%%", search);

        },

        /**

         * Gets the search text

         * @return String the value to search for, with leading and trailing whitespace trimmed.

         */

        get_search_text : function() {

            return this.searchfield.get('value').toString().replace(/^ +| +$/, '');

        },

        /**

         * Returns true if the selection is empty (nothing is selected)

         * @return Boolean check all the options and return whether any are selected.

         */

        is_selection_empty : function() {

            var selection = false;

            this.listbox.all('option').each(function(){

                if (this.get('selected')) {

                    selection = true;

                }

            });

            return !(selection);

        },

        /**

         * Cancel the search delay timeout, if there is one.

         */

        cancel_timeout : function() {

            if (this.timeoutid) {

                clearTimeout(this.timeoutid);

                this.timeoutid = null;

            }

        },

        /**

         * @param {string} name The name of the option to retrieve

         * @return the value of one of the option checkboxes.

         */

        get_option : function(name) {

            var checkbox = Y.one('#userselector_' + name + 'id');

            if (checkbox) {

                return (checkbox.get('checked'));

            } else {

                return false;

            }

        }

    };

    // Augment the user selector with the EventTarget class so that we can use

    // custom events

    Y.augment(user_selector, Y.EventTarget, null, null, {});

    // Initialise the user selector

    user_selector.init();

    // Store the user selector so that it can be retrieved

    this.user_selectors[name] = user_selector;

    // Return the user selector

    return user_selector;

};

/**

 * Initialise a class that updates the user's preferences when they change one of

 * the options checkboxes.

 * @constructor

 * @param {YUI} Y

 * @return Tracker object

 */

M.core_user.init_user_selector_options_tracker = function(Y) {

    // Create a user selector options tracker

    var user_selector_options_tracker = {

        /**

         * Initlises the option tracker and gets everything going.

         * @constructor

         */

        init : function() {

            var settings = [

                'userselector_preserveselected',

                'userselector_autoselectunique',

            ];

            for (var s in settings) {

                var setting = settings[s];

                Y.one('#' + setting + 'id').on('click', this.set_user_preference, this, setting);

            }

        },

        /**

         * Sets a user preference for the options tracker

         * @param {Y.Event|null} e

         * @param {string} name The name of the preference to set

         */

        set_user_preference : function(e, name) {

            require(['core_user/repository'], function(UserRepository) {

                UserRepository.setUserPreference(name, Y.one('#' + name + 'id').get('checked'));

            });

        }

    };

    // Initialise the options tracker

    user_selector_options_tracker.init();

    // Return it just incase it is ever wanted

    return user_selector_options_tracker;

};