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.
		
		
		
		
		
			
		
			
				
					153 lines
				
				3.8 KiB
			
		
		
			
		
	
	
					153 lines
				
				3.8 KiB
			| 
											3 years ago
										 | 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 }; |