mirrors/wagtail
mirrors/wagtail
0
0
Fork 0
mirror of https://github.com/wagtail/wagtail.git synced 2024-11-25 05:02:57 +01:00
Code Issues Releases Wiki Activity

Fix "More" dropdown for bulk actions

Browse Source
This commit is contained in:
Thibaud Colas 2023-06-21 07:49:22 +01:00
parent 65c37b34bc
commit 466e43e571
3 changed files with 22 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/src/controllers/DropdownController.test.js
View File

@ -27,4 +27,15 @@ describe('DropdownController', () => {
expect(toggle.getAttribute('aria-expanded')).toBe('false');
expect(content).toBe(null);
});
it('triggers custom event on activation', () => {
const toggle = document.querySelector('[data-w-dropdown-target="toggle"]');
const mock = jest.fn();
document.addEventListener('w-dropdown:shown', mock);
toggle.dispatchEvent(new Event('click'));
// Leave time for animation to complete.
setTimeout(() => {
expect(mock).toHaveBeenCalled();
}, 500);
});
});

3
client/src/controllers/DropdownController.ts
View File

@ -55,6 +55,9 @@ export class DropdownController extends Controller<HTMLElement> {
hoverTooltipInstance.disable();
}
},
onShown() {
document.dispatchEvent(new CustomEvent('w-dropdown:shown'));
},
onHide() {
if (hoverTooltipInstance) {
hoverTooltipInstance.enable();

33
client/src/includes/bulk-actions.js
View File

@ -10,27 +10,9 @@ const BULK_ACTION_FOOTER = '[data-bulk-action-footer]';
const BULK_ACTION_NUM_OBJECTS = '[data-bulk-action-num-objects]';
const BULK_ACTION_NUM_OBJECTS_IN_LISTING =
'[data-bulk-action-num-objects-in-listing]';
const MORE_ACTIONS_DROPDOWN_BUTTON_SELECTOR = '.actions [data-dropdown]';
let checkedState = {};
/**
* Toggles the 'more' dropdown button in listing pages.
* @param {boolean} show - Determines if the button should be shown or not.
*/
function toggleMoreActionsDropdownBtn(show) {
const moreActionsDropdown = document.querySelector(
MORE_ACTIONS_DROPDOWN_BUTTON_SELECTOR,
);
if (moreActionsDropdown !== null) {
if (show === true) {
moreActionsDropdown.classList.remove('hidden');
} else {
moreActionsDropdown.classList.add('hidden');
}
}
}
/**
* Utility function to get the appropriate string for display in action bar
*/
@ -63,12 +45,9 @@ function onSelectAllChange(e) {
}
});
if (!e.target.checked) {
toggleMoreActionsDropdownBtn(true);
// when deselecting all checkbox, simply hide the footer for smooth transition
checkedState.checkedObjects.clear();
document.querySelector(BULK_ACTION_FOOTER).classList.add('hidden');
} else {
toggleMoreActionsDropdownBtn(false);
}
}
@ -128,15 +107,11 @@ function onSelectIndividualCheckbox(e) {
const numCheckedObjects = checkedState.checkedObjects.size;
if (numCheckedObjects === 0) {
/* when all checkboxes are unchecked */
toggleMoreActionsDropdownBtn(true);
document.querySelector(BULK_ACTION_FOOTER).classList.add('hidden');
document
.querySelectorAll(BULK_ACTION_PAGE_CHECKBOX_INPUT)
.forEach((el) => el.classList.remove('show'));
} else if (numCheckedObjects === 1 && prevLength === 0) {
/* when 1 checkbox is checked for the first time */
toggleMoreActionsDropdownBtn(false);
document.querySelectorAll(BULK_ACTION_PAGE_CHECKBOX_INPUT).forEach((el) => {
el.classList.add('show');
});
@ -243,6 +218,14 @@ function addBulkActionListeners() {
document
.querySelectorAll(`${BULK_ACTION_FOOTER} .bulk-action-btn`)
.forEach((elem) => elem.addEventListener('click', onClickActionButton));
document.addEventListener('w-dropdown:shown', () => {
document
.querySelectorAll(`${BULK_ACTION_FOOTER} .bulk-action-btn`)
.forEach((elem) => {
elem.removeEventListener('click', onClickActionButton);
elem.addEventListener('click', onClickActionButton);
});
});
const selectAllInListingText = document.querySelector(
BULK_ACTION_NUM_OBJECTS_IN_LISTING,
);