SelectorFind.descendant(comp.element(), '[role="tabpanel"]').each((tabview) => {
Css.set(tabview, 'visibility', 'hidden');
// Determine the maximum heights of each tab
comp.getSystem().getByDom(tabview).toOption().each((tabviewComp) => {
const heights = measureHeights(allTabs, tabview, tabviewComp);
// Calculate the maximum tab height and store it
const maxTabHeightOpt = getMaxHeight(heights);
maxTabHeight.set(maxTabHeightOpt);
});
// Set an initial height, based on the current size
updateTabviewHeight(comp.element(), tabview, maxTabHeight);
// Show the tabs
Css.remove(tabview, 'visibility');
showTab(allTabs, comp);
// Use a delay here and recalculate the height, as we need all the components attached
// to be able to properly calculate the max height
Delay.requestAnimationFrame(() => {
updateTabviewHeight(comp.element(), tabview, maxTabHeight);
});
});
const setEditorSize = (elm) => {
// Set height and width if they were given, though height only applies to iframe mode
const DOM = DOMUtils.DOM;
const baseWidth = editor.getParam('width', DOM.getStyle(elm, 'width'));
const baseHeight = getHeightSetting(editor);
const minWidth = getMinWidthSetting(editor);
const minHeight = getMinHeightSetting(editor);
const parsedWidth = Utils.parseToInt(baseWidth).bind((w) => {
return Utils.numToPx(minWidth.map((mw) => Math.max(w, mw)));
}).getOr(Utils.numToPx(baseWidth));
const parsedHeight = Utils.parseToInt(baseHeight).bind((h) => {
return minHeight.map((mh) => Math.max(h, mh));
}).getOr(baseHeight);
const stringWidth = Utils.numToPx(parsedWidth);
if (Css.isValidValue('div', 'width', stringWidth)) {
Css.set(outerContainer.element(), 'width', stringWidth);
}
if (!editor.inline) {
const stringHeight = Utils.numToPx(parsedHeight);
if (Css.isValidValue('div', 'height', stringHeight)) {
Css.set(outerContainer.element(), 'height', stringHeight);
} else {
Css.set(outerContainer.element(), 'height', '200px');
}
}
return parsedHeight;
};
return SelectorFind.descendant(Util.getBody(editor), 'table[data-mce-id="__mce"]').map((table) => {
if (isPixelsForced(editor)) {
Css.set(table, 'width', Css.get(table, 'width'));
}
Attr.remove(table, 'data-mce-id');
fireEvents(editor, table);
selectFirstCellInTable(editor, table);
return table.dom();
}).getOr(null);
const refresh = function () {
if (isActive) {
const newToolbarHeight = Height.get(toolbar);
const dropupHeight = Height.get(dropup);
const newHeight = deriveViewportHeight(viewport, newToolbarHeight, dropupHeight);
Attr.set(viewport, yFixedData, newToolbarHeight + 'px');
Css.set(viewport, 'height', newHeight + 'px');
Css.set(dropup, 'bottom', -(newToolbarHeight + newHeight + dropupHeight) + 'px');
DeviceZones.updatePadding(contentBody, viewport, dropup);
}
};
const toggleThrobber = (comp: AlloyComponent, state: boolean, providerBackstage: UiFactoryBackstageProviders) => {
const element = comp.element();
if (state === true) {
Replacing.set(comp, [ renderSpinner(providerBackstage) ]);
Css.remove(element, 'display');
Attr.remove(element, 'aria-hidden');
} else {
Replacing.set(comp, [ ]);
Css.set(element, 'display', 'none');
Attr.set(element, 'aria-hidden', 'true');
}
};
lastAnchor.get().each((anchor) => {
const elem = lastElement.get().getOr(editor.selection.getNode());
const nodeBounds = elem.getBoundingClientRect();
const contentAreaBounds = editor.contentAreaContainer.getBoundingClientRect();
const aboveEditor = nodeBounds.bottom < 0;
const belowEditor = nodeBounds.top > contentAreaBounds.height;
if (aboveEditor || belowEditor) {
Css.set(contextbar.element(), 'display', 'none');
} else {
Css.remove(contextbar.element(), 'display');
Positioning.positionWithin(sink, anchor, contextbar, getBoxElement());
}
});
const extractAdvancedStyles = (dom, elm) => {
const rgbToHex = (value: string) => Strings.startsWith(value, 'rgb') ? dom.toHex(value) : value;
const borderStyle = Css.getRaw(Element.fromDom(elm), 'border-style').getOr('');
const borderColor = Css.getRaw(Element.fromDom(elm), 'border-color').map(rgbToHex).getOr('');
const bgColor = Css.getRaw(Element.fromDom(elm), 'background-color').map(rgbToHex).getOr('');
return {
borderstyle: borderStyle,
bordercolor: borderColor,
backgroundcolor: bgColor
};
};
const takeoverViewport = function (toolbarHeight, height, viewport) {
const oldViewportStyle = Attr.get(viewport, 'style');
Scrollable.register(viewport);
Css.setAll(viewport, {
position: 'absolute',
// I think there a class that does this overflow scrolling touch part
height: height + 'px',
width: '100%',
top: toolbarHeight + 'px'
});
Attr.set(viewport, yFixedData, toolbarHeight + 'px');
Attr.set(viewport, yScrollingData, 'true');
Attr.set(viewport, yFixedProperty, 'top');
const restore = function () {
Scrollable.deregister(viewport);
Attr.set(viewport, 'style', oldViewportStyle || '');
Attr.remove(viewport, yFixedData);
Attr.remove(viewport, yScrollingData);
Attr.remove(viewport, yFixedProperty);
};
return {
restore
};
};
AlloyEvents.runOnSource<SugarEvent>(NativeEvents.transitionend(), (comp, se) => {
InlineView.getContent(comp).each((c) => {
// Css.remove(c.element(), 'opacity');
});
Class.remove(comp.element(), resizingClass);
Css.remove(comp.element(), 'width');
}),
const updateScrollingFixed = function (element, winY, offsetY) {
const destTop = winY + offsetY;
const oldProp = Css.getRaw(element, 'top').getOr(offsetY);
// While we are changing top, aim to scroll by the same amount to keep the cursor in the same location.
const delta = destTop - parseInt(oldProp, 10);
const destScroll = element.dom().scrollTop + delta;
return IosScrolling.moveScrollAndTop(element, destScroll, destTop);
};
