Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

document new lazy loading feature #10361

Closed
wants to merge 5 commits into from
Closed
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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.
lekoala marked this conversation as resolved.
Show resolved Hide resolved

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:
lekoala marked this conversation as resolved.
Show resolved Hide resolved

```js
el.addEventListener(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we use pure javascript event handlers anywhere else in the documentation.... can you please change this to a jquery (and entwine if possible) reference to match the rest of the docs?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

$(el).one('lazyload') should achieve the same results, but since this is expected to be used in third party modules, i don't see the issue not using jquery or entwine. Actually, that should be real goal: provide platform agnostic support so that it works with anything, no ?
I'm not even sure how that would work with entwine (i don't think it's possible to listen to a custom event only once ?)

Copy link
Member

@GuySartorelli GuySartorelli Jul 11, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've been thinking about this - I think the main issue is that if you just drop this pure js into LeftAndMain.extra_requirements_javascript you won't even be able to find the element you want to add a listener to unless it's in an entwine onmatch (except for when you directly load the form the tab is in via URL). So we probably should add that context to the example. And by that point you're already in a jquery context anyway.

"lazyload",
lekoala marked this conversation as resolved.
Show resolved Hide resolved
(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)
Expand Down