From 7c22fe4db7d35ae770f1a05f5773c85235045634 Mon Sep 17 00:00:00 2001 From: Thomas Portelange Date: Wed, 22 Jun 2022 11:32:01 +0200 Subject: [PATCH 1/5] document new lazy loading feature @GuySartorelli here are the docs ;-) PR reference : https://github.com/silverstripe/silverstripe-admin/pull/1309 --- .../02_CMS_Architecture.md | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md b/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md index 624127f7e83..c6e4dc8edde 100644 --- a/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md +++ b/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md @@ -753,7 +753,29 @@ The URL endpoints `{$AdminURL}mytabs/tab1` and `{$AdminURL}mytabs/tab2` should return HTML fragments suitable for inserting into the content area, through the `PjaxResponseNegotiator` class (see above). +### Lazy loading fields on tab activation + +When a tab is not lazy loaded via ajax, it might still be necessary to +delay some work (eg: when doing http requests) until the tab is activated. This is how, for example, the +[GridFieldLazyLoader](https://api.silverstripe.org/4/SilverStripe/Forms/GridField/GridFieldLazyLoader.html) works. + +In order to open up the same kind of features to other fields, a custom event is fired on all nodes with the `lazy-loadable` class inside the activated tab panel. +They will receive a `lazyload` even that can be listened in the following way: + +```js +el.addEventListener( + "lazyload", + (e) => { + // Some init code here + }, + { + once: true, + } +); +``` +It is recommended to use the "once" parameter to avoid multiple initializations if the tab is activated multiple times. + ## Related * [Howto: Extend the CMS Interface](/developer_guides/customising_the_admin_interface/how_tos/extend_cms_interface) From 88df5e7b8c890c9c5fc006e83f791ef51a1c2de3 Mon Sep 17 00:00:00 2001 From: Thomas Portelange Date: Wed, 22 Jun 2022 14:27:07 +0200 Subject: [PATCH 2/5] Update docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md Co-authored-by: Michal Kleiner --- .../15_Customising_the_Admin_Interface/02_CMS_Architecture.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md b/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md index c6e4dc8edde..e845baed7cf 100644 --- a/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md +++ b/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md @@ -760,7 +760,7 @@ delay some work (eg: when doing http requests) until the tab is activated. This [GridFieldLazyLoader](https://api.silverstripe.org/4/SilverStripe/Forms/GridField/GridFieldLazyLoader.html) works. In order to open up the same kind of features to other fields, a custom event is fired on all nodes with the `lazy-loadable` class inside the activated tab panel. -They will receive a `lazyload` even that can be listened in the following way: +They will receive a `lazyload` event that can be listened to in the following way: ```js el.addEventListener( From 2ba954a3ef5008014c44634f77806d4b865787ce Mon Sep 17 00:00:00 2001 From: Thomas Portelange Date: Thu, 7 Jul 2022 10:07:18 +0200 Subject: [PATCH 3/5] Update docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md Co-authored-by: Guy Sartorelli <36352093+GuySartorelli@users.noreply.github.com> --- .../15_Customising_the_Admin_Interface/02_CMS_Architecture.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md b/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md index e845baed7cf..f4950463214 100644 --- a/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md +++ b/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md @@ -757,7 +757,7 @@ through the `PjaxResponseNegotiator` class (see above). When a tab is not lazy loaded via ajax, it might still be necessary to delay some work (eg: when doing http requests) until the tab is activated. This is how, for example, the -[GridFieldLazyLoader](https://api.silverstripe.org/4/SilverStripe/Forms/GridField/GridFieldLazyLoader.html) works. +[GridFieldLazyLoader](api:SilverStripe\Forms\GridField\GridFieldLazyLoader) works. In order to open up the same kind of features to other fields, a custom event is fired on all nodes with the `lazy-loadable` class inside the activated tab panel. They will receive a `lazyload` event that can be listened to in the following way: From c99f8caf81726973a7bc85124b2859ae13264df2 Mon Sep 17 00:00:00 2001 From: Thomas Portelange Date: Thu, 7 Jul 2022 10:07:25 +0200 Subject: [PATCH 4/5] Update docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md Co-authored-by: Guy Sartorelli <36352093+GuySartorelli@users.noreply.github.com> --- .../15_Customising_the_Admin_Interface/02_CMS_Architecture.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md b/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md index f4950463214..77c39df3f92 100644 --- a/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md +++ b/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md @@ -764,7 +764,7 @@ They will receive a `lazyload` event that can be listened to in the following wa ```js el.addEventListener( - "lazyload", + 'lazyload', (e) => { // Some init code here }, From 43a197cf6f04d36d33af8946037f3efdf2f98c07 Mon Sep 17 00:00:00 2001 From: Thomas Portelange Date: Thu, 7 Jul 2022 10:07:30 +0200 Subject: [PATCH 5/5] Update docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md Co-authored-by: Guy Sartorelli <36352093+GuySartorelli@users.noreply.github.com> --- .../15_Customising_the_Admin_Interface/02_CMS_Architecture.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md b/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md index 77c39df3f92..3e3c4e72d01 100644 --- a/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md +++ b/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md @@ -760,7 +760,7 @@ delay some work (eg: when doing http requests) until the tab is activated. This [GridFieldLazyLoader](api:SilverStripe\Forms\GridField\GridFieldLazyLoader) works. In order to open up the same kind of features to other fields, a custom event is fired on all nodes with the `lazy-loadable` class inside the activated tab panel. -They will receive a `lazyload` event that can be listened to in the following way: +They will receive a `lazyload` event that can be listened to in the following way (you will have to implement your own logic for "loading" the content): ```js el.addEventListener(