lib/amd/src/modal_factory.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  * Create a modal.
  18  *
  19  * @module     core/modal_factory
  20  * @class      modal_factory
  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/modal_events', 'core/modal_registry', 'core/modal',
  26         'core/modal_save_cancel', 'core/modal_confirm', 'core/modal_cancel',
  27         'core/templates', 'core/notification', 'core/custom_interaction_events'],
  28     function($, ModalEvents, ModalRegistry, Modal, ModalSaveCancel, ModalConfirm,
  29         ModalCancel, Templates, Notification, CustomEvents) {
  30
  31     // The templates for each type of modal.
  32     var TEMPLATES = {
  33         DEFAULT: 'core/modal',
  34         SAVE_CANCEL: 'core/modal_save_cancel',
  35         CONFIRM: 'core/modal_confirm',
  36         CANCEL: 'core/modal_cancel',
  37     };
  38
  39     // The available types of modals.
  40     var TYPES = {
  41         DEFAULT: 'DEFAULT',
  42         SAVE_CANCEL: 'SAVE_CANCEL',
  43         CONFIRM: 'CONFIRM',
  44         CANCEL: 'CANCEL',
  45     };
  46
  47     // Register the common set of modals.
  48     ModalRegistry.register(TYPES.DEFAULT, Modal, TEMPLATES.DEFAULT);
  49     ModalRegistry.register(TYPES.SAVE_CANCEL, ModalSaveCancel, TEMPLATES.SAVE_CANCEL);
  50     ModalRegistry.register(TYPES.CONFIRM, ModalConfirm, TEMPLATES.CONFIRM);
  51     ModalRegistry.register(TYPES.CANCEL, ModalCancel, TEMPLATES.CANCEL);
  52
  53     /**
  54      * Set up the events required to show the modal and return focus when the modal
  55      * is closed.
  56      *
  57      * @method setUpTrigger
  58      * @param {object} modal The modal instance
  59      * @param {object} triggerElement The jQuery element to open the modal
  60      */
  61     var setUpTrigger = function(modal, triggerElement) {
  62         if (typeof triggerElement != 'undefined') {
  63             if (Array.isArray(triggerElement)) {
  64                 var selector = triggerElement[1];
  65                 triggerElement = triggerElement[0];
  66
  67                 CustomEvents.define(triggerElement, [CustomEvents.events.activate]);
  68                 triggerElement.on(CustomEvents.events.activate, selector, function(e, data) {
  69                     modal.show();
  70                     data.originalEvent.preventDefault();
  71                 });
  72             } else {
  73                 CustomEvents.define(triggerElement, [CustomEvents.events.activate]);
  74                 triggerElement.on(CustomEvents.events.activate, function(e, data) {
  75                     modal.show();
  76                     data.originalEvent.preventDefault();
  77                 });
  78             }
  79
  80             modal.getRoot().on(ModalEvents.hidden, function() {
  81                 triggerElement.focus();
  82             });
  83         }
  84     };
  85
  86     /**
  87      * Create the correct instance of a modal based on the givem type. Sets up
  88      * the trigger between the modal and the trigger element.
  89      *
  90      * @method createFromElement
  91      * @param {object} registryConf A config from the ModalRegistry
  92      * @param {object} modalElement The modal HTML jQuery object
  93      * @param {object} triggerElement The trigger HTML jQuery object
  94      * @return {object} Modal instance
  95      */
  96     var createFromElement = function(registryConf, modalElement, triggerElement) {
  97         modalElement = $(modalElement);
  98         var module = registryConf.module;
  99         var modal = new module(modalElement);
 100         setUpTrigger(modal, triggerElement);
 101
 102         return modal;
 103     };
 104
 105     /**
 106      * Create the correct modal instance for the given type, including loading
 107      * the correct template and setting up the trigger relationship with the
 108      * trigger element.
 109      *
 110      * @method createFromType
 111      * @param {object} registryConf A config from the ModalRegistry
 112      * @param {object} triggerElement The trigger HTML jQuery object
 113      * @return {promise} Resolved with a Modal instance
 114      */
 115     var createFromType = function(registryConf, templateContext, triggerElement) {
 116         var templateName = registryConf.template;
 117
 118         return Templates.render(templateName, templateContext)
 119             .then(function(html) {
 120                 var modalElement = $(html);
 121                 return createFromElement(registryConf, modalElement, triggerElement);
 122             })
 123             .fail(Notification.exception);
 124     };
 125
 126     /**
 127      * Create a Modal instance.
 128      *
 129      * @method create
 130      * @param {object} modalConfig The configuration to create the modal instance
 131      * @param {object} triggerElement The trigger HTML jQuery object
 132      * @return {promise} Resolved with a Modal instance
 133      */
 134     var create = function(modalConfig, triggerElement) {
 135         var type = modalConfig.type || TYPES.DEFAULT;
 136         var isLarge = modalConfig.large ? true : false;
 137         var registryConf = null;
 138         var templateContext = {};
 139
 140         registryConf = ModalRegistry.get(type);
 141
 142         if (!registryConf) {
 143             Notification.exception({message: 'Unable to find modal of type: ' + type});
 144         }
 145
 146         if (typeof modalConfig.templateContext != 'undefined') {
 147             templateContext = modalConfig.templateContext;
 148         }
 149
 150         return createFromType(registryConf, templateContext, triggerElement)
 151             .then(function(modal) {
 152                 if (typeof modalConfig.title != 'undefined') {
 153                     modal.setTitle(modalConfig.title);
 154                 }
 155
 156                 if (typeof modalConfig.body != 'undefined') {
 157                     modal.setBody(modalConfig.body);
 158                 }
 159
 160                 if (typeof modalConfig.footer != 'undefined') {
 161                     modal.setFooter(modalConfig.footer);
 162                 }
 163
 164                 if (isLarge) {
 165                     modal.setLarge();
 166                 }
 167
 168                 return modal;
 169             });
 170     };
 171
 172     return {
 173         create: create,
 174         types: TYPES,
 175     };
 176 });