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/>.

/**

 * Controls all of the behaviour and interaction with a tool type card. These are

 * listed on the LTI tool type management page.

 *

 * See template: mod_lti/tool_card

 *

 * @module     mod_lti/tool_card_controller

 * @copyright  2015 Ryan Wyllie <ryan@moodle.com>

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

 * @since      3.1

 */

 define(['jquery', 'core/ajax', 'core/notification', 'core/templates', 'core/modal',

        'mod_lti/tool_type', 'mod_lti/events', 'mod_lti/keys',

        'core/str'],

        function($, ajax, notification, templates, Modal, toolType, ltiEvents, KEYS, str) {

    var SELECTORS = {

        DELETE_BUTTON: '.delete',

        NAME_ELEMENT: '.name',

        DESCRIPTION_ELEMENT: '.description',

        CAPABILITIES_CONTAINER: '.capabilities-container',

        ACTIVATE_BUTTON: '.tool-card-footer a.activate',

    };

    // Timeout in seconds.

    var ANNOUNCEMENT_TIMEOUT = 2000;

    /**

     * Return the delete button element.

     *

     * @method getDeleteButton

     * @private

     * @param {JQuery} element jQuery object representing the tool card.

     * @return {JQuery} jQuery object

     */

    var getDeleteButton = function(element) {

        return element.find(SELECTORS.DELETE_BUTTON);

    };

    /**

     * Return the element representing the tool type name.

     *

     * @method getNameElement

     * @private

     * @param {JQuery} element jQuery object representing the tool card.

     * @return {JQuery} jQuery object

     */

    var getNameElement = function(element) {

        return element.find(SELECTORS.NAME_ELEMENT);

    };

    /**

     * Return the element representing the tool type description.

     *

     * @method getDescriptionElement

     * @private

     * @param {JQuery} element jQuery object representing the tool card.

     * @return {JQuery} jQuery object

     */

    var getDescriptionElement = function(element) {

        return element.find(SELECTORS.DESCRIPTION_ELEMENT);

    };

    /**

     * Return the activate button for the type.

     *

     * @method getActivateButton

     * @private

     * @param {Object} element jQuery object representing the tool card.

     * @return {Object} jQuery object

     */

    var getActivateButton = function(element) {

        return element.find(SELECTORS.ACTIVATE_BUTTON);

    };

    /**

     * Checks if the type card has an activate button.

     *

     * @method hasActivateButton

     * @private

     * @param {JQuery} element jQuery object representing the tool card.

     * @return {Boolean} true if has active buton

     */

    var hasActivateButton = function(element) {

        return getActivateButton(element).length ? true : false;

    };

    /**

     * Return the element that contains the capabilities approval for

     * the user.

     *

     * @method getCapabilitiesContainer

     * @private

     * @param {Object} element jQuery object representing the tool card.

     * @return {Object} The element

     */

    var getCapabilitiesContainer = function(element) {

        return element.find(SELECTORS.CAPABILITIES_CONTAINER);

    };

    /**

     * Checks if the tool type has capabilities that need approval. If it

     * does then the container will be present.

     *

     * @method hasCapabilitiesContainer

     * @private

     * @param {JQuery} element jQuery object representing the tool card.

     * @return {Boolean} true if has capbilities.

     */

    var hasCapabilitiesContainer = function(element) {

        return getCapabilitiesContainer(element).length ? true : false;

    };

    /**

     * Get the type id.

     *

     * @method getTypeId

     * @private

     * @param {Object} element jQuery object representing the tool card.

     * @return {String} Type ID

     */

    var getTypeId = function(element) {

        return element.attr('data-type-id');

    };

    /**

     * Stop any announcement currently visible on the card.

     *

     * @method clearAllAnnouncements

     * @private

     * @param {JQuery} element jQuery object representing the tool card.

     */

    var clearAllAnnouncements = function(element) {

        element.removeClass('announcement loading success fail capabilities');

    };

    /**

     * Show the loading announcement.

     *

     * @method startLoading

     * @private

     * @param {JQuery} element jQuery object representing the tool card.

     */

    var startLoading = function(element) {

        clearAllAnnouncements(element);

        element.addClass('announcement loading');

    };

    /**

     * Hide the loading announcement.

     *

     * @method stopLoading

     * @private

     * @param {JQuery} element jQuery object representing the tool card.

     */

    var stopLoading = function(element) {

        element.removeClass('announcement loading');

    };

    /**

     * Show the success announcement. The announcement is only

     * visible for 2 seconds.

     *

     * @method announceSuccess

     * @private

     * @param {JQuery} element jQuery object representing the tool card.

     * @return {Promise} jQuery Deferred object

     */

    var announceSuccess = function(element) {

        var promise = $.Deferred();

        clearAllAnnouncements(element);

        element.addClass('announcement success');

        setTimeout(function() {

            element.removeClass('announcement success');

            promise.resolve();

        }, ANNOUNCEMENT_TIMEOUT);

        return promise;

    };

    /**

     * Show the failure announcement. The announcement is only

     * visible for 2 seconds.

     *

     * @method announceFailure

     * @private

     * @param {JQuery} element jQuery object representing the tool card.

     * @return {Promise} jQuery Deferred object

     */

    var announceFailure = function(element) {

        var promise = $.Deferred();

        clearAllAnnouncements(element);

        element.addClass('announcement fail');

        setTimeout(function() {

            element.removeClass('announcement fail');

            promise.resolve();

        }, ANNOUNCEMENT_TIMEOUT);

        return promise;

    };

    /**

     * Delete the tool type from the Moodle server. Triggers a success

     * or failure announcement depending on the result.

     *

     * @method deleteType

     * @private

     * @param {JQuery} element jQuery object representing the tool card.

     * @return {Promise} jQuery Deferred object

     */

    var deleteType = function(element) {

        var promise = $.Deferred();

        var typeId = getTypeId(element);

        startLoading(element);

        if (typeId === "") {

            return $.Deferred().resolve();

        }

        str.get_strings([

                {

                    key: 'delete',

                    component: 'mod_lti'

                },

                {

                    key: 'delete_confirmation',

                    component: 'mod_lti'

                },

                {

                    key: 'delete',

                    component: 'mod_lti'

                },

                {

                    key: 'cancel',

                    component: 'core'

                },

            ])

            .done(function(strs) {

                    notification.confirm(strs[0], strs[1], strs[2], strs[3], function() {

                            toolType.delete(typeId)

                                .done(function() {

                                        stopLoading(element);

                                        announceSuccess(element)

                                            .done(function() {

                                                    element.remove();

                                                })

                                            .fail(notification.exception)

                                            .always(function() {

                                                    // Always resolve because even if the announcement fails the type was deleted.

                                                    promise.resolve();

                                                });

                                    })

                                .fail(function(error) {

                                        announceFailure(element);

                                        promise.reject(error);

                                    });

                        }, function() {

                                stopLoading(element);

                                promise.resolve();

                            });

                })

            .fail(function(error) {

                    stopLoading(element);

                    notification.exception(error);

                    promise.reject(error);

                });

        return promise;

    };

    /**

     * Save a given value in a data attribute on the element.

     *

     * @method setValueSnapshot

     * @private

     * @param {JQuery} element jQuery object representing the element.

     * @param {String} value to be saved.

     */

    var setValueSnapshot = function(element, value) {

        element.attr('data-val-snapshot', value);

    };

    /**

     * Return the saved value from the element.

     *

     * @method getValueSnapshot

     * @private

     * @param {JQuery} element jQuery object representing the element.

     * @return {String} the saved value.

     */

    var getValueSnapshot = function(element) {

        return element.attr('data-val-snapshot');

    };

    /**

     * Save the current value of the tool description.

     *

     * @method snapshotDescription

     * @private

     * @param {JQuery} element jQuery object representing the tool card.

     */

    var snapshotDescription = function(element) {

        var descriptionElement = getDescriptionElement(element);

        if (descriptionElement.hasClass('loading')) {

            return;

        }

        var description = descriptionElement.text().trim();

        setValueSnapshot(descriptionElement, description);

    };

    /**

     * Send a request to update the description value for this tool

     * in the Moodle server.

     *

     * @method updateDescription

     * @private

     * @param {JQuery} element jQuery object representing the tool card.

     * @return {Promise} jQuery Deferred object

     */

    var updateDescription = function(element) {

        var typeId = getTypeId(element);

        // Return early if we don't have an id because it's

        // required to save the changes.

        if (typeId === "") {

            return $.Deferred().resolve();

        }

        var descriptionElement = getDescriptionElement(element);

        // Return early if we're already saving a value.

        if (descriptionElement.hasClass('loading')) {

            return $.Deferred().resolve();

        }

        var description = descriptionElement.text().trim();

        var snapshotVal = getValueSnapshot(descriptionElement);

        // If the value hasn't change then don't bother sending the

        // update request.

        if (snapshotVal == description) {

            return $.Deferred().resolve();

        }

        descriptionElement.addClass('loading');

        var promise = toolType.update({id: typeId, description: description});

        promise.done(function(type) {

            descriptionElement.removeClass('loading');

            // Make sure the text is updated with the description from the

            // server, just in case the update didn't work.

            descriptionElement.text(type.description);

        }).fail(notification.exception);

        // Probably need to handle failures better so that we can revert

        // the value in the input for the user.

        promise.fail(function() {

          descriptionElement.removeClass('loading');

        });

        return promise;

    };

    /**

     * Save the current value of the tool name.

     *

     * @method snapshotName

     * @private

     * @param {JQuery} element jQuery object representing the tool card.

     */

    var snapshotName = function(element) {

        var nameElement = getNameElement(element);

        if (nameElement.hasClass('loading')) {

            return;

        }

        var name = nameElement.text().trim();

        setValueSnapshot(nameElement, name);

    };

    /**

     * Send a request to update the name value for this tool

     * in the Moodle server.

     *

     * @method updateName

     * @private

     * @param {JQuery} element jQuery object representing the tool card.

     * @return {Promise} jQuery Deferred object

     */

    var updateName = function(element) {

        var typeId = getTypeId(element);

        // Return if we don't have an id.

        if (typeId === "") {

            return $.Deferred().resolve();

        }

        var nameElement = getNameElement(element);

        // Return if we're already saving.

        if (nameElement.hasClass('loading')) {

            return $.Deferred().resolve();

        }

        var name = nameElement.text().trim();

        var snapshotVal = getValueSnapshot(nameElement);

        // If the value hasn't change then don't bother sending the

        // update request.

        if (snapshotVal == name) {

            return $.Deferred().resolve();

        }

        nameElement.addClass('loading');

        var promise = toolType.update({id: typeId, name: name});

        promise.done(function(type) {

            nameElement.removeClass('loading');

            // Make sure the text is updated with the name from the

            // server, just in case the update didn't work.

            nameElement.text(type.name);

        });

        // Probably need to handle failures better so that we can revert

        // the value in the input for the user.

        promise.fail(function() {

          nameElement.removeClass('loading');

        });

        return promise;

    };

    /**

     * Send a request to update the state for this tool to be configured (active)

     * in the Moodle server. A success or failure announcement is triggered depending

     * on the result.

     *

     * @method setStatusActive

     * @private

     * @param {JQuery} element jQuery object representing the tool card.

     * @return {Promise} jQuery Deferred object

     */

    var setStatusActive = function(element) {

        var id = getTypeId(element);

        // Return if we don't have an id.

        if (id === "") {

            return $.Deferred().resolve();

        }

        startLoading(element);

        var promise = toolType.update({

            id: id,

            state: toolType.constants.state.configured

        });

        promise.then(function(toolTypeData) {

            stopLoading(element);

            announceSuccess(element);

            return toolTypeData;

        }).then(function(toolTypeData) {

            return templates.render('mod_lti/tool_card', toolTypeData);

        }).then(function(html, js) {

            templates.replaceNode(element, html, js);

            return;

        }).catch(function() {

            stopLoading(element);

            announceFailure(element);

        });

        return promise;

    };

    /**

     * Show the capabilities approval screen to show which groups of data this

     * type requires access to in Moodle (if any).

     *

     * @method displayCapabilitiesApproval

     * @private

     * @param {JQuery} element jQuery object representing the tool card.

     */

    var displayCapabilitiesApproval = function(element) {

        element.addClass('announcement capabilities');

    };

    /**

     * Hide the capabilities approval screen.

     *

     * @method hideCapabilitiesApproval

     * @private

     * @param {JQuery} element jQuery object representing the tool card.

     */

    var hideCapabilitiesApproval = function(element) {

        element.removeClass('announcement capabilities');

    };

    /**

     * The user wishes to activate this tool so show them the capabilities that

     * they need to agree to or if there are none then set the tool type's state

     * to active.

     *

     * @method activateToolType

     * @private

     * @param {JQuery} element jQuery object representing the tool card.

     */

    var activateToolType = function(element) {

        if (hasCapabilitiesContainer(element)) {

            displayCapabilitiesApproval(element);

        } else {

            setStatusActive(element);

        }

    };

    /**

     * Sets up the listeners for user interaction on this tool type card.

     *

     * @method registerEventListeners

     * @private

     * @param {JQuery} element jQuery object representing the tool card.

     */

    var registerEventListeners = function(element) {

        var deleteButton = getDeleteButton(element);

        deleteButton.click(function(e) {

            e.preventDefault();

            deleteType(element);

        });

        deleteButton.keypress(function(e) {

            if (!e.metaKey && !e.shiftKey && !e.altKey && !e.ctrlKey) {

                if (e.keyCode == KEYS.ENTER || e.keyCode == KEYS.SPACE) {

                    e.preventDefault();

                    deleteButton.click();

                }

            }

        });

        var descriptionElement = getDescriptionElement(element);

        descriptionElement.focus(function(e) {

            e.preventDefault();

            // Save a copy of the current value for the description so that

            // we can check if the user has changed it before sending a request to

            // the server.

            snapshotDescription(element);

        });

        descriptionElement.blur(function(e) {

            e.preventDefault();

            updateDescription(element);

        });

        descriptionElement.keypress(function(e) {

            if (!e.metaKey && !e.shiftKey && !e.altKey && !e.ctrlKey) {

                if (e.keyCode == KEYS.ENTER) {

                    e.preventDefault();

                    descriptionElement.blur();

                }

            }

        });

        var nameElement = getNameElement(element);

        nameElement.focus(function(e) {

            e.preventDefault();

            // Save a copy of the current value for the name so that

            // we can check if the user has changed it before sending a request to

            // the server.

            snapshotName(element);

        });

        nameElement.blur(function(e) {

            e.preventDefault();

            updateName(element);

        });

        nameElement.keypress(function(e) {

            if (!e.metaKey && !e.shiftKey && !e.altKey && !e.ctrlKey) {

                if (e.keyCode == KEYS.ENTER) {

                    e.preventDefault();

                    nameElement.blur();

                }

            }

        });

        // Only pending tool type cards have an activate button.

        if (hasActivateButton(element)) {

            var activateButton = getActivateButton(element);

            activateButton.click(function(e) {

                e.preventDefault();

                activateToolType(element);

            });

            activateButton.keypress(function(e) {

                if (!e.metaKey && !e.shiftKey && !e.altKey && !e.ctrlKey) {

                    if (e.keyCode == KEYS.ENTER || e.keyCode == KEYS.SPACE) {

                        e.preventDefault();

                        activateButton.click();

                    }

                }

            });

        }

        if (hasCapabilitiesContainer(element)) {

            var capabilitiesContainer = getCapabilitiesContainer(element);

            capabilitiesContainer.on(ltiEvents.CAPABILITIES_AGREE, function() {

                setStatusActive(element);

            });

            capabilitiesContainer.on(ltiEvents.CAPABILITIES_DECLINE, function() {

                hideCapabilitiesApproval(element);

            });

        }

    };

    /**

     * Sets up the templates for the tool configuration modal on this tool type card.

     *

     * @method registerModal

     * @private

     * @param {JQuery} element jQuery object representing the tool card.

     */

    var registerModal = function(element) {

        const configurationLink = element.find('#' + element.data('uniqid') + '-' + element.data('deploymentid'));

        if (!configurationLink.length) {

            return;

        }

        const trigger = configurationLink.get(0);

        trigger.addEventListener('click', (e) => {

            e.preventDefault();

            var context = {

                'uniqid': element.data('uniqid'),

                'platformid': element.data('platformid'),

                'clientid': element.data('clientid'),

                'deploymentid': element.data('deploymentid'),

                'urls': {

                    'publickeyset': element.data('publickeyseturl'),

                    'accesstoken': element.data('accesstokenurl'),

                    'authrequest': element.data('authrequesturl')

                }

            };

            var bodyPromise = templates.render('mod_lti/tool_config_modal_body', context);

            var mailTo = 'mailto:?subject=' + encodeURIComponent(element.data('mailtosubject')) +

                '&body=' + encodeURIComponent(element.data('platformidstr')) + ':%20' +

                encodeURIComponent(element.data('platformid')) + '%0D%0A' +

                encodeURIComponent(element.data('clientidstr')) + ':%20' +

                encodeURIComponent(element.data('clientid')) + '%0D%0A' +

                encodeURIComponent(element.data('deploymentidstr')) + ':%20' +

                encodeURIComponent(element.data('deploymentid')) + '%0D%0A' +

                encodeURIComponent(element.data('publickeyseturlstr')) + ':%20' +

                encodeURIComponent(element.data('publickeyseturl')) + '%0D%0A' +

                encodeURIComponent(element.data('accesstokenurlstr')) + ':%20' +

                encodeURIComponent(element.data('accesstokenurl')) + '%0D%0A' +

                encodeURIComponent(element.data('authrequesturlstr')) + ':%20' +

                encodeURIComponent(element.data('authrequesturl')) + '%0D%0A';

            context = {

                'mailto': mailTo

            };

            var footerPromise = templates.render('mod_lti/tool_config_modal_footer', context);

            Modal.create({

                large: true,

                title: element.data('modaltitle'),

                body: bodyPromise,

                footer: footerPromise,

                show: true

            });

        });

    };

    return /** @alias module:mod_lti/tool_card_controller */ {

        /**

         * Initialise this module.

         *

         * @param {JQuery} element jQuery object representing the tool card.

         */

        init: function(element) {

            registerEventListeners(element);

            registerModal(element);

        }

    };

});