Proyectos de Subversion Moodle

// This file is part of the Zoom plugin for 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/>.

/**
 * Populates or de-populates password field based on whether the
 * password is required or not.
 *
 * @copyright  2018 UC Regents
 * @author     Kubilay Agi
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

define(['jquery', 'core/form-autocomplete', 'core/str', 'core/notification'], function($, autocomplete, str, notification) {

    /**
     * CSS selectors used throughout the file.
     *
     * @type {object}
     */
    var SELECTORS = {
        REPEAT_SELECT: 'select[name="recurrence_type"]',
        REPEAT_INTERVAL: '.repeat_interval',
        REPEAT_INTERVAL_DAILY: '#interval_daily',
        REPEAT_INTERVAL_WEEKLY: '#interval_weekly',
        REPEAT_INTERVAL_MONTHLY: '#interval_monthly',
        REPEAT_INTERVAL_OPTIONS: 'select[name="repeat_interval"] option',
        START_TIME: 'select[name*="start_time"]',
        DURATION: '*[name*="duration"]',
        RECURRING: 'input[name="recurring"][type!="hidden"]',
        OPTION_JBH: 'input[name="option_jbh"][type!="hidden"]',
        OPTION_WAITING_ROOM: 'input[name="option_waiting_room"][type!="hidden"]'
    };

    /**
     * Repeat interval options.
     *
     * @type {object}
     */
    var REPEAT_OPTIONS = {
        REPEAT_OPTION_NONE: 0,
        REPEAT_OPTION_DAILY: 1,
        REPEAT_OPTION_WEEKLY: 2,
        REPEAT_OPTION_MONTHLY: 3
    };

    /**
     * The max values for each repeat option.
     *
     * @type {object}
     */
    var REPEAT_MAX_OPTIONS = {
        REPEAT_OPTION_DAILY: 90,
        REPEAT_OPTION_WEEKLY: 12,
        REPEAT_OPTION_MONTHLY: 3
    };

    /**
     * The init function.
     */
    var init = function() {
        var optionJoinBeforeHost = $(SELECTORS.OPTION_JBH);
        var optionWaitingRoom = $(SELECTORS.OPTION_WAITING_ROOM);
        optionJoinBeforeHost.change(function() {
            if (optionJoinBeforeHost.is(':checked') === true) {
                optionWaitingRoom.prop('checked', false);
            }
        });
        optionWaitingRoom.change(function() {
            if (optionWaitingRoom.is(':checked') === true) {
                optionJoinBeforeHost.prop('checked', false);
            }
        });

        // First toggle the values based on initial selections.
        toggleStartTimeDuration();
        toggleRepeatIntervalText();
        limitRepeatValues();
        // Add listerner to "Repeat Every" drop-down.
        $(SELECTORS.REPEAT_SELECT).change(function() {
            toggleStartTimeDuration();
            toggleRepeatIntervalText();
            limitRepeatValues();
        });
        // Add listener for the "Recurring" checkbox
        $(SELECTORS.RECURRING).change(function() {
            toggleStartTimeDuration();
        });

        var breakoutroomsEditor = new BreakoutroomsEditor();
        breakoutroomsEditor.init();
    };

    /**
     * Toggle start time and duration elements.
     */
    var toggleStartTimeDuration = function() {
        // Disable start time and duration if "No Fixed Time" recurring meeting/webinar selected.
        var disabled = false;
        var repeatVal = parseInt($(SELECTORS.REPEAT_SELECT).val(), 10);
        if ($(SELECTORS.RECURRING).prop('checked') && repeatVal === REPEAT_OPTIONS.REPEAT_OPTION_NONE) {
            disabled = true;
        }
        $(SELECTORS.START_TIME).prop('disabled', disabled);
        $(SELECTORS.DURATION).prop('disabled', disabled);
    };

    /**
     * Toggle the text based on repeat type.
     * To show either Days, Weeks or Months
     */
    var toggleRepeatIntervalText = function() {
        $(SELECTORS.REPEAT_INTERVAL).hide();
        var repeatSelectVal = parseInt($(SELECTORS.REPEAT_SELECT).val(), 10);
        if (repeatSelectVal === REPEAT_OPTIONS.REPEAT_OPTION_DAILY) {
            $(SELECTORS.REPEAT_INTERVAL_DAILY).show();
        } else if (repeatSelectVal === REPEAT_OPTIONS.REPEAT_OPTION_WEEKLY) {
            $(SELECTORS.REPEAT_INTERVAL_WEEKLY).show();
        } else if (repeatSelectVal === REPEAT_OPTIONS.REPEAT_OPTION_MONTHLY) {
            $(SELECTORS.REPEAT_INTERVAL_MONTHLY).show();
        }
    };

    /**
     * Limit the options shown in the drop-down based on repeat type selected.
     * Max value for daily meeting is 90.
     * Max value for weekly meeting is 12.
     * Max value for monthly meeting is 3.
     */
    var limitRepeatValues = function() {
        var selectedValue = parseInt($(SELECTORS.REPEAT_SELECT).val(), 10);
        // Restrict options if weekly or monthly option selected.
        $(SELECTORS.REPEAT_INTERVAL_OPTIONS).each(function() {
            if (selectedValue === REPEAT_OPTIONS.REPEAT_OPTION_WEEKLY) {
                if (this.value > REPEAT_MAX_OPTIONS.REPEAT_OPTION_WEEKLY) {
                    $(this).hide();
                }
            } else if (selectedValue === REPEAT_OPTIONS.REPEAT_OPTION_MONTHLY) {
                if (this.value > REPEAT_MAX_OPTIONS.REPEAT_OPTION_MONTHLY) {
                    $(this).hide();
                }
            } else {
                $(this).show();
            }
        });
    };

    /**
     * Tabs component.
     * @param {object} tabsColumn
     * @param {object} tabsContentColumn
     * @param {int}    initialTabsCount
     * @param {object} emptyAlert
     */
    var TabsComponent = function(tabsColumn, tabsContentColumn, initialTabsCount, emptyAlert) {
        this.tabsColumn = tabsColumn;
        this.tabsContentColumn = tabsContentColumn;
        this.emptyAlert = emptyAlert;
        this.countTabs = initialTabsCount;

        /**
         * Build tab
         * @param {object} item
         * @returns {object} tab element
         */
        this.buildTab = function(item) {
            var tab = item.tab.element;
            var tabLink = $(".nav-link", tab);

            // Setting tab id.
            tab.attr('id', 'tab-' + this.countTabs);

            // Setting tab name.
            $(".tab-name", tabLink).text(item.tab.name);

            // Setting tab href.
            tabLink.attr('href', '#link' + this.countTabs);

            // Activating tab
            $("li a", this.tabsColumn).removeClass('active');
            tabLink.addClass('active');

            return tab;
        };

        /**
         * Build tab content.
         * @param {object} item
         * @returns {object} content of tab element
         */
        this.buildTabContent = function(item) {
            var tabContent = item.tabContent.element;

            // Setting tabContent id.
            tabContent.attr('id', 'link' + this.countTabs);

            // Activating tabContent.
            $(".tab-pane", this.tabsContentColumn).removeClass('active');
            tabContent.addClass('active');

            return tabContent;
        };


        /**
         * Add tab
         * @param {object} item
         * @returns {object} tab element
         */
        this.addTab = function(item) {
            var tab = this.buildTab(item);
            var tabContent = this.buildTabContent(item);

            this.emptyAlert.addClass('hidden');
            $("ul", this.tabsColumn).append(tab);
            $(".tab-content", this.tabsContentColumn).append(tabContent);

            return {"element": tab, "content": tabContent};
        };

        /**
         * Delete tab
         * @param {object} item
         */
        this.deleteTab = function(item) {
            var tab = item;
            var tabContent = $($('a', tab).attr('href'));

            tab.remove();
            tabContent.remove();

            var countTabs = $("li", this.tabsColumn).length;
            if (!countTabs) {
                this.emptyAlert.removeClass('hidden');
            } else {
                var countActiveTabs = $("li a.active", this.tabsColumn).length;
                if (!countActiveTabs) {
                    $("li:first-child a", this.tabsColumn).trigger('click');
                }
            }
        };
    };

    /**
     * Breakout rooms editor.
     */
    var BreakoutroomsEditor = function() {
        this.roomsListColumn = $("#mod-zoom-meeting-rooms-list");
        this.roomsList = $("ul", this.roomsListColumn);
        this.addBtn = $("#add-room", this.roomsListColumn);
        this.emptyAlert = $(".empty-alert", this.roomsListColumn);
        this.deleteBtn = $(".delete-room", this.roomsListColumn);
        this.roomsDataColumn = $("#mod-zoom-meeting-rooms-data");
        this.roomItemToClone = $('#rooms-list-item').html();
        this.roomItemDataToClone = $('#rooms-list-item-data').html();
        this.initialRoomsCount = parseInt(this.roomsListColumn.attr('data-initial-rooms-count'));
        this.tabsComponent = new TabsComponent(this.roomsListColumn, this.roomsDataColumn, this.initialRoomsCount, this.emptyAlert);

        // Add room event.
        this.init = function() {
            var stringkeys = [{key: 'room', component: 'zoom'}];
            str.get_strings(stringkeys).then(function() {
                return null;
            }).fail(notification.exception);

            this.addRoomEvent();
            this.deleteRoomEvent();
            var countRooms = $("li", this.roomsListColumn).length;
            if (countRooms) {
                this.changeRoomNameEvent();
                this.buildAutocompleteComponents();
            } else {
                this.emptyAlert.removeClass('hidden');
            }
        };
        // Add room event.
        this.addRoomEvent = function() {
            var thisObject = this;

            // Adding addroom button click event.
            thisObject.addBtn.click(function() {
                thisObject.tabsComponent.countTabs++;

                var newRoomName = M.util.get_string('room', 'zoom') + ' ' + thisObject.tabsComponent.countTabs;
                var newRoomElement = $(thisObject.roomItemToClone);
                var newRoomDataElement = $(thisObject.roomItemDataToClone);
                var newRoomIndex = thisObject.tabsComponent.countTabs;

                // Setting new room name.
                var roomNameInputId = 'room-name-' + newRoomIndex;
                $("input[type=text]", newRoomDataElement).prev().attr('for', roomNameInputId);
                $("input[type=text]", newRoomDataElement).attr('id', roomNameInputId);
                $("input[type=text]", newRoomDataElement).attr('name', roomNameInputId);
                $("input[type=text]", newRoomDataElement).val(newRoomName);
                $("input[type=text]", newRoomDataElement).next().attr('name', 'rooms[' + newRoomIndex + ']');
                $("input[type=text]", newRoomDataElement).next().val(newRoomName);

                // Setting new room participants select id/name.
                var roomParticipantsSelectId = 'participants-' + newRoomIndex;
                $(".room-participants", newRoomDataElement).attr('id', roomParticipantsSelectId);
                $(".room-participants", newRoomDataElement).attr('name', 'roomsparticipants[' + newRoomIndex + '][]');

                // Setting new room participant groups select id/name.
                var roomGroupsSelectId = 'groups-' + newRoomIndex;
                $(".room-groups", newRoomDataElement).attr('id', roomGroupsSelectId);
                $(".room-groups", newRoomDataElement).attr('name', 'roomsgroups[' + newRoomIndex + '][]');

                // Add new room tab
                var newRoom = {"tab": {"name": newRoomName, "element": newRoomElement},
                    "tabContent": {"element": newRoomDataElement}};

                var addedTab = thisObject.tabsComponent.addTab(newRoom);

                // Adding new room tab delete button click event.
                $("li:last .delete-room", thisObject.roomsList).click(function() {
                    var thisItem = $(this).closest('li');
                    thisObject.tabsComponent.deleteTab(thisItem);
                });

                // Adding new room change name event.
                $("input[type=text]", addedTab.content).on("change keyup paste", function() {
                    var newHiddenValue = this.value;
                    $(this).next().val(newHiddenValue);

                    $(".tab-name", addedTab.element).text(this.value);
                });

                // Convert select dropdowns to autocomplete component.
                thisObject.buildAutocompleteComponent(roomParticipantsSelectId, 'addparticipant');
                thisObject.buildAutocompleteComponent(roomGroupsSelectId, 'addparticipantgroup');
            });
        };

        // Delete room event.
        this.deleteRoomEvent = function() {
            var thisObject = this;

            // Adding deleteroom button click event.
            thisObject.deleteBtn.click(function() {
                var thisItem = $(this).closest('li');
                thisObject.tabsComponent.deleteTab(thisItem);
            });
        };

        // Change room name event.
        this.changeRoomNameEvent = function() {
            var thisObject = this;

            $("li", this.roomsListColumn).each(function() {
                var tabIdArr = $(this).attr('id').split('-');
                var tabIndex = tabIdArr[1];
                $('input[name="room-name-' + tabIndex + '"]', thisObject.roomsDataColumn).on("change keyup paste", function() {
                    var newHiddenValue = this.value;
                    $(this).next().val(newHiddenValue);

                    $("#tab-" + tabIndex + " .tab-name").text(this.value);
                });
            });
        };

        /**
         * Build autocomplete components.
         */
        this.buildAutocompleteComponents = function() {
            var thisObject = this;
            $(".room-participants", thisObject.roomsDataColumn).each(function() {
                var thisItemId = $(this).attr('id');
                thisObject.buildAutocompleteComponent(thisItemId, 'addparticipant');
            });

            $(".room-groups", thisObject.roomsDataColumn).each(function() {
                var thisItemId = $(this).attr('id');
                thisObject.buildAutocompleteComponent(thisItemId, 'addparticipantgroup');
            });
        };

        /**
         * Build autocomplete component.
         * @param {string} id
         * @param {string} placeholder
         */
        this.buildAutocompleteComponent = function(id, placeholder) {
            var stringkeys = [{key: placeholder, component: 'zoom'}, {key: 'selectionarea', component: 'zoom'}];
            str.get_strings(stringkeys).then(function(langstrings) {
                var placeholderString = langstrings[0];
                var noSelectionString = langstrings[1];

                autocomplete.enhance('#' + id, false, '', placeholderString, false, true, noSelectionString, true);
                return null;
            }).fail(notification.exception);
        };
    };

    return {
        init: init
    };
});