Proyectos de Subversion Moodle

Rev

Rev 1 | | Comparar con el anterior | 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 
 * Shows the footer content in a popover.
18 
 *
19 
 * @module     theme_boost/footer-popover
20 
 * @copyright  2021 Bas Brands
21 
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
22 
 */
23 
 
1441 ariadna 24 
import Popover from './bootstrap/popover';
1 efrain 25 
 
26 
const SELECTORS = {
27 
    FOOTERCONTAINER: '[data-region="footer-container-popover"]',
28 
    FOOTERCONTENT: '[data-region="footer-content-popover"]',
1441 ariadna 29 
    FOOTERBUTTON: '[data-action="footer-popover"]',
30 
    FOOTERARROW: '[data-region="footer-container-popover"] .popover-arrow',
1 efrain 31 
};
32 
 
33 
let footerIsShown = false;
34 
 
35 
export const init = () => {
36 
    const container = document.querySelector(SELECTORS.FOOTERCONTAINER);
37 
    const footerButton = document.querySelector(SELECTORS.FOOTERBUTTON);
1441 ariadna 38 
    const footerArrow = document.querySelector(SELECTORS.FOOTERARROW);
1 efrain 39 
 
1441 ariadna 40 
    new Popover(footerButton, {
1 efrain 41 
        content: getFooterContent,
42 
        container: container,
43 
        html: true,
44 
        placement: 'top',
45 
        customClass: 'footer',
46 
        trigger: 'click',
47 
        boundary: 'viewport',
1441 ariadna 48 
        modifiers: [
49 
            {
50 
                name: 'preventOverflow',
51 
                options: {
1 efrain 52 
                    boundariesElement: 'viewport',
1441 ariadna 53 
                    padding: 48,
1 efrain 54 
                },
1441 ariadna 55 
            },
56 
            {
57 
                name: 'arrow',
58 
                options: {
59 
                    element: footerArrow,
1 efrain 60 
                },
1441 ariadna 61 
            },
62 
        ]
1 efrain 63 
    });
64 
 
65 
    document.addEventListener('click', e => {
66 
        if (footerIsShown && !e.target.closest(SELECTORS.FOOTERCONTAINER)) {
1441 ariadna 67 
            Popover.getInstance(footerButton).hide();
1 efrain 68 
        }
69 
    },
70 
    true);
71 
 
72 
    document.addEventListener('keydown', e => {
73 
        if (footerIsShown && e.key === 'Escape') {
1441 ariadna 74 
            Popover.getInstance(footerButton).hide();
1 efrain 75 
            footerButton.focus();
76 
        }
77 
    });
78 
 
79 
    document.addEventListener('focus', e => {
80 
        if (footerIsShown && !e.target.closest(SELECTORS.FOOTERCONTAINER)) {
1441 ariadna 81 
            Popover.getInstance(footerButton).hide();
1 efrain 82 
        }
83 
    },
84 
    true);
85 
 
1441 ariadna 86 
    footerButton.addEventListener('show.bs.popover', () => {
1 efrain 87 
        footerIsShown = true;
88 
    });
89 
 
1441 ariadna 90 
    footerButton.addEventListener('hide.bs.popover', () => {
1 efrain 91 
        footerIsShown = false;
92 
    });
93 
};
94 
 
95 
/**
96 
 * Get the footer content for popover.
97 
 *
98 
 * @returns {String} HTML string
99 
 * @private
100 
 */
101 
const getFooterContent = () => {
102 
    return document.querySelector(SELECTORS.FOOTERCONTENT).innerHTML;
103 
};
104 
 
105 
export {
106 
    Popover
107 
};