678bad88d338600a5dbc13fadfc3c5b0ccd884fd
[moodle.git] / 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/>.
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) {
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     };
39     // The available types of modals.
40     var TYPES = {
41         DEFAULT: 'DEFAULT',
42         SAVE_CANCEL: 'SAVE_CANCEL',
43         CONFIRM: 'CONFIRM',
44         CANCEL: 'CANCEL',
45     };
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);
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];
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             }
80             modal.getRoot().on(ModalEvents.hidden, function() {
81                 triggerElement.focus();
82             });
83         }
84     };
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);
102         return modal;
103     };
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;
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     };
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 = {};
140         registryConf = ModalRegistry.get(type);
142         if (!registryConf) {
143             Notification.exception({message: 'Unable to find modal of type: ' + type});
144         }
146         if (typeof modalConfig.templateContext != 'undefined') {
147             templateContext = modalConfig.templateContext;
148         }
150         return createFromType(registryConf, templateContext, triggerElement)
151             .then(function(modal) {
152                 if (typeof modalConfig.title != 'undefined') {
153                     modal.setTitle(modalConfig.title);
154                 }
156                 if (typeof modalConfig.body != 'undefined') {
157                     modal.setBody(modalConfig.body);
158                 }
160                 if (typeof modalConfig.footer != 'undefined') {
161                     modal.setFooter(modalConfig.footer);
162                 }
164                 if (isLarge) {
165                     modal.setLarge();
166                 }
168                 return modal;
169             });
170     };
172     return {
173         create: create,
174         types: TYPES,
175     };
176 });