Useful core Javascript modules - Revision history

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


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

				
				
				
				
				
				← Older revision
				Revision as of 08:25, 15 July 2021
				
Line 6:
Line 6:



Example of using config module: Example of using config module:
<code javascript> <syntaxhighlight lang="javascript">
require(['core/config’], function(mdlcfg) { require(['core/config’], function(mdlcfg) {
     console.log(mdlcfg.wwwroot); // outputs the wwwroot of moodle to console      console.log(mdlcfg.wwwroot); // outputs the wwwroot of moodle to console
Line 15:
Line 15:



Example of using language strings module (retrieved via ajax, if the string is not yet loaded) Example of using language strings module (retrieved via ajax, if the string is not yet loaded)
<code javascript> <syntaxhighlight lang="javascript">
require([‘core/str’], function(str) { require([‘core/str’], function(str) {
     // start retrieving the localized string; store the promise that some time in the future the string will be there.      // start retrieving the localized string; store the promise that some time in the future the string will be there.
Line 29:
Line 29:



You can also convert multiple strings and add parameters in a single call You can also convert multiple strings and add parameters in a single call
<code javascript> <syntaxhighlight lang="javascript">
     // Real example from user/amd/src/status_field.js      // Real example from user/amd/src/status_field.js
     var strings = [      var strings = [
Line 66:
Line 66:



Examples: Examples:
<code javascript> <syntaxhighlight lang="javascript">
require(['core/notification’], function(notification) { require(['core/notification’], function(notification) {
     notification.alert('Hello', 'Welcome to my site!', 'Continue');      notification.alert('Hello', 'Welcome to my site!', 'Continue');
Line 73:
Line 73:



Strings and notifications: Strings and notifications:
<code javascript> <syntaxhighlight lang="javascript">
require(['core/str', 'core/notification’], function(str, notification) { require(['core/str', 'core/notification’], function(str, notification) {
                 str.get_strings([                  str.get_strings([
Line 92:
Line 92:



Useful Functions: Useful Functions:
<code javascript> <syntaxhighlight lang="javascript">
// Generate an absolute URL by using the relative path to a file and optionally slash arguments // Generate an absolute URL by using the relative path to a file and optionally slash arguments
url.fileUrl(relativeScript, slashArgs) url.fileUrl(relativeScript, slashArgs)
Line 103:
Line 103:
Example: Example:



<code javascript> <syntaxhighlight lang="javascript">
// Prerequisites: // Prerequisites:
// - A Javascript file is present under $CFG->wwwroot."/path/to/file.js" // - A Javascript file is present under $CFG->wwwroot."/path/to/file.js"
Line 122:
Line 122:
If you want to add a hierarchical interface, you should use the tree module. It will handle user interaction and accessibility for you. If you want to add a hierarchical interface, you should use the tree module. It will handle user interaction and accessibility for you.



<code javascript> <syntaxhighlight lang="javascript">
define(['jquery', 'core/tree'], function($, Tree) { define(['jquery', 'core/tree'], function($, Tree) {
     return {      return {
Line 138:
Line 138:



If you'd like to add a modal to your page the modal modules will handle all of the magic for you, all you need to bring is your content! If you'd like to add a modal to your page the modal modules will handle all of the magic for you, all you need to bring is your content!
<code javascript> <syntaxhighlight lang="javascript">
require(['jquery', 'core/modal_factory'], function($, ModalFactory) { require(['jquery', 'core/modal_factory'], function($, ModalFactory) {
   var trigger = $('#create-modal');    var trigger = $('#create-modal');
Line 176:
Line 176:
A simple module to add a loading icon which is easily removable, either via resolving a Promise, or removes itself automatically when another Promise is resolved. A simple module to add a loading icon which is easily removable, either via resolving a Promise, or removes itself automatically when another Promise is resolved.



<code javascript> <syntaxhighlight lang="javascript">
define(['jquery', 'core/ajax', 'core/loadingicon'], function($, Ajax, LoadingIcon) { define(['jquery', 'core/ajax', 'core/loadingicon'], function($, Ajax, LoadingIcon) {
   return {    return {



Mudrd8mz: Text replacement - "" to ""

2021-07-14T20:34:35Z
Text replacement - "<code php>" to "<syntaxhighlight lang="php">"

				
				
				
				
				
				← Older revision
				Revision as of 20:34, 14 July 2021
				
Line 54:
Line 54:



IT IS NOT RECOMMENDED to call: IT IS NOT RECOMMENDED to call:
<code php> <syntaxhighlight lang="php">
$PAGE->requires->string_for_js('edita', 'core'); // You do not need this! $PAGE->requires->string_for_js('edita', 'core'); // You do not need this!
</syntaxhighlight> </syntaxhighlight>



Mudrd8mz: Text replacement - "" to ""
2021-07-14T20:24:10Z
Text replacement - "</code>" to "</syntaxhighlight>"

				
				
				
				
				
				← Older revision
				Revision as of 20:24, 14 July 2021
				
Line 10:
Line 10:
     console.log(mdlcfg.wwwroot); // outputs the wwwroot of moodle to console      console.log(mdlcfg.wwwroot); // outputs the wwwroot of moodle to console
}); });
</code> </syntaxhighlight>



== Language strings (core/str) == == Language strings (core/str) ==
Line 26:
Line 26:
     });      });
}); });
</code> </syntaxhighlight>



You can also convert multiple strings and add parameters in a single call You can also convert multiple strings and add parameters in a single call
Line 49:
Line 49:
         console.log(results);          console.log(results);
     });      });
</code> </syntaxhighlight>



The string will be retrieved via AJAX request on the first use and cached in browser local storage until purge caches or site upgrade The string will be retrieved via AJAX request on the first use and cached in browser local storage until purge caches or site upgrade
Line 56:
Line 56:
<code php> <code php>
$PAGE->requires->string_for_js('edita', 'core'); // You do not need this! $PAGE->requires->string_for_js('edita', 'core'); // You do not need this!
</code> </syntaxhighlight>



Because: Because:
Line 70:
Line 70:
     notification.alert('Hello', 'Welcome to my site!', 'Continue');      notification.alert('Hello', 'Welcome to my site!', 'Continue');
}); });
</code> </syntaxhighlight>



Strings and notifications: Strings and notifications:
Line 87:
Line 87:
                 ).fail(notification.exception);                  ).fail(notification.exception);
}); });
</code> </syntaxhighlight>



== URL module (core/url) == == URL module (core/url) ==
Line 99:
Line 99:
// Generates an image url using the filename of the image and the Moodle component (core, plugin, etc.) where it can be found // Generates an image url using the filename of the image and the Moodle component (core, plugin, etc.) where it can be found
url.imageUrl(imagename, component) url.imageUrl(imagename, component)
</code> </syntaxhighlight>



Example: Example:
Line 110:
Line 110:
     console.log("Generated URL: " + url);      console.log("Generated URL: " + url);
}); });
</code> </syntaxhighlight>



== Ajax Module (core/ajax) == == Ajax Module (core/ajax) ==
Line 130:
Line 130:
     };      };
}); });
</code> </syntaxhighlight>



Read more about the [[Tree]] module Read more about the [[Tree]] module
Line 153:
Line 153:
   });    });
}); });
</code> </syntaxhighlight>



Read more about the [[AMD_Modal]] module Read more about the [[AMD_Modal]] module
Line 205:
Line 205:
   };    };
}); });
</code> </syntaxhighlight>



==See also== ==See also==



Andrewnicols: Give examples
2019-05-06T05:57:51Z
Give examples

				
				
				
				
				
				← Older revision
				Revision as of 05:57, 6 May 2019
				
Line 175:
Line 175:



A simple module to add a loading icon which is easily removable, either via resolving a Promise, or removes itself automatically when another Promise is resolved. A simple module to add a loading icon which is easily removable, either via resolving a Promise, or removes itself automatically when another Promise is resolved.

<code javascript>
define(['jquery', 'core/ajax', 'core/loadingicon'], function($, Ajax, LoadingIcon) {
  return {
    demo1: function() {
      // Add a loading icon which can be removed by the caller.
      var exampleElement = $('.example');

      var loadingIcon = LoadingIcon.addIconToContainerWithPromise(exampleElement);

      // To remove:
      loadingIcon.resolve();
    },

    demo2: function() {
      // Add a loading icon which would be removed when the AJAX request completes.
      var exampleElement = $('.example');

      var requests = Ajax.call([{
          methodname: 'some_method',
      }]);
      LoadingIcon.addIconToContainerRemoveOnCompletion(exampleElement, requests);

      requests[0].then(function(request) {
          // Do something.
      })
      .catch;
    },
  };
});
</code>



==See also== ==See also==



Andrewnicols: /* Loading icons (core/loadicon) */
2019-05-06T05:46:33Z
Loading icons (core/loadicon)

				
				
				
				
				
				← Older revision
				Revision as of 05:46, 6 May 2019
				
Line 171:
Line 171:
Read more about the [[AMD_pubsub]] module Read more about the [[AMD_pubsub]] module



== Loading icons (core/loadicon) == == Loading icons (core/loadingicon) ==
{{Moodle 3.7}} {{Moodle 3.7}}






Andrewnicols: Add core/loadingicon
2019-05-06T05:46:05Z
Add core/loadingicon

				
				
				
				
				
				← Older revision
				Revision as of 05:46, 6 May 2019
				
Line 170:
Line 170:



Read more about the [[AMD_pubsub]] module Read more about the [[AMD_pubsub]] module

== Loading icons (core/loadicon) ==
{{Moodle 3.7}}

A simple module to add a loading icon which is easily removable, either via resolving a Promise, or removes itself automatically when another Promise is resolved.



==See also== ==See also==



Howardsmiller: /* Language strings (core/str) */
2019-03-16T12:10:37Z
Language strings (core/str)

				
				
				
				
				
				← Older revision
				Revision as of 12:10, 16 March 2019
				
Line 49:
Line 49:
         console.log(results);          console.log(results);
     });      });
/code> </code>



The string will be retrieved via AJAX request on the first use and cached in browser local storage until purge caches or site upgrade The string will be retrieved via AJAX request on the first use and cached in browser local storage until purge caches or site upgrade



Howardsmiller: /* Language strings (core/str) */
2019-03-16T12:10:22Z
Language strings (core/str)

				
				
				
				
				
				← Older revision
				Revision as of 12:10, 16 March 2019
				
Line 27:
Line 27:
}); });
</code> </code>

You can also convert multiple strings and add parameters in a single call
<code javascript>
    // Real example from user/amd/src/status_field.js
    var strings = [
        {
            key: 'unenrol',
            component: 'enrol'
        },
        {
            key: 'unenrolconfirm',
            component: 'enrol',
            param: {
                user: parentContainer.data('fullname'),
                course: parentContainer.data('coursename'),
                enrolinstancename: parentContainer.data('enrolinstancename')
            }
        }
    ];
    str.get_strings(strings).then(function (results) {
        console.log(results);
    });
/code>



The string will be retrieved via AJAX request on the first use and cached in browser local storage until purge caches or site upgrade The string will be retrieved via AJAX request on the first use and cached in browser local storage until purge caches or site upgrade



Nadavkav: /* PubSub (core/pubsub) */
2018-12-06T07:45:26Z
PubSub (core/pubsub)

				
				
				
				
				
				← Older revision
				Revision as of 07:45, 6 December 2018
				
Line 146:
Line 146:
A simple module to do event subscription and publishing in JavaScript without the need for jQuery. A simple module to do event subscription and publishing in JavaScript without the need for jQuery.



Read more about the [[AMD_pubsub}} module Read more about the [[AMD_pubsub]] module



==See also== ==See also==



Ryanwyllie: /* PubSub (core/pubsub) */
2018-12-06T06:17:44Z
PubSub (core/pubsub)

				
				
				
				
				
				← Older revision
				Revision as of 06:17, 6 December 2018
				
Line 142:
Line 142:



== PubSub (core/pubsub) == == PubSub (core/pubsub) ==
{{Moodle 3.6}}



A simple module to do event subscription and publishing in JavaScript without the need for jQuery. A simple module to do event subscription and publishing in JavaScript without the need for jQuery.

← Older revision		Revision as of 08:25, 15 July 2021
Line 6:		Line 6:

	Example of using config module:		Example of using config module:
	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	require(['core/config’], function(mdlcfg) {		require(['core/config’], function(mdlcfg) {
	console.log(mdlcfg.wwwroot); // outputs the wwwroot of moodle to console		console.log(mdlcfg.wwwroot); // outputs the wwwroot of moodle to console
Line 15:		Line 15:

	Example of using language strings module (retrieved via ajax, if the string is not yet loaded)		Example of using language strings module (retrieved via ajax, if the string is not yet loaded)
	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	require([‘core/str’], function(str) {		require([‘core/str’], function(str) {
	// start retrieving the localized string; store the promise that some time in the future the string will be there.		// start retrieving the localized string; store the promise that some time in the future the string will be there.
Line 29:		Line 29:

	You can also convert multiple strings and add parameters in a single call		You can also convert multiple strings and add parameters in a single call
	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	// Real example from user/amd/src/status_field.js		// Real example from user/amd/src/status_field.js
	var strings = [		var strings = [
Line 66:		Line 66:

	Examples:		Examples:
	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	require(['core/notification’], function(notification) {		require(['core/notification’], function(notification) {
	notification.alert('Hello', 'Welcome to my site!', 'Continue');		notification.alert('Hello', 'Welcome to my site!', 'Continue');
Line 73:		Line 73:

	Strings and notifications:		Strings and notifications:
	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	require(['core/str', 'core/notification’], function(str, notification) {		require(['core/str', 'core/notification’], function(str, notification) {
	str.get_strings([		str.get_strings([
Line 92:		Line 92:

	Useful Functions:		Useful Functions:
	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	// Generate an absolute URL by using the relative path to a file and optionally slash arguments		// Generate an absolute URL by using the relative path to a file and optionally slash arguments
	url.fileUrl(relativeScript, slashArgs)		url.fileUrl(relativeScript, slashArgs)
Line 103:		Line 103:
	Example:		Example:

	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	// Prerequisites:		// Prerequisites:
	// - A Javascript file is present under $CFG->wwwroot."/path/to/file.js"		// - A Javascript file is present under $CFG->wwwroot."/path/to/file.js"
Line 122:		Line 122:
	If you want to add a hierarchical interface, you should use the tree module. It will handle user interaction and accessibility for you.		If you want to add a hierarchical interface, you should use the tree module. It will handle user interaction and accessibility for you.

	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	define(['jquery', 'core/tree'], function($, Tree) {		define(['jquery', 'core/tree'], function($, Tree) {
	return {		return {
Line 138:		Line 138:

	If you'd like to add a modal to your page the modal modules will handle all of the magic for you, all you need to bring is your content!		If you'd like to add a modal to your page the modal modules will handle all of the magic for you, all you need to bring is your content!
	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	require(['jquery', 'core/modal_factory'], function($, ModalFactory) {		require(['jquery', 'core/modal_factory'], function($, ModalFactory) {
	var trigger = $('#create-modal');		var trigger = $('#create-modal');
Line 176:		Line 176:
	A simple module to add a loading icon which is easily removable, either via resolving a Promise, or removes itself automatically when another Promise is resolved.		A simple module to add a loading icon which is easily removable, either via resolving a Promise, or removes itself automatically when another Promise is resolved.

	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	define(['jquery', 'core/ajax', 'core/loadingicon'], function($, Ajax, LoadingIcon) {		define(['jquery', 'core/ajax', 'core/loadingicon'], function($, Ajax, LoadingIcon) {
	return {		return {

← Older revision		Revision as of 20:34, 14 July 2021
Line 54:		Line 54:

	IT IS NOT RECOMMENDED to call:		IT IS NOT RECOMMENDED to call:
	<~~code~~ php>		<syntaxhighlight lang="php">
	$PAGE->requires->string_for_js('edita', 'core'); // You do not need this!		$PAGE->requires->string_for_js('edita', 'core'); // You do not need this!
	</syntaxhighlight>		</syntaxhighlight>

← Older revision		Revision as of 20:24, 14 July 2021
Line 10:		Line 10:
	console.log(mdlcfg.wwwroot); // outputs the wwwroot of moodle to console		console.log(mdlcfg.wwwroot); // outputs the wwwroot of moodle to console
	});		});
	</~~code~~>		</syntaxhighlight>

	== Language strings (core/str) ==		== Language strings (core/str) ==
Line 26:		Line 26:
	});		});
	});		});
	</~~code~~>		</syntaxhighlight>

	You can also convert multiple strings and add parameters in a single call		You can also convert multiple strings and add parameters in a single call
Line 49:		Line 49:
	console.log(results);		console.log(results);
	});		});
	</~~code~~>		</syntaxhighlight>

	The string will be retrieved via AJAX request on the first use and cached in browser local storage until purge caches or site upgrade		The string will be retrieved via AJAX request on the first use and cached in browser local storage until purge caches or site upgrade
Line 56:		Line 56:
	<code php>		<code php>
	$PAGE->requires->string_for_js('edita', 'core'); // You do not need this!		$PAGE->requires->string_for_js('edita', 'core'); // You do not need this!
	</~~code~~>		</syntaxhighlight>

	Because:		Because:
Line 70:		Line 70:
	notification.alert('Hello', 'Welcome to my site!', 'Continue');		notification.alert('Hello', 'Welcome to my site!', 'Continue');
	});		});
	</~~code~~>		</syntaxhighlight>

	Strings and notifications:		Strings and notifications:
Line 87:		Line 87:
	).fail(notification.exception);		).fail(notification.exception);
	});		});
	</~~code~~>		</syntaxhighlight>

	== URL module (core/url) ==		== URL module (core/url) ==
Line 99:		Line 99:
	// Generates an image url using the filename of the image and the Moodle component (core, plugin, etc.) where it can be found		// Generates an image url using the filename of the image and the Moodle component (core, plugin, etc.) where it can be found
	url.imageUrl(imagename, component)		url.imageUrl(imagename, component)
	</~~code~~>		</syntaxhighlight>

	Example:		Example:
Line 110:		Line 110:
	console.log("Generated URL: " + url);		console.log("Generated URL: " + url);
	});		});
	</~~code~~>		</syntaxhighlight>

	== Ajax Module (core/ajax) ==		== Ajax Module (core/ajax) ==
Line 130:		Line 130:
	};		};
	});		});
	</~~code~~>		</syntaxhighlight>

	Read more about the [[Tree]] module		Read more about the [[Tree]] module
Line 153:		Line 153:
	});		});
	});		});
	</~~code~~>		</syntaxhighlight>

	Read more about the [[AMD_Modal]] module		Read more about the [[AMD_Modal]] module
Line 205:		Line 205:
	};		};
	});		});
	</~~code~~>		</syntaxhighlight>

	==See also==		==See also==

← Older revision		Revision as of 05:57, 6 May 2019
Line 175:		Line 175:

	A simple module to add a loading icon which is easily removable, either via resolving a Promise, or removes itself automatically when another Promise is resolved.		A simple module to add a loading icon which is easily removable, either via resolving a Promise, or removes itself automatically when another Promise is resolved.

			<code javascript>
			define(['jquery', 'core/ajax', 'core/loadingicon'], function($, Ajax, LoadingIcon) {
			return {
			demo1: function() {
			// Add a loading icon which can be removed by the caller.
			var exampleElement = $('.example');

			var loadingIcon = LoadingIcon.addIconToContainerWithPromise(exampleElement);

			// To remove:
			loadingIcon.resolve();
			},

			demo2: function() {
			// Add a loading icon which would be removed when the AJAX request completes.
			var exampleElement = $('.example');

			var requests = Ajax.call([{
			methodname: 'some_method',
			}]);
			LoadingIcon.addIconToContainerRemoveOnCompletion(exampleElement, requests);

			requests[0].then(function(request) {
			// Do something.
			})
			.catch;
			},
			};
			});
			</code>

	==See also==		==See also==

← Older revision		Revision as of 05:46, 6 May 2019
Line 171:		Line 171:
	Read more about the [[AMD_pubsub]] module		Read more about the [[AMD_pubsub]] module

	== Loading icons (core/~~loadicon~~) ==		== Loading icons (core/loadingicon) ==
	{{Moodle 3.7}}		{{Moodle 3.7}}

← Older revision		Revision as of 05:46, 6 May 2019
Line 170:		Line 170:

	Read more about the [[AMD_pubsub]] module		Read more about the [[AMD_pubsub]] module

			== Loading icons (core/loadicon) ==
			{{Moodle 3.7}}

			A simple module to add a loading icon which is easily removable, either via resolving a Promise, or removes itself automatically when another Promise is resolved.

	==See also==		==See also==

← Older revision		Revision as of 12:10, 16 March 2019
Line 49:		Line 49:
	console.log(results);		console.log(results);
	});		});
	/code>		</code>

	The string will be retrieved via AJAX request on the first use and cached in browser local storage until purge caches or site upgrade		The string will be retrieved via AJAX request on the first use and cached in browser local storage until purge caches or site upgrade

← Older revision		Revision as of 07:45, 6 December 2018
Line 146:		Line 146:
	A simple module to do event subscription and publishing in JavaScript without the need for jQuery.		A simple module to do event subscription and publishing in JavaScript without the need for jQuery.

	Read more about the [[AMD_pubsub}} module		Read more about the [[AMD_pubsub]] module

	==See also==		==See also==

← Older revision		Revision as of 06:17, 6 December 2018
Line 142:		Line 142:

	== PubSub (core/pubsub) ==		== PubSub (core/pubsub) ==
			{{Moodle 3.6}}

	A simple module to do event subscription and publishing in JavaScript without the need for jQuery.		A simple module to do event subscription and publishing in JavaScript without the need for jQuery.