kopia lustrzana https://github.com/wagtail/wagtail
Adopt w-messages (CloneController) in unsaved changes warning
- Replace global util window.updateFooterSaveWarning with the w-messages usage - Remove window.updateFooterSaveWarning usage in core.js & move 'delay before clearing' time delay to the Stimulus value - Fix JSDoc usage in `enableDirtyFormCheck` - Add aria-live="polite" so message updates can be advised to screen readers - Add release considerations and for `window.updateFooterSaveWarning` removal - Closes #10091pull/10848/head
LB Johnston
LB (Ben Johnston)
rodzic
e4fdf6da2a
commit
b96d2d7faa
|
|
@ -9,7 +9,7 @@ window.Stimulus = initStimulus({ definitions: coreControllerDefinitions });
|
|||
|
||||
window.escapeHtml = escapeHtml;
|
||||
|
||||
/*
|
||||
/**
|
||||
* Enables a "dirty form check", prompting the user if they are navigating away
|
||||
* from a page with unsaved changes, as well as optionally controlling other
|
||||
* behaviour via a callback
|
||||
|
|
@ -27,20 +27,29 @@ window.escapeHtml = escapeHtml;
|
|||
* - callback - A function to be run when the dirty status of the form, or the comments
|
||||
* system (if using) changes, taking formDirty, commentsDirty as arguments
|
||||
*/
|
||||
|
||||
function enableDirtyFormCheck(formSelector, options) {
|
||||
const $form = $(formSelector);
|
||||
const confirmationMessage = options.confirmationMessage || ' ';
|
||||
const alwaysDirty = options.alwaysDirty || false;
|
||||
const commentApp = options.commentApp || null;
|
||||
const callback = options.callback || null;
|
||||
let initialData = null;
|
||||
let formSubmitted = false;
|
||||
|
||||
const updateCallback = (formDirty, commentsDirty) => {
|
||||
if (callback) {
|
||||
callback(formDirty, commentsDirty);
|
||||
if (!formDirty && !commentsDirty) {
|
||||
document.dispatchEvent(new CustomEvent('w-unsaved:clear'));
|
||||
return;
|
||||
}
|
||||
|
||||
const [type] = [
|
||||
formDirty && commentsDirty && 'all',
|
||||
commentsDirty && 'comments',
|
||||
formDirty && 'edits',
|
||||
].filter(Boolean);
|
||||
|
||||
document.dispatchEvent(
|
||||
new CustomEvent('w-unsaved:add', { detail: { type } }),
|
||||
);
|
||||
};
|
||||
|
||||
$form.on('submit', () => {
|
||||
|
|
|
|||
|
|
@ -27,40 +27,3 @@ window.initKeyboardShortcuts = initKeyboardShortcuts;
|
|||
$(() => {
|
||||
initKeyboardShortcuts();
|
||||
});
|
||||
|
||||
let updateFooterTextTimeout = -1;
|
||||
window.updateFooterSaveWarning = (formDirty, commentsDirty) => {
|
||||
const warningContainer = $('[data-unsaved-warning]');
|
||||
const warnings = warningContainer.find('[data-unsaved-type]');
|
||||
const anyDirty = formDirty || commentsDirty;
|
||||
const typeVisibility = {
|
||||
all: formDirty && commentsDirty,
|
||||
any: anyDirty,
|
||||
comments: commentsDirty && !formDirty,
|
||||
edits: formDirty && !commentsDirty,
|
||||
};
|
||||
|
||||
let hiding = false;
|
||||
if (anyDirty) {
|
||||
warningContainer.removeClass('footer__container--hidden');
|
||||
} else {
|
||||
if (!warningContainer.hasClass('footer__container--hidden')) {
|
||||
hiding = true;
|
||||
}
|
||||
warningContainer.addClass('footer__container--hidden');
|
||||
}
|
||||
clearTimeout(updateFooterTextTimeout);
|
||||
const updateWarnings = () => {
|
||||
warnings.each((_, warning) => {
|
||||
const visible = typeVisibility[warning.dataset.unsavedType];
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
warning.hidden = !visible;
|
||||
});
|
||||
};
|
||||
if (hiding) {
|
||||
// If hiding, we want to keep the text as-is before it disappears
|
||||
updateFooterTextTimeout = setTimeout(updateWarnings, 1050);
|
||||
} else {
|
||||
updateWarnings();
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -118,3 +118,25 @@ data-w-breadcrumbs-open-icon-class="icon-breadcrumb-expand"
|
|||
data-w-breadcrumbs-opened-content-class="w-max-w-4xl"
|
||||
data-w-breadcrumbs-peek-target-value="header"
|
||||
```
|
||||
|
||||
### `window.updateFooterSaveWarning` global util removed
|
||||
|
||||
The undocumented global util `window.updateFooterSaveWarning` has been removed, this is part of the footer 'unsaved' messages toggling behaviour on page forms.
|
||||
This behaviour has now moved to a Stimulus controller and leverages DOM events instead. Calling this function will do nothing and in a future release will throw an error.
|
||||
|
||||
You can implement roughly the equivalent functionality with this JavaScript function, however, this will not be guaranteed to work in future releases.
|
||||
|
||||
```js
|
||||
window.updateFooterSaveWarning = (formDirty, commentsDirty) => {
|
||||
if (!formDirty && !commentsDirty) {
|
||||
document.dispatchEvent(new CustomEvent('w-unsaved:clear'));
|
||||
} else {
|
||||
const [type] = [
|
||||
formDirty && commentsDirty && 'all',
|
||||
commentsDirty && 'comments',
|
||||
formDirty && 'edits',
|
||||
].filter(Boolean);
|
||||
document.dispatchEvent(new CustomEvent('w-unsaved:add', { detail: { type } }));
|
||||
}
|
||||
};
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,11 +1,33 @@
|
|||
{% load wagtailadmin_tags i18n %}
|
||||
<li class="footer__container footer__container--hidden" data-unsaved-warning>
|
||||
<div hidden data-unsaved-type="any" class="footer__save-warning footer__emphasise-span-tags">
|
||||
<div>
|
||||
<b hidden data-unsaved-type="edits">{% blocktrans trimmed %}You have <span>unsaved edits</span>{% endblocktrans %}</b>
|
||||
<b hidden data-unsaved-type="comments">{% blocktrans trimmed %}You have <span>unsaved comments</span>{% endblocktrans %}</b>
|
||||
<b hidden data-unsaved-type="all">{% blocktrans trimmed %}You have <span>unsaved edits</span> and <span>comments</span>{% endblocktrans %}</b>
|
||||
<p>{% trans 'Save the page before leaving' %}</p>
|
||||
</div>
|
||||
</div>
|
||||
<li
|
||||
class="footer__container footer__container--hidden"
|
||||
aria-live="polite"
|
||||
data-controller="w-messages"
|
||||
data-action="w-unsaved:add@document->w-messages#add w-unsaved:clear@document->w-messages#clear"
|
||||
data-w-messages-clear-delay-value="1024"
|
||||
data-w-messages-clear-param="true"
|
||||
data-w-messages-hide-class="footer__container--hidden"
|
||||
>
|
||||
<div class="footer__save-warning footer__emphasise-span-tags" data-w-messages-target="container"></div>
|
||||
{% block message_templates %}
|
||||
{% trans 'Save the page before leaving' as generic_save_page_message %}
|
||||
<template data-w-messages-target="template" data-type="edits">
|
||||
<div>
|
||||
<b>{% blocktrans trimmed %}You have <span>unsaved edits</span>{% endblocktrans %}</b>
|
||||
<p>{{ generic_save_page_message }}</p>
|
||||
</div>
|
||||
</template>
|
||||
<template data-w-messages-target="template" data-type="comments">
|
||||
<div>
|
||||
<b>{% blocktrans trimmed %}You have <span>unsaved comments</span>{% endblocktrans %}</b>
|
||||
<p>{{ generic_save_page_message }}</p>
|
||||
</div>
|
||||
</template>
|
||||
<template data-w-messages-target="template" data-type="all">
|
||||
<div>
|
||||
<b>{% blocktrans trimmed %}You have <span>unsaved edits</span> and <span>comments</span>{% endblocktrans %}</b>
|
||||
<p>{{ generic_save_page_message }}</p>
|
||||
</div>
|
||||
</template>
|
||||
{% endblock %}
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -82,8 +82,7 @@
|
|||
{% if has_unsaved_changes %}
|
||||
alwaysDirty: true,
|
||||
{% endif %}
|
||||
commentApp: window.comments.commentApp,
|
||||
callback: window.updateFooterSaveWarning
|
||||
commentApp: window.comments.commentApp
|
||||
}
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -82,8 +82,7 @@
|
|||
alwaysDirty: true,
|
||||
{% endif %}
|
||||
|
||||
commentApp: window.comments.commentApp,
|
||||
callback: window.updateFooterSaveWarning
|
||||
commentApp: window.comments.commentApp
|
||||
}
|
||||
);
|
||||
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue