{"version":3,"file":"index.js","sources":["../../src/propertyUtils.js","../../src/utils.js","../../src/getOffsetParent.js","../../src/isAncestorFixed.js","../../src/getVisibleRectForElement.js","../../src/adjustForViewport.js","../../src/getRegion.js","../../src/getAlignOffset.js","../../src/getElFuturePos.js","../../src/align/align.js","../../src/align/alignElement.js","../../src/align/alignPoint.js"],"sourcesContent":["let vendorPrefix;\n\nconst jsCssMap = {\n Webkit: '-webkit-',\n Moz: '-moz-',\n // IE did it wrong again ...\n ms: '-ms-',\n O: '-o-',\n};\n\nfunction getVendorPrefix() {\n if (vendorPrefix !== undefined) {\n return vendorPrefix;\n }\n vendorPrefix = '';\n const style = document.createElement('p').style;\n const testProp = 'Transform';\n for (const key in jsCssMap) {\n if (key + testProp in style) {\n vendorPrefix = key;\n }\n }\n return vendorPrefix;\n}\n\nfunction getTransitionName() {\n return getVendorPrefix()\n ? `${getVendorPrefix()}TransitionProperty`\n : 'transitionProperty';\n}\n\nexport function getTransformName() {\n return getVendorPrefix() ? `${getVendorPrefix()}Transform` : 'transform';\n}\n\nexport function setTransitionProperty(node, value) {\n const name = getTransitionName();\n if (name) {\n node.style[name] = value;\n if (name !== 'transitionProperty') {\n node.style.transitionProperty = value;\n }\n }\n}\n\nfunction setTransform(node, value) {\n const name = getTransformName();\n if (name) {\n node.style[name] = value;\n if (name !== 'transform') {\n node.style.transform = value;\n }\n }\n}\n\nexport function getTransitionProperty(node) {\n return node.style.transitionProperty || node.style[getTransitionName()];\n}\n\nexport function getTransformXY(node) {\n const style = window.getComputedStyle(node, null);\n const transform =\n style.getPropertyValue('transform') ||\n style.getPropertyValue(getTransformName());\n if (transform && transform !== 'none') {\n const matrix = transform.replace(/[^0-9\\-.,]/g, '').split(',');\n return {\n x: parseFloat(matrix[12] || matrix[4], 0),\n y: parseFloat(matrix[13] || matrix[5], 0),\n };\n }\n return {\n x: 0,\n y: 0,\n };\n}\n\nconst matrix2d = /matrix\\((.*)\\)/;\nconst matrix3d = /matrix3d\\((.*)\\)/;\n\nexport function setTransformXY(node, xy) {\n const style = window.getComputedStyle(node, null);\n const transform =\n style.getPropertyValue('transform') ||\n style.getPropertyValue(getTransformName());\n if (transform && transform !== 'none') {\n let arr;\n let match2d = transform.match(matrix2d);\n if (match2d) {\n match2d = match2d[1];\n arr = match2d.split(',').map(item => {\n return parseFloat(item, 10);\n });\n arr[4] = xy.x;\n arr[5] = xy.y;\n setTransform(node, `matrix(${arr.join(',')})`);\n } else {\n const match3d = transform.match(matrix3d)[1];\n arr = match3d.split(',').map(item => {\n return parseFloat(item, 10);\n });\n arr[12] = xy.x;\n arr[13] = xy.y;\n setTransform(node, `matrix3d(${arr.join(',')})`);\n }\n } else {\n setTransform(\n node,\n `translateX(${xy.x}px) translateY(${xy.y}px) translateZ(0)`,\n );\n }\n}\n","import {\n setTransitionProperty,\n getTransitionProperty,\n getTransformXY,\n setTransformXY,\n getTransformName,\n} from './propertyUtils';\n\nconst RE_NUM = /[\\-+]?(?:\\d*\\.|)\\d+(?:[eE][\\-+]?\\d+|)/.source;\n\nlet getComputedStyleX;\n\n// https://stackoverflow.com/a/3485654/3040605\nfunction forceRelayout(elem) {\n const originalStyle = elem.style.display;\n elem.style.display = 'none';\n elem.offsetHeight; // eslint-disable-line\n elem.style.display = originalStyle;\n}\n\nfunction css(el, name, v) {\n let value = v;\n if (typeof name === 'object') {\n for (const i in name) {\n if (name.hasOwnProperty(i)) {\n css(el, i, name[i]);\n }\n }\n return undefined;\n }\n if (typeof value !== 'undefined') {\n if (typeof value === 'number') {\n value = `${value}px`;\n }\n el.style[name] = value;\n return undefined;\n }\n return getComputedStyleX(el, name);\n}\n\nfunction getClientPosition(elem) {\n let box;\n let x;\n let y;\n const doc = elem.ownerDocument;\n const body = doc.body;\n const docElem = doc && doc.documentElement;\n // 根据 GBS 最新数据,A-Grade Browsers 都已支持 getBoundingClientRect 方法,不用再考虑传统的实现方式\n box = elem.getBoundingClientRect();\n\n // 注:jQuery 还考虑减去 docElem.clientLeft/clientTop\n // 但测试发现,这样反而会导致当 html 和 body 有边距/边框样式时,获取的值不正确\n // 此外,ie6 会忽略 html 的 margin 值,幸运地是没有谁会去设置 html 的 margin\n\n x = box.left;\n y = box.top;\n\n // In IE, most of the time, 2 extra pixels are added to the top and left\n // due to the implicit 2-pixel inset border. In IE6/7 quirks mode and\n // IE6 standards mode, this border can be overridden by setting the\n // document element's border to zero -- thus, we cannot rely on the\n // offset always being 2 pixels.\n\n // In quirks mode, the offset can be determined by querying the body's\n // clientLeft/clientTop, but in standards mode, it is found by querying\n // the document element's clientLeft/clientTop. Since we already called\n // getClientBoundingRect we have already forced a reflow, so it is not\n // too expensive just to query them all.\n\n // ie 下应该减去窗口的边框吧,毕竟默认 absolute 都是相对窗口定位的\n // 窗口边框标准是设 documentElement ,quirks 时设置 body\n // 最好禁止在 body 和 html 上边框 ,但 ie < 9 html 默认有 2px ,减去\n // 但是非 ie 不可能设置窗口边框,body html 也不是窗口 ,ie 可以通过 html,body 设置\n // 标准 ie 下 docElem.clientTop 就是 border-top\n // ie7 html 即窗口边框改变不了。永远为 2\n // 但标准 firefox/chrome/ie9 下 docElem.clientTop 是窗口边框,即使设了 border-top 也为 0\n\n x -= docElem.clientLeft || body.clientLeft || 0;\n y -= docElem.clientTop || body.clientTop || 0;\n\n return {\n left: x,\n top: y,\n };\n}\n\nfunction getScroll(w, top) {\n let ret = w[`page${top ? 'Y' : 'X'}Offset`];\n const method = `scroll${top ? 'Top' : 'Left'}`;\n if (typeof ret !== 'number') {\n const d = w.document;\n // ie6,7,8 standard mode\n ret = d.documentElement[method];\n if (typeof ret !== 'number') {\n // quirks mode\n ret = d.body[method];\n }\n }\n return ret;\n}\n\nfunction getScrollLeft(w) {\n return getScroll(w);\n}\n\nfunction getScrollTop(w) {\n return getScroll(w, true);\n}\n\nfunction getOffset(el) {\n const pos = getClientPosition(el);\n const doc = el.ownerDocument;\n const w = doc.defaultView || doc.parentWindow;\n pos.left += getScrollLeft(w);\n pos.top += getScrollTop(w);\n return pos;\n}\n\n/**\n * A crude way of determining if an object is a window\n * @member util\n */\nfunction isWindow(obj) {\n // must use == for ie8\n /* eslint eqeqeq:0 */\n return obj !== null && obj !== undefined && obj == obj.window;\n}\n\nfunction getDocument(node) {\n if (isWindow(node)) {\n return node.document;\n }\n if (node.nodeType === 9) {\n return node;\n }\n return node.ownerDocument;\n}\n\nfunction _getComputedStyle(elem, name, cs) {\n let computedStyle = cs;\n let val = '';\n const d = getDocument(elem);\n computedStyle = computedStyle || d.defaultView.getComputedStyle(elem, null);\n\n // https://github.com/kissyteam/kissy/issues/61\n if (computedStyle) {\n val = computedStyle.getPropertyValue(name) || computedStyle[name];\n }\n\n return val;\n}\n\nconst _RE_NUM_NO_PX = new RegExp(`^(${RE_NUM})(?!px)[a-z%]+$`, 'i');\nconst RE_POS = /^(top|right|bottom|left)$/;\nconst CURRENT_STYLE = 'currentStyle';\nconst RUNTIME_STYLE = 'runtimeStyle';\nconst LEFT = 'left';\nconst PX = 'px';\n\nfunction _getComputedStyleIE(elem, name) {\n // currentStyle maybe null\n // http://msdn.microsoft.com/en-us/library/ms535231.aspx\n let ret = elem[CURRENT_STYLE] && elem[CURRENT_STYLE][name];\n\n // 当 width/height 设置为百分比时,通过 pixelLeft 方式转换的 width/height 值\n // 一开始就处理了! CUSTOM_STYLE.height,CUSTOM_STYLE.width ,cssHook 解决@2011-08-19\n // 在 ie 下不对,需要直接用 offset 方式\n // borderWidth 等值也有问题,但考虑到 borderWidth 设为百分比的概率很小,这里就不考虑了\n\n // From the awesome hack by Dean Edwards\n // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291\n // If we're not dealing with a regular pixel number\n // but a number that has a weird ending, we need to convert it to pixels\n // exclude left right for relativity\n if (_RE_NUM_NO_PX.test(ret) && !RE_POS.test(name)) {\n // Remember the original values\n const style = elem.style;\n const left = style[LEFT];\n const rsLeft = elem[RUNTIME_STYLE][LEFT];\n\n // prevent flashing of content\n elem[RUNTIME_STYLE][LEFT] = elem[CURRENT_STYLE][LEFT];\n\n // Put in the new values to get a computed value out\n style[LEFT] = name === 'fontSize' ? '1em' : ret || 0;\n ret = style.pixelLeft + PX;\n\n // Revert the changed values\n style[LEFT] = left;\n\n elem[RUNTIME_STYLE][LEFT] = rsLeft;\n }\n return ret === '' ? 'auto' : ret;\n}\n\nif (typeof window !== 'undefined') {\n getComputedStyleX = window.getComputedStyle\n ? _getComputedStyle\n : _getComputedStyleIE;\n}\n\nfunction getOffsetDirection(dir, option) {\n if (dir === 'left') {\n return option.useCssRight ? 'right' : dir;\n }\n return option.useCssBottom ? 'bottom' : dir;\n}\n\nfunction oppositeOffsetDirection(dir) {\n if (dir === 'left') {\n return 'right';\n } else if (dir === 'right') {\n return 'left';\n } else if (dir === 'top') {\n return 'bottom';\n } else if (dir === 'bottom') {\n return 'top';\n }\n}\n\n// 设置 elem 相对 elem.ownerDocument 的坐标\nfunction setLeftTop(elem, offset, option) {\n // set position first, in-case top/left are set even on static elem\n if (css(elem, 'position') === 'static') {\n elem.style.position = 'relative';\n }\n let presetH = -999;\n let presetV = -999;\n const horizontalProperty = getOffsetDirection('left', option);\n const verticalProperty = getOffsetDirection('top', option);\n const oppositeHorizontalProperty = oppositeOffsetDirection(\n horizontalProperty,\n );\n const oppositeVerticalProperty = oppositeOffsetDirection(verticalProperty);\n\n if (horizontalProperty !== 'left') {\n presetH = 999;\n }\n\n if (verticalProperty !== 'top') {\n presetV = 999;\n }\n let originalTransition = '';\n const originalOffset = getOffset(elem);\n if ('left' in offset || 'top' in offset) {\n originalTransition = getTransitionProperty(elem) || '';\n setTransitionProperty(elem, 'none');\n }\n if ('left' in offset) {\n elem.style[oppositeHorizontalProperty] = '';\n elem.style[horizontalProperty] = `${presetH}px`;\n }\n if ('top' in offset) {\n elem.style[oppositeVerticalProperty] = '';\n elem.style[verticalProperty] = `${presetV}px`;\n }\n // force relayout\n forceRelayout(elem);\n const old = getOffset(elem);\n const originalStyle = {};\n for (const key in offset) {\n if (offset.hasOwnProperty(key)) {\n const dir = getOffsetDirection(key, option);\n const preset = key === 'left' ? presetH : presetV;\n const off = originalOffset[key] - old[key];\n if (dir === key) {\n originalStyle[dir] = preset + off;\n } else {\n originalStyle[dir] = preset - off;\n }\n }\n }\n css(elem, originalStyle);\n // force relayout\n forceRelayout(elem);\n if ('left' in offset || 'top' in offset) {\n setTransitionProperty(elem, originalTransition);\n }\n const ret = {};\n for (const key in offset) {\n if (offset.hasOwnProperty(key)) {\n const dir = getOffsetDirection(key, option);\n const off = offset[key] - originalOffset[key];\n if (key === dir) {\n ret[dir] = originalStyle[dir] + off;\n } else {\n ret[dir] = originalStyle[dir] - off;\n }\n }\n }\n css(elem, ret);\n}\n\nfunction setTransform(elem, offset) {\n const originalOffset = getOffset(elem);\n const originalXY = getTransformXY(elem);\n const resultXY = { x: originalXY.x, y: originalXY.y };\n if ('left' in offset) {\n resultXY.x = originalXY.x + offset.left - originalOffset.left;\n }\n if ('top' in offset) {\n resultXY.y = originalXY.y + offset.top - originalOffset.top;\n }\n setTransformXY(elem, resultXY);\n}\n\nfunction setOffset(elem, offset, option) {\n if (option.ignoreShake) {\n const oriOffset = getOffset(elem);\n\n const oLeft = oriOffset.left.toFixed(0);\n const oTop = oriOffset.top.toFixed(0);\n const tLeft = offset.left.toFixed(0);\n const tTop = offset.top.toFixed(0);\n\n if (oLeft === tLeft && oTop === tTop) {\n return;\n }\n }\n\n if (option.useCssRight || option.useCssBottom) {\n setLeftTop(elem, offset, option);\n } else if (\n option.useCssTransform &&\n getTransformName() in document.body.style\n ) {\n setTransform(elem, offset, option);\n } else {\n setLeftTop(elem, offset, option);\n }\n}\n\nfunction each(arr, fn) {\n for (let i = 0; i < arr.length; i++) {\n fn(arr[i]);\n }\n}\n\nfunction isBorderBoxFn(elem) {\n return getComputedStyleX(elem, 'boxSizing') === 'border-box';\n}\n\nconst BOX_MODELS = ['margin', 'border', 'padding'];\nconst CONTENT_INDEX = -1;\nconst PADDING_INDEX = 2;\nconst BORDER_INDEX = 1;\nconst MARGIN_INDEX = 0;\n\nfunction swap(elem, options, callback) {\n const old = {};\n const style = elem.style;\n let name;\n\n // Remember the old values, and insert the new ones\n for (name in options) {\n if (options.hasOwnProperty(name)) {\n old[name] = style[name];\n style[name] = options[name];\n }\n }\n\n callback.call(elem);\n\n // Revert the old values\n for (name in options) {\n if (options.hasOwnProperty(name)) {\n style[name] = old[name];\n }\n }\n}\n\nfunction getPBMWidth(elem, props, which) {\n let value = 0;\n let prop;\n let j;\n let i;\n for (j = 0; j < props.length; j++) {\n prop = props[j];\n if (prop) {\n for (i = 0; i < which.length; i++) {\n let cssProp;\n if (prop === 'border') {\n cssProp = `${prop}${which[i]}Width`;\n } else {\n cssProp = prop + which[i];\n }\n value += parseFloat(getComputedStyleX(elem, cssProp)) || 0;\n }\n }\n }\n return value;\n}\n\nconst domUtils = {\n getParent(element) {\n let parent = element;\n do {\n if (parent.nodeType === 11 && parent.host) {\n parent = parent.host;\n } else {\n parent = parent.parentNode;\n }\n } while (parent && parent.nodeType !== 1 && parent.nodeType !== 9);\n return parent;\n },\n};\n\neach(['Width', 'Height'], name => {\n domUtils[`doc${name}`] = refWin => {\n const d = refWin.document;\n return Math.max(\n // firefox chrome documentElement.scrollHeight< body.scrollHeight\n // ie standard mode : documentElement.scrollHeight> body.scrollHeight\n d.documentElement[`scroll${name}`],\n // quirks : documentElement.scrollHeight 最大等于可视窗口多一点?\n d.body[`scroll${name}`],\n domUtils[`viewport${name}`](d),\n );\n };\n\n domUtils[`viewport${name}`] = win => {\n // pc browser includes scrollbar in window.innerWidth\n const prop = `client${name}`;\n const doc = win.document;\n const body = doc.body;\n const documentElement = doc.documentElement;\n const documentElementProp = documentElement[prop];\n // 标准模式取 documentElement\n // backcompat 取 body\n return (\n (doc.compatMode === 'CSS1Compat' && documentElementProp) ||\n (body && body[prop]) ||\n documentElementProp\n );\n };\n});\n\n/*\n 得到元素的大小信息\n @param elem\n @param name\n @param {String} [extra] 'padding' : (css width) + padding\n 'border' : (css width) + padding + border\n 'margin' : (css width) + padding + border + margin\n */\nfunction getWH(elem, name, ex) {\n let extra = ex;\n if (isWindow(elem)) {\n return name === 'width'\n ? domUtils.viewportWidth(elem)\n : domUtils.viewportHeight(elem);\n } else if (elem.nodeType === 9) {\n return name === 'width'\n ? domUtils.docWidth(elem)\n : domUtils.docHeight(elem);\n }\n const which = name === 'width' ? ['Left', 'Right'] : ['Top', 'Bottom'];\n let borderBoxValue =\n name === 'width'\n ? elem.getBoundingClientRect().width\n : elem.getBoundingClientRect().height;\n const computedStyle = getComputedStyleX(elem);\n const isBorderBox = isBorderBoxFn(elem, computedStyle);\n let cssBoxValue = 0;\n if (\n borderBoxValue === null ||\n borderBoxValue === undefined ||\n borderBoxValue <= 0\n ) {\n borderBoxValue = undefined;\n // Fall back to computed then un computed css if necessary\n cssBoxValue = getComputedStyleX(elem, name);\n if (\n cssBoxValue === null ||\n cssBoxValue === undefined ||\n Number(cssBoxValue) < 0\n ) {\n cssBoxValue = elem.style[name] || 0;\n }\n // Normalize '', auto, and prepare for extra\n cssBoxValue = parseFloat(cssBoxValue) || 0;\n }\n if (extra === undefined) {\n extra = isBorderBox ? BORDER_INDEX : CONTENT_INDEX;\n }\n const borderBoxValueOrIsBorderBox =\n borderBoxValue !== undefined || isBorderBox;\n const val = borderBoxValue || cssBoxValue;\n if (extra === CONTENT_INDEX) {\n if (borderBoxValueOrIsBorderBox) {\n return (\n val - getPBMWidth(elem, ['border', 'padding'], which, computedStyle)\n );\n }\n return cssBoxValue;\n } else if (borderBoxValueOrIsBorderBox) {\n if (extra === BORDER_INDEX) {\n return val;\n }\n return (\n val +\n (extra === PADDING_INDEX\n ? -getPBMWidth(elem, ['border'], which, computedStyle)\n : getPBMWidth(elem, ['margin'], which, computedStyle))\n );\n }\n return (\n cssBoxValue +\n getPBMWidth(elem, BOX_MODELS.slice(extra), which, computedStyle)\n );\n}\n\nconst cssShow = {\n position: 'absolute',\n visibility: 'hidden',\n display: 'block',\n};\n\n// fix #119 : https://github.com/kissyteam/kissy/issues/119\nfunction getWHIgnoreDisplay(...args) {\n let val;\n const elem = args[0];\n // in case elem is window\n // elem.offsetWidth === undefined\n if (elem.offsetWidth !== 0) {\n val = getWH.apply(undefined, args);\n } else {\n swap(elem, cssShow, () => {\n val = getWH.apply(undefined, args);\n });\n }\n return val;\n}\n\neach(['width', 'height'], name => {\n const first = name.charAt(0).toUpperCase() + name.slice(1);\n domUtils[`outer${first}`] = (el, includeMargin) => {\n return (\n el &&\n getWHIgnoreDisplay(el, name, includeMargin ? MARGIN_INDEX : BORDER_INDEX)\n );\n };\n const which = name === 'width' ? ['Left', 'Right'] : ['Top', 'Bottom'];\n\n domUtils[name] = (elem, v) => {\n let val = v;\n if (val !== undefined) {\n if (elem) {\n const computedStyle = getComputedStyleX(elem);\n const isBorderBox = isBorderBoxFn(elem);\n if (isBorderBox) {\n val += getPBMWidth(elem, ['padding', 'border'], which, computedStyle);\n }\n return css(elem, name, val);\n }\n return undefined;\n }\n return elem && getWHIgnoreDisplay(elem, name, CONTENT_INDEX);\n };\n});\n\nfunction mix(to, from) {\n for (const i in from) {\n if (from.hasOwnProperty(i)) {\n to[i] = from[i];\n }\n }\n return to;\n}\n\nconst utils = {\n getWindow(node) {\n if (node && node.document && node.setTimeout) {\n return node;\n }\n const doc = node.ownerDocument || node;\n return doc.defaultView || doc.parentWindow;\n },\n getDocument,\n offset(el, value, option) {\n if (typeof value !== 'undefined') {\n setOffset(el, value, option || {});\n } else {\n return getOffset(el);\n }\n },\n isWindow,\n each,\n css,\n clone(obj) {\n let i;\n const ret = {};\n for (i in obj) {\n if (obj.hasOwnProperty(i)) {\n ret[i] = obj[i];\n }\n }\n const overflow = obj.overflow;\n if (overflow) {\n for (i in obj) {\n if (obj.hasOwnProperty(i)) {\n ret.overflow[i] = obj.overflow[i];\n }\n }\n }\n return ret;\n },\n mix,\n getWindowScrollLeft(w) {\n return getScrollLeft(w);\n },\n getWindowScrollTop(w) {\n return getScrollTop(w);\n },\n merge(...args) {\n const ret = {};\n for (let i = 0; i < args.length; i++) {\n utils.mix(ret, args[i]);\n }\n return ret;\n },\n viewportWidth: 0,\n viewportHeight: 0,\n};\n\nmix(utils, domUtils);\n\nexport default utils;\n","import utils from './utils';\n\n/**\n * 得到会导致元素显示不全的祖先元素\n */\nconst { getParent } = utils;\n\nfunction getOffsetParent(element) {\n if (utils.isWindow(element) || element.nodeType === 9) {\n return null;\n }\n // ie 这个也不是完全可行\n /*\n