AMD Modal - Revision history

Devdocsbot: Protected "AMD Modal": Developer Docs Migration ([Edit=Allow only administrators] (indefinite))

2023-05-30T05:34:35Z

Protected "AMD Modal": Developer Docs Migration ([Edit=Allow only administrators] (indefinite))

← Older revision	Revision as of 05:34, 30 May 2023
(No difference)

Devdocsbot: Update migration status and path

2023-05-30T05:32:20Z

Update migration status and path

Show changes

Mudrd8mz: Text replacement - "`" to ""`


2021-07-15T08:09:56Z
Text replacement - "<code (.*)>" to "<syntaxhighlight lang="$1">"

				
				
				
				
				
				← Older revision
				Revision as of 08:09, 15 July 2021
				
Line 36:
Line 36:



Example 1 Example 1
<code javascript> <syntaxhighlight lang="javascript">
define(['jquery', 'core/modal_factory'], function($, ModalFactory) { define(['jquery', 'core/modal_factory'], function($, ModalFactory) {
   var trigger = $('#create-modal');    var trigger = $('#create-modal');
Line 54:
Line 54:



Example 2 Example 2
<code javascript> <syntaxhighlight lang="javascript">
define(['jquery', 'core/modal_factory', 'core/templates'], function($, ModalFactory, Templates) { define(['jquery', 'core/modal_factory', 'core/templates'], function($, ModalFactory, Templates) {
   var trigger = $('#create-modal');    var trigger = $('#create-modal');
Line 75:
Line 75:
If your trigger is (say) a class that covers a number of actual elements, you may want to grab the actual element that caused the event. Unfortunately, ModalEvents do not capture this and you need to approach the modal a different way. Here is an example - the scenario is a list of items with delete buttons. You need to know which delete button in order to get the item id. Note that code is somewhat simplified for clarity. If your trigger is (say) a class that covers a number of actual elements, you may want to grab the actual element that caused the event. Unfortunately, ModalEvents do not capture this and you need to approach the modal a different way. Here is an example - the scenario is a list of items with delete buttons. You need to know which delete button in order to get the item id. Note that code is somewhat simplified for clarity.



<code javascript> <syntaxhighlight lang="javascript">
     $('a.item-delete').on('click', function(e) {      $('a.item-delete').on('click', function(e) {
         var clickedLink = $(e.currentTarget);          var clickedLink = $(e.currentTarget);
Line 100:
Line 100:



Example 3 Example 3
<code javascript> <syntaxhighlight lang="javascript">
define(['jquery', 'core/modal_factory', 'core/templates'], function($, ModalFactory, Templates) { define(['jquery', 'core/modal_factory', 'core/templates'], function($, ModalFactory, Templates) {
   var trigger = $('#create-modal');    var trigger = $('#create-modal');
Line 117:
Line 117:



Example 4 Example 4
<code javascript> <syntaxhighlight lang="javascript">
define(['jquery', 'core/modal_factory', 'core/modal_events', 'core/templates'], define(['jquery', 'core/modal_factory', 'core/modal_events', 'core/templates'],
         function($, ModalFactory, ModalEvents, Templates) {          function($, ModalFactory, ModalEvents, Templates) {
Line 177:
Line 177:
Let's assume the file is <your_module>/amd/src/modal_login.js Let's assume the file is <your_module>/amd/src/modal_login.js



<code javascript> <syntaxhighlight lang="javascript">
define(['jquery', 'core/notification', 'core/custom_interaction_events', 'core/modal', 'core/modal_registry'], define(['jquery', 'core/notification', 'core/custom_interaction_events', 'core/modal', 'core/modal_registry'],
         function($, Notification, CustomEvents, Modal, ModalRegistry) {          function($, Notification, CustomEvents, Modal, ModalRegistry) {
Line 240:
Line 240:
Once you have both your template and javascript ready to go then all you need to do is tie them into where ever you'd like to launch the modal. For the purpose of this example let's assume that we've got a page with a login button with id="login" then you might add this javascript to the page. Once you have both your template and javascript ready to go then all you need to do is tie them into where ever you'd like to launch the modal. For the purpose of this example let's assume that we've got a page with a login button with id="login" then you might add this javascript to the page.



<code javascript> <syntaxhighlight lang="javascript">
define(['jquery', 'core/templates', 'core/modal_factory', '<your_module>/modal_login'], function($, Templates, ModalFactory, ModalLogin) { define(['jquery', 'core/templates', 'core/modal_factory', '<your_module>/modal_login'], function($, Templates, ModalFactory, ModalLogin) {
     var trigger = $('#login');      var trigger = $('#login');



Mudrd8mz: Text replacement - "class="nicetable"" to "class="wikitable""
2021-07-14T13:23:01Z
Text replacement - "class="nicetable"" to "class="wikitable""

				
				
				
				
				
				← Older revision
				Revision as of 13:23, 14 July 2021
				
Line 14:
Line 14:



The configuration is provided as an object with key/value pairs. The options are: The configuration is provided as an object with key/value pairs. The options are:
{| class="nicetable" {| class="wikitable"
|- |-
! '''key''' ! '''key'''

`Mudrd8mz: Text replacement - "`" to ""

2021-07-14T13:03:02Z

Text replacement - "</code>" to "</syntaxhighlight>"

← Older revision		Revision as of 13:03, 14 July 2021
Line 48:		Line 48:
	});		});
	});		});
	</~~code~~>		</syntaxhighlight>
	NB - When I tried this with Moodle 3.10 it did not work but changing the initial "define" to '''require''' worked as per [[https://docs.moodle.org/dev/Useful_core_Javascript_modules#Modal_.28core.2Fmodal.29]]		NB - When I tried this with Moodle 3.10 it did not work but changing the initial "define" to '''require''' worked as per [[https://docs.moodle.org/dev/Useful_core_Javascript_modules#Modal_.28core.2Fmodal.29]]

Line 67:		Line 67:
	});		});
	});		});
	</~~code~~>		</syntaxhighlight>

	Since the modals aren't actually added to the DOM until they are made visible any javascript resolved with the promise is cached and only run after all of the elements are added to the DOM, so you don't have to worry about any special handling in the javascript that is being loaded from the template.		Since the modals aren't actually added to the DOM until they are made visible any javascript resolved with the promise is cached and only run after all of the elements are added to the DOM, so you don't have to worry about any special handling in the javascript that is being loaded from the template.
Line 92:		Line 92:
	modal.show();		modal.show();
	});		});
	</~~code~~>		</syntaxhighlight>

	'Normal' javascript is used to trap the event and the required element can be captured. No 'trigger' is passed to the ModalFactory so the resulting modal cannot display itself. The modal save event (in this case clicking the delete button) is handled as normally and will still trigger as expected. 'modal.show()' is called to display the modal.		'Normal' javascript is used to trap the event and the required element can be captured. No 'trigger' is passed to the ModalFactory so the resulting modal cannot display itself. The modal save event (in this case clicking the delete button) is handled as normally and will still trigger as expected. 'modal.show()' is called to display the modal.
Line 112:		Line 112:
	});		});
	});		});
	</~~code~~>		</syntaxhighlight>

	Each type of modal may fire additional events to allow your code to handle the new functionality being offered. See the modal_events.js module for a list of events that can be fired. For example, if you wanted to have a save/cancel modal that you did some form validation on before saving you could do something like the example below.		Each type of modal may fire additional events to allow your code to handle the new functionality being offered. See the modal_events.js module for a list of events that can be fired. For example, if you wanted to have a save/cancel modal that you did some form validation on before saving you could do something like the example below.
Line 135:		Line 135:
	});		});
	});		});
	</~~code~~>		</syntaxhighlight>

	= How do you write a new type of modal? =		= How do you write a new type of modal? =
Line 171:		Line 171:
	{{/footer}}		{{/footer}}
	{{/ core/modal }}		{{/ core/modal }}
	</~~code~~>		</syntaxhighlight>

	Next we can create the new AMD module for the login modal. You can extend the existing modal module which will give you all of the core modal functionality for free allowing you to focus on writing only the specific logic you need. In this example we would only need to write the logic for handling the login.		Next we can create the new AMD module for the login modal. You can extend the existing modal module which will give you all of the core modal functionality for free allowing you to focus on writing only the specific logic you need. In this example we would only need to write the logic for handling the login.
Line 236:		Line 236:
	return ModalLogin;		return ModalLogin;
	});		});
	</~~code~~>		</syntaxhighlight>

	Once you have both your template and javascript ready to go then all you need to do is tie them into where ever you'd like to launch the modal. For the purpose of this example let's assume that we've got a page with a login button with id="login" then you might add this javascript to the page.		Once you have both your template and javascript ready to go then all you need to do is tie them into where ever you'd like to launch the modal. For the purpose of this example let's assume that we've got a page with a login button with id="login" then you might add this javascript to the page.
Line 246:		Line 246:
	ModalFactory.create({type: ModalLogin.TYPE}, trigger);		ModalFactory.create({type: ModalLogin.TYPE}, trigger);
	});		});
	</~~code~~>		</syntaxhighlight>

	= Related =		= Related =

Mudrd8mz: Text replacement - "`" to ""`


2021-07-14T13:02:29Z
Text replacement - "<code>" to "<syntaxhighlight lang="php">"

				
				
				
				
				
				← Older revision
				Revision as of 13:02, 14 July 2021
				
Line 145:
Line 145:
Let's assume the file is <your_module>/templates/modal_login.mustache Let's assume the file is <your_module>/templates/modal_login.mustache



<code> <syntaxhighlight lang="php">
{{< core/modal }} {{< core/modal }}
     {{$title}}{{#str}} login {{/str}}{{/title}}      {{$title}}{{#str}} login {{/str}}{{/title}}



Demsley at 11:52, 19 May 2021
2021-05-19T11:52:37Z


				
				
				
				
				
				← Older revision
				Revision as of 11:52, 19 May 2021
				
Line 49:
Line 49:
}); });
</code> </code>
NB - When I tried this with Moodle 3.10 it did not work but changing the initial "define" to '''require''' worked. NB - When I tried this with Moodle 3.10 it did not work but changing the initial "define" to '''require''' worked as per [[https://docs.moodle.org/dev/Useful_core_Javascript_modules#Modal_.28core.2Fmodal.29]]



The modals will also accept a promise for the body and footer content. It is expected that the promise will be resolved with two strings, the html content and any associated javascript. This allows the modal module to work natively with the templates module, such as in the example below. The modals will also accept a promise for the body and footer content. It is expected that the promise will be resolved with two strings, the html content and any associated javascript. This allows the modal module to work natively with the templates module, such as in the example below.



Demsley at 11:50, 19 May 2021
2021-05-19T11:50:51Z


				
				
				
				
				
				← Older revision
				Revision as of 11:50, 19 May 2021
				
Line 49:
Line 49:
}); });
</code> </code>
NB - When I tried this with Moodle 3.10 it did not work but changing the initial "define" to '''require''' worked.



The modals will also accept a promise for the body and footer content. It is expected that the promise will be resolved with two strings, the html content and any associated javascript. This allows the modal module to work natively with the templates module, such as in the example below. The modals will also accept a promise for the body and footer content. It is expected that the promise will be resolved with two strings, the html content and any associated javascript. This allows the modal module to work natively with the templates module, such as in the example below.



Fpataleta: /* Why should you use it? */
2019-10-25T04:58:36Z
Why should you use it?

				
				
				
				
				
				← Older revision
				Revision as of 04:58, 25 October 2019
				
Line 8:
Line 8:
The modals will fire events for common actions that occur within the modal, e.g. show / hide, for other code to listen to and react accordingly. The modals will fire events for common actions that occur within the modal, e.g. show / hide, for other code to listen to and react accordingly.



Moodle ships with a couple of standard modal types for you to re-use including a simple cancel modal, a confirm (yes/no) modal and a save/cancel modal. Hopefully with more to come! Moodle ships with a couple of standard modal types for you to re-use including a simple cancel modal, and a save/cancel modal. Hopefully with more to come!



= How do you create a basic modal? = = How do you create a basic modal? =



Howardsmiller: /* How to manually trigger a Modal */
2019-03-19T14:07:26Z
How to manually trigger a Modal

				
				
				
				
				
				← Older revision
				Revision as of 14:07, 19 March 2019
				
Line 86:
Line 86:
             var root = modal.getRoot();              var root = modal.getRoot();
             root.on(ModalEvents.save, function() {              root.on(ModalEvents.save, function() {
                 var elementid = clickedLink.data('templateid');                  var elementid = clickedLink.data('id');
                 // Do something to delete item                  // Do something to delete item
             });              });

← Older revision		Revision as of 08:09, 15 July 2021
Line 36:		Line 36:

	Example 1		Example 1
	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	define(['jquery', 'core/modal_factory'], function($, ModalFactory) {		define(['jquery', 'core/modal_factory'], function($, ModalFactory) {
	var trigger = $('#create-modal');		var trigger = $('#create-modal');
Line 54:		Line 54:

	Example 2		Example 2
	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	define(['jquery', 'core/modal_factory', 'core/templates'], function($, ModalFactory, Templates) {		define(['jquery', 'core/modal_factory', 'core/templates'], function($, ModalFactory, Templates) {
	var trigger = $('#create-modal');		var trigger = $('#create-modal');
Line 75:		Line 75:
	If your trigger is (say) a class that covers a number of actual elements, you may want to grab the actual element that caused the event. Unfortunately, ModalEvents do not capture this and you need to approach the modal a different way. Here is an example - the scenario is a list of items with delete buttons. You need to know which delete button in order to get the item id. Note that code is somewhat simplified for clarity.		If your trigger is (say) a class that covers a number of actual elements, you may want to grab the actual element that caused the event. Unfortunately, ModalEvents do not capture this and you need to approach the modal a different way. Here is an example - the scenario is a list of items with delete buttons. You need to know which delete button in order to get the item id. Note that code is somewhat simplified for clarity.

	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	$('a.item-delete').on('click', function(e) {		$('a.item-delete').on('click', function(e) {
	var clickedLink = $(e.currentTarget);		var clickedLink = $(e.currentTarget);
Line 100:		Line 100:

	Example 3		Example 3
	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	define(['jquery', 'core/modal_factory', 'core/templates'], function($, ModalFactory, Templates) {		define(['jquery', 'core/modal_factory', 'core/templates'], function($, ModalFactory, Templates) {
	var trigger = $('#create-modal');		var trigger = $('#create-modal');
Line 117:		Line 117:

	Example 4		Example 4
	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	define(['jquery', 'core/modal_factory', 'core/modal_events', 'core/templates'],		define(['jquery', 'core/modal_factory', 'core/modal_events', 'core/templates'],
	function($, ModalFactory, ModalEvents, Templates) {		function($, ModalFactory, ModalEvents, Templates) {
Line 177:		Line 177:
	Let's assume the file is <your_module>/amd/src/modal_login.js		Let's assume the file is <your_module>/amd/src/modal_login.js

	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	define(['jquery', 'core/notification', 'core/custom_interaction_events', 'core/modal', 'core/modal_registry'],		define(['jquery', 'core/notification', 'core/custom_interaction_events', 'core/modal', 'core/modal_registry'],
	function($, Notification, CustomEvents, Modal, ModalRegistry) {		function($, Notification, CustomEvents, Modal, ModalRegistry) {
Line 240:		Line 240:
	Once you have both your template and javascript ready to go then all you need to do is tie them into where ever you'd like to launch the modal. For the purpose of this example let's assume that we've got a page with a login button with id="login" then you might add this javascript to the page.		Once you have both your template and javascript ready to go then all you need to do is tie them into where ever you'd like to launch the modal. For the purpose of this example let's assume that we've got a page with a login button with id="login" then you might add this javascript to the page.

	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	define(['jquery', 'core/templates', 'core/modal_factory', '<your_module>/modal_login'], function($, Templates, ModalFactory, ModalLogin) {		define(['jquery', 'core/templates', 'core/modal_factory', '<your_module>/modal_login'], function($, Templates, ModalFactory, ModalLogin) {
	var trigger = $('#login');		var trigger = $('#login');

← Older revision		Revision as of 13:23, 14 July 2021
Line 14:		Line 14:

	The configuration is provided as an object with key/value pairs. The options are:		The configuration is provided as an object with key/value pairs. The options are:
	{\| class="~~nicetable~~"		{\| class="wikitable"
	\|-		\|-
	! '''key'''		! '''key'''

← Older revision		Revision as of 13:02, 14 July 2021
Line 145:		Line 145:
	Let's assume the file is <your_module>/templates/modal_login.mustache		Let's assume the file is <your_module>/templates/modal_login.mustache

	<~~code~~>		<syntaxhighlight lang="php">
	{{< core/modal }}		{{< core/modal }}
	{{$title}}{{#str}} login {{/str}}{{/title}}		{{$title}}{{#str}} login {{/str}}{{/title}}

← Older revision		Revision as of 11:52, 19 May 2021
Line 49:		Line 49:
	});		});
	</code>		</code>
	NB - When I tried this with Moodle 3.10 it did not work but changing the initial "define" to '''require''' worked.		NB - When I tried this with Moodle 3.10 it did not work but changing the initial "define" to '''require''' worked as per [[https://docs.moodle.org/dev/Useful_core_Javascript_modules#Modal_.28core.2Fmodal.29]]

	The modals will also accept a promise for the body and footer content. It is expected that the promise will be resolved with two strings, the html content and any associated javascript. This allows the modal module to work natively with the templates module, such as in the example below.		The modals will also accept a promise for the body and footer content. It is expected that the promise will be resolved with two strings, the html content and any associated javascript. This allows the modal module to work natively with the templates module, such as in the example below.

← Older revision		Revision as of 11:50, 19 May 2021
Line 49:		Line 49:
	});		});
	</code>		</code>
			NB - When I tried this with Moodle 3.10 it did not work but changing the initial "define" to '''require''' worked.

	The modals will also accept a promise for the body and footer content. It is expected that the promise will be resolved with two strings, the html content and any associated javascript. This allows the modal module to work natively with the templates module, such as in the example below.		The modals will also accept a promise for the body and footer content. It is expected that the promise will be resolved with two strings, the html content and any associated javascript. This allows the modal module to work natively with the templates module, such as in the example below.

← Older revision		Revision as of 04:58, 25 October 2019
Line 8:		Line 8:
	The modals will fire events for common actions that occur within the modal, e.g. show / hide, for other code to listen to and react accordingly.		The modals will fire events for common actions that occur within the modal, e.g. show / hide, for other code to listen to and react accordingly.

	Moodle ships with a couple of standard modal types for you to re-use including a simple cancel modal, ~~a confirm (yes/no) modal~~ and a save/cancel modal. Hopefully with more to come!		Moodle ships with a couple of standard modal types for you to re-use including a simple cancel modal, and a save/cancel modal. Hopefully with more to come!

	= How do you create a basic modal? =		= How do you create a basic modal? =

← Older revision		Revision as of 14:07, 19 March 2019
Line 86:		Line 86:
	var root = modal.getRoot();		var root = modal.getRoot();
	root.on(ModalEvents.save, function() {		root.on(ModalEvents.save, function() {
	var elementid = clickedLink.data('~~templateid~~');		var elementid = clickedLink.data('id');
	// Do something to delete item		// Do something to delete item
	});		});

AMD Modal - Revision history

Devdocsbot: Protected "AMD Modal": Developer Docs Migration ([Edit=Allow only administrators] (indefinite))

Devdocsbot: Update migration status and path

Mudrd8mz: Text replacement - "" to ""

Mudrd8mz: Text replacement - "class="nicetable"" to "class="wikitable""

Mudrd8mz: Text replacement - "" to ""

Mudrd8mz: Text replacement - "" to ""

Demsley at 11:52, 19 May 2021

Demsley at 11:50, 19 May 2021

Fpataleta: /* Why should you use it? */

Howardsmiller: /* How to manually trigger a Modal */

Mudrd8mz: Text replacement - "`" to ""`

`Mudrd8mz: Text replacement - "`" to ""

Mudrd8mz: Text replacement - "`" to ""`