@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
177 lines (170 loc) • 7.89 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.calcBreakoutWidth = exports.breakoutResizableNodes = exports.breakoutConsts = exports.absoluteBreakoutWidth = void 0;
exports.calcBreakoutWidthPx = calcBreakoutWidthPx;
exports.calcWideWidth = exports.calcBreakoutWithCustomWidth = void 0;
exports.calculateBreakoutStyles = calculateBreakoutStyles;
exports.getTitle = exports.getNextBreakoutMode = exports.getBreakoutResizableNodeTypes = void 0;
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _messages = _interopRequireDefault(require("../messages"));
var _BaseTheme = require("../ui/BaseTheme");
var _WidthProvider = require("../ui/WidthProvider");
var _dom = require("./dom");
var breakoutResizableNodes = exports.breakoutResizableNodes = ['expand', 'layoutSection', 'codeBlock', 'syncBlock', 'bodiedSyncBlock'];
var getBreakoutResizableNodeTypes = exports.getBreakoutResizableNodeTypes = function getBreakoutResizableNodeTypes(schema) {
var _schema$nodes = schema.nodes,
expand = _schema$nodes.expand,
codeBlock = _schema$nodes.codeBlock,
layoutSection = _schema$nodes.layoutSection,
syncBlock = _schema$nodes.syncBlock,
bodiedSyncBlock = _schema$nodes.bodiedSyncBlock;
return new Set([expand, codeBlock, layoutSection, syncBlock, bodiedSyncBlock]);
};
/**
* Variables required to construct a context for breakout ssr inline script.
*
* TODO: Clean this up after: https://product-fabric.atlassian.net/browse/ED-8942
*
*/
var breakoutConsts = exports.breakoutConsts = {
padding: _editorSharedStyles.akEditorBreakoutPadding,
defaultLayoutWidth: _editorSharedStyles.akEditorDefaultLayoutWidth,
wideScaleRatio: _editorSharedStyles.breakoutWideScaleRatio,
fullWidthLayoutWidth: _editorSharedStyles.akEditorFullWidthLayoutWidth,
wideLayoutWidth: _editorSharedStyles.akEditorWideLayoutWidth,
mapBreakpointToLayoutMaxWidth: _BaseTheme.mapBreakpointToLayoutMaxWidth,
getBreakpoint: _WidthProvider.getBreakpoint,
/**
* This function can return percentage value or px value depending upon the inputs
*/
calcBreakoutWidth: function calcBreakoutWidth(breakoutConsts) {
return function (layout, containerWidth, padding) {
var effectiveFullWidth = containerWidth - (padding !== null && padding !== void 0 ? padding : breakoutConsts.padding);
switch (layout) {
case 'full-width':
return "".concat(Math.min(effectiveFullWidth, breakoutConsts.fullWidthLayoutWidth), "px");
case 'wide':
if (effectiveFullWidth <= 0) {
return '100%';
}
var wideWidth = breakoutConsts.calcWideWidth(breakoutConsts)(containerWidth, undefined, undefined, padding);
if (wideWidth.endsWith('%')) {
return "".concat(Math.min(effectiveFullWidth, breakoutConsts.fullWidthLayoutWidth), "px");
}
return wideWidth;
default:
return '100%';
}
};
},
calcBreakoutWithCustomWidth: function calcBreakoutWithCustomWidth(breakoutConsts) {
return function (mode, width, editorContainerWidth) {
if (width !== null && width > 0) {
var effectiveFullWidth = editorContainerWidth - breakoutConsts.padding;
// if below 0 then expect we're rendering in SSR
return "".concat(Math.min(width, effectiveFullWidth), "px");
}
return breakoutConsts.calcBreakoutWidth(breakoutConsts)(mode, editorContainerWidth);
};
},
calcLineLength: function calcLineLength(breakoutConsts) {
return function () {
return breakoutConsts.defaultLayoutWidth;
};
},
calcWideWidth: function calcWideWidth(breakoutConsts) {
return function () {
var containerWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : breakoutConsts.defaultLayoutWidth;
var maxWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Infinity;
var fallback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '100%';
var padding = arguments.length > 3 ? arguments[3] : undefined;
var effectiveFullWidth = containerWidth - (padding !== null && padding !== void 0 ? padding : breakoutConsts.padding);
var layoutMaxWidth = breakoutConsts.mapBreakpointToLayoutMaxWidth(breakoutConsts.getBreakpoint(containerWidth));
var wideWidth = Math.min(Math.ceil(layoutMaxWidth * breakoutConsts.wideScaleRatio), effectiveFullWidth);
return layoutMaxWidth > wideWidth ? fallback : "".concat(Math.min(maxWidth, wideWidth), "px");
};
}
};
var absoluteBreakoutWidth = exports.absoluteBreakoutWidth = function absoluteBreakoutWidth(layout, containerWidth) {
var breakoutWidth = breakoutConsts.calcBreakoutWidth(breakoutConsts)(layout, containerWidth);
// If it's percent, map to max layout size
if (breakoutWidth.endsWith('%')) {
switch (layout) {
case 'full-width':
return _editorSharedStyles.akEditorFullWidthLayoutWidth;
case 'wide':
return _editorSharedStyles.akEditorWideLayoutWidth;
default:
return breakoutConsts.mapBreakpointToLayoutMaxWidth(breakoutConsts.getBreakpoint(containerWidth));
}
}
return parseInt(breakoutWidth, 10);
};
var calcWideWidth = exports.calcWideWidth = breakoutConsts.calcWideWidth(breakoutConsts);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var calcBreakoutWidth = exports.calcBreakoutWidth = breakoutConsts.calcBreakoutWidth(breakoutConsts);
var calcBreakoutWithCustomWidth = exports.calcBreakoutWithCustomWidth = breakoutConsts.calcBreakoutWithCustomWidth(breakoutConsts);
function calculateBreakoutStyles(_ref) {
var mode = _ref.mode,
widthStateLineLength = _ref.widthStateLineLength,
widthStateWidth = _ref.widthStateWidth;
var breakoutWidth = calcBreakoutWidth(mode, widthStateWidth);
var breakoutWidthPx = (0, _dom.parsePx)(breakoutWidth);
if (!widthStateLineLength) {
// lineLength is not normally undefined when this is run for,
// consumers but can be in SSR, initial render or test (jsdom)
// environments.
//
// this approach doesn't work well with position: fixed, so
// it breaks things like sticky headers.
//
// It can also cause bluriness for some child content (such as iframes)
return {
type: 'line-length-unknown',
width: breakoutWidth,
minWidth: breakoutWidthPx,
display: 'flex',
justifyContent: 'center',
transform: 'none',
transition: "min-width 0.5s ".concat(_editorSharedStyles.akEditorSwoopCubicBezier)
};
}
// NOTE
// At time of writing -- when toggling between full-width and
// full-page appearance modes. There is a slight delay before
// the widthState is updated.
// During this period -- the marginLeftPx will be incorrect.
// const marginLeftPx = -(breakoutWidthPx - widthStateLineLength) / 2;
return {
type: 'line-length-known',
width: breakoutWidth,
minWidth: breakoutWidthPx,
transition: "min-width 0.5s ".concat(_editorSharedStyles.akEditorSwoopCubicBezier),
transform: "translateX(-50%)",
marginLeft: "50%"
};
}
function calcBreakoutWidthPx(mode, widthStateWidth, padding) {
return (0, _dom.parsePx)(calcBreakoutWidth(mode, widthStateWidth, padding));
}
var getNextBreakoutMode = exports.getNextBreakoutMode = function getNextBreakoutMode(currentMode) {
if (currentMode === 'full-width') {
return 'center';
} else if (currentMode === 'wide') {
return 'full-width';
}
return 'wide';
};
var getTitle = exports.getTitle = function getTitle(layout) {
switch (layout) {
case 'full-width':
return _messages.default.layoutFixedWidth;
case 'wide':
return _messages.default.layoutFullWidth;
default:
return _messages.default.layoutWide;
}
};