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

Remove Tippy implementation migrated to Stimulus

Browse Source
This commit is contained in:
Thibaud Colas 2023-06-15 17:03:30 +01:00
parent 7516b55e83
commit 3b3d4ed981
3 changed files with 3 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/entrypoints/admin/wagtailadmin.js
View File

@ -1,5 +1,5 @@
import { Icon, Portal } from '../..';
import { initModernDropdown, initTooltips } from '../../includes/initTooltips';
import { initTooltips } from '../../includes/initTooltips';
import { initTabs } from '../../includes/tabs';
import { dialog } from '../../includes/dialog';
import initCollapsibleBreadcrumbs from '../../includes/breadcrumbs';
@ -21,7 +21,6 @@ window.wagtail.components = {
*/
document.addEventListener('DOMContentLoaded', () => {
initTooltips();
initModernDropdown();
initTabs();
dialog();
initCollapsibleBreadcrumbs();

40
client/src/includes/initTooltips.test.js
View File

@ -1,5 +1,5 @@
import * as tippy from 'tippy.js';
import { initTooltips, initModernDropdown } from './initTooltips';
import { initTooltips } from './initTooltips';
jest.spyOn(tippy, 'default');
@ -14,41 +14,3 @@ describe('initTooltips', () => {
});
});
});
describe('initModernDropdown', () => {
it('should not call Tippy if there is no element with [data-button-with-dropdown]', () => {
expect(tippy.default).not.toHaveBeenCalled();
initModernDropdown();
expect(tippy.default).not.toHaveBeenCalled();
});
it('should call the Tippy util with the [data-button-with-dropdown-toggle] attribute', () => {
const html = `
<div data-button-with-dropdown>
<button id="button" data-button-with-dropdown-toggle>...</button>
<div id="content" data-button-with-dropdown-content>
Content
</div>
</div>`;
document.body.innerHTML = html;
const content = document.getElementById('content');
expect(tippy.default).not.toHaveBeenCalled();
initModernDropdown();
expect(tippy.default).toHaveBeenLastCalledWith(
document.getElementById('button'),
expect.objectContaining({
content,
trigger: 'click',
interactive: true,
theme: 'dropdown',
placement: 'bottom',
}),
);
});
});

69
client/src/includes/initTooltips.ts
View File

@ -1,4 +1,4 @@
import tippy, { Content, Props, Instance } from 'tippy.js';
import tippy, { Instance } from 'tippy.js';
/**
* Hides tooltip when escape key is pressed
@ -86,70 +86,3 @@ export function initTooltips() {
plugins: [hideTooltipOnEsc],
});
}
/**
* Actions Dropdown initialisation using the Tippy library.
* @example
* <div data-button-with-dropdown>
* <button data-button-with-dropdown-toggle>...</button>
* <div data-button-with-dropdown-content></div>
* </div>
*/
export function initModernDropdown() {
const containers = document.querySelectorAll('[data-button-with-dropdown]');
containers.forEach((container) => {
const content = container.querySelector(
'[data-button-with-dropdown-content]',
);
const toggle: HTMLElement | null = container.querySelector(
'[data-button-with-dropdown-toggle]',
);
// Adding data-hover-tooltip-content="Tooltip Text" to the toggle element will give you a tooltip on hover as well
const hoverTooltip = toggle?.dataset.hoverTooltipContent;
let hoverTooltipInstance: Instance;
if (toggle) {
if (content) {
content.classList.remove('w-hidden');
}
if (hoverTooltip) {
hoverTooltipInstance = tippy(toggle, {
content: hoverTooltip,
placement: 'bottom',
plugins: [hideTooltipOnEsc],
});
}
/**
* Default Tippy Options
*/
const tippyOptions: Partial<Props> = {
content: content as Content,
trigger: 'click',
interactive: true,
theme: 'dropdown',
placement: 'bottom',
plugins: [
hideTooltipOnEsc,
hideTooltipOnBreadcrumbExpandAndCollapse,
rotateToggleIcon,
],
onShow() {
if (hoverTooltipInstance) {
hoverTooltipInstance.disable();
}
},
onHide() {
if (hoverTooltipInstance) {
hoverTooltipInstance.enable();
}
},
};
tippy(toggle, tippyOptions);
}
});
}