Skip to content

Commit b380e80

Browse files
rstoenescurstoenescu
committed
feat(anchor): Improvements and fixes
1 parent 3f053b5 commit b380e80

File tree

6 files changed

+45
-62
lines changed

6 files changed

+45
-62
lines changed

‎ui/src/components/menu/QMenu.js‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import TransitionMixin from '../../mixins/transition.js'
88

99
import ClickOutside from './ClickOutside.js'
1010
import { getScrollTarget } from '../../utils/scroll.js'
11-
import { create, stop, position, listenOpts, stopAndPrevent } from '../../utils/event.js'
11+
import { create, stop, position, stopAndPrevent } from '../../utils/event.js'
1212
import EscapeKey from '../../utils/escape-key.js'
1313

1414
import { slot } from '../../utils/slot.js'
@@ -202,24 +202,15 @@ export default Vue.extend({
202202

203203
__unconfigureScrollTarget () {
204204
if (this.scrollTarget !== void 0) {
205-
this.scrollTarget.removeEventListener('scroll', this.updatePosition, listenOpts.passive)
205+
this.__changeScrollEvent(this.scrollTarget)
206+
this.scrollTarget = void 0
206207
}
207-
const target = window.visualViewport !== void 0 && window.visualViewport.onscroll !== void 0
208-
? window.visualViewport
209-
: window
210-
target.removeEventListener('scroll', this.updatePosition, listenOpts.passive)
211208
},
212209

213210
__configureScrollTarget () {
214211
if (this.anchorEl !== void 0) {
215212
this.scrollTarget = getScrollTarget(this.anchorEl)
216-
this.scrollTarget.addEventListener('scroll', this.updatePosition, listenOpts.passive)
217-
if (this.scrollTarget !== window) {
218-
const target = window.visualViewport !== void 0 && window.visualViewport.onscroll !== void 0
219-
? window.visualViewport
220-
: window
221-
target.addEventListener('scroll', this.updatePosition, listenOpts.passive)
222-
}
213+
this.__changeScrollEvent(this.scrollTarget, this.updatePosition)
223214
}
224215
},
225216

‎ui/src/components/tooltip/QTooltip.js‎

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,13 @@ import PortalMixin from '../../mixins/portal.js'
66
import TransitionMixin from '../../mixins/transition.js'
77

88
import { getScrollTarget } from '../../utils/scroll.js'
9-
import { listenOpts } from '../../utils/event.js'
109
import { addEvt, cleanEvt, getTouchTarget } from '../../utils/touch.js'
1110
import { clearSelection } from '../../utils/selection.js'
1211
import { slot } from '../../utils/slot.js'
1312
import {
1413
validatePosition, validateOffset, setPosition, parsePosition
1514
} from '../../utils/position-engine.js'
1615

17-
const { passive } = listenOpts
18-
1916
export default Vue.extend({
2017
name: 'QTooltip',
2118

@@ -174,27 +171,19 @@ export default Vue.extend({
174171

175172
__unconfigureScrollTarget () {
176173
if (this.scrollTarget !== void 0) {
177-
this.scrollTarget.removeEventListener('scroll', this.hide, passive)
174+
this.__changeScrollEvent(this.scrollTarget)
178175
this.scrollTarget = void 0
179176
}
180-
const target = window.visualViewport !== void 0 && window.visualViewport.onscroll !== void 0
181-
? window.visualViewport
182-
: window
183-
target.removeEventListener('scroll', this.updatePosition, passive)
184177
},
185178

186179
__configureScrollTarget () {
187180
if (this.anchorEl !== void 0) {
188181
this.scrollTarget = getScrollTarget(this.anchorEl)
189-
if (this.noParentEvent !== true) {
190-
this.scrollTarget.addEventListener('scroll', this.hide, passive)
191-
}
192-
if (this.noParentEvent === true || this.scrollTarget !== window) {
193-
const target = window.visualViewport !== void 0 && window.visualViewport.onscroll !== void 0
194-
? window.visualViewport
195-
: window
196-
target.addEventListener('scroll', this.updatePosition, passive)
197-
}
182+
const fn = this.noParentEvent === true
183+
? this.updatePosition
184+
: this.hide
185+
186+
this.__changeScrollEvent(this.scrollTarget, fn)
198187
}
199188
},
200189

‎ui/src/mixins/anchor.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { clearSelection } from '../utils/selection.js'
2-
import { prevent } from '../utils/event.js'
2+
import { prevent, listenOpts } from '../utils/event.js'
33
import { addEvt, cleanEvt, getTouchTarget } from '../utils/touch.js'
44
import { isKeyCode } from '../utils/key-composition.js'
55

@@ -157,6 +157,19 @@ export default {
157157
else {
158158
this.anchorEl = void 0
159159
}
160+
},
161+
162+
__changeScrollEvent (scrollTarget, fn) {
163+
const fnProp = `${fn !== void 0 ? 'add' : 'remove'}EventListener`
164+
const fnHandler = fn !== void 0 ? fn : this.__scrollFn
165+
166+
if (scrollTarget !== window) {
167+
scrollTarget[fnProp]('scroll', fnHandler, listenOpts.passive)
168+
}
169+
170+
window[fnProp]('scroll', fnHandler, listenOpts.passive)
171+
172+
this.__scrollFn = fn
160173
}
161174
},
162175

‎ui/src/mixins/prevent-scroll.js‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -73,12 +73,7 @@ function apply (action, is) {
7373
}
7474

7575
body.classList.add('q-body--prevent-scroll')
76-
if (is.ios === true) {
77-
const target = window.visualViewport !== void 0 && window.visualViewport.onscroll !== void 0
78-
? window.visualViewport
79-
: window
80-
target.addEventListener('scroll', onAppleScroll, listenOpts.passiveCapture)
81-
}
76+
is.ios === true && window.addEventListener('scroll', onAppleScroll, listenOpts.passiveCapture)
8277
}
8378

8479
if (is.desktop === true && is.mac === true) {
@@ -87,12 +82,7 @@ function apply (action, is) {
8782
}
8883

8984
if (action === 'remove') {
90-
if (is.ios === true) {
91-
const target = window.visualViewport !== void 0 && window.visualViewport.onscroll !== void 0
92-
? window.visualViewport
93-
: window
94-
target.removeEventListener('scroll', onAppleScroll, listenOpts.passiveCapture)
95-
}
85+
is.ios === true && window.removeEventListener('scroll', onAppleScroll, listenOpts.passiveCapture)
9686

9787
body.classList.remove('q-body--prevent-scroll')
9888
body.classList.remove('q-body--force-scrollbar')

‎ui/src/plugins/Screen.js‎

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Vue from 'vue'
22

3-
import { isSSR, fromSSR, client } from './Platform.js'
3+
import { isSSR, fromSSR } from './Platform.js'
44
import { listenOpts } from '../utils/event.js'
55
import debounce from '../utils/debounce.js'
66

@@ -111,7 +111,7 @@ export default {
111111
const start = () => {
112112
const
113113
style = getComputedStyle(document.body),
114-
target = window.visualViewport !== void 0 && window.visualViewport.onresize !== void 0
114+
target = window.visualViewport !== void 0
115115
? window.visualViewport
116116
: window
117117

@@ -141,23 +141,6 @@ export default {
141141

142142
this.setDebounce(updateDebounce)
143143

144-
if (client.is.ios === true && window.visualViewport !== void 0 && window.visualViewport.onscroll !== void 0) {
145-
const elStyle = document.body.style
146-
147-
target.addEventListener('scroll', () => {
148-
const { offsetLeft: left, offsetTop: top } = target
149-
150-
if (left !== this.__left) {
151-
elStyle.setProperty('--q-vp-left', left + 'px')
152-
this.__left = left
153-
}
154-
if (top !== this.__top) {
155-
elStyle.setProperty('--q-vp-top', top + 'px')
156-
this.__top = top
157-
}
158-
}, listenOpts.passive)
159-
}
160-
161144
if (Object.keys(updateSizes).length > 0) {
162145
this.setSizes(updateSizes)
163146
updateSizes = void 0 // free up memory

‎ui/src/utils/position-engine.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
import { getScrollbarWidth } from './scroll.js'
2+
import { client } from '../plugins/Platform.js'
3+
4+
let vpLeft, vpTop
25

36
export function validatePosition (pos) {
47
let parts = pos.split(' ')
@@ -73,6 +76,20 @@ export function getTargetProps (el) {
7376

7477
// cfg: { el, anchorEl, anchorOrigin, selfOrigin, offset, absoluteOffset, cover, fit, maxHeight, maxWidth }
7578
export function setPosition (cfg) {
79+
if (client.is.ios === true && window.visualViewport !== void 0) {
80+
const elStyle = document.body.style
81+
const { offsetLeft: left, offsetTop: top } = window.visualViewport
82+
83+
if (left !== vpLeft) {
84+
elStyle.setProperty('--q-vp-left', left + 'px')
85+
vpLeft = left
86+
}
87+
if (top !== vpTop) {
88+
elStyle.setProperty('--q-vp-top', top + 'px')
89+
vpTop = top
90+
}
91+
}
92+
7693
let anchorProps
7794

7895
// scroll position might change

0 commit comments

Comments
 (0)