Now that the preview sizes are customizable, we can't rely on the
default being the mobile size when we want to force the size of the
preview unavailable screen.
- Avoid using a window global and inline scripts to declare the current bulk action's item time
- Deprecate the usage of `window.wagtailConfig.BULK_ACTION_ITEM_TYPE` with a release note and code comment so that it can be removed in a future release
- Update bulk actions footer template to accept a `item_type` arg, adding this to the DOM element for access within the JavaScript
- Allow a fallback on the model name for core models (e.g. page)
- Also ensure that `{{ block.super }}` is consistently added at the top of the `{% block extra_js %}` (as it is with most usage)
- Relates to #9771 and supports a future migration for bulk actions towards Stimulus
- Relates to ongoing work for CSP compliance #1288
The first step on cleaning up our client-side metadata configuration. With this approach, the values are computed in the `wagtail_config` template tag and passed into the template using Django's json_script.
Then, it's parsed on the client-side and set as `global.wagtailConfig` to retain compatibility with existing code that rely on `window.wagtailConfig`.
This allows us to remove our existing approach of putting metadata values in a `<script>` tag using Django templates directly in the HTML, without changing too much of the existing code, and allowing new code to import the values as `WAGTAIL_CONFIG` from `wagtailConfig.js` instead of using `window.wagtailConfig`. It also means we remove the inline script tag from the core admin base template.
Refactor wagtailConfig util
- Avoid extraneous named exports when they are included in the named WAGTAIL_CONFIG
- Simplify locale map generation
- Avoid reading from global, instead export util that can be used as a global
- Update unit tests for more robust checks
On Chrome, using scrollIntoView() while elements are still being
rendered does not work as expected (i.e. it would intermittently stop
midway).
We start by using getElementById instead of selecting :target, as the
latter doesn't always yield result until the 'load' event is fired. This
does not fix the issue.
The initAnchoredPanels() function is already being called in a 'load'
event handler, so this is as late as it can be, even after the
StreamField blocks have been initialized. However, clearly this doesn't
seem to be enough.
The only solution that seems to work is to use setTimeout, and that does
not even consistently work if the delay isn't high enough for the
elements to render. For now, use 100ms as it seems to be enough in most
cases.
This never really had any effect. Since the new tabs and slim header
designs in v3.0, window.scrollY always equals 0 because the scroll
container is a content element rather than the window itself.
You can verify this by opening the page editor, scrolling down a bit,
and checking window.scrollY on the browser console. It will print 0,
and if you call window.scrollTo(0, 0) it does not do anything.
Even if it did work, we don't want this behaviour either, because this
would interfere with the functionality of scrolling into a panel that
is selected by the URL anchor (#).
Move all bind() to connect()
Add renderUrl value to use different URLs for sending vs rendering preview data
Add docstrings for PreviewController properties
Rename cleared property to ready and dispatch w-preview:ready
Add events to PreviewController update lifecycle
Use zero interval delay to disable preview auto update
Rearrange PreviewController methods to better follow the update flow
Ensure only one preview iframe has the w-preview-iframe ID at a given time
This doesn't really affect how it functions, but it's semantically more correct
Ensure runContentChecks function does not crash in tests
Only clear stale data if there is a valid stale preview available
Fix preview on Firefox by not removing the only iframe
Reorder targets and values alphabetically and add JSDoc for events
Introduce w-preview__proxy class for invisible elements in preview panel
Test loading the last device size from localStorage
Ensure selected device size class is applied on connect
Add test for using ResizeObserver in PreviewController
Add tests for default PreviewController behaviour
Add test for opening preview in a new tab
Add test for handling a request error when opening preview in a new tab
Add test for showing the spinner when loading the preview
Add test for enforcing rendered preview width when there are errors
Split PreviewController tests into separate describe blocks
Use fake timers for all PreviewController tests
Add more detailed assertions in initializeOpenedPanel
Add assertions for setTimeout in PreviewController test
Add test for auto-update cycle
Add test for disabling auto update on panel close
Add tests for manually updating the preview
Add tests for switching preview modes
Only add the mode select element for these tests, to ensure that the
preview panel works even without it (e.g. for models that only define a
single preview mode)
Add tests for PreviewController.disconnect and for requiring the url value
Add test for assuming the first size input is the default
Add ResizeObserver test for preview controller
Reuse url variable in PreviewController tests
Initialise preview panel as a Stimulus PreviewController
Fix TypeScript issues in PreviewController
Use Stimulus targets for preview device size inputs
Use Stimulus target for preview panel new tab button
Use Stimulus target for preview panel loading spinner
Use Stimulus target for preview panel refresh button
Use Stimulus target for preview panel mode select
Use Stimulus target for preview panel iframe
Also rename the id to w-preview-iframe to follow our new conventions for
singleton elements
Rely on Stimulus to replace the iframe target
Because we copy all the attributes from the old iframe to the new one,
this means that the new iframe will also become a target. When we remove
the old iframe, the target is disconnected, and subsequent references to
this.iframeTarget should point to the new one.
Access the preview panel's parent side panel element via this.element.parentElement
Bind preview device size inputs using Stimulus data-action
Extract PreviewController.observePanelSize() method
Extract PreviewController.restoreLastSavedPreferences() method
Use Stimulus value for preview panel url
Use Stimulus value for preview panel pending update state
Move edit form and spinner timeout references into instance variables
Extract PreviewController.finishUpdate() method
Extract PreviewController.reloadIframe() method
Extract PreviewController.clearPreviewData() and setPreviewData() methods
Replace preview panel refresh button target with data-action
Extract openPreviewInNewTab method and use it via data-action
Do not close the preview tab if the data is not valid
Use Stimulus values for preview panel auto update config
Extract PreviewController.initAutoUpdate() method
Extract handlePreviewModeChange method and use it via data-action
Use Stimulus classes for preview panel unavailable and has-errors CSS classes
Use Stimulus class for preview panel selected input size
This removes the reliance of having a predefined set of classes for each
device name, making it easier to add support for custom sizes later.
The outline styles have also been updated to make use of focus-visible
when available.
Use hidden attribute for hiding preview panel spinner
Replace PreviewController isUpdating value with an updatePromise instance variable
Extract PreviewController.hasChanges() method
Extract PreviewController.checkAndUpdatePreview() method
Add default values for PreviewController values
Use ProgressController outlet for preview panel refresh button
This allows the use of the button-longrunning handling for the loading state.
Also, turn the button into an icon-only button as there might not be enough space when the panel is resized to the smallest size
Use cloneNode() instead of manually copying the attributes
Extract PreviewController.replaceIframe() and use it as the iframe's action
Extract PreviewController.sidePanelContainer instance attribute
Extract PreviewController.checksSidePanel instance attribute
Extract PreviewController.updateInterval instance attribute
Clean up PreviewController event listeners on disconnect
Extract preview panel device localStorage key into PreviewController Stimulus value
Extract preview panel's width CSS property names into Stimulus values
Disconnect preview panel ResizeObserver on controller disconnect
Use an instance variable for tracking preview availability
If the event is dispatched in the loop, then the show event may be
dispatched before the hide event is dispatched. For example, if you're
switching from the checks panel to the preview panel, as the preview
panel is ordered before the checks panel in the DOM.
This could cause an issue with the preview panel code, where we listen
for the show event to activate the auto update, and listen to the hide
event to deactivate it. We're listening to both the preview and checks
side panels.
Without this fix, the preview auto-update will get deactivated upon
switching from the checks panel to the preview panel, as the hide event
is dispatched after the show event.
Without typing Promise and Promise.resolve with R, it defaults to
unknown, so the R generic type can't be used.
Also, the debounced function's args should take the generic A parameter
instead of redefining it as any[].
