File size: 2,752 Bytes
da96562 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | /*!
* Matomo - free/libre analytics platform
*
* @link https://matomo.org
* @license https://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
*/
type MediaQueryChangeListener = () => void;
interface ContentTableRegistration {
listener: MediaQueryChangeListener;
mediaQuery: MediaQueryList;
}
const MOBILE_BREAKPOINT = '(max-width: 767px)';
const registrations = new WeakMap<HTMLElement, ContentTableRegistration>();
function ensureOverflowWrapper(el: HTMLElement): void {
const parent = el.parentElement;
if (!parent || parent.classList.contains('contentTableWrapper')) {
return;
}
const wrapper = document.createElement('div');
wrapper.className = 'contentTableWrapper';
parent.insertBefore(wrapper, el);
wrapper.appendChild(el);
}
function removeOverflowWrapper(el: HTMLElement): void {
const parent = el.parentElement;
if (!parent || !parent.classList.contains('contentTableWrapper')) {
return;
}
const wrapperParent = parent.parentElement;
if (!wrapperParent) {
return;
}
wrapperParent.insertBefore(el, parent);
parent.remove();
}
function shouldWrapTable(mediaQuery?: MediaQueryList): boolean {
return (mediaQuery || window.matchMedia(MOBILE_BREAKPOINT)).matches;
}
function addMediaQueryListener(
mediaQuery: MediaQueryList,
listener: MediaQueryChangeListener,
): void {
mediaQuery.addEventListener('change', listener);
}
function removeMediaQueryListener(
mediaQuery: MediaQueryList,
listener: MediaQueryChangeListener,
): void {
mediaQuery.removeEventListener('change', listener);
}
function applyResponsiveContentTable(el: HTMLElement, mediaQuery?: MediaQueryList): void {
el.classList.add('card', 'card-table', 'entityTable');
if (shouldWrapTable(mediaQuery)) {
ensureOverflowWrapper(el);
} else {
removeOverflowWrapper(el);
}
}
export function unregisterResponsiveContentTable(el: HTMLElement): void {
const registration = registrations.get(el);
if (registration) {
removeMediaQueryListener(registration.mediaQuery, registration.listener);
registrations.delete(el);
}
removeOverflowWrapper(el);
}
export function registerResponsiveContentTable(el: HTMLElement): void {
const existingRegistration = registrations.get(el);
if (existingRegistration) {
applyResponsiveContentTable(el, existingRegistration.mediaQuery);
return;
}
const mediaQuery = window.matchMedia(MOBILE_BREAKPOINT);
const listener = () => {
if (!el.isConnected) {
unregisterResponsiveContentTable(el);
return;
}
applyResponsiveContentTable(el, mediaQuery);
};
addMediaQueryListener(mediaQuery, listener);
registrations.set(el, { mediaQuery, listener });
applyResponsiveContentTable(el, mediaQuery);
}
|