|
| 1 | +let locksElement = [] |
| 2 | +let lockedNum = 0 |
| 3 | +let initialClientY |
| 4 | +let unLockCallback |
| 5 | +let documentListenerAdded |
| 6 | + |
| 7 | +let hasPassiveEvents = false |
| 8 | +if (typeof window !== 'undefined') { |
| 9 | + const passiveTestOptions = { |
| 10 | + get passive () { |
| 11 | + hasPassiveEvents = true |
| 12 | + return undefined |
| 13 | + }, |
| 14 | + } |
| 15 | + window.addEventListener('testPassive', null, passiveTestOptions) |
| 16 | + window.removeEventListener('testPassive', null, passiveTestOptions) |
| 17 | +} |
| 18 | + |
| 19 | +const detectOS = () => { |
| 20 | + const ua = navigator.userAgent |
| 21 | + const android = /(Android);?[\s/]+([\d.]+)?/.test(ua) |
| 22 | + const ipad = /(iPad).*OS\s([\d_]+)/.test(ua) |
| 23 | + const iphone = !ipad && /(iPhone\sOS)\s([\d_]+)/.test(ua) |
| 24 | + const ios = iphone || ipad |
| 25 | + |
| 26 | + return { |
| 27 | + os: android ? 'android' : 'ios', |
| 28 | + ios, |
| 29 | + ipad, |
| 30 | + iphone, |
| 31 | + android, |
| 32 | + } |
| 33 | +} |
| 34 | + |
| 35 | +const setOverflowHiddenPc = () => { |
| 36 | + const $ = document::document.querySelector |
| 37 | + const $body = $('body') |
| 38 | + const bodyStyle = { ...$body.style } |
| 39 | + const scrollBarWidth = window.innerWidth - document.body.clientWidth |
| 40 | + $body.style.overflow = 'hidden' |
| 41 | + $body.style.paddingRight = scrollBarWidth + 'px' |
| 42 | + $body.style.boxSizing = 'border-box' |
| 43 | + |
| 44 | + return () => { |
| 45 | + $body.style.overflow = bodyStyle.overflow || '' |
| 46 | + $body.style.paddingRight = bodyStyle.paddingRight || '' |
| 47 | + $body.style.boxSizing = bodyStyle.boxSizing || '' |
| 48 | + } |
| 49 | +} |
| 50 | + |
| 51 | +const setOverflowHiddenMobile = () => { |
| 52 | + const $ = document::document.querySelector |
| 53 | + const $html = $('html') |
| 54 | + const $body = $('body') |
| 55 | + |
| 56 | + const htmlStyle = { ...$html.style } |
| 57 | + const bodyStyle = { ...$body.style } |
| 58 | + |
| 59 | + const scrollTop = $html.scrollTop || $body.scrollTop |
| 60 | + |
| 61 | + $html.style.overflow = 'hidden' |
| 62 | + $html.style.height = '100%' |
| 63 | + |
| 64 | + $body.style.overflow = 'hidden' |
| 65 | + $body.style.top = `-${scrollTop}px` |
| 66 | + $body.style.width = '100%' |
| 67 | + $body.style.position = 'fixed' |
| 68 | + |
| 69 | + return () => { |
| 70 | + $html.style.overflow = htmlStyle.overflow || '' |
| 71 | + $html.style.height = htmlStyle.height || '' |
| 72 | + |
| 73 | + $body.style.overflow = bodyStyle.overflow || '' |
| 74 | + $body.style.height = bodyStyle.height || '' |
| 75 | + $body.style.width = bodyStyle.width || '' |
| 76 | + $body.style.position = '' |
| 77 | + $body.style.top = '' |
| 78 | + window.scrollTo(0, scrollTop) |
| 79 | + } |
| 80 | +} |
| 81 | + |
| 82 | +const preventDefault = event => { |
| 83 | + if (event.cancelable) { |
| 84 | + event.preventDefault() |
| 85 | + } |
| 86 | +} |
| 87 | + |
| 88 | +const handleScroll = (event, targetElement) => { |
| 89 | + const clientY = event.targetTouches[0].clientY - initialClientY |
| 90 | + |
| 91 | + if (targetElement && targetElement.scrollTop === 0 && clientY > 0) { |
| 92 | + return preventDefault(event) |
| 93 | + } |
| 94 | + |
| 95 | + if (targetElement && (targetElement.scrollHeight - 1 - targetElement.scrollTop <= targetElement.clientHeight) && clientY < 0) { |
| 96 | + return preventDefault(event) |
| 97 | + } |
| 98 | + |
| 99 | + event.stopPropagation() |
| 100 | + return true |
| 101 | +} |
| 102 | + |
| 103 | +const checkTargetElement = (targetElement) => { |
| 104 | + if (!targetElement && targetElement !== null && process.env.NODE_ENV !== 'production') { |
| 105 | + console.warn('If scrolling is also required in the floating layer, the target element must be provided') |
| 106 | + } |
| 107 | +} |
| 108 | + |
| 109 | +export const lock = (targetElement) => { |
| 110 | + checkTargetElement(targetElement) |
| 111 | + |
| 112 | + if (detectOS().ios) { |
| 113 | + if (targetElement && locksElement.indexOf(targetElement) < 0) { |
| 114 | + targetElement.ontouchstart = event => { |
| 115 | + initialClientY = event.targetTouches[0].clientY |
| 116 | + } |
| 117 | + targetElement.ontouchmove = event => { |
| 118 | + if (event.targetTouches.length === 1) { |
| 119 | + handleScroll(event, targetElement) |
| 120 | + } |
| 121 | + } |
| 122 | + locksElement.push(targetElement) |
| 123 | + } |
| 124 | + if (!documentListenerAdded) { |
| 125 | + document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined) |
| 126 | + documentListenerAdded = true |
| 127 | + } |
| 128 | + } else { |
| 129 | + unLockCallback = detectOS().android ? setOverflowHiddenMobile() : setOverflowHiddenPc() |
| 130 | + } |
| 131 | + lockedNum += 1 |
| 132 | +} |
| 133 | + |
| 134 | +export const unlock = (targetElement) => { |
| 135 | + checkTargetElement(targetElement) |
| 136 | + |
| 137 | + lockedNum -= 1 |
| 138 | + if (lockedNum > 0 && !targetElement) return |
| 139 | + if (detectOS().ios) { |
| 140 | + const targetElementIndex = locksElement.indexOf(targetElement) |
| 141 | + if (targetElementIndex > -1) { |
| 142 | + targetElement.ontouchstart = null |
| 143 | + targetElement.ontouchmove = null |
| 144 | + locksElement.splice(targetElementIndex, 1) |
| 145 | + } |
| 146 | + if (documentListenerAdded && lockedNum <= 0) { |
| 147 | + document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined) |
| 148 | + |
| 149 | + documentListenerAdded = false |
| 150 | + } |
| 151 | + } else { |
| 152 | + lockedNum <= 0 && unLockCallback() |
| 153 | + } |
| 154 | +} |
0 commit comments