You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
152 lines
3.8 KiB
152 lines
3.8 KiB
import invariant from 'tiny-invariant'; |
|
|
|
var getRect = function getRect(_ref) { |
|
var top = _ref.top, |
|
right = _ref.right, |
|
bottom = _ref.bottom, |
|
left = _ref.left; |
|
var width = right - left; |
|
var height = bottom - top; |
|
var rect = { |
|
top: top, |
|
right: right, |
|
bottom: bottom, |
|
left: left, |
|
width: width, |
|
height: height, |
|
x: left, |
|
y: top, |
|
center: { |
|
x: (right + left) / 2, |
|
y: (bottom + top) / 2 |
|
} |
|
}; |
|
return rect; |
|
}; |
|
var expand = function expand(target, expandBy) { |
|
return { |
|
top: target.top - expandBy.top, |
|
left: target.left - expandBy.left, |
|
bottom: target.bottom + expandBy.bottom, |
|
right: target.right + expandBy.right |
|
}; |
|
}; |
|
var shrink = function shrink(target, shrinkBy) { |
|
return { |
|
top: target.top + shrinkBy.top, |
|
left: target.left + shrinkBy.left, |
|
bottom: target.bottom - shrinkBy.bottom, |
|
right: target.right - shrinkBy.right |
|
}; |
|
}; |
|
|
|
var shift = function shift(target, shiftBy) { |
|
return { |
|
top: target.top + shiftBy.y, |
|
left: target.left + shiftBy.x, |
|
bottom: target.bottom + shiftBy.y, |
|
right: target.right + shiftBy.x |
|
}; |
|
}; |
|
|
|
var noSpacing = { |
|
top: 0, |
|
right: 0, |
|
bottom: 0, |
|
left: 0 |
|
}; |
|
var createBox = function createBox(_ref2) { |
|
var borderBox = _ref2.borderBox, |
|
_ref2$margin = _ref2.margin, |
|
margin = _ref2$margin === void 0 ? noSpacing : _ref2$margin, |
|
_ref2$border = _ref2.border, |
|
border = _ref2$border === void 0 ? noSpacing : _ref2$border, |
|
_ref2$padding = _ref2.padding, |
|
padding = _ref2$padding === void 0 ? noSpacing : _ref2$padding; |
|
var marginBox = getRect(expand(borderBox, margin)); |
|
var paddingBox = getRect(shrink(borderBox, border)); |
|
var contentBox = getRect(shrink(paddingBox, padding)); |
|
return { |
|
marginBox: marginBox, |
|
borderBox: getRect(borderBox), |
|
paddingBox: paddingBox, |
|
contentBox: contentBox, |
|
margin: margin, |
|
border: border, |
|
padding: padding |
|
}; |
|
}; |
|
|
|
var parse = function parse(raw) { |
|
var value = raw.slice(0, -2); |
|
var suffix = raw.slice(-2); |
|
|
|
if (suffix !== 'px') { |
|
return 0; |
|
} |
|
|
|
var result = Number(value); |
|
!!isNaN(result) ? process.env.NODE_ENV !== "production" ? invariant(false, "Could not parse value [raw: " + raw + ", without suffix: " + value + "]") : invariant(false) : void 0; |
|
return result; |
|
}; |
|
|
|
var getWindowScroll = function getWindowScroll() { |
|
return { |
|
x: window.pageXOffset, |
|
y: window.pageYOffset |
|
}; |
|
}; |
|
|
|
var offset = function offset(original, change) { |
|
var borderBox = original.borderBox, |
|
border = original.border, |
|
margin = original.margin, |
|
padding = original.padding; |
|
var shifted = shift(borderBox, change); |
|
return createBox({ |
|
borderBox: shifted, |
|
border: border, |
|
margin: margin, |
|
padding: padding |
|
}); |
|
}; |
|
var withScroll = function withScroll(original, scroll) { |
|
if (scroll === void 0) { |
|
scroll = getWindowScroll(); |
|
} |
|
|
|
return offset(original, scroll); |
|
}; |
|
var calculateBox = function calculateBox(borderBox, styles) { |
|
var margin = { |
|
top: parse(styles.marginTop), |
|
right: parse(styles.marginRight), |
|
bottom: parse(styles.marginBottom), |
|
left: parse(styles.marginLeft) |
|
}; |
|
var padding = { |
|
top: parse(styles.paddingTop), |
|
right: parse(styles.paddingRight), |
|
bottom: parse(styles.paddingBottom), |
|
left: parse(styles.paddingLeft) |
|
}; |
|
var border = { |
|
top: parse(styles.borderTopWidth), |
|
right: parse(styles.borderRightWidth), |
|
bottom: parse(styles.borderBottomWidth), |
|
left: parse(styles.borderLeftWidth) |
|
}; |
|
return createBox({ |
|
borderBox: borderBox, |
|
margin: margin, |
|
padding: padding, |
|
border: border |
|
}); |
|
}; |
|
var getBox = function getBox(el) { |
|
var borderBox = el.getBoundingClientRect(); |
|
var styles = window.getComputedStyle(el); |
|
return calculateBox(borderBox, styles); |
|
}; |
|
|
|
export { calculateBox, createBox, expand, getBox, getRect, offset, shrink, withScroll };
|
|
|