@atlaskit/renderer
Version:
Renderer component
77 lines (74 loc) • 2.69 kB
JavaScript
import { TABLE_ACTION, ACTION_SUBJECT, EVENT_TYPE, MODE } from '@atlaskit/editor-common/analytics';
import { getBreakpointKey } from '@atlaskit/editor-common/utils/analytics';
export const getWidthInfoPayload = renderer => {
const tablesInfo = [];
const tableWrappers = renderer.querySelectorAll('.pm-table-wrapper');
// only send the event if there are tables on the page
if (tableWrappers.length === 0) {
return undefined;
}
tableWrappers.forEach(tableWrapper => {
const table = tableWrapper.querySelector(':scope > table');
if (table) {
const isNestedTable = Boolean(table.closest('td, th'));
tablesInfo.push({
tableWidth: table.scrollWidth,
hasScrollbar: tableWrapper.clientWidth < table.scrollWidth,
isNestedTable
});
}
});
const maxTableWidth = Math.max(...tablesInfo.map(table => table.tableWidth));
const editorWidth = renderer.scrollWidth;
return {
action: TABLE_ACTION.TABLE_WIDTH_INFO,
actionSubject: ACTION_SUBJECT.TABLE,
attributes: {
editorWidth,
editorWidthBreakpoint: getBreakpointKey(editorWidth),
tableWidthInfo: tablesInfo,
maxTableWidthBreakpoint: getBreakpointKey(maxTableWidth),
hasTableWiderThanEditor: maxTableWidth > editorWidth,
hasTableWithScrollbar: tablesInfo.some(table => table.hasScrollbar),
mode: MODE.RENDERER
},
eventType: EVENT_TYPE.OPERATIONAL
};
};
export const getHeightInfoPayload = renderer => {
const tablesInfo = [];
const tableWrappers = renderer.querySelectorAll('.pm-table-wrapper');
// only send the event if there are tables on the page
if (tableWrappers.length === 0) {
return undefined;
}
tableWrappers.forEach(tableWrapper => {
const table = tableWrapper.querySelector(':scope > table');
if (table) {
const isNestedTable = Boolean(table.closest('td, th'));
tablesInfo.push({
tableHeight: table.scrollHeight,
isNestedTable
});
}
});
const maxTableHeight = Math.max(...tablesInfo.map(table => table.tableHeight));
/** NOTE: Renderer is not scrollable, so this height represents the height of the content */
const rendererClientHeight = renderer.clientHeight;
const viewportHeight = window.innerHeight;
if (!viewportHeight) {
return undefined;
}
return {
action: TABLE_ACTION.TABLE_RENDERER_HEIGHT_INFO,
actionSubject: ACTION_SUBJECT.TABLE,
attributes: {
viewportHeight,
rendererHeight: rendererClientHeight,
maxTableHeight,
maxTableToViewportHeightRatio: maxTableHeight / viewportHeight,
tableHeightInfo: tablesInfo
},
eventType: EVENT_TYPE.OPERATIONAL
};
};