Slideouts

[brandonkelly]

This PR replaces the element editor HUDs with slideouts:

Element editor slideouts offer the following benefits:

• They’re bigger. ([Feature request] Ability to resize HUD modal for new entries #4129, Remove meta class from HUD #6587, Expanded HUD view #6647)
• They render the element’s full field layout form, including tabs and custom UI elements. (Consider showing UI elements/tabs in live preview / HUD modals #6622, Expanded HUD view #6647)
• They have nested sidebars that contain meta fields (Slug, Post Date, etc.) and metadata. ([FR] Include slug to entry HUD edit window #6247, Please add a way to view the full location of an asset in an assets-field #6918)
• They contain a link to open the element’s dedicated edit page in a new browser tab. (Feature Request: Add button to open currently edited element in inline element editor in a new tab #3448, Making Element Link Plugin part of core? #5857)
• They’re more mobile friendly.

Slideouts can also be nested, and parent slideouts will automatically scoot over to the left, making it easier to stay oriented.

On mobile, slideouts will take up the full viewport:

Invoking an element editor is identical to before:

const editor = Craft.createElementEditor('craft\\elements\\Entry', $myElement, settings);

Slideouts have been implemented as their own concept, and can be used for other applications as well. Working with them is similar to modals and HUDs:

const slideout = new Craft.Slideout(contents, settings);

The following settings are available:

• containerElement – The type of element that should be used for the container (default is div).
• containerAttributes – Any attributes that should be added to the container element.
• autoOpen – Whether the slideout should be opened automatically on instantiation (default is true).
• closeOnEsc – Whether the slideout should be closed when the Esc key is pressed (default is true).
• closeOnShadeClick – Whether the slideout should be closed when the surrounding area is clicked on (default is true).

Finally, the PR adds two new helper JS methods:

• Craft.trapFocusWithin() – Prevents focus from leaving a given container via the Tab key.
• Craft.setFocusWithin() – Focuses on the first focusable element within a given container.

Resolves #3448
Resolves #3930
Resolves #4102
Resolves #6587
Resolves #4129
Resolves #4245
Resolves #6647
Resolves #6247
Resolves #5857
Resolves #6918
Resolves #7811

[Mosnar]

@brandonkelly I tried this out locally and it works and feels really great and refined. The only thing I noticed was that the slide-out animation missed a few frames and doesn't feel super smooth. Have you looked at adding will-change: left; to the slide-out panel right before it opens?

[brandonkelly]

@Mosnar Just added that. Doesn’t seem like it’s making any difference for me, but YMMV. 8a1939e