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 is the highest level module for the calendar. It is

 * responsible for initialising all of the components required for

 * the calendar to run. It also coordinates the interaction between

 * components by listening for and responding to different events

 * triggered within the calendar UI.

 *

 * @module     core_calendar/calendar

 * @copyright  2017 Simey Lameze <simey@moodle.com>

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

 */

define([

    'jquery',

    'core/templates',

    'core/notification',

    'core_calendar/repository',

    'core_calendar/events',

    'core_calendar/view_manager',

    'core_calendar/crud',

    'core_calendar/selectors',

    'core/url',

    'core/str',

],

function(

    $,

    Templates,

    Notification,

    CalendarRepository,

    CalendarEvents,

    CalendarViewManager,

    CalendarCrud,

    CalendarSelectors,

    Url,

    Str,

) {

    var SELECTORS = {

        ROOT: "[data-region='calendar']",

        DAY: "[data-region='day']",

        NEW_EVENT_BUTTON: "[data-action='new-event-button']",

        DAY_CONTENT: "[data-region='day-content']",

        LOADING_ICON: '.loading-icon',

        VIEW_DAY_LINK: "[data-action='view-day-link']",

        CALENDAR_MONTH_WRAPPER: ".calendarwrapper",

        TODAY: '.today',

        DAY_NUMBER_CIRCLE: '.day-number-circle',

        DAY_NUMBER: '.day-number',

        SCREEN_READER_ANNOUNCEMENTS: '.calendar-announcements',

        CURRENT_MONTH: '.calendar-controls .current'

    };

    /**

     * Handler for the drag and drop move event. Provides a loading indicator

     * while the request is sent to the server to update the event start date.

     *

     * Triggers a eventMoved calendar javascript event if the event was successfully

     * updated.

     *

     * @param {event} e The calendar move event

     * @param {int} eventId The event id being moved

     * @param {object|null} originElement The jQuery element for where the event is moving from

     * @param {object} destinationElement The jQuery element for where the event is moving to

     */

    var handleMoveEvent = function(e, eventId, originElement, destinationElement) {

        var originTimestamp = null;

        var destinationTimestamp = destinationElement.attr('data-day-timestamp');

        if (originElement) {

            originTimestamp = originElement.attr('data-day-timestamp');

        }

        // If the event has actually changed day.

        if (!originElement || originTimestamp != destinationTimestamp) {

            Templates.render('core/loading', {})

                .then(function(html, js) {

                    // First we show some loading icons in each of the days being affected.

                    destinationElement.find(SELECTORS.DAY_CONTENT).addClass('hidden');

                    Templates.appendNodeContents(destinationElement, html, js);

                    if (originElement) {

                        originElement.find(SELECTORS.DAY_CONTENT).addClass('hidden');

                        Templates.appendNodeContents(originElement, html, js);

                    }

                    return;

                })

                .then(function() {

                    // Send a request to the server to make the change.

                    return CalendarRepository.updateEventStartDay(eventId, destinationTimestamp);

                })

                .then(function() {

                    // If the update was successful then broadcast an event letting the calendar

                    // know that an event has been moved.

                    $('body').trigger(CalendarEvents.eventMoved, [eventId, originElement, destinationElement]);

                    return;

                })

                .always(function() {

                    // Always remove the loading icons regardless of whether the update

                    // request was successful or not.

                    var destinationLoadingElement = destinationElement.find(SELECTORS.LOADING_ICON);

                    destinationElement.find(SELECTORS.DAY_CONTENT).removeClass('hidden');

                    Templates.replaceNode(destinationLoadingElement, '', '');

                    if (originElement) {

                        var originLoadingElement = originElement.find(SELECTORS.LOADING_ICON);

                        originElement.find(SELECTORS.DAY_CONTENT).removeClass('hidden');

                        Templates.replaceNode(originLoadingElement, '', '');

                    }

                    return;

                })

                .catch(Notification.exception);

        }

    };

    /**

     * Listen to and handle any calendar events fired by the calendar UI.

     *

     * @method registerCalendarEventListeners

     * @param {object} root The calendar root element

     * @param {object} eventFormModalPromise A promise reolved with the event form modal

     */

    var registerCalendarEventListeners = function(root, eventFormModalPromise) {

        var body = $('body');

        body.on(CalendarEvents.created, function() {

            CalendarViewManager.reloadCurrentMonth(root);

        });

        body.on(CalendarEvents.deleted, function() {

            CalendarViewManager.reloadCurrentMonth(root);

        });

        body.on(CalendarEvents.updated, function() {

            CalendarViewManager.reloadCurrentMonth(root);

        });

        body.on(CalendarEvents.editActionEvent, function(e, url) {

            // Action events needs to be edit directly on the course module.

            window.location.assign(url);

        });

        // Handle the event fired by the drag and drop code.

        body.on(CalendarEvents.moveEvent, handleMoveEvent);

        // When an event is successfully moved we should updated the UI.

        body.on(CalendarEvents.eventMoved, function() {

            CalendarViewManager.reloadCurrentMonth(root);

        });

        // Announce the newly loaded month to screen readers.

        body.on(CalendarEvents.monthChanged, root, async function() {

            const monthName = body.find(SELECTORS.CURRENT_MONTH).text();

            const monthAnnoucement = await Str.get_string('newmonthannouncement', 'calendar', monthName);

            body.find(SELECTORS.SCREEN_READER_ANNOUNCEMENTS).html(monthAnnoucement);

        });

        CalendarCrud.registerEditListeners(root, eventFormModalPromise);

    };

    /**

     * Register event listeners for the module.

     *

     * @param {object} root The calendar root element

     * @param {boolean} isCalendarBlock - A flag indicating whether this is a calendar block.

     */

    var registerEventListeners = function(root, isCalendarBlock) {

        const viewingFullCalendar = document.getElementById(CalendarSelectors.fullCalendarView);

        // Listen the click on the day link to render the day view.

        root.on('click', SELECTORS.VIEW_DAY_LINK, function(e) {

            var dayLink = $(e.target).closest(SELECTORS.VIEW_DAY_LINK);

            var year = dayLink.data('year'),

                month = dayLink.data('month'),

                day = dayLink.data('day'),

                courseId = dayLink.data('courseid'),

                categoryId = dayLink.data('categoryid');

            const urlParams = {

                view: 'day',

                time: dayLink.data('timestamp'),

                course: courseId,

            };

            if (viewingFullCalendar) {

                // Construct the URL parameter string from the urlParams object.

                const urlParamString = Object.entries(urlParams)

                    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)

                    .join('&');

                CalendarViewManager.refreshDayContent(root, year, month, day, courseId, categoryId, root,

                    'core_calendar/calendar_day', isCalendarBlock).then(function() {

                    e.preventDefault();

                    // Update the URL if it's not calendar block.

                    if (!isCalendarBlock) {

                        CalendarViewManager.updateUrl('?' + urlParamString);

                    }

                    return;

                }).catch(Notification.exception);

            } else {

                window.location.assign(Url.relativeUrl('calendar/view.php', urlParams));

            }

        });

        root.on('change', CalendarSelectors.elements.courseSelector, function() {

            var selectElement = $(this);

            var courseId = selectElement.val();

            const courseName = $("option:selected", selectElement).text();

            CalendarViewManager.reloadCurrentMonth(root, courseId, null)

                .then(function() {

                    // We need to get the selector again because the content has changed.

                    return root.find(CalendarSelectors.elements.courseSelector).val(courseId);

                })

                .then(function() {

                    CalendarViewManager.updateUrl('?view=month&course=' + courseId);

                    CalendarViewManager.handleCourseChange(Number(courseId), courseName);

                    return;

                })

                .catch(Notification.exception);

        });

        var eventFormPromise = CalendarCrud.registerEventFormModal(root),

            contextId = $(SELECTORS.CALENDAR_MONTH_WRAPPER).data('context-id');

        registerCalendarEventListeners(root, eventFormPromise);

        if (contextId) {

            // Bind click events to calendar days.

            root.on('click', SELECTORS.DAY, function(e) {

                var target = $(e.target);

                const displayingSmallBlockCalendar = root.parents('aside').data('blockregion') === 'side-pre';

                if (!viewingFullCalendar && displayingSmallBlockCalendar) {

                    const dateContainer = target.closest(SELECTORS.DAY);

                    const wrapper = target.closest(CalendarSelectors.wrapper);

                    const courseId = wrapper.data('courseid');

                    const params = {

                        view: 'day',

                        time: dateContainer.data('day-timestamp'),

                        course: courseId,

                    };

                    window.location.assign(Url.relativeUrl('calendar/view.php', params));

                } else {

                    const hasViewDayLink = target.closest(SELECTORS.VIEW_DAY_LINK).length;

                    const shouldShowNewEventModal = !hasViewDayLink;

                    if (shouldShowNewEventModal) {

                        var startTime = $(this).attr('data-new-event-timestamp');

                        eventFormPromise.then(function(modal) {

                            var wrapper = target.closest(CalendarSelectors.wrapper);

                            modal.setCourseId(wrapper.data('courseid'));

                            var categoryId = wrapper.data('categoryid');

                            if (typeof categoryId !== 'undefined') {

                                modal.setCategoryId(categoryId);

                            }

                            modal.setContextId(wrapper.data('contextId'));

                            modal.setStartTime(startTime);

                            modal.show();

                            return;

                        }).catch(Notification.exception);

                    }

                }

                e.preventDefault();

            });

        }

    };

    return {

        /**

         * Initializes the calendar view manager and registers event listeners.

         *

         * @param {HTMLElement} root - The root element where the calendar view manager and event listeners will be attached.

         * @param {boolean} [isCalendarBlock=false] - A flag indicating whether this is a calendar block.

         */

        init: function(root, isCalendarBlock = false) {

            root = $(root);

            CalendarViewManager.init(root, 'month', isCalendarBlock);

            registerEventListeners(root, isCalendarBlock);

        }

    };

});