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
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
Tailwind has a similarly-named 'pulse' animation that behaves differently:
it makes the element fade in and out.
Meanwhile, it has a 'ping' animation that behaves similarly to our 'pulse'
animation: https://tailwindcss.com/docs/animation
Follow the Tailwind names to avoid confusion. In the future, we might
want to implement a similar 'pulse' animation. Or, perhaps we can reuse
Tailwind's animations as-is.
This was added in f322e9d868, when the
snippets listing view was briefly redesigned to put the "Edit", "Delete"
etc. actions in the same line as the title instead of in a new line.
With the universal listings design, all listing actions are put inside a
three-dot dropdown menu.
This style is no longer used anywhere in Wagtail, especially now that
the HistoryView has been reimplemented using the dropdown menu for the
actions.
- Fixes #11629
- Relates to clean up done as part of #11629 which removed a lot of styling for footer actions which appeared to be unused.
- Re-add some base styling to support the ability for basic customisations where buttons are added within the `extra_footer_actions` block.
Include the ability to trigger the dialog from the sidebar
Include base styling and unit tests
Fixes ##11711
Relates to larger work for keyboard shortcuts in #3949
In the new designs, listings other than the page listings should show
the complete label for the main header button.
The page listing only shows the icon because much of the space is taken
by the side panel toggles.
The page listing's header button hasn't been refactored to use the
HeaderButton class, hence there is no changes to the page listings code
in this commit.
This uses a custom header template that extends the slim_header.html
We could do this without the custom header template, but this would mean
the slim_header.html will accept yet another variable (extra_form_fields),
which we are trying to avoid to prevent it from accepting so many variables
like header.html.
This is especially since this "extra fields" block is only needed for the
images listing (at least for the foreseeable future).
