Proyectos de Subversion Moodle

Rev

Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1
// This file is part of Moodle - http://moodle.org/
2
//
3
// Moodle is free software: you can redistribute it and/or modify
4
// it under the terms of the GNU General Public License as published by
5
// the Free Software Foundation, either version 3 of the License, or
6
// (at your option) any later version.
7
//
8
// Moodle is distributed in the hope that it will be useful,
9
// but WITHOUT ANY WARRANTY; without even the implied warranty of
10
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
11
// GNU General Public License for more details.
12
//
13
// You should have received a copy of the GNU General Public License
14
// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
15
 
16
/**
17
 * Javascript popover for the `core_calendar` subsystem.
18
 *
19
 * @module core_calendar/popover
20
 * @copyright 2021 Huong Nguyen <huongnv13@gmail.com>
21
 * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
22
 * @since 4.0
23
 */
24
 
25
import 'theme_boost/popover';
26
import jQuery from 'jquery';
27
import * as CalendarSelectors from 'core_calendar/selectors';
28
 
29
/**
30
 * Check if we are allowing to enable the popover or not.
31
 * @param {Element} dateContainer
32
 * @returns {boolean}
33
 */
34
const isPopoverAvailable = (dateContainer) => {
35
    return window.getComputedStyle(dateContainer.querySelector(CalendarSelectors.elements.dateContent)).display === 'none';
36
};
37
 
38
const isPopoverConfigured = new Map();
39
 
40
const showPopover = target => {
41
    const dateContainer = target.closest(CalendarSelectors.elements.dateContainer);
42
    if (!isPopoverConfigured.has(dateContainer)) {
43
        const dateEle = jQuery(target);
44
        dateEle.popover({
45
            trigger: 'manual',
46
            placement: 'top',
47
            html: true,
48
            title: dateContainer.dataset.title,
49
            content: () => {
50
                const source = jQuery(dateContainer).find(CalendarSelectors.elements.dateContent);
51
                const content = jQuery('<div>');
52
                if (source.length) {
53
                    const temptContent = source.find('.hidden').clone(false);
54
                    content.html(temptContent.html());
55
                }
56
                return content.html();
57
            }
58
        });
59
 
60
        isPopoverConfigured.set(dateContainer, true);
61
    }
62
 
63
    if (isPopoverAvailable(dateContainer)) {
64
        jQuery(target).popover('show');
65
        target.addEventListener('mouseleave', hidePopover);
66
        target.addEventListener('focusout', hidePopover);
67
    }
68
};
69
 
70
const hidePopover = e => {
71
    const target = e.target;
72
    const dateContainer = e.target.closest(CalendarSelectors.elements.dateContainer);
73
    if (!dateContainer) {
74
        return;
75
    }
76
    if (isPopoverConfigured.has(dateContainer)) {
77
        const isTargetActive = target.contains(document.activeElement);
78
        const isTargetHover = target.matches(':hover');
79
        if (!isTargetActive && !isTargetHover) {
80
            jQuery(target).popover('hide');
81
            target.removeEventListener('mouseleave', hidePopover);
82
            target.removeEventListener('focusout', hidePopover);
83
        }
84
    }
85
};
86
 
87
/**
88
 * Register events for date container.
89
 */
90
const registerEventListeners = () => {
91
    const showPopoverHandler = (e) => {
92
        const dayLink = e.target.closest(CalendarSelectors.links.dayLink);
93
        if (!dayLink) {
94
            return;
95
        }
96
 
97
        e.preventDefault();
98
        showPopover(dayLink);
99
    };
100
 
101
    document.addEventListener('mouseover', showPopoverHandler);
102
    document.addEventListener('focusin', showPopoverHandler);
103
};
104
 
105
let listenersRegistered = false;
106
if (!listenersRegistered) {
107
    registerEventListeners();
108
    listenersRegistered = true;
109
}