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.
		
		
		
		
		
			
		
			
				
					180 lines
				
				4.7 KiB
			
		
		
			
		
	
	
					180 lines
				
				4.7 KiB
			| 
											3 years ago
										 | (function (global, factory) { | ||
|  |   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : | ||
|  |   typeof define === 'function' && define.amd ? define(['exports'], factory) : | ||
|  |   (global = global || self, factory(global.cssBoxModel = {})); | ||
|  | }(this, function (exports) { 'use strict'; | ||
|  | 
 | ||
|  |   var prefix = 'Invariant failed'; | ||
|  | 
 | ||
|  |   function invariant(condition, message) { | ||
|  |     if (condition) { | ||
|  |       return; | ||
|  |     } | ||
|  | 
 | ||
|  |     { | ||
|  |       throw new Error(prefix + ": " + (message || '')); | ||
|  |     } | ||
|  |   } | ||
|  | 
 | ||
|  |   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) ?  invariant(false, "Could not parse value [raw: " + raw + ", without suffix: " + value + "]")  : 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); | ||
|  |   }; | ||
|  | 
 | ||
|  |   exports.calculateBox = calculateBox; | ||
|  |   exports.createBox = createBox; | ||
|  |   exports.expand = expand; | ||
|  |   exports.getBox = getBox; | ||
|  |   exports.getRect = getRect; | ||
|  |   exports.offset = offset; | ||
|  |   exports.shrink = shrink; | ||
|  |   exports.withScroll = withScroll; | ||
|  | 
 | ||
|  |   Object.defineProperty(exports, '__esModule', { value: true }); | ||
|  | 
 | ||
|  | })); |