</> My Projects
A gallery of some of my most interesting projects. Look for , click those projects for more information!
\n
\n */\n // element.offsetParent does the right thing in ie7 and below. Return parent with layout!\n // In other browsers it only includes elements with position absolute, relative or\n // fixed, not elements with overflow set to auto or scroll.\n // if (UA.ie && ieMode < 8) {\n // return element.offsetParent;\n // }\n // 统一的 offsetParent 方法\n const doc = utils.getDocument(element);\n const body = doc.body;\n let parent;\n let positionStyle = utils.css(element, 'position');\n const skipStatic = positionStyle === 'fixed' || positionStyle === 'absolute';\n\n if (!skipStatic) {\n return element.nodeName.toLowerCase() === 'html'\n ? null\n : getParent(element);\n }\n\n for (\n parent = getParent(element);\n parent && parent !== body && parent.nodeType !== 9;\n parent = getParent(parent)\n ) {\n positionStyle = utils.css(parent, 'position');\n if (positionStyle !== 'static') {\n return parent;\n }\n }\n return null;\n}\n\nexport default getOffsetParent;\n","import utils from './utils';\n\nconst { getParent } = utils;\n\nexport default function isAncestorFixed(element) {\n if (utils.isWindow(element) || element.nodeType === 9) {\n return false;\n }\n\n const doc = utils.getDocument(element);\n const body = doc.body;\n let parent = null;\n for (\n parent = getParent(element);\n parent && parent !== body;\n parent = getParent(parent)\n ) {\n const positionStyle = utils.css(parent, 'position');\n if (positionStyle === 'fixed') {\n return true;\n }\n }\n return false;\n}\n","import utils from './utils';\nimport getOffsetParent from './getOffsetParent';\nimport isAncestorFixed from './isAncestorFixed';\n\n/**\n * 获得元素的显示部分的区域\n */\nfunction getVisibleRectForElement(element, alwaysByViewport) {\n const visibleRect = {\n left: 0,\n right: Infinity,\n top: 0,\n bottom: Infinity,\n };\n let el = getOffsetParent(element);\n const doc = utils.getDocument(element);\n const win = doc.defaultView || doc.parentWindow;\n const body = doc.body;\n const documentElement = doc.documentElement;\n\n // Determine the size of the visible rect by climbing the dom accounting for\n // all scrollable containers.\n while (el) {\n // clientWidth is zero for inline block elements in ie.\n if (\n (navigator.userAgent.indexOf('MSIE') === -1 || el.clientWidth !== 0) &&\n // body may have overflow set on it, yet we still get the entire\n // viewport. In some browsers, el.offsetParent may be\n // document.documentElement, so check for that too.\n (el !== body &&\n el !== documentElement &&\n utils.css(el, 'overflow') !== 'visible')\n ) {\n const pos = utils.offset(el);\n // add border\n pos.left += el.clientLeft;\n pos.top += el.clientTop;\n visibleRect.top = Math.max(visibleRect.top, pos.top);\n visibleRect.right = Math.min(\n visibleRect.right,\n // consider area without scrollBar\n pos.left + el.clientWidth,\n );\n visibleRect.bottom = Math.min(\n visibleRect.bottom,\n pos.top + el.clientHeight,\n );\n visibleRect.left = Math.max(visibleRect.left, pos.left);\n } else if (el === body || el === documentElement) {\n break;\n }\n el = getOffsetParent(el);\n }\n\n // Set element position to fixed\n // make sure absolute element itself don't affect it's visible area\n // https://github.com/ant-design/ant-design/issues/7601\n let originalPosition = null;\n if (!utils.isWindow(element) && element.nodeType !== 9) {\n originalPosition = element.style.position;\n const position = utils.css(element, 'position');\n if (position === 'absolute') {\n element.style.position = 'fixed';\n }\n }\n\n const scrollX = utils.getWindowScrollLeft(win);\n const scrollY = utils.getWindowScrollTop(win);\n const viewportWidth = utils.viewportWidth(win);\n const viewportHeight = utils.viewportHeight(win);\n let documentWidth = documentElement.scrollWidth;\n let documentHeight = documentElement.scrollHeight;\n\n // scrollXXX on html is sync with body which means overflow: hidden on body gets wrong scrollXXX.\n // We should cut this ourself.\n const bodyStyle = window.getComputedStyle(body);\n if (bodyStyle.overflowX === 'hidden') {\n documentWidth = win.innerWidth;\n }\n if (bodyStyle.overflowY === 'hidden') {\n documentHeight = win.innerHeight;\n }\n\n // Reset element position after calculate the visible area\n if (element.style) {\n element.style.position = originalPosition;\n }\n\n if (alwaysByViewport || isAncestorFixed(element)) {\n // Clip by viewport's size.\n visibleRect.left = Math.max(visibleRect.left, scrollX);\n visibleRect.top = Math.max(visibleRect.top, scrollY);\n visibleRect.right = Math.min(visibleRect.right, scrollX + viewportWidth);\n visibleRect.bottom = Math.min(visibleRect.bottom, scrollY + viewportHeight);\n } else {\n // Clip by document's size.\n const maxVisibleWidth = Math.max(documentWidth, scrollX + viewportWidth);\n visibleRect.right = Math.min(visibleRect.right, maxVisibleWidth);\n\n const maxVisibleHeight = Math.max(documentHeight, scrollY + viewportHeight);\n visibleRect.bottom = Math.min(visibleRect.bottom, maxVisibleHeight);\n }\n\n return visibleRect.top >= 0 &&\n visibleRect.left >= 0 &&\n visibleRect.bottom > visibleRect.top &&\n visibleRect.right > visibleRect.left\n ? visibleRect\n : null;\n}\n\nexport default getVisibleRectForElement;\n","import utils from './utils';\n\nfunction getRegion(node) {\n let offset;\n let w;\n let h;\n if (!utils.isWindow(node) && node.nodeType !== 9) {\n offset = utils.offset(node);\n w = utils.outerWidth(node);\n h = utils.outerHeight(node);\n } else {\n const win = utils.getWindow(node);\n offset = {\n left: utils.getWindowScrollLeft(win),\n top: utils.getWindowScrollTop(win),\n };\n w = utils.viewportWidth(win);\n h = utils.viewportHeight(win);\n }\n offset.width = w;\n offset.height = h;\n return offset;\n}\n\nexport default getRegion;\n","/**\n * 获取 node 上的 align 对齐点 相对于页面的坐标\n */\n\nfunction getAlignOffset(region, align) {\n const V = align.charAt(0);\n const H = align.charAt(1);\n const w = region.width;\n const h = region.height;\n\n let x = region.left;\n let y = region.top;\n\n if (V === 'c') {\n y += h / 2;\n } else if (V === 'b') {\n y += h;\n }\n\n if (H === 'c') {\n x += w / 2;\n } else if (H === 'r') {\n x += w;\n }\n\n return {\n left: x,\n top: y,\n };\n}\n\nexport default getAlignOffset;\n","import getAlignOffset from './getAlignOffset';\n\nfunction getElFuturePos(elRegion, refNodeRegion, points, offset, targetOffset) {\n const p1 = getAlignOffset(refNodeRegion, points[1]);\n const p2 = getAlignOffset(elRegion, points[0]);\n const diff = [p2.left - p1.left, p2.top - p1.top];\n\n return {\n left: Math.round(elRegion.left - diff[0] + offset[0] - targetOffset[0]),\n top: Math.round(elRegion.top - diff[1] + offset[1] - targetOffset[1]),\n };\n}\n\nexport default getElFuturePos;\n","/**\n * align dom node flexibly\n * @author yiminghe@gmail.com\n */\n\nimport utils from '../utils';\nimport getVisibleRectForElement from '../getVisibleRectForElement';\nimport adjustForViewport from '../adjustForViewport';\nimport getRegion from '../getRegion';\nimport getElFuturePos from '../getElFuturePos';\n\n// http://yiminghe.iteye.com/blog/1124720\n\nfunction isFailX(elFuturePos, elRegion, visibleRect) {\n return (\n elFuturePos.left < visibleRect.left ||\n elFuturePos.left + elRegion.width > visibleRect.right\n );\n}\n\nfunction isFailY(elFuturePos, elRegion, visibleRect) {\n return (\n elFuturePos.top < visibleRect.top ||\n elFuturePos.top + elRegion.height > visibleRect.bottom\n );\n}\n\nfunction isCompleteFailX(elFuturePos, elRegion, visibleRect) {\n return (\n elFuturePos.left > visibleRect.right ||\n elFuturePos.left + elRegion.width < visibleRect.left\n );\n}\n\nfunction isCompleteFailY(elFuturePos, elRegion, visibleRect) {\n return (\n elFuturePos.top > visibleRect.bottom ||\n elFuturePos.top + elRegion.height < visibleRect.top\n );\n}\n\nfunction flip(points, reg, map) {\n const ret = [];\n utils.each(points, p => {\n ret.push(\n p.replace(reg, m => {\n return map[m];\n }),\n );\n });\n return ret;\n}\n\nfunction flipOffset(offset, index) {\n offset[index] = -offset[index];\n return offset;\n}\n\nfunction convertOffset(str, offsetLen) {\n let n;\n if (/%$/.test(str)) {\n n = (parseInt(str.substring(0, str.length - 1), 10) / 100) * offsetLen;\n } else {\n n = parseInt(str, 10);\n }\n return n || 0;\n}\n\nfunction normalizeOffset(offset, el) {\n offset[0] = convertOffset(offset[0], el.width);\n offset[1] = convertOffset(offset[1], el.height);\n}\n\n/**\n * @param el\n * @param tgtRegion 参照节点所占的区域: { left, top, width, height }\n * @param align\n */\nfunction doAlign(el, tgtRegion, align, isTgtRegionVisible) {\n let points = align.points;\n let offset = align.offset || [0, 0];\n let targetOffset = align.targetOffset || [0, 0];\n let overflow = align.overflow;\n const source = align.source || el;\n offset = [].concat(offset);\n targetOffset = [].concat(targetOffset);\n overflow = overflow || {};\n const newOverflowCfg = {};\n let fail = 0;\n const alwaysByViewport = !!(overflow && overflow.alwaysByViewport);\n // 当前节点可以被放置的显示区域\n const visibleRect = getVisibleRectForElement(source, alwaysByViewport);\n // 当前节点所占的区域, left/top/width/height\n const elRegion = getRegion(source);\n // 将 offset 转换成数值，支持百分比\n normalizeOffset(offset, elRegion);\n normalizeOffset(targetOffset, tgtRegion);\n // 当前节点将要被放置的位置\n let elFuturePos = getElFuturePos(\n elRegion,\n tgtRegion,\n points,\n offset,\n targetOffset,\n );\n // 当前节点将要所处的区域\n let newElRegion = utils.merge(elRegion, elFuturePos);\n\n // 如果可视区域不能完全放置当前节点时允许调整\n if (\n visibleRect &&\n (overflow.adjustX || overflow.adjustY) &&\n isTgtRegionVisible\n ) {\n if (overflow.adjustX) {\n // 如果横向不能放下\n if (isFailX(elFuturePos, elRegion, visibleRect)) {\n // 对齐位置反下\n const newPoints = flip(points, /[lr]/gi, {\n l: 'r',\n r: 'l',\n });\n // 偏移量也反下\n const newOffset = flipOffset(offset, 0);\n const newTargetOffset = flipOffset(targetOffset, 0);\n const newElFuturePos = getElFuturePos(\n elRegion,\n tgtRegion,\n newPoints,\n newOffset,\n newTargetOffset,\n );\n\n if (!isCompleteFailX(newElFuturePos, elRegion, visibleRect)) {\n fail = 1;\n points = newPoints;\n offset = newOffset;\n targetOffset = newTargetOffset;\n }\n }\n }\n\n if (overflow.adjustY) {\n // 如果纵向不能放下\n if (isFailY(elFuturePos, elRegion, visibleRect)) {\n // 对齐位置反下\n const newPoints = flip(points, /[tb]/gi, {\n t: 'b',\n b: 't',\n });\n // 偏移量也反下\n const newOffset = flipOffset(offset, 1);\n const newTargetOffset = flipOffset(targetOffset, 1);\n const newElFuturePos = getElFuturePos(\n elRegion,\n tgtRegion,\n newPoints,\n newOffset,\n newTargetOffset,\n );\n\n if (!isCompleteFailY(newElFuturePos, elRegion, visibleRect)) {\n fail = 1;\n points = newPoints;\n offset = newOffset;\n targetOffset = newTargetOffset;\n }\n }\n }\n\n // 如果失败，重新计算当前节点将要被放置的位置\n if (fail) {\n elFuturePos = getElFuturePos(\n elRegion,\n tgtRegion,\n points,\n offset,\n targetOffset,\n );\n utils.mix(newElRegion, elFuturePos);\n }\n const isStillFailX = isFailX(elFuturePos, elRegion, visibleRect);\n const isStillFailY = isFailY(elFuturePos, elRegion, visibleRect);\n // 检查反下后的位置是否可以放下了，如果仍然放不下：\n // 1. 复原修改过的定位参数\n if (isStillFailX || isStillFailY) {\n let newPoints = points;\n\n // 重置对应部分的翻转逻辑\n if (isStillFailX) {\n newPoints = flip(points, /[lr]/gi, {\n l: 'r',\n r: 'l',\n });\n }\n if (isStillFailY) {\n newPoints = flip(points, /[tb]/gi, {\n t: 'b',\n b: 't',\n });\n }\n\n points = newPoints;\n\n offset = align.offset || [0, 0];\n targetOffset = align.targetOffset || [0, 0];\n }\n // 2. 只有指定了可以调整当前方向才调整\n newOverflowCfg.adjustX = overflow.adjustX && isStillFailX;\n newOverflowCfg.adjustY = overflow.adjustY && isStillFailY;\n\n // 确实要调整，甚至可能会调整高度宽度\n if (newOverflowCfg.adjustX || newOverflowCfg.adjustY) {\n newElRegion = adjustForViewport(\n elFuturePos,\n elRegion,\n visibleRect,\n newOverflowCfg,\n );\n }\n }\n\n // need judge to in case set fixed with in css on height auto element\n if (newElRegion.width !== elRegion.width) {\n utils.css(\n source,\n 'width',\n utils.width(source) + newElRegion.width - elRegion.width,\n );\n }\n\n if (newElRegion.height !== elRegion.height) {\n utils.css(\n source,\n 'height',\n utils.height(source) + newElRegion.height - elRegion.height,\n );\n }\n\n // https://github.com/kissyteam/kissy/issues/190\n // 相对于屏幕位置没变，而 left/top 变了\n // 例如 \n 元素 6 高 100px 宽 50px
\n
\n \n
\n
\n */\n // element.offsetParent does the right thing in ie7 and below. Return parent with layout!\n // In other browsers it only includes elements with position absolute, relative or\n // fixed, not elements with overflow set to auto or scroll.\n // if (UA.ie && ieMode < 8) {\n // return element.offsetParent;\n // }\n // 统一的 offsetParent 方法\n const doc = utils.getDocument(element);\n const body = doc.body;\n let parent;\n let positionStyle = utils.css(element, 'position');\n const skipStatic = positionStyle === 'fixed' || positionStyle === 'absolute';\n\n if (!skipStatic) {\n return element.nodeName.toLowerCase() === 'html'\n ? null\n : getParent(element);\n }\n\n for (\n parent = getParent(element);\n parent && parent !== body && parent.nodeType !== 9;\n parent = getParent(parent)\n ) {\n positionStyle = utils.css(parent, 'position');\n if (positionStyle !== 'static') {\n return parent;\n }\n }\n return null;\n}\n\nexport default getOffsetParent;\n","import utils from './utils';\n\nconst { getParent } = utils;\n\nexport default function isAncestorFixed(element) {\n if (utils.isWindow(element) || element.nodeType === 9) {\n return false;\n }\n\n const doc = utils.getDocument(element);\n const body = doc.body;\n let parent = null;\n for (\n parent = getParent(element);\n parent && parent !== body;\n parent = getParent(parent)\n ) {\n const positionStyle = utils.css(parent, 'position');\n if (positionStyle === 'fixed') {\n return true;\n }\n }\n return false;\n}\n","import utils from './utils';\nimport getOffsetParent from './getOffsetParent';\nimport isAncestorFixed from './isAncestorFixed';\n\n/**\n * 获得元素的显示部分的区域\n */\nfunction getVisibleRectForElement(element, alwaysByViewport) {\n const visibleRect = {\n left: 0,\n right: Infinity,\n top: 0,\n bottom: Infinity,\n };\n let el = getOffsetParent(element);\n const doc = utils.getDocument(element);\n const win = doc.defaultView || doc.parentWindow;\n const body = doc.body;\n const documentElement = doc.documentElement;\n\n // Determine the size of the visible rect by climbing the dom accounting for\n // all scrollable containers.\n while (el) {\n // clientWidth is zero for inline block elements in ie.\n if (\n (navigator.userAgent.indexOf('MSIE') === -1 || el.clientWidth !== 0) &&\n // body may have overflow set on it, yet we still get the entire\n // viewport. In some browsers, el.offsetParent may be\n // document.documentElement, so check for that too.\n (el !== body &&\n el !== documentElement &&\n utils.css(el, 'overflow') !== 'visible')\n ) {\n const pos = utils.offset(el);\n // add border\n pos.left += el.clientLeft;\n pos.top += el.clientTop;\n visibleRect.top = Math.max(visibleRect.top, pos.top);\n visibleRect.right = Math.min(\n visibleRect.right,\n // consider area without scrollBar\n pos.left + el.clientWidth,\n );\n visibleRect.bottom = Math.min(\n visibleRect.bottom,\n pos.top + el.clientHeight,\n );\n visibleRect.left = Math.max(visibleRect.left, pos.left);\n } else if (el === body || el === documentElement) {\n break;\n }\n el = getOffsetParent(el);\n }\n\n // Set element position to fixed\n // make sure absolute element itself don't affect it's visible area\n // https://github.com/ant-design/ant-design/issues/7601\n let originalPosition = null;\n if (!utils.isWindow(element) && element.nodeType !== 9) {\n originalPosition = element.style.position;\n const position = utils.css(element, 'position');\n if (position === 'absolute') {\n element.style.position = 'fixed';\n }\n }\n\n const scrollX = utils.getWindowScrollLeft(win);\n const scrollY = utils.getWindowScrollTop(win);\n const viewportWidth = utils.viewportWidth(win);\n const viewportHeight = utils.viewportHeight(win);\n let documentWidth = documentElement.scrollWidth;\n let documentHeight = documentElement.scrollHeight;\n\n // scrollXXX on html is sync with body which means overflow: hidden on body gets wrong scrollXXX.\n // We should cut this ourself.\n const bodyStyle = window.getComputedStyle(body);\n if (bodyStyle.overflowX === 'hidden') {\n documentWidth = win.innerWidth;\n }\n if (bodyStyle.overflowY === 'hidden') {\n documentHeight = win.innerHeight;\n }\n\n // Reset element position after calculate the visible area\n if (element.style) {\n element.style.position = originalPosition;\n }\n\n if (alwaysByViewport || isAncestorFixed(element)) {\n // Clip by viewport's size.\n visibleRect.left = Math.max(visibleRect.left, scrollX);\n visibleRect.top = Math.max(visibleRect.top, scrollY);\n visibleRect.right = Math.min(visibleRect.right, scrollX + viewportWidth);\n visibleRect.bottom = Math.min(visibleRect.bottom, scrollY + viewportHeight);\n } else {\n // Clip by document's size.\n const maxVisibleWidth = Math.max(documentWidth, scrollX + viewportWidth);\n visibleRect.right = Math.min(visibleRect.right, maxVisibleWidth);\n\n const maxVisibleHeight = Math.max(documentHeight, scrollY + viewportHeight);\n visibleRect.bottom = Math.min(visibleRect.bottom, maxVisibleHeight);\n }\n\n return visibleRect.top >= 0 &&\n visibleRect.left >= 0 &&\n visibleRect.bottom > visibleRect.top &&\n visibleRect.right > visibleRect.left\n ? visibleRect\n : null;\n}\n\nexport default getVisibleRectForElement;\n","import utils from './utils';\n\nfunction getRegion(node) {\n let offset;\n let w;\n let h;\n if (!utils.isWindow(node) && node.nodeType !== 9) {\n offset = utils.offset(node);\n w = utils.outerWidth(node);\n h = utils.outerHeight(node);\n } else {\n const win = utils.getWindow(node);\n offset = {\n left: utils.getWindowScrollLeft(win),\n top: utils.getWindowScrollTop(win),\n };\n w = utils.viewportWidth(win);\n h = utils.viewportHeight(win);\n }\n offset.width = w;\n offset.height = h;\n return offset;\n}\n\nexport default getRegion;\n","/**\n * 获取 node 上的 align 对齐点 相对于页面的坐标\n */\n\nfunction getAlignOffset(region, align) {\n const V = align.charAt(0);\n const H = align.charAt(1);\n const w = region.width;\n const h = region.height;\n\n let x = region.left;\n let y = region.top;\n\n if (V === 'c') {\n y += h / 2;\n } else if (V === 'b') {\n y += h;\n }\n\n if (H === 'c') {\n x += w / 2;\n } else if (H === 'r') {\n x += w;\n }\n\n return {\n left: x,\n top: y,\n };\n}\n\nexport default getAlignOffset;\n","import getAlignOffset from './getAlignOffset';\n\nfunction getElFuturePos(elRegion, refNodeRegion, points, offset, targetOffset) {\n const p1 = getAlignOffset(refNodeRegion, points[1]);\n const p2 = getAlignOffset(elRegion, points[0]);\n const diff = [p2.left - p1.left, p2.top - p1.top];\n\n return {\n left: Math.round(elRegion.left - diff[0] + offset[0] - targetOffset[0]),\n top: Math.round(elRegion.top - diff[1] + offset[1] - targetOffset[1]),\n };\n}\n\nexport default getElFuturePos;\n","/**\n * align dom node flexibly\n * @author yiminghe@gmail.com\n */\n\nimport utils from '../utils';\nimport getVisibleRectForElement from '../getVisibleRectForElement';\nimport adjustForViewport from '../adjustForViewport';\nimport getRegion from '../getRegion';\nimport getElFuturePos from '../getElFuturePos';\n\n// http://yiminghe.iteye.com/blog/1124720\n\nfunction isFailX(elFuturePos, elRegion, visibleRect) {\n return (\n elFuturePos.left < visibleRect.left ||\n elFuturePos.left + elRegion.width > visibleRect.right\n );\n}\n\nfunction isFailY(elFuturePos, elRegion, visibleRect) {\n return (\n elFuturePos.top < visibleRect.top ||\n elFuturePos.top + elRegion.height > visibleRect.bottom\n );\n}\n\nfunction isCompleteFailX(elFuturePos, elRegion, visibleRect) {\n return (\n elFuturePos.left > visibleRect.right ||\n elFuturePos.left + elRegion.width < visibleRect.left\n );\n}\n\nfunction isCompleteFailY(elFuturePos, elRegion, visibleRect) {\n return (\n elFuturePos.top > visibleRect.bottom ||\n elFuturePos.top + elRegion.height < visibleRect.top\n );\n}\n\nfunction flip(points, reg, map) {\n const ret = [];\n utils.each(points, p => {\n ret.push(\n p.replace(reg, m => {\n return map[m];\n }),\n );\n });\n return ret;\n}\n\nfunction flipOffset(offset, index) {\n offset[index] = -offset[index];\n return offset;\n}\n\nfunction convertOffset(str, offsetLen) {\n let n;\n if (/%$/.test(str)) {\n n = (parseInt(str.substring(0, str.length - 1), 10) / 100) * offsetLen;\n } else {\n n = parseInt(str, 10);\n }\n return n || 0;\n}\n\nfunction normalizeOffset(offset, el) {\n offset[0] = convertOffset(offset[0], el.width);\n offset[1] = convertOffset(offset[1], el.height);\n}\n\n/**\n * @param el\n * @param tgtRegion 参照节点所占的区域: { left, top, width, height }\n * @param align\n */\nfunction doAlign(el, tgtRegion, align, isTgtRegionVisible) {\n let points = align.points;\n let offset = align.offset || [0, 0];\n let targetOffset = align.targetOffset || [0, 0];\n let overflow = align.overflow;\n const source = align.source || el;\n offset = [].concat(offset);\n targetOffset = [].concat(targetOffset);\n overflow = overflow || {};\n const newOverflowCfg = {};\n let fail = 0;\n const alwaysByViewport = !!(overflow && overflow.alwaysByViewport);\n // 当前节点可以被放置的显示区域\n const visibleRect = getVisibleRectForElement(source, alwaysByViewport);\n // 当前节点所占的区域, left/top/width/height\n const elRegion = getRegion(source);\n // 将 offset 转换成数值，支持百分比\n normalizeOffset(offset, elRegion);\n normalizeOffset(targetOffset, tgtRegion);\n // 当前节点将要被放置的位置\n let elFuturePos = getElFuturePos(\n elRegion,\n tgtRegion,\n points,\n offset,\n targetOffset,\n );\n // 当前节点将要所处的区域\n let newElRegion = utils.merge(elRegion, elFuturePos);\n\n // 如果可视区域不能完全放置当前节点时允许调整\n if (\n visibleRect &&\n (overflow.adjustX || overflow.adjustY) &&\n isTgtRegionVisible\n ) {\n if (overflow.adjustX) {\n // 如果横向不能放下\n if (isFailX(elFuturePos, elRegion, visibleRect)) {\n // 对齐位置反下\n const newPoints = flip(points, /[lr]/gi, {\n l: 'r',\n r: 'l',\n });\n // 偏移量也反下\n const newOffset = flipOffset(offset, 0);\n const newTargetOffset = flipOffset(targetOffset, 0);\n const newElFuturePos = getElFuturePos(\n elRegion,\n tgtRegion,\n newPoints,\n newOffset,\n newTargetOffset,\n );\n\n if (!isCompleteFailX(newElFuturePos, elRegion, visibleRect)) {\n fail = 1;\n points = newPoints;\n offset = newOffset;\n targetOffset = newTargetOffset;\n }\n }\n }\n\n if (overflow.adjustY) {\n // 如果纵向不能放下\n if (isFailY(elFuturePos, elRegion, visibleRect)) {\n // 对齐位置反下\n const newPoints = flip(points, /[tb]/gi, {\n t: 'b',\n b: 't',\n });\n // 偏移量也反下\n const newOffset = flipOffset(offset, 1);\n const newTargetOffset = flipOffset(targetOffset, 1);\n const newElFuturePos = getElFuturePos(\n elRegion,\n tgtRegion,\n newPoints,\n newOffset,\n newTargetOffset,\n );\n\n if (!isCompleteFailY(newElFuturePos, elRegion, visibleRect)) {\n fail = 1;\n points = newPoints;\n offset = newOffset;\n targetOffset = newTargetOffset;\n }\n }\n }\n\n // 如果失败，重新计算当前节点将要被放置的位置\n if (fail) {\n elFuturePos = getElFuturePos(\n elRegion,\n tgtRegion,\n points,\n offset,\n targetOffset,\n );\n utils.mix(newElRegion, elFuturePos);\n }\n const isStillFailX = isFailX(elFuturePos, elRegion, visibleRect);\n const isStillFailY = isFailY(elFuturePos, elRegion, visibleRect);\n // 检查反下后的位置是否可以放下了，如果仍然放不下：\n // 1. 复原修改过的定位参数\n if (isStillFailX || isStillFailY) {\n let newPoints = points;\n\n // 重置对应部分的翻转逻辑\n if (isStillFailX) {\n newPoints = flip(points, /[lr]/gi, {\n l: 'r',\n r: 'l',\n });\n }\n if (isStillFailY) {\n newPoints = flip(points, /[tb]/gi, {\n t: 'b',\n b: 't',\n });\n }\n\n points = newPoints;\n\n offset = align.offset || [0, 0];\n targetOffset = align.targetOffset || [0, 0];\n }\n // 2. 只有指定了可以调整当前方向才调整\n newOverflowCfg.adjustX = overflow.adjustX && isStillFailX;\n newOverflowCfg.adjustY = overflow.adjustY && isStillFailY;\n\n // 确实要调整，甚至可能会调整高度宽度\n if (newOverflowCfg.adjustX || newOverflowCfg.adjustY) {\n newElRegion = adjustForViewport(\n elFuturePos,\n elRegion,\n visibleRect,\n newOverflowCfg,\n );\n }\n }\n\n // need judge to in case set fixed with in css on height auto element\n if (newElRegion.width !== elRegion.width) {\n utils.css(\n source,\n 'width',\n utils.width(source) + newElRegion.width - elRegion.width,\n );\n }\n\n if (newElRegion.height !== elRegion.height) {\n utils.css(\n source,\n 'height',\n utils.height(source) + newElRegion.height - elRegion.height,\n );\n }\n\n // https://github.com/kissyteam/kissy/issues/190\n // 相对于屏幕位置没变，而 left/top 变了\n // 例如 \n 元素 6 高 100px 宽 50px
\n
\n \n
\n
\n );\n }\n return (\n \n
\n \n
\n {title}
\n {org &&{org}
}\n\n
\n {text}
\n\n \n
\n );\n}\n\nfunction SmallElementPic({\n image_url,\n image_alt,\n title,\n text,\n link,\n org,\n}: GridElementImageProps) {\n if (link === undefined) {\n return (\n \n
\n {title}
\n {org &&{org}
}\n\n
\n \n {text}
\n\n
\n );\n }\n return (\n \n
\n \n 
\n
\n \n
\n {title}
\n {org &&{org}
}\n\n{text}
\n\n \n
\n );\n}\n\nfunction MediumElement({\n image_url,\n image_alt,\n title,\n text,\n link,\n org,\n}: GridElementImageProps) {\n if (link === undefined) {\n return (\n \n \n
\n \n
\n \n {title}
\n {org &&{org}
}\n{text}
\n\n
\n );\n }\n return (\n \n
\n \n \n
\n \n
\n {title}
\n {org &&{org}
}\n{text}
\n\n
\n \n );\n}\n\nfunction LargeElementPic({\n image_url,\n image_alt,\n title,\n text,\n link,\n org,\n}: GridElementImageProps) {\n if (link === undefined) {\n return (\n \n \n
\n \n
\n {title}
\n {org &&{org}
}\n{text}
\n\n
\n );\n }\n return (\n \n
\n \n \n
\n \n
\n {title}
\n {org &&{org}
}\n{text}
\n\n \n
\n );\n}\n\nexport function ProjectGrid() {\n useEffect(() => {\n var elem = document.querySelector(\"#project-grid\");\n\n if (elem) {\n const msnry = new Masonry(elem, {\n itemSelector: \".GridElement\",\n gutter: 0,\n columnWidth: \".GridSizer\",\n percentPosition: true,\n });\n\n ImagesLoaded(elem).on(\"progress\", () => {\n setTimeout(() => msnry.layout?.(), 200);\n });\n }\n });\n\n return (\n \n \n
\n \n
\n \n {title}
\n {org &&{org}
}\n{text}
\n\n
\n );\n}\n","export default \"data:image/png;base64,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\"","import {useCallback, useEffect, useState} from \"react\";\n\nexport function Age() {\n // Accounts for leap years and stuff\n function milliseconds_year() {\n const dateObj = new Date();\n const dateInit = Math.round(\n new Date(dateObj.getFullYear(), 0, 1).getTime()\n );\n const dateEnd = Math.round(\n new Date(dateObj.getFullYear(), 11, 31, 23, 59, 59, 999).getTime()\n );\n return dateEnd - dateInit;\n }\n\n // This will recursively calculate the closest fractional value to the given target, until it recuses 25 times or\n // the value is within 0.001 of the target\n function searchSternBorcotTree(\n target: number,\n left_n: number,\n left_d: number,\n right_n: number,\n right_d: number,\n count: number = 0\n ): [number, number] {\n count++;\n const center_n: number = left_n + right_n;\n const center_d: number = left_d + right_d;\n // Check to see if we've gone too deep\n if (count > 25) return [center_n, center_d];\n // Check to see if we're close enough to the target\n if (Math.abs(target - center_n / center_d) > 0.001) {\n // Look right down the tree\n if (target > center_n / center_d)\n return searchSternBorcotTree(\n target,\n center_n,\n center_d,\n right_n,\n right_d,\n count\n );\n // Ok now look left\n return searchSternBorcotTree(\n target,\n left_n,\n left_d,\n center_n,\n center_d,\n count\n );\n }\n return [center_n, center_d];\n }\n\n function CalcAge() {\n let ageMs = new Date().getTime() - 1021004428000;\n const yearMs = milliseconds_year();\n const ageYearsComponent = Math.floor(ageMs / yearMs);\n const ageSecondsComponent = Math.floor((ageMs % yearMs) / 1000);\n const [target_n, target_d] = searchSternBorcotTree(\n ageSecondsComponent / (yearMs / 1000),\n 0,\n 1,\n 1,\n 1\n );\n return `${ageYearsComponent} and ${target_n}/${target_d}`;\n }\n\n const millisecondsYear = milliseconds_year();\n const time = new Date().getTime();\n // eslint-disable-next-line\n const memoizedCallbackCalcAge = useCallback(CalcAge, [\n millisecondsYear,\n time,\n ]);\n\n const [age, setAge] = useState(memoizedCallbackCalcAge());\n\n function UpdateAge() {\n setAge(memoizedCallbackCalcAge());\n }\n\n const memoizedCallbackUpdateAge = useCallback(UpdateAge, [\n memoizedCallbackCalcAge,\n ]);\n\n useEffect(() => {\n memoizedCallbackUpdateAge();\n\n const interval = setInterval(memoizedCallbackUpdateAge, 5000);\n\n return () => {\n clearInterval(interval);\n };\n }, [memoizedCallbackUpdateAge]);\n\n return \n
\n \n
\n </> My Projects
\n\n A gallery of some of my most interesting projects. Look for{\" \"}\n
\n \n
\n \n
\n );\n}\n","import \"./Home.scss\";\nimport { ProjectGrid } from \"./ProjectGrid\";\nimport { AboutMe } from \"./AboutMe/AboutMe\";\n\nexport function Home() {\n return (\n \n
\n Hi! I'm Julie!
\n\n\n
\n \n
\n A bit about me:
\n- \n
- \n Occupation: Student\n \n
- \n Location: Southern California\n \n
- \n Pronouns: She/Her\n \n
\n
\n Find Me:
\n- \n
- \n Email: \n \n
- \n Twitter:{\" \"}\n
\n \n \n - \n GitHub:{\" \"}\n
- \n Telegram:{\" \"}\n
- Elsewhere: Probably @cobular \n
\n
\n );\n}\n","import { Home } from \"./Home\";\n\nexport function Main() {\n return (\n \n \n
\n );\n}\n\nexport default App;\n","import { ReportHandler } from 'web-vitals';\n\nconst reportWebVitals = (onPerfEntry?: ReportHandler) => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","import React, {} from \"react\";\nimport { render } from \"react-snapshot\";\n\nimport \"./index.scss\";\nimport \"./imports.scss\";\nimport \"./vars.scss\"\nimport App from \"./App\";\nimport reportWebVitals from \"./reportWebVitals\";\n\nrender(\n \n
\n );\n }\n return (\n \n
\n \n
\n {title}
\n {org &&{org}
}\n\n
\n {text}
\n\n \n
\n );\n}\n\nfunction SmallElementPic({\n image_url,\n image_alt,\n title,\n text,\n link,\n org,\n}: GridElementImageProps) {\n if (link === undefined) {\n return (\n \n
\n {title}
\n {org &&{org}
}\n\n
\n \n {text}
\n\n
\n );\n }\n return (\n \n
\n \n \n
\n \n
\n {title}
\n {org &&{org}
}\n\n{text}
\n\n \n
\n );\n}\n\nfunction MediumElement({\n image_url,\n image_alt,\n title,\n text,\n link,\n org,\n}: GridElementImageProps) {\n if (link === undefined) {\n return (\n \n \n
\n \n
\n \n {title}
\n {org &&{org}
}\n{text}
\n\n
\n );\n }\n return (\n \n
\n \n \n
\n \n
\n {title}
\n {org &&{org}
}\n{text}
\n\n
\n \n );\n}\n\nfunction LargeElementPic({\n image_url,\n image_alt,\n title,\n text,\n link,\n org,\n}: GridElementImageProps) {\n if (link === undefined) {\n return (\n \n \n
\n \n
\n {title}
\n {org &&{org}
}\n{text}
\n\n
\n );\n }\n return (\n \n
\n \n \n
\n \n
\n {title}
\n {org &&{org}
}\n{text}
\n\n \n
\n );\n}\n\nexport function ProjectGrid() {\n useEffect(() => {\n var elem = document.querySelector(\"#project-grid\");\n\n if (elem) {\n const msnry = new Masonry(elem, {\n itemSelector: \".GridElement\",\n gutter: 0,\n columnWidth: \".GridSizer\",\n percentPosition: true,\n });\n\n ImagesLoaded(elem).on(\"progress\", () => {\n setTimeout(() => msnry.layout?.(), 200);\n });\n }\n });\n\n return (\n \n \n
\n \n
\n \n {title}
\n {org &&{org}
}\n{text}
\n\n
\n );\n}\n","export default \"data:image/png;base64,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\"","import {useCallback, useEffect, useState} from \"react\";\n\nexport function Age() {\n // Accounts for leap years and stuff\n function milliseconds_year() {\n const dateObj = new Date();\n const dateInit = Math.round(\n new Date(dateObj.getFullYear(), 0, 1).getTime()\n );\n const dateEnd = Math.round(\n new Date(dateObj.getFullYear(), 11, 31, 23, 59, 59, 999).getTime()\n );\n return dateEnd - dateInit;\n }\n\n // This will recursively calculate the closest fractional value to the given target, until it recuses 25 times or\n // the value is within 0.001 of the target\n function searchSternBorcotTree(\n target: number,\n left_n: number,\n left_d: number,\n right_n: number,\n right_d: number,\n count: number = 0\n ): [number, number] {\n count++;\n const center_n: number = left_n + right_n;\n const center_d: number = left_d + right_d;\n // Check to see if we've gone too deep\n if (count > 25) return [center_n, center_d];\n // Check to see if we're close enough to the target\n if (Math.abs(target - center_n / center_d) > 0.001) {\n // Look right down the tree\n if (target > center_n / center_d)\n return searchSternBorcotTree(\n target,\n center_n,\n center_d,\n right_n,\n right_d,\n count\n );\n // Ok now look left\n return searchSternBorcotTree(\n target,\n left_n,\n left_d,\n center_n,\n center_d,\n count\n );\n }\n return [center_n, center_d];\n }\n\n function CalcAge() {\n let ageMs = new Date().getTime() - 1021004428000;\n const yearMs = milliseconds_year();\n const ageYearsComponent = Math.floor(ageMs / yearMs);\n const ageSecondsComponent = Math.floor((ageMs % yearMs) / 1000);\n const [target_n, target_d] = searchSternBorcotTree(\n ageSecondsComponent / (yearMs / 1000),\n 0,\n 1,\n 1,\n 1\n );\n return `${ageYearsComponent} and ${target_n}/${target_d}`;\n }\n\n const millisecondsYear = milliseconds_year();\n const time = new Date().getTime();\n // eslint-disable-next-line\n const memoizedCallbackCalcAge = useCallback(CalcAge, [\n millisecondsYear,\n time,\n ]);\n\n const [age, setAge] = useState(memoizedCallbackCalcAge());\n\n function UpdateAge() {\n setAge(memoizedCallbackCalcAge());\n }\n\n const memoizedCallbackUpdateAge = useCallback(UpdateAge, [\n memoizedCallbackCalcAge,\n ]);\n\n useEffect(() => {\n memoizedCallbackUpdateAge();\n\n const interval = setInterval(memoizedCallbackUpdateAge, 5000);\n\n return () => {\n clearInterval(interval);\n };\n }, [memoizedCallbackUpdateAge]);\n\n return \n
\n \n
\n </> My Projects
\n\n A gallery of some of my most interesting projects. Look for{\" \"}\n
\n \n
\n \n
\n );\n}\n","import \"./Home.scss\";\nimport { ProjectGrid } from \"./ProjectGrid\";\nimport { AboutMe } from \"./AboutMe/AboutMe\";\n\nexport function Home() {\n return (\n \n
\n Hi! I'm Julie!
\n\n\n
\n \n
\n A bit about me:
\n- \n
- \n Occupation: Student\n \n
- \n Location: Southern California\n \n
- \n Pronouns: She/Her\n \n
\n
\n Find Me:
\n- \n
- \n Email: \n \n
- \n Twitter:{\" \"}\n
\n \n \n - \n GitHub:{\" \"}\n
- \n Telegram:{\" \"}\n
- Elsewhere: Probably @cobular \n
\n
\n );\n}\n","import { Home } from \"./Home\";\n\nexport function Main() {\n return (\n \n \n
\n );\n}\n\nexport default App;\n","import { ReportHandler } from 'web-vitals';\n\nconst reportWebVitals = (onPerfEntry?: ReportHandler) => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","import React, {} from \"react\";\nimport { render } from \"react-snapshot\";\n\nimport \"./index.scss\";\nimport \"./imports.scss\";\nimport \"./vars.scss\"\nimport App from \"./App\";\nimport reportWebVitals from \"./reportWebVitals\";\n\nrender(\n