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

/**
 * This module allows to enhance the form elements MoodleQuickForm_filetypes
 *
 * @module     core_form/filetypes
 * @copyright  2017 David Mudrak <david@moodle.com>
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 * @since      3.3
 */
define(['jquery', 'core/log', 'core/modal_events', 'core/modal_save_cancel', 'core/ajax',
        'core/templates', 'core/tree'],
    function($, Log, ModalEvents, ModalSaveCancel, Ajax, Templates, Tree) {

    "use strict";

    /**
     * Constructor of the FileTypes instances.
     *
     * @constructor
     * @param {String} elementId The id of the form element to enhance
     * @param {String} elementLabel The label of the form element used as the modal selector title
     * @param {String} onlyTypes Limit the list of offered types to this
     * @param {Bool} allowAll Allow presence of the "All file types" item
     */
    var FileTypes = function(elementId, elementLabel, onlyTypes, allowAll) {

        this.elementId = elementId;
        this.elementLabel = elementLabel;
        this.onlyTypes = onlyTypes;
        this.allowAll = allowAll;

        this.inputField = $('#' + elementId);
        this.wrapperBrowserTrigger = $('[data-filetypesbrowser="' + elementId + '"]');
        this.wrapperDescriptions = $('[data-filetypesdescriptions="' + elementId + '"]');

        if (!this.wrapperBrowserTrigger.length) {
            // This is a valid case. Most probably the element is frozen and
            // the filetypes browser should not be available.
            return;
        }

        if (!this.inputField.length || !this.wrapperDescriptions.length) {
            Log.error('core_form/filetypes: Unexpected DOM structure, unable to enhance filetypes field ' + elementId);
            return;
        }

        this.prepareBrowserTrigger()
            .then(function() {
                return this.prepareBrowserModal();
            }.bind(this))

            .then(function() {
                return this.prepareBrowserTree();
            }.bind(this));
    };

    /**
     * Create and set the browser trigger widget (this.browserTrigger).
     *
     * @method prepareBrowserTrigger
     * @returns {Promise}
     */
    FileTypes.prototype.prepareBrowserTrigger = function() {
        return Templates.render('core_form/filetypes-trigger', {})
            .then(function(html) {
                this.wrapperBrowserTrigger.html(html);
                this.browserTrigger = this.wrapperBrowserTrigger.find('[data-filetypeswidget="browsertrigger"]');
            }.bind(this));
    };

    /**
     * Create and set the modal for displaying the browser (this.browserModal).
     *
     * @method prepareBrowserModal
     * @returns {Promise}
     */
    FileTypes.prototype.prepareBrowserModal = function() {
        return ModalSaveCancel.create({
            title: this.elementLabel,
        })
        .then(function(modal) {
            this.browserModal = modal;
            return modal;
        }.bind(this))
        .then(function() {
            // Because we have custom conditional modal trigger, we need to
            // handle the focus after closing ourselves, too.
            this.browserModal.getRoot().on(ModalEvents.hidden, function() {
                this.browserTrigger.focus();
            }.bind(this));

            this.browserModal.getRoot().on(ModalEvents.save, function() {
                this.saveBrowserModal();
            }.bind(this));
        }.bind(this));

    };

    /**
     * Create and set the tree in the browser modal's body.
     *
     * @method prepareBrowserTree
     * @returns {Promise}
     */
    FileTypes.prototype.prepareBrowserTree = function() {

        this.browserTrigger.on('click', function(e) {
            e.preventDefault();

            // We want to display the browser modal only when the associated input
            // field is not frozen (disabled).
            if (this.inputField.is('[disabled]')) {
                return;
            }

            var bodyContent = this.loadBrowserModalBody();

            bodyContent.then(function() {

                // Turn the list of groups and extensions into the tree.
                this.browserTree = new Tree(this.browserModal.getBody());

                // Override the behaviour of the Enter and Space keys to toggle our checkbox,
                // rather than toggle the tree node expansion status.
                this.browserTree.handleKeyDown = function(item, e) {
                    if (e.keyCode == this.browserTree.keys.enter || e.keyCode == this.browserTree.keys.space) {
                        e.preventDefault();
                        e.stopPropagation();
                        this.toggleCheckbox(item.attr('data-filetypesbrowserkey'));
                    } else {
                        Tree.prototype.handleKeyDown.call(this.browserTree, item, e);
                    }
                }.bind(this);

                if (this.allowAll) {
                    // Hide all other items if "All file types" is enabled.
                    this.hideOrShowItemsDependingOnAllowAll(this.browserModal.getRoot()
                        .find('input[type="checkbox"][data-filetypesbrowserkey="*"]').first());
                    // And do the same whenever we click that checkbox.
                    this.browserModal.getRoot().on('change', 'input[type="checkbox"][data-filetypesbrowserkey="*"]', function(e) {
                        this.hideOrShowItemsDependingOnAllowAll($(e.currentTarget));
                    }.bind(this));
                }

                // Synchronize checked status if the file extension is present in multiple groups.
                this.browserModal.getRoot().on('change', 'input[type="checkbox"][data-filetypesbrowserkey]', function(e) {
                    var checkbox = $(e.currentTarget);
                    var key = checkbox.attr('data-filetypesbrowserkey');
                    this.browserModal.getRoot().find('input[type="checkbox"][data-filetypesbrowserkey="' + key + '"]')
                        .prop('checked', checkbox.prop('checked'));
                }.bind(this));

            }.bind(this))

            .then(function() {
                this.browserModal.show();
            }.bind(this));

            this.browserModal.setBody(bodyContent);

        }.bind(this));

        // Return a resolved promise.
        return $.when();
    };

    /**
     * Load the browser modal body contents.
     *
     * @returns {Promise}
     */
    FileTypes.prototype.loadBrowserModalBody = function() {

        var args = {
            onlytypes: this.onlyTypes.join(),
            allowall: this.allowAll,
            current: this.inputField.val()
        };

        return Ajax.call([{
            methodname: 'core_form_get_filetypes_browser_data',
            args: args

        }])[0].then(function(browserData) {
            return Templates.render('core_form/filetypes-browser', {
                elementid: this.elementId,
                groups: browserData.groups
            });
        }.bind(this));
    };

    /**
     * Change the checked status of the given file type (group or extension).
     *
     * @method toggleCheckbox
     * @param {String} key
     */
    FileTypes.prototype.toggleCheckbox = function(key) {

        var checkbox = this.browserModal.getRoot().find('input[type="checkbox"][data-filetypesbrowserkey="' + key + '"]').first();

        checkbox.prop('checked', !checkbox.prop('checked'));
    };

    /**
     * Update the associated input field with selected file types.
     *
     * @method saveBrowserModal
     */
    FileTypes.prototype.saveBrowserModal = function() {

        // Check the "All file types" first.
        if (this.allowAll) {
            var allcheckbox = this.browserModal.getRoot().find('input[type="checkbox"][data-filetypesbrowserkey="*"]');
            if (allcheckbox.length && allcheckbox.prop('checked')) {
                this.inputField.val('*');
                this.updateDescriptions(['*']);
                return;
            }
        }

        // Iterate over all checked boxes and populate the list.
        var newvalue = [];

        this.browserModal.getRoot().find('input[type="checkbox"]').each(/** @this represents the checkbox */ function() {
            var checkbox = $(this);
            var key = checkbox.attr('data-filetypesbrowserkey');

            if (checkbox.prop('checked')) {
                newvalue.push(key);
            }
        });

        // Remove duplicates (e.g. file types present in multiple groups).
        newvalue = newvalue.filter(function(x, i, a) {
            return a.indexOf(x) == i;
        });

        this.inputField.val(newvalue.join(' '));
        this.updateDescriptions(newvalue);
    };

    /**
     * Describe the selected filetypes in the form when saving the browser.
     *
     * @param {Array} keys List of keys to describe
     * @returns {Promise}
     */
    FileTypes.prototype.updateDescriptions = function(keys) {

        var descriptions = [];

        keys.forEach(function(key) {
            descriptions.push({
                description: this.browserModal.getRoot().find('[data-filetypesname="' + key + '"]').first().text().trim(),
                extensions: this.browserModal.getRoot().find('[data-filetypesextensions="' + key + '"]').first().text().trim()
            });
        }.bind(this));

        var templatedata = {
            hasdescriptions: (descriptions.length > 0),
            descriptions: descriptions
        };

        return Templates.render('core_form/filetypes-descriptions', templatedata)
            .then(function(html) {
                this.wrapperDescriptions.html(html);
            }.bind(this));
    };

    /**
     * If "All file types" is checked, all other browser items are made hidden, and vice versa.
     *
     * @param {jQuery} allcheckbox The "All file types" checkbox.
     */
    FileTypes.prototype.hideOrShowItemsDependingOnAllowAll = function(allcheckbox) {
        var others = this.browserModal.getRoot().find('[role="treeitem"][data-filetypesbrowserkey!="*"]');
        if (allcheckbox.prop('checked')) {
            others.hide();
        } else {
            others.show();
        }
    };

    return {
        init: function(elementId, elementLabel, onlyTypes, allowAll) {
            new FileTypes(elementId, elementLabel, onlyTypes, allowAll);
        }
    };
});