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 
 * Contain the logic for modal backdrops.
18 
 *
19 
 * @module     core/modal_backdrop
20 
 * @copyright  2016 Ryan Wyllie <ryan@moodle.com>
21 
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
22 
 */
23 
import $ from 'jquery';
24 
import * as Notification from './notification';
25 
import * as Fullscreen from './fullscreen';
26 
 
27 
const SELECTORS = {
28 
    ROOT: '[data-region="modal-backdrop"]',
29 
};
30 
 
31 
export default class ModalBackdrop {
32 
    root = null;
33 
    isAttached = false;
34 
    attachmentPoint = null;
35 
 
36 
    /**
37 
     * Constructor for ModalBackdrop.
38 
     *
39 
     * @class core/modal_backdrop
40 
     * @param {HTMLElement|jQuery} root The root element for the modal backdrop
41 
     */
42 
    constructor(root) {
43 
        this.root = $(root);
44 
        this.isAttached = false;
45 
        this.attachmentPoint = document.createElement('div');
46 
        document.body.append(this.attachmentPoint);
47 
 
48 
        if (!this.root.is(SELECTORS.ROOT)) {
49 
            Notification.exception({message: 'Element is not a modal backdrop'});
50 
        }
51 
    }
52 
 
53 
    /**
54 
     * Get the root element of this modal backdrop.
55 
     *
56 
     * @method getRoot
57 
     * @return {object} jQuery object
58 
     */
59 
    getRoot() {
60 
        return this.root;
61 
    }
62 
 
63 
    /**
64 
     * Gets the jQuery wrapped node that the Modal should be attached to.
65 
     *
66 
     * @returns {jQuery}
67 
     */
68 
    getAttachmentPoint() {
1441 ariadna 69 
        const fullscreenElement = Fullscreen.getElement();
70 
 
71 
        if (fullscreenElement && fullscreenElement.tagName.toLowerCase() === 'html') {
72 
            return $(this.attachmentPoint);
73 
        }
74 
 
75 
        return $(fullscreenElement || this.attachmentPoint);
1 efrain 76 
    }
77 
 
78 
    /**
79 
     * Add the modal backdrop to the page, if it hasn't already been added.
80 
     *
81 
     * @method attachToDOM
82 
     */
83 
    attachToDOM() {
84 
        this.getAttachmentPoint().append(this.root);
85 
 
86 
        if (this.isAttached) {
87 
            return;
88 
        }
89 
 
90 
        this.isAttached = true;
91 
    }
92 
 
93 
    /**
94 
     * Set the z-index value for this backdrop.
95 
     *
96 
     * @method setZIndex
97 
     * @param {int} value The z-index value
98 
     */
99 
    setZIndex(value) {
100 
        this.root.css('z-index', value);
101 
    }
102 
 
103 
    /**
104 
     * Check if this backdrop is visible.
105 
     *
106 
     * @method isVisible
107 
     * @return {bool}
108 
     */
109 
    isVisible() {
110 
        return this.root.hasClass('show');
111 
    }
112 
 
113 
    /**
114 
     * Check if this backdrop has CSS transitions applied.
115 
     *
116 
     * @method hasTransitions
117 
     * @return {bool}
118 
     */
119 
    hasTransitions() {
120 
        return this.getRoot().hasClass('fade');
121 
    }
122 
 
123 
    /**
124 
     * Display this backdrop. The backdrop will be attached to the DOM if it hasn't
125 
     * already been.
126 
     *
127 
     * @method show
128 
     */
129 
    show() {
130 
        if (this.isVisible()) {
131 
            return;
132 
        }
133 
 
134 
        this.attachToDOM();
135 
        this.root.removeClass('hide').addClass('show');
136 
    }
137 
 
138 
    /**
139 
     * Hide this backdrop.
140 
     *
141 
     * @method hide
142 
     */
143 
    hide() {
144 
        if (!this.isVisible()) {
145 
            return;
146 
        }
147 
 
148 
        if (this.hasTransitions()) {
149 
            // Wait for CSS transitions to complete before hiding the element.
150 
            this.getRoot().one('transitionend webkitTransitionEnd oTransitionEnd', () => {
151 
                this.getRoot().removeClass('show').addClass('hide');
152 
            });
153 
        } else {
154 
            this.getRoot().removeClass('show').addClass('hide');
155 
        }
156 
 
157 
        // Ensure the modal is moved onto the body node if it is still attached to the DOM.
158 
        if ($(document.body).find(this.getRoot()).length) {
159 
            $(document.body).append(this.getRoot());
160 
        }
161 
    }
162 
 
163 
    /**
164 
     * Remove this backdrop from the DOM.
165 
     *
166 
     * @method destroy
167 
     */
168 
    destroy() {
169 
        this.root.remove();
170 
        this.attachmentPoint.remove();
171 
    }
172 
}