Proyectos de Subversion Moodle

Rev

| 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() {
69
        return $(Fullscreen.getElement() || this.attachmentPoint);
70
    }
71
 
72
    /**
73
     * Add the modal backdrop to the page, if it hasn't already been added.
74
     *
75
     * @method attachToDOM
76
     */
77
    attachToDOM() {
78
        this.getAttachmentPoint().append(this.root);
79
 
80
        if (this.isAttached) {
81
            return;
82
        }
83
 
84
        this.isAttached = true;
85
    }
86
 
87
    /**
88
     * Set the z-index value for this backdrop.
89
     *
90
     * @method setZIndex
91
     * @param {int} value The z-index value
92
     */
93
    setZIndex(value) {
94
        this.root.css('z-index', value);
95
    }
96
 
97
    /**
98
     * Check if this backdrop is visible.
99
     *
100
     * @method isVisible
101
     * @return {bool}
102
     */
103
    isVisible() {
104
        return this.root.hasClass('show');
105
    }
106
 
107
    /**
108
     * Check if this backdrop has CSS transitions applied.
109
     *
110
     * @method hasTransitions
111
     * @return {bool}
112
     */
113
    hasTransitions() {
114
        return this.getRoot().hasClass('fade');
115
    }
116
 
117
    /**
118
     * Display this backdrop. The backdrop will be attached to the DOM if it hasn't
119
     * already been.
120
     *
121
     * @method show
122
     */
123
    show() {
124
        if (this.isVisible()) {
125
            return;
126
        }
127
 
128
        this.attachToDOM();
129
        this.root.removeClass('hide').addClass('show');
130
    }
131
 
132
    /**
133
     * Hide this backdrop.
134
     *
135
     * @method hide
136
     */
137
    hide() {
138
        if (!this.isVisible()) {
139
            return;
140
        }
141
 
142
        if (this.hasTransitions()) {
143
            // Wait for CSS transitions to complete before hiding the element.
144
            this.getRoot().one('transitionend webkitTransitionEnd oTransitionEnd', () => {
145
                this.getRoot().removeClass('show').addClass('hide');
146
            });
147
        } else {
148
            this.getRoot().removeClass('show').addClass('hide');
149
        }
150
 
151
        // Ensure the modal is moved onto the body node if it is still attached to the DOM.
152
        if ($(document.body).find(this.getRoot()).length) {
153
            $(document.body).append(this.getRoot());
154
        }
155
    }
156
 
157
    /**
158
     * Remove this backdrop from the DOM.
159
     *
160
     * @method destroy
161
     */
162
    destroy() {
163
        this.root.remove();
164
        this.attachmentPoint.remove();
165
    }
166
}