From c683ab2fc1e8b1a34dfef23d4e3d8f3f2342fd09 Mon Sep 17 00:00:00 2001 From: Michael Hughes Date: Wed, 25 Jun 2025 15:37:17 +0100 Subject: [PATCH 1/5] Create dropzone.md --- docs/guides/javascript/modules/dropzone.md | 29 ++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 docs/guides/javascript/modules/dropzone.md 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(); +``` From ee9b1f120a2165608f622c8b0018384feea770ec Mon Sep 17 00:00:00 2001 From: Michael Hughes Date: Wed, 25 Jun 2025 15:40:31 +0100 Subject: [PATCH 2/5] Create log.md --- docs/guides/javascript/modules/log.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 docs/guides/javascript/modules/log.md diff --git a/docs/guides/javascript/modules/log.md b/docs/guides/javascript/modules/log.md new file mode 100644 index 000000000..c55f1aa07 --- /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"); + +``` From a88794922b7138fa0acd3357b032506af1e1f366 Mon Sep 17 00:00:00 2001 From: Michael Hughes Date: Wed, 25 Jun 2025 16:43:11 +0100 Subject: [PATCH 3/5] Fixed #2060 lint issue docs/guides/javascript/modules/log.md:5:83 casedWords Ensure that words are cased correctly [Javascript] [Context: "Javascript"] --- docs/guides/javascript/modules/log.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/javascript/modules/log.md b/docs/guides/javascript/modules/log.md index c55f1aa07..ea2816945 100644 --- a/docs/guides/javascript/modules/log.md +++ b/docs/guides/javascript/modules/log.md @@ -2,7 +2,7 @@ title: Log --- -It is not recommended to use the vanila `window.console.log()` function to output Javascript logging information. +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. From 0196d39c6a433c86d5a0c85c7731bdae1aa0fdcc Mon Sep 17 00:00:00 2001 From: Michael Hughes Date: Wed, 25 Jun 2025 16:43:58 +0100 Subject: [PATCH 4/5] Moving Prefetch --- docs/guides/javascript/index.md | 55 --------------------------------- 1 file changed, 55 deletions(-) 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 From 9c31799baf1159a65ebde6d7c36038c389b5218b Mon Sep 17 00:00:00 2001 From: Michael Hughes Date: Wed, 25 Jun 2025 16:44:25 +0100 Subject: [PATCH 5/5] Create prefetch.md --- docs/guides/javascript/modules/prefetch.md | 26 ++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 docs/guides/javascript/modules/prefetch.md 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']); +```