Proyectos de Subversion Moodle

Rev

Rev 1 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1 Rev 1441
Línea 19... Línea 19...
19 
 * @module     theme_boost/footer-popover
 19 
 * @module     theme_boost/footer-popover
20 
 * @copyright  2021 Bas Brands
 20 
 * @copyright  2021 Bas Brands
21 
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 21 
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
22 
 */
 22 
 */
Línea 23... Línea -...
23 
 
 - 
 
24 
import $ from 'jquery';
 23 
 
Línea 25... Línea 24...
25 
import Popover from './popover';
 24 
import Popover from './bootstrap/popover';
26 
 
 25 
 
27 
const SELECTORS = {
 26 
const SELECTORS = {
28 
    FOOTERCONTAINER: '[data-region="footer-container-popover"]',
 27 
    FOOTERCONTAINER: '[data-region="footer-container-popover"]',
- 
 
 28 
    FOOTERCONTENT: '[data-region="footer-content-popover"]',
29 
    FOOTERCONTENT: '[data-region="footer-content-popover"]',
 29 
    FOOTERBUTTON: '[data-action="footer-popover"]',
Línea 30... Línea 30...
30 
    FOOTERBUTTON: '[data-action="footer-popover"]'
 30 
    FOOTERARROW: '[data-region="footer-container-popover"] .popover-arrow',
Línea 31... Línea 31...
31 
};
 31 
};
32 
 
 32 
 
33 
let footerIsShown = false;
 33 
let footerIsShown = false;
- 
 
 34 
 
Línea 34... Línea -...
34 
 
 - 
 
35 
export const init = () => {
 35 
export const init = () => {
36 
    const container = document.querySelector(SELECTORS.FOOTERCONTAINER);
 36 
    const container = document.querySelector(SELECTORS.FOOTERCONTAINER);
37 
    const footerButton = document.querySelector(SELECTORS.FOOTERBUTTON);
 37 
    const footerButton = document.querySelector(SELECTORS.FOOTERBUTTON);
38 
 
 38 
    const footerArrow = document.querySelector(SELECTORS.FOOTERARROW);
39 
    // All jQuery in this code can be replaced when MDL-71979 is integrated.
 39 
 
40 
    $(footerButton).popover({
 40 
    new Popover(footerButton, {
41 
        content: getFooterContent,
 41 
        content: getFooterContent,
42 
        container: container,
 42 
        container: container,
43 
        html: true,
 43 
        html: true,
44 
        placement: 'top',
 44 
        placement: 'top',
45 
        customClass: 'footer',
 45 
        customClass: 'footer',
- 
 
 46 
        trigger: 'click',
46 
        trigger: 'click',
 47 
        boundary: 'viewport',
47 
        boundary: 'viewport',
 48 
        modifiers: [
48 
        popperConfig: {
 49 
            {
- 
 
 50 
                name: 'preventOverflow',
- 
 
 51 
                options: {
49 
            modifiers: {
 52 
                    boundariesElement: 'viewport',
50 
                preventOverflow: {
 53 
                    padding: 48,
51 
                    boundariesElement: 'viewport',
 54 
                },
52 
                    padding: 48
 55 
            },
53 
                },
 - 
 
54 
                offset: {},
 - 
 
55 
                flip: {
 - 
 
56 
                    behavior: 'flip'
 56 
            {
57 
                },
 57 
                name: 'arrow',
58 
                arrow: {
 58 
                options: {
Línea 59... Línea 59...
59 
                    element: '.arrow'
 59 
                    element: footerArrow,
60 
                },
 60 
                },
61 
            }
 61 
            },
62 
        }
 62 
        ]
63 
    });
 63 
    });
64 
 
 64 
 
Línea 65... Línea 65...
65 
    document.addEventListener('click', e => {
 65 
    document.addEventListener('click', e => {
66 
        if (footerIsShown && !e.target.closest(SELECTORS.FOOTERCONTAINER)) {
 66 
        if (footerIsShown && !e.target.closest(SELECTORS.FOOTERCONTAINER)) {
67 
            $(footerButton).popover('hide');
 67 
            Popover.getInstance(footerButton).hide();
68 
        }
 68 
        }
69 
    },
 69 
    },
70 
    true);
 70 
    true);
Línea 71... Línea 71...
71 
 
 71 
 
72 
    document.addEventListener('keydown', e => {
 72 
    document.addEventListener('keydown', e => {
73 
        if (footerIsShown && e.key === 'Escape') {
 73 
        if (footerIsShown && e.key === 'Escape') {
74 
            $(footerButton).popover('hide');
 74 
            Popover.getInstance(footerButton).hide();
75 
            footerButton.focus();
 75 
            footerButton.focus();
76 
        }
 76 
        }
Línea 77... Línea 77...
77 
    });
 77 
    });
78 
 
 78 
 
79 
    document.addEventListener('focus', e => {
 79 
    document.addEventListener('focus', e => {
Línea 80... Línea 80...
80 
        if (footerIsShown && !e.target.closest(SELECTORS.FOOTERCONTAINER)) {
 80 
        if (footerIsShown && !e.target.closest(SELECTORS.FOOTERCONTAINER)) {
81 
            $(footerButton).popover('hide');
 81 
            Popover.getInstance(footerButton).hide();
82 
        }
 82 
        }
83 
    },
 83 
    },
Línea 84... Línea 84...
84 
    true);
 84 
    true);