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

/**
 * A class to help show and hide advanced form content.
 *
 * @module     core_form/showadvanced
 * @copyright  2016 Damyon Wiese <damyon@moodle.com>
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */
define(['jquery', 'core/log', 'core/str', 'core/notification'], function($, Log, Strings, Notification) {

    var SELECTORS = {
            FIELDSETCONTAINSADVANCED: 'fieldset.containsadvancedelements',
            DIVFITEMADVANCED: 'div.fitem.advanced',
            DIVADVANCEDSECTION: 'div#form-advanced-div',
            DIVFCONTAINER: 'div.fcontainer',
            MORELESSLINK: 'fieldset.containsadvancedelements .moreless-toggler'
        },
        CSS = {
            SHOW: 'show',
            MORELESSACTIONS: 'moreless-actions',
            MORELESSTOGGLER: 'moreless-toggler',
            SHOWLESS: 'moreless-less'
        },
        WRAPPERS = {
            FITEM: '<div class="fitem"></div>',
            FELEMENT: '<div class="felement"></div>',
            ADVANCEDDIV: '<div id="form-advanced-div"></div>'
        },
        IDPREFIX = 'showadvancedid-';

    /** @property {Integer} uniqIdSeed Auto incrementing number used to generate ids. */
    var uniqIdSeed = 0;

    /**
     * ShowAdvanced behaviour class.
     *
     * @class core_form/showadvanced
     * @param {String} id The id of the form.
     */
    var ShowAdvanced = function(id) {
        this.id = id;

        var form = $(document.getElementById(id));
        this.enhanceForm(form);
    };

    /** @property {String} id The form id to enhance. */
    ShowAdvanced.prototype.id = '';

    /**
     * @method enhanceForm
     * @param {JQuery} form JQuery selector representing the form
     * @return {ShowAdvanced}
     */
    ShowAdvanced.prototype.enhanceForm = function(form) {
        var fieldsets = form.find(SELECTORS.FIELDSETCONTAINSADVANCED);

        // Enhance each fieldset in the form matching the selector.
        fieldsets.each(function(index, item) {
            this.enhanceFieldset($(item));
        }.bind(this));

        // Attach some event listeners.
        // Subscribe more/less links to click event.
        form.on('click', SELECTORS.MORELESSLINK, this.switchState);

        // Subscribe to key events but filter for space or enter.
        form.on('keydown', SELECTORS.MORELESSLINK, function(e) {
            // Enter or space.
            if (e.which == 13 || e.which == 32) {
                return this.switchState(e);
            }
            return true;
        }.bind(this));
        return this;
    };


    /**
     * Generates a uniq id for the dom element it's called on unless the element already has an id.
     * The id is set on the dom node before being returned.
     *
     * @method generateId
     * @param {JQuery} node JQuery selector representing a single DOM Node.
     * @return {String}
     */
    ShowAdvanced.prototype.generateId = function(node) {
        var id = node.prop('id');
        if (typeof id === 'undefined') {
            id = IDPREFIX + (uniqIdSeed++);
            node.prop('id', id);
        }
        return id;
    };

    /**
     * @method enhanceFieldset
     * @param {JQuery} fieldset JQuery selector representing a fieldset
     * @return {ShowAdvanced}
     */
    ShowAdvanced.prototype.enhanceFieldset = function(fieldset) {
        var statuselement = $('input[name=mform_showmore_' + fieldset.prop('id') + ']');
        if (!statuselement.length) {
            Log.debug("M.form.showadvanced::processFieldset was called on an fieldset without a status field: '" +
                fieldset.prop('id') + "'");
            return this;
        }

        // Fetch some strings.
        Strings.get_strings([{
            key: 'showmore',
            component: 'core_form'
        }, {
            key: 'showless',
            component: 'core_form'
        }]).then(function(results) {
            var showmore = results[0],
                showless = results[1];

            // Generate more/less links.
            var morelesslink = $('<a href="#"></a>');
            morelesslink.addClass(CSS.MORELESSTOGGLER);
            if (statuselement.val() === '0') {
                morelesslink.html(showmore);
                morelesslink.attr('aria-expanded', 'false');
            } else {
                morelesslink.html(showless);
                morelesslink.attr('aria-expanded', 'true');
                morelesslink.addClass(CSS.SHOWLESS);
                fieldset.find(SELECTORS.DIVFITEMADVANCED).addClass(CSS.SHOW);
            }
            // Build a list of advanced fieldsets.
            var idlist = [];
            fieldset.find(SELECTORS.DIVFITEMADVANCED).each(function(index, node) {
                idlist[idlist.length] = this.generateId($(node));
            }.bind(this));

            // Set aria attributes.
            morelesslink.attr('role', 'button');
            morelesslink.attr('aria-controls', 'form-advanced-div');

            var formadvancedsection = $(WRAPPERS.ADVANCEDDIV);
            fieldset.find(SELECTORS.DIVFITEMADVANCED).wrapAll(formadvancedsection);
            // Add elements to the DOM.
            var fitem = $(WRAPPERS.FITEM);
            fitem.addClass(CSS.MORELESSACTIONS);
            var felement = $(WRAPPERS.FELEMENT);
            felement.append(morelesslink);
            fitem.append(felement);

            fieldset.find(SELECTORS.DIVADVANCEDSECTION).before(fitem);
            return true;
        }.bind(this)).fail(Notification.exception);

        return this;
    };

    /**
     * @method switchState
     * @param {Event} e Event that triggered this action.
     * @return {Boolean}
     */
    ShowAdvanced.prototype.switchState = function(e) {
        e.preventDefault();

        // Fetch some strings.
        Strings.get_strings([{
            key: 'showmore',
            component: 'core_form'
        }, {
            key: 'showless',
            component: 'core_form'
        }]).then(function(results) {
            var showmore = results[0],
                showless = results[1],
                fieldset = $(e.target).closest(SELECTORS.FIELDSETCONTAINSADVANCED);

            // Toggle collapsed class.
            fieldset.find(SELECTORS.DIVFITEMADVANCED).toggleClass(CSS.SHOW);

            // Get corresponding hidden variable.
            var statuselement = $('input[name=mform_showmore_' + fieldset.prop('id') + ']');

            // Invert it and change the link text.
            if (statuselement.val() === '0') {
                statuselement.val(1);
                $(e.target).addClass(CSS.SHOWLESS);
                $(e.target).html(showless);
                $(e.target).attr('aria-expanded', 'true');
            } else {
                statuselement.val(0);
                $(e.target).removeClass(CSS.SHOWLESS);
                $(e.target).html(showmore);
                $(e.target).attr('aria-expanded', 'false');
            }
            return true;
        }).fail(Notification.exception);

        return this;
    };

    return {
        /**
         * Initialise this module.
         * @method init
         * @param {String} formid
         * @return {ShowAdvanced}
         */
        init: function(formid) {
            return new ShowAdvanced(formid);
        }
    };
});