lib/amd/src/modal_backdrop.js

   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  * @class      modal_backdrop
  21  * @package    core
  22  * @copyright  2016 Ryan Wyllie <ryan@moodle.com>
  23  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  24  */
  25 define(['jquery', 'core/templates', 'core/notification'],
  26      function($, Templates, Notification) {
  27
  28     var SELECTORS = {
  29         ROOT: '[data-region="modal-backdrop"]',
  30     };
  31
  32     /**
  33      * Constructor for ModalBackdrop.
  34      *
  35      * @param {object} root The root element for the modal backdrop
  36      */
  37     var ModalBackdrop = function(root) {
  38         this.root = $(root);
  39         this.isAttached = false;
  40
  41         if (!this.root.is(SELECTORS.ROOT)) {
  42             Notification.exception({message: 'Element is not a modal backdrop'});
  43         }
  44     };
  45
  46     /**
  47      * Get the root element of this modal backdrop.
  48      *
  49      * @method getRoot
  50      * @return {object} jQuery object
  51      */
  52     ModalBackdrop.prototype.getRoot = function() {
  53         return this.root;
  54     };
  55
  56     /**
  57      * Add the modal backdrop to the page, if it hasn't already been added.
  58      *
  59      * @method attachToDOM
  60      */
  61     ModalBackdrop.prototype.attachToDOM = function() {
  62         if (this.isAttached) {
  63             return;
  64         }
  65
  66         $('body').append(this.root);
  67         this.isAttached = true;
  68     };
  69
  70     /**
  71      * Set the z-index value for this backdrop.
  72      *
  73      * @method setZIndex
  74      * @param {int} value The z-index value
  75      */
  76     ModalBackdrop.prototype.setZIndex = function(value) {
  77         this.root.css('z-index', value);
  78     };
  79
  80     /**
  81      * Check if this backdrop is visible.
  82      *
  83      * @method isVisible
  84      * @return {bool}
  85      */
  86     ModalBackdrop.prototype.isVisible = function() {
  87         return this.root.hasClass('show');
  88     };
  89
  90     /**
  91      * Check if this backdrop has CSS transitions applied.
  92      *
  93      * @method hasTransitions
  94      * @return {bool}
  95      */
  96     ModalBackdrop.prototype.hasTransitions = function() {
  97         return this.getRoot().hasClass('fade');
  98     };
  99
 100     /**
 101      * Display this backdrop. The backdrop will be attached to the DOM if it hasn't
 102      * already been.
 103      *
 104      * @method show
 105      */
 106     ModalBackdrop.prototype.show = function() {
 107         if (this.isVisible()) {
 108             return;
 109         }
 110
 111         if (!this.isAttached) {
 112             this.attachToDOM();
 113         }
 114
 115         this.root.removeClass('hide').addClass('show');
 116     };
 117
 118     /**
 119      * Hide this backdrop.
 120      *
 121      * @method hide
 122      */
 123     ModalBackdrop.prototype.hide = function() {
 124         if (!this.isVisible()) {
 125             return;
 126         }
 127
 128         if (this.hasTransitions()) {
 129             // Wait for CSS transitions to complete before hiding the element.
 130             this.getRoot().one('transitionend webkitTransitionEnd oTransitionEnd', function() {
 131                 this.getRoot().removeClass('show').addClass('hide');
 132             }.bind(this));
 133         } else {
 134             this.getRoot().removeClass('show').addClass('hide');
 135         }
 136     };
 137
 138     /**
 139      * Remove this backdrop from the DOM.
 140      *
 141      * @method destroy
 142      */
 143     ModalBackdrop.prototype.destroy = function() {
 144         this.root.remove();
 145     };
 146
 147     return ModalBackdrop;
 148 });