Proyectos de Subversion Moodle

// This file is part of Moodle - http://moodle.org/

//

// Moodle is free software: you can redistribute it and/or modify

// it under the terms of the GNU General Public License as published by

// the Free Software Foundation, either version 3 of the License, or

// (at your option) any later version.

//

// Moodle is distributed in the hope that it will be useful,

// but WITHOUT ANY WARRANTY; without even the implied warranty of

// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

// GNU General Public License for more details.

//

// You should have received a copy of the GNU General Public License

// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.

/**

 * The User Selector for the grade history report.

 *

 * @module     moodle-gradereport_history-userselector

 * @package    gradereport_history

 * @copyright  2013 NetSpot Pty Ltd (https://www.netspot.com.au)

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

 * @main       moodle-gradereport_history-userselector

 */

/**

 * @module moodle-gradereport_history-userselector

 */

var COMPONENT = 'gradereport_history';

var USP = {

    AJAXURL: 'ajaxurl',

    BASE: 'base',

    CHECKBOX_NAME_PREFIX: 'usp-u',

    COURSEID: 'courseid',

    DIALOGUE_PREFIX: 'moodle-dialogue',

    NAME: 'gradereport_history_usp',

    PAGE: 'page',

    PARAMS: 'params',

    PERPAGE: 'perPage',

    SEARCH: 'search',

    SEARCHBTN: 'searchbtn',

    SELECTEDUSERS: 'selectedUsers',

    URL: 'url',

    USERCOUNT: 'userCount'

};

var CSS = {

    ACCESSHIDE: 'accesshide',

    AJAXCONTENT: 'usp-ajax-content',

    CHECKBOX: 'usp-checkbox',

    CLOSE: 'close',

    CLOSEBTN: 'usp-finish',

    CONTENT: 'usp-content',

    DETAILS: 'details',

    EXTRAFIELDS: 'extrafields',

    FIRSTADDED: 'usp-first-added',

    FULLNAME: 'fullname',

    HEADER: 'usp-header',

    HIDDEN: 'hidden',

    LIGHTBOX: 'usp-loading-lightbox',

    LOADINGICON: 'loading-icon',

    MORERESULTS: 'usp-more-results',

    OPTIONS: 'options',

    PICTURE: 'usp-picture',

    RESULTSCOUNT: 'usp-results-count',

    SEARCH: 'usp-search',

    SEARCHBTN: 'usp-search-btn',

    SEARCHFIELD: 'usp-search-field',

    SEARCHRESULTS: 'usp-search-results',

    SELECTED: 'selected',

    USER: 'usp-user',

    USERS: 'usp-users',

    WRAP: 'usp-wrap'

};

var SELECTORS = {

    AJAXCONTENT: '.' + CSS.AJAXCONTENT,

    FINISHBTN: '.' + CSS.CLOSEBTN + ' input',

    FIRSTADDED: '.' + CSS.FIRSTADDED,

    FULLNAME: '.' + CSS.FULLNAME + ' label',

    LIGHTBOX: '.' + CSS.LIGHTBOX,

    MORERESULTS: '.' + CSS.MORERESULTS,

    OPTIONS: '.' + CSS.OPTIONS,

    PICTURE: '.' + CSS.USER + ' .userpicture',

    RESULTSCOUNT: '.' + CSS.RESULTSCOUNT,

    RESULTSUSERS: '.' + CSS.SEARCHRESULTS + ' .' + CSS.USERS,

    SEARCHBTN: '.' + CSS.SEARCHBTN,

    SEARCHFIELD: '.' + CSS.SEARCHFIELD,

    SELECTEDNAMES: '.felement .selectednames',

    TRIGGER: '.gradereport_history_plugin input.selectortrigger',

    USER: '.' + CSS.USER,

    USERFULLNAMES: 'input[name="userfullnames"]',

    USERIDS: 'input[name="userids"]',

    USERSELECT: '.' + CSS.CHECKBOX + ' input[type=checkbox]'

};

/**

 * User Selector.

 *

 * @namespace M.gradereport_history

 * @class UserSelector

 * @constructor

 */

var USERSELECTOR = function() {

    USERSELECTOR.superclass.constructor.apply(this, arguments);

};

Y.namespace('M.gradereport_history').UserSelector = Y.extend(USERSELECTOR, M.core.dialogue, {

    /**

     * Whether or not this is the first time the user displays the dialogue within that request.

     *

     * @property _firstDisplay

     * @type Boolean

     * @private

     */

    _firstDisplay: true,

    /**

     * The list of all the users selected while the dialogue is open.

     *

     * @type Object

     * @property _usersBufferList

     * @private

     */

    _usersBufferList: null,

    /**

     * The Node on which the focus is set.

     *

     * @property _userTabFocus

     * @type Node

     * @private

     */

    _userTabFocus: null,

    /**

     * Compiled template function for a user node.

     *

     * @property _userTemplate

     * @type Function

     * @private

     */

    _userTemplate: null,

    initializer: function() {

        var bb = this.get('boundingBox'),

            content,

            params,

            tpl;

        tpl = Y.Handlebars.compile(

            '<div class="{{CSS.WRAP}}">' +

                '<div class="{{CSS.HEADER}}">' +

                    '<div class="{{CSS.SEARCH}}" role="search">' +

                        '<form>' +

                            '<input type="text" class="{{CSS.SEARCHFIELD}}" ' +

                                'aria-label="{{get_string "search" "moodle"}}" value="" />' +

                            '<input type="submit" class="{{CSS.SEARCHBTN}}"' +

                                'value="{{get_string "search" "moodle"}}">' +

                        '</form>' +

                        '<div aria-live="polite" class="{{CSS.RESULTSCOUNT}}">{{get_string "loading" "admin"}}</div>' +

                    '</div>' +

                '</div>' +

                '<div class="{{CSS.CONTENT}}">' +

                    '<form>' +

                        '<div class="{{CSS.AJAXCONTENT}}" aria-live="polite"></div>' +

                        '<div class="{{CSS.LIGHTBOX}} {{CSS.HIDDEN}}">' +

                            '<img class="{{CSS.LOADINGICON}}" alt="{{get_string "loading" "admin"}}"' +

                                'src="{{{loadingIcon}}}">' +

                        '</div>' +

                        '<div class="{{CSS.CLOSEBTN}}">' +

                            '<input type="submit" value="{{get_string "finishselectingusers" COMPONENT}}">' +

                        '</div>' +

                    '</form>' +

                '</div>' +

            '</div>');

        content = Y.Node.create(

            tpl({

                COMPONENT: COMPONENT,

                CSS: CSS,

                loadingIcon: M.util.image_url('i/loading', 'moodle')

            })

        );

        // Set the title and content.

        this.getStdModNode(Y.WidgetStdMod.HEADER).prepend(Y.Node.create('<h1>' + this.get('title') + '</h1>'));

        this.setStdModContent(Y.WidgetStdMod.BODY, content, Y.WidgetStdMod.REPLACE);

        // Use standard dialogue class name. This removes the default styling of the footer.

        this.get('boundingBox').one('.moodle-dialogue-wrap').addClass('moodle-dialogue-content');

        // Add the event on the button that opens the dialogue.

        Y.one(SELECTORS.TRIGGER).on('click', this.show, this);

        // The button to finalize the selection.

        bb.one(SELECTORS.FINISHBTN).on('click', this.finishSelectingUsers, this);

        // Delegate the keyboard navigation in the users list.

        bb.delegate('key', this.userKeyboardNavigation, 'down:38,40', SELECTORS.AJAXCONTENT, this);

        // Delegate the action to select a user.

        Y.delegate('click', this.selectUser, SELECTORS.AJAXCONTENT, SELECTORS.USERSELECT, this);

        Y.delegate('click', this.selectUser, SELECTORS.AJAXCONTENT, SELECTORS.PICTURE, this);

        params = this.get(USP.PARAMS);

        params.id = this.get(USP.COURSEID);

        this.set(USP.PARAMS, params);

        bb.one(SELECTORS.SEARCHBTN).on('click', this.search, this, false);

    },

    /**

     * Display the dialogue.

     *

     * @method show

     */

    show: function(e) {

        var bb;

        this._usersBufferList = Y.clone(this.get(USP.SELECTEDUSERS));

        if (this._firstDisplay) {

            // Load the default list of users when the dialogue is loaded for the first time.

            this._firstDisplay = false;

            this.search(e, false);

        } else {

            // Leave the content as is, but reset the selection.

            bb = this.get('boundingBox');

            // Remove all the selected users.

            bb.all(SELECTORS.USER).each(function(node) {

                this.markUserNode(node, false);

            }, this);

            // Select the users.

            Y.Object.each(this._usersBufferList, function(v, k) {

                var user = bb.one(SELECTORS.USER + '[data-userid="' + k + '"]');

                if (user) {

                    this.markUserNode(user, true);

                }

            }, this);

            // Reset the tab focus.

            this.setUserTabFocus(bb.one(SELECTORS.USER));

        }

        return Y.namespace('M.gradereport_history.UserSelector').superclass.show.call(this);

    },

    /**

     * Search for users.

     *

     * @method search

     * @param {EventFacade} e The event.

     * @param {Boolean} append Whether we want to append the results to the current results or not.

     */

    search: function(e, append) {

        if (e) {

            e.preventDefault();

        }

        var params;

        if (append) {

            this.set(USP.PAGE, this.get(USP.PAGE) + 1);

        } else {

            this.set(USP.USERCOUNT, 0);

            this.set(USP.PAGE, 0);

        }

        params = this.get(USP.PARAMS);

        params.sesskey = M.cfg.sesskey;

        params.action = 'searchusers';

        params.search = this.get('boundingBox').one(SELECTORS.SEARCHFIELD).get('value');

        params.page = this.get(USP.PAGE);

        params.perpage = this.get(USP.PERPAGE);

        Y.io(M.cfg.wwwroot + this.get(USP.AJAXURL), {

            method: 'POST',

            data: window.build_querystring(params),

            on: {

                start: this.preSearch,

                complete: this.processSearchResults,

                end: this.postSearch

            },

            context: this,

            "arguments": {      // Quoted because this is a reserved keyword.

                append: append

            }

        });

    },

    /**

     * Pre search callback.

     *

     * @method preSearch

     * @param {String} transactionId The transaction ID.

     * @param {Object} args The arguments passed from YUI.io()

     */

    preSearch: function(unused, args) {

        var bb = this.get('boundingBox');

        // Display the lightbox.

        bb.one(SELECTORS.LIGHTBOX).removeClass(CSS.HIDDEN);

        // Set the number of results to 'loading...'.

        if (!args.append) {

            bb.one(SELECTORS.RESULTSCOUNT).setHTML(M.util.get_string('loading', 'admin'));

        }

    },

    /**

     * Post search callback.

     *

     * @method postSearch

     * @param {String} transactionId The transaction ID.

     * @param {Object} args The arguments passed from YUI.io()

     */

    postSearch: function(transactionId, args) {

        var bb = this.get('boundingBox'),

            firstAdded = bb.one(SELECTORS.FIRSTADDED),

            firstUser;

        // Hide the lightbox.

        bb.one(SELECTORS.LIGHTBOX).addClass(CSS.HIDDEN);

        if (args.append && firstAdded) {

            // Sets the focus on the newly added user if we are appending results.

            this.setUserTabFocus(firstAdded);

            firstAdded.one(SELECTORS.USERSELECT).focus();

        } else {

            // New search result, set the tab focus on the first user returned.

            firstUser = bb.one(SELECTORS.USER);

            if (firstUser) {

                this.setUserTabFocus(firstUser);

            }

        }

    },

    /**

     * Process and display the search results.

     *

     * @method processSearchResults

     * @param {String} tid The transaction ID.

     * @param {Object} outcome The response object.

     * @param {Object} args The arguments passed from YUI.io().

     */

    processSearchResults: function(tid, outcome, args) {

        var result = false,

            error = false,

            bb = this.get('boundingBox'),

            users,

            userTemplate,

            count,

            selected,

            i,

            firstAdded = true,

            node,

            content,

            fetchmore,

            totalUsers;

        // Decodes the result.

        try {

            result = Y.JSON.parse(outcome.responseText);

            if (!result.success || result.error) {

                error = true;

            }

        } catch (e) {

            error = true;

        }

        // There was an error.

        if (error) {

            this.setContent('');

            bb.one(SELECTORS.RESULTSCOUNT).setHTML(M.util.get_string('errajaxsearch', COMPONENT));

            return;

        }

        // Create the div containing the users when it is a fresh search.

        if (!args.append) {

            users = Y.Node.create('<div role="listbox" aria-activedescendant="" aria-multiselectable="true" class="' +

                                   CSS.USERS +

                                   '"></div>');

        } else {

            users = bb.one(SELECTORS.RESULTSUSERS);

        }

        // Compile the template for each user node.

        if (!this._userTemplate) {

            this._userTemplate = Y.Handlebars.compile(

                '<div role="option" aria-selected="false" class="{{CSS.USER}} clearfix" ' +

                        'data-userid="{{userId}}">' +

                    '<div class="{{CSS.CHECKBOX}}">' +

                        '<input name="{{USP.CHECKBOX_NAME_PREFIX}}{{userId}}" type="checkbox" tabindex="-1"' +

                            'id="{{checkboxId}}" aria-describedby="{{checkboxId}} {{extraFieldsId}}"/>' +

                    '</div>' +

                    '<div class="{{CSS.PICTURE}}">{{{picture}}}</div>' +

                    '<div class="{{CSS.DETAILS}}">' +

                        '<div class="{{CSS.FULLNAME}}">' +

                            '<label for="{{checkboxId}}">{{fullname}}</label>' +

                        '</div>' +

                        '<div id="{{extraFieldsId}}" class="{{CSS.EXTRAFIELDS}}">{{{extrafields}}}</div>' +

                    '</div>' +

                '</div>'

            );

        }

        userTemplate = this._userTemplate;

        // Append the users one by one.

        count = this.get(USP.USERCOUNT);

        selected = '';

        var user;

        for (i in result.response.users) {

            count++;

            user = result.response.users[i];

            // If already selected.

            if (Y.Object.hasKey(this._usersBufferList, user.userid)) {

                selected = true;

            } else {

                selected = false;

            }

            node = Y.Node.create(userTemplate({

                checkboxId: Y.guid(),

                COMPONENT: COMPONENT,

                count: count,

                CSS: CSS,

                extrafields: user.extrafields,

                extraFieldsId: Y.guid(),

                fullname: user.fullname,

                picture: user.picture,

                userId: user.userid,

                USP: USP

            }));

            this.markUserNode(node, selected);

            // Noting the first user that was when adding more results.

            if (args.append && firstAdded) {

                users.all(SELECTORS.FIRSTADDED).removeClass(CSS.FIRSTADDED);

                node.addClass(CSS.FIRSTADDED);

                firstAdded = false;

            }

            users.append(node);

        }

        this.set(USP.USERCOUNT, count);

        // Update the count of users, and add a button to load more if need be.

        totalUsers = parseInt(result.response.totalusers, 10);

        if (!args.append) {

            if (totalUsers === 0) {

                bb.one(SELECTORS.RESULTSCOUNT).setHTML(M.util.get_string('noresults', 'moodle'));

                content = '';

            } else {

                if (totalUsers === 1) {

                    bb.one(SELECTORS.RESULTSCOUNT).setHTML(M.util.get_string('foundoneuser', COMPONENT));

                } else {

                    bb.one(SELECTORS.RESULTSCOUNT).setHTML(M.util.get_string('foundnusers', COMPONENT, totalUsers));

                }

                content = Y.Node.create('<div class="' + CSS.SEARCHRESULTS + '"></div>')

                    .append(users);

                if (result.response.totalusers > (this.get(USP.PAGE) + 1) * this.get(USP.PERPAGE)) {

                    fetchmore = Y.Node.create('<div class="' + CSS.MORERESULTS + '">' +

                        '<a href="#" role="button">' + M.util.get_string('loadmoreusers', COMPONENT) + '</a></div>');

                    fetchmore.one('a').on('click', this.search, this, true);

                    fetchmore.one('a').on('key', this.search, 'space', this, true);

                    content.append(fetchmore);

                }

            }

            this.setContent(content);

        } else {

            if (totalUsers <= (this.get(USP.PAGE) + 1) * this.get(USP.PERPAGE)) {

                bb.one(SELECTORS.MORERESULTS).remove();

            }

        }

    },

    /**

     * When the user has finished selecting users.

     *

     * @method finishSelectingUsers

     * @param {EventFacade} e The event.

     */

    finishSelectingUsers: function(e) {

        e.preventDefault();

        this.applySelection();

        this.hide();

    },

    /**

     * Apply the selection made.

     *

     * @method applySelection

     * @param {EventFacade} e The event.

     */

    applySelection: function() {

        var userIds = Y.Object.keys(this._usersBufferList);

        this.set(USP.SELECTEDUSERS, Y.clone(this._usersBufferList))

            .setNameDisplay();

        Y.one(SELECTORS.USERIDS).set('value', userIds.join());

    },

    /**

     * Select a user.

     *

     * @method SelectUser

     * @param {EventFacade} e The event.

     */

    selectUser: function(e) {

        var user = e.currentTarget.ancestor(SELECTORS.USER),

            checkbox = user.one(SELECTORS.USERSELECT),

            fullname = user.one(SELECTORS.FULLNAME).get('innerHTML'),

            checked = checkbox.get('checked'),

            userId = user.getData('userid');

        if (e.currentTarget !== checkbox) {

            // We triggered the selection from another node, so we need to change the checkbox value.

            checked = !checked;

        }

        if (checked) {

            // Selecting the user.

            this._usersBufferList[userId] = fullname;

        } else {

            // De-selecting the user.

            delete this._usersBufferList[userId];

            delete this._usersBufferList[parseInt(userId, 10)]; // Also remove numbered keys.

        }

        this.markUserNode(user, checked);

    },

    /**

     * Mark a user node as selected or not.

     *

     * This only takes care of the DOM side of things, not the internal mechanism

     * storing what users have been selected or not.

     *

     * @param {Node} node The user node.

     * @param {Boolean} selected True to mark as selected.

     * @chainable

     */

    markUserNode: function(node, selected) {

        if (selected) {

            node.addClass(CSS.SELECTED)

                .set('aria-selected', true)

                .one(SELECTORS.USERSELECT)

                    .set('checked', true);

        } else {

            node.removeClass(CSS.SELECTED)

                .set('aria-selected', false)

                .one(SELECTORS.USERSELECT)

                    .set('checked', false);

        }

        return this;

    },

    /**

     * Set the content of the dialogue.

     *

     * @method setContent

     * @param {String} content The content.

     * @chainable

     */

    setContent: function(content) {

        this.get('boundingBox').one(SELECTORS.AJAXCONTENT).setHTML(content);

        return this;

    },

    /**

     * Display the names of the selected users in the form.

     *

     * @method setNameDisplay

     */

    setNameDisplay: function() {

        var namelist = Y.Object.values(this.get(USP.SELECTEDUSERS));

        Y.one(SELECTORS.SELECTEDNAMES).set('innerHTML', namelist.join(', '));

        Y.one(SELECTORS.USERFULLNAMES).set('value', namelist.join());

    },

    /**

     * User keyboard navigation.

     *

     * @method userKeyboardNavigation

     */

    userKeyboardNavigation: function(e) {

        var bb = this.get('boundingBox'),

            users = bb.all(SELECTORS.USER),

            direction = 1,

            user,

            current = e.target.ancestor(SELECTORS.USER, true);

        if (e.keyCode === 38) {

            direction = -1;

        }

        user = this.findFocusableUser(users, current, direction);

        if (user) {

            e.preventDefault();

            user.one(SELECTORS.USERSELECT).focus();

            this.setUserTabFocus(user);

        }

    },

    /**

     * Find the next or previous focusable node.

     *

     * @param {NodeList} users The list of users.

     * @param {Node} user The user to start with.

     * @param {Number} direction The direction in which to go.

     * @return {Node|null} A user node, or null if not found.

     * @method findFocusableUser

     */

    findFocusableUser: function(users, user, direction) {

        var index = users.indexOf(user);

        if (users.size() < 1) {

            Y.log('The users list is empty', 'debug', COMPONENT);

            return null;

        }

        if (index < 0) {

            Y.log('Unable to find the user in the list of users', 'debug', COMPONENT);

            return users.item(0);

        }

        index += direction;

        // Wrap the navigation when reaching the top of the bottom.

        if (index < 0) {

            index = users.size() - 1;

        } else if (index >= users.size()) {

            index = 0;

        }

        return users.item(index);

    },

    /**

     * Set the user tab focus.

     *

     * @param {Node} user The user node.

     * @method setUserTabFocus

     */

    setUserTabFocus: function(user) {

        if (this._userTabFocus) {

            this._userTabFocus.setAttribute('tabindex', '-1');

        }

        if (!user) {

            // We were not passed a user, there is apparently none in the dialogue. Nothing to do here \\\o/.

            return;

        }

        this._userTabFocus = user.one(SELECTORS.USERSELECT);

        this._userTabFocus.setAttribute('tabindex', '0');

        this.get('boundingBox').one(SELECTORS.RESULTSUSERS).setAttribute('aria-activedescendant', this._userTabFocus.generateID());

    }

}, {

    NAME: USP.NAME,

    CSS_PREFIX: USP.CSS_PREFIX,

    ATTRS: {

        /**

         * The header.

         *

         * @attribute title

         * @default selectusers language string.

         * @type String

         */

        title: {

            validator: Y.Lang.isString,

            valueFn: function() {

                return M.util.get_string('selectusers', COMPONENT);

            }

        },

        /**

         * The current page URL.

         *

         * @attribute url

         * @default null

         * @type String

         */

        url: {

            validator: Y.Lang.isString,

            value: null

        },

        /**

         * The URL to the Ajax file.

         *

         * @attribute ajaxurl

         * @default null

         * @type String

         */

        ajaxurl: {

            validator: Y.Lang.isString,

            value: null

        },

        /**

         * The names of the selected users.

         *

         * The keys are the user IDs, the values are their fullname.

         *

         * @attribute selectedUsers

         * @default null

         * @type Object

         */

        selectedUsers: {

            validator: Y.Lang.isObject,

            value: null,

            getter: function(v) {

                if (v === null) {

                    return {};

                }

                return v;

            }

        },

        /**

         * The course ID.

         *

         * @attribute courseid

         * @default null

         * @type Number

         */

        courseid: {

            value: null

        },

        /**

         * Array of parameters.

         *

         * @attribute params

         * @default []

         * @type Array

         */

        params: {

            validator: Y.Lang.isArray,

            value: []

        },

        /**

         * The page we are on.

         *

         * @attribute page

         * @default 0

         * @type Number

         */

        page: {

            validator: Y.Lang.isNumber,

            value: 0

        },

        /**

         * The number of users displayed.

         *

         * @attribute userCount

         * @default 0

         * @type Number

         */

        userCount: {

            value: 0,

            validator: Y.Lang.isNumber

        },

        /**

         * The number of results per page.

         *

         * @attribute perPage

         * @default 25

         * @type Number

         */

        perPage: {

            value: 25,

            Validator: Y.Lang.isNumber

        }

    }

});

Y.Base.modifyAttrs(Y.namespace('M.gradereport_history.UserSelector'), {

    /**

     * List of extra classes.

     *

     * @attribute extraClasses

     * @default ['gradereport_history_usp']

     * @type Array

     */

    extraClasses: {

        value: [

            'gradereport_history_usp'

        ]

    },

    /**

     * Whether to focus on the target that caused the Widget to be shown.

     *

     * @attribute focusOnPreviousTargetAfterHide

     * @default true

     * @type Node

     */

    focusOnPreviousTargetAfterHide: {

        value: true

    },

    /**

     *

     * Width.

     *

     * @attribute width

     * @default '500px'

     * @type String|Number

     */

    width: {

        value: '500px'

    },

    /**

     * Boolean indicating whether or not the Widget is visible.

     *

     * @attribute visible

     * @default false

     * @type Boolean

     */

    visible: {

        value: false

    },

   /**

    * Whether the widget should be modal or not.

    *

    * @attribute modal

    * @type Boolean

    * @default true

    */

    modal: {

        value: true

    },

   /**

    * Whether the widget should be draggable or not.

    *

    * @attribute draggable

    * @type Boolean

    * @default true

    */

    draggable: {

        value: true

    }

});

Y.namespace('M.gradereport_history.UserSelector').init = function(cfg) {

    return new USERSELECTOR(cfg);

};