diff --git a/docs/guides/javascript/index.md b/docs/guides/javascript/index.md index 45623e856..fdbefc7b2 100644 --- a/docs/guides/javascript/index.md +++ b/docs/guides/javascript/index.md @@ -467,61 +467,6 @@ Care should be taken in the following scenarios: ## Preferences -## Prefetch - - - -Assets including strings, and templates, can be pre-fetched shortly after the page loads to improve the perceived performance of the page when consuming those components. - -```todo -Link to jsdocs here -``` - -```js title="Example of fetching a string and template" -import Prefetch from 'core/prefetch'; - -// Prefetch the string 'discussion' from the 'mod_forum' component. -Prefetch.prefetchString('discussion', 'mod_forum'); - -// Prefetch the strings yes, no, and maybe from the 'core' component. -Prefetch.prefetchStrings('core', ['yes', 'no', 'maybe']); - -// Prefetch the templates 'core/toast'. -Prefetch.prefetchTemplate('core/toast'); - -// Prefetch the templates 'core/toast' and 'core/modal'. -Prefetch.prefetchTemplates(['core/toast', 'core/modal']); -``` - -## Dropzone - - - -The use of the `core/dropzone` module provides a simplified developer experience for creating drop zones within Moodle. - -The module attempts to ensure that accessibility requirements are met, including applying the correct styles and keyboard navigation. - -Drop zones will trigger callbacks for common actions that occur within the drop zone for other code to listen to and react accordingly. - -```js title="Example of creating a dropzone" -import Dropzone from 'core/dropzone'; - -// Get the element that will be the dropzone. -const dropZoneContainer = document.querySelector('#dropZoneId'); -// Create a new dropzone accepting only images. -const dropZone = new Dropzone( - dropZoneContainer, - 'image/*', - function(files) { - window.console.log(files); - } -); -// Set the custom message for the dropzone. Otherwise, it will use the default message. -dropZone.setLabel('Drop images here'); -// Initialising the dropzone. -dropZone.init(); -``` - ## Reactive state diff --git a/docs/guides/javascript/modules/dropzone.md b/docs/guides/javascript/modules/dropzone.md new file mode 100644 index 000000000..a28d43ca2 --- /dev/null +++ b/docs/guides/javascript/modules/dropzone.md @@ -0,0 +1,29 @@ +--- +title: Dropzone +--- + + +The use of the `core/dropzone` module provides a simplified developer experience for creating drop zones within Moodle. + +The module attempts to ensure that accessibility requirements are met, including applying the correct styles and keyboard navigation. + +Drop zones will trigger callbacks for common actions that occur within the drop zone for other code to listen to and react accordingly. + +```js title="Example of creating a dropzone" +import Dropzone from 'core/dropzone'; + +// Get the element that will be the dropzone. +const dropZoneContainer = document.querySelector('#dropZoneId'); +// Create a new dropzone accepting only images. +const dropZone = new Dropzone( + dropZoneContainer, + 'image/*', + function(files) { + window.console.log(files); + } +); +// Set the custom message for the dropzone. Otherwise, it will use the default message. +dropZone.setLabel('Drop images here'); +// Initialising the dropzone. +dropZone.init(); +``` diff --git a/docs/guides/javascript/modules/log.md b/docs/guides/javascript/modules/log.md new file mode 100644 index 000000000..ea2816945 --- /dev/null +++ b/docs/guides/javascript/modules/log.md @@ -0,0 +1,16 @@ +--- +title: Log +--- + +It is not recommended to use the vanila `window.console.log()` function to output JavaScript logging information. + +The `core/log` module offers different levels of log output that is governed by Moodle's debugging levels. + +```js title="Example use of logging" +import Log from 'core/log'; + +Log.info("Info class log statement"); + +Log.debug("Debugging information, only appears when DEBUG mode is DEBUG_DEVELOPER"); + +``` diff --git a/docs/guides/javascript/modules/prefetch.md b/docs/guides/javascript/modules/prefetch.md new file mode 100644 index 000000000..ab690de5c --- /dev/null +++ b/docs/guides/javascript/modules/prefetch.md @@ -0,0 +1,26 @@ +--- +title: Prefetch +--- + + +Assets including strings, and templates, can be pre-fetched shortly after the page loads to improve the perceived performance of the page when consuming those components. + +```todo +Link to jsdocs here +``` + +```js title="Example of fetching a string and template" +import Prefetch from 'core/prefetch'; + +// Prefetch the string 'discussion' from the 'mod_forum' component. +Prefetch.prefetchString('discussion', 'mod_forum'); + +// Prefetch the strings yes, no, and maybe from the 'core' component. +Prefetch.prefetchStrings('core', ['yes', 'no', 'maybe']); + +// Prefetch the templates 'core/toast'. +Prefetch.prefetchTemplate('core/toast'); + +// Prefetch the templates 'core/toast' and 'core/modal'. +Prefetch.prefetchTemplates(['core/toast', 'core/modal']); +```