Skip to content

Commit 06f7696

Browse files
pdanpdanrstoenescu
pdanpdan
and
rstoenescu
committed
Refactor all components using target/scroll-target to use the same interface quasarframework#5906 (quasarframework#5421)
* Refactor all components using target/scroll-target to use the same interface - target accepts (in QMenu, QPopupProxy, QTooltip): - true => auto find target based on first parent (starting from parentEl) without .q-anchor--skip class - false => no anchor - Vue instance => uses $el of that instance - CSS selector or DOM element => that element - scroll-target accepts (in QInfiniteScroll, QMenu, QScrollObserver, QParalax, QPullToRefresh, QTooltip, QVirtualScroll) - null or void 0 => auto detect using getScrollTarget - Vue instance => uses $el of that instance - CSS selector or DOM element => that element - in the end, if the scroll target is document, document.body, document.scrollingElement or document.documentElement, window is selected as scroll target close quasarframework#5051 * Update scroll-observer.md * Update scroll.js * Update QInfiniteScroll.js * Update QInfiniteScroll.json * Update QMenu.js * Update QMenu.js * Update QMenu.json * Update QParallax.js * Update QParallax.json * Update QPullToRefresh.js * Update QPullToRefresh.json * Update QScrollObserver.js * Update QScrollObserver.json * Update QTooltip.js * Update QTooltip.json * Update QVirtualScroll.js * Update QVirtualScroll.json * Update anchor.js Co-authored-by: Razvan Stoenescu <razvan.stoenescu@gmail.com>
1 parent 40984e8 commit 06f7696

File tree

16 files changed

+142
-90
lines changed

16 files changed

+142
-90
lines changed

‎ui/src/components/infinite-scroll/QInfiniteScroll.js‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@ export default Vue.extend({
1818
type: [String, Number],
1919
default: 100
2020
},
21-
scrollTarget: {},
21+
scrollTarget: {
22+
default: void 0
23+
},
2224
disable: Boolean,
2325
reverse: Boolean
2426
},
@@ -132,18 +134,7 @@ export default Vue.extend({
132134
this.scrollContainer.removeEventListener('scroll', this.poll, listenOpts.passive)
133135
}
134136

135-
if (typeof this.scrollTarget === 'string') {
136-
this.scrollContainer = document.querySelector(this.scrollTarget)
137-
if (this.scrollContainer === null) {
138-
console.error(`InfiniteScroll: scroll target container "${this.scrollTarget}" not found`, this)
139-
return
140-
}
141-
}
142-
else {
143-
this.scrollContainer = this.scrollTarget === document.defaultView || this.scrollTarget instanceof Element
144-
? this.scrollTarget
145-
: getScrollTarget(this.$el)
146-
}
137+
this.scrollContainer = getScrollTarget(this.$el, this.scrollTarget)
147138

148139
if (this.working === true) {
149140
this.scrollContainer.addEventListener('scroll', this.poll, listenOpts.passive)

‎ui/src/components/infinite-scroll/QInfiniteScroll.json‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,7 @@
2222
},
2323

2424
"scroll-target": {
25-
"type": [ "Element", "String" ],
26-
"desc": "CSS selector or DOM element to be used as scroll container instead of the auto detected one",
27-
"examples": [
28-
":scroll-target=\"$refs.scrollTarget\"",
29-
"scroll-target=\"scroll-target\""
30-
],
31-
"category": "behavior"
25+
"extends": "scroll-target"
3226
},
3327

3428
"disable": {

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

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,10 @@ export default Vue.extend({
5252
validator: validateOffset
5353
},
5454

55+
scrollTarget: {
56+
default: void 0
57+
},
58+
5559
touchPosition: Boolean,
5660

5761
maxHeight: {
@@ -201,16 +205,16 @@ export default Vue.extend({
201205
},
202206

203207
__unconfigureScrollTarget () {
204-
if (this.scrollTarget !== void 0) {
205-
this.__changeScrollEvent(this.scrollTarget)
206-
this.scrollTarget = void 0
208+
if (this.__scrollTarget !== void 0) {
209+
this.__changeScrollEvent(this.__scrollTarget)
210+
this.__scrollTarget = void 0
207211
}
208212
},
209213

210214
__configureScrollTarget () {
211-
if (this.anchorEl !== void 0) {
212-
this.scrollTarget = getScrollTarget(this.anchorEl)
213-
this.__changeScrollEvent(this.scrollTarget, this.updatePosition)
215+
if (this.anchorEl !== void 0 || this.scrollTarget !== void 0) {
216+
this.__scrollTarget = getScrollTarget(this.anchorEl, this.scrollTarget)
217+
this.__changeScrollEvent(this.__scrollTarget, this.updatePosition)
214218
}
215219
},
216220

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,10 @@
5858
"category": "position"
5959
},
6060

61+
"scroll-target": {
62+
"extends": "scroll-target"
63+
},
64+
6165
"touch-position": {
6266
"type": "Boolean",
6367
"desc": "Allows for the target position to be set by the mouse position, when the target of the menu is either clicked or touched",

‎ui/src/components/parallax/QParallax.js‎

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ export default Vue.extend({
1919
type: Number,
2020
default: 1,
2121
validator: v => v >= 0 && v <= 1
22+
},
23+
24+
scrollTarget: {
25+
default: void 0
2226
}
2327
},
2428

@@ -32,6 +36,11 @@ export default Vue.extend({
3236
watch: {
3337
height () {
3438
this.__updatePos()
39+
},
40+
41+
scrollTarget () {
42+
this.__unconfigureScrollTarget()
43+
this.__configureScrollTarget()
3544
}
3645
},
3746

@@ -42,7 +51,7 @@ export default Vue.extend({
4251
},
4352

4453
__onResize () {
45-
if (this.scrollTarget) {
54+
if (this.__scrollTarget) {
4655
this.mediaHeight = this.media.naturalHeight || this.media.videoHeight || height(this.media)
4756
this.__updatePos()
4857
}
@@ -51,14 +60,14 @@ export default Vue.extend({
5160
__updatePos () {
5261
let containerTop, containerHeight, containerBottom, top, bottom
5362

54-
if (this.scrollTarget === window) {
63+
if (this.__scrollTarget === window) {
5564
containerTop = 0
5665
containerHeight = window.innerHeight
5766
containerBottom = containerHeight
5867
}
5968
else {
60-
containerTop = offset(this.scrollTarget).top
61-
containerHeight = height(this.scrollTarget)
69+
containerTop = offset(this.__scrollTarget).top
70+
containerHeight = height(this.__scrollTarget)
6271
containerBottom = containerTop + containerHeight
6372
}
6473

@@ -75,6 +84,19 @@ export default Vue.extend({
7584
__setPos (offset) {
7685
// apply it immediately without any delay
7786
this.media.style.transform = `translate3D(-50%,${Math.round(offset)}px, 0)`
87+
},
88+
89+
__configureScrollTarget () {
90+
this.__scrollTarget = getScrollTarget(this.$el, this.scrollTarget)
91+
this.__scrollTarget.addEventListener('scroll', this.__updatePos, listenOpts.passive)
92+
this.__onResize()
93+
},
94+
95+
__unconfigureScrollTarget () {
96+
if (this.__scrollTarget !== void 0) {
97+
this.__scrollTarget.removeEventListener('scroll', this.__updatePos, listenOpts.passive)
98+
this.__scrollTarget = void 0
99+
}
78100
}
79101
},
80102

@@ -120,17 +142,14 @@ export default Vue.extend({
120142

121143
this.media.onload = this.media.onloadstart = this.media.loadedmetadata = this.__onResize
122144

123-
this.scrollTarget = getScrollTarget(this.$el)
124-
125145
window.addEventListener('resize', this.resizeHandler, listenOpts.passive)
126-
this.scrollTarget.addEventListener('scroll', this.__updatePos, listenOpts.passive)
127146

128-
this.__onResize()
147+
this.__configureScrollTarget()
129148
},
130149

131150
beforeDestroy () {
132151
window.removeEventListener('resize', this.resizeHandler, listenOpts.passive)
133-
this.scrollTarget !== void 0 && this.scrollTarget.removeEventListener('scroll', this.__updatePos, listenOpts.passive)
152+
this.__unconfigureScrollTarget()
134153
this.media.onload = this.media.onloadstart = this.media.loadedmetadata = null
135154
}
136155
})

‎ui/src/components/parallax/QParallax.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@
3434
"desc": "Speed of parallax effect (0.0 < x < 1.0)",
3535
"examples": [ ":speed=\"0.24\"" ],
3636
"category": "behavior"
37+
},
38+
39+
"scroll-target": {
40+
"extends": "scroll-target"
3741
}
3842
},
3943

‎ui/src/components/pull-to-refresh/QPullToRefresh.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,11 @@ export default Vue.extend({
2424
color: String,
2525
icon: String,
2626
noMouse: Boolean,
27-
disable: Boolean
27+
disable: Boolean,
28+
29+
scrollTarget: {
30+
default: void 0
31+
}
2832
},
2933

3034
data () {
@@ -47,6 +51,12 @@ export default Vue.extend({
4751
}
4852
},
4953

54+
watch: {
55+
scrollTarget () {
56+
this.updateScrollTarget()
57+
}
58+
},
59+
5060
methods: {
5161
trigger () {
5262
this.$emit('refresh', () => {
@@ -57,7 +67,7 @@ export default Vue.extend({
5767
},
5868

5969
updateScrollTarget () {
60-
this.scrollContainer = getScrollTarget(this.$el)
70+
this.scrollContainer = getScrollTarget(this.$el, this.scrollTarget)
6171
},
6272

6373
__pull (event) {

‎ui/src/components/pull-to-refresh/QPullToRefresh.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@
2121

2222
"disable": {
2323
"extends": "disable"
24+
},
25+
26+
"scroll-target": {
27+
"extends": "scroll-target"
2428
}
2529
},
2630

‎ui/src/components/scroll-observer/QScrollObserver.js‎

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@ export default Vue.extend({
88

99
props: {
1010
debounce: [String, Number],
11-
horizontal: Boolean
11+
horizontal: Boolean,
12+
13+
scrollTarget: {
14+
default: void 0
15+
}
1216
},
1317

1418
render () {}, // eslint-disable-line
@@ -22,6 +26,13 @@ export default Vue.extend({
2226
}
2327
},
2428

29+
watch: {
30+
scrollTarget () {
31+
this.__unconfigureScrollTarget()
32+
this.__configureScrollTarget()
33+
}
34+
},
35+
2536
methods: {
2637
getPosition () {
2738
return {
@@ -44,13 +55,19 @@ export default Vue.extend({
4455
},
4556

4657
__emit () {
58+
const fn = this.horizontal === true
59+
? getHorizontalScrollPosition
60+
: getScrollPosition
61+
4762
const
48-
pos = Math.max(0, (this.horizontal === true ? getHorizontalScrollPosition(this.target) : getScrollPosition(this.target))),
63+
pos = Math.max(0, fn(this.__scrollTarget)),
4964
delta = pos - this.pos,
50-
dir = this.horizontal
65+
dir = this.horizontal === true
5166
? delta < 0 ? 'left' : 'right'
5267
: delta < 0 ? 'up' : 'down'
68+
5369
this.dirChanged = this.dir !== dir
70+
5471
if (this.dirChanged) {
5572
this.dir = dir
5673
this.dirChangePos = this.pos
@@ -59,18 +76,29 @@ export default Vue.extend({
5976
this.timer = null
6077
this.pos = pos
6178
this.$emit('scroll', this.getPosition())
79+
},
80+
81+
__configureScrollTarget () {
82+
this.__scrollTarget = getScrollTarget(this.$el.parentNode, this.scrollTarget)
83+
this.__scrollTarget.addEventListener('scroll', this.trigger, listenOpts.passive)
84+
this.trigger(true)
85+
},
86+
87+
__unconfigureScrollTarget () {
88+
if (this.__scrollTarget !== void 0) {
89+
this.__scrollTarget.removeEventListener('scroll', this.trigger, listenOpts.passive)
90+
this.__scrollTarget = void 0
91+
}
6292
}
6393
},
6494

6595
mounted () {
66-
this.target = getScrollTarget(this.$el.parentNode)
67-
this.target.addEventListener('scroll', this.trigger, listenOpts.passive)
68-
this.trigger(true)
96+
this.__configureScrollTarget()
6997
},
7098

7199
beforeDestroy () {
72100
clearTimeout(this.timer)
73101
cancelAnimationFrame(this.timer)
74-
this.target !== void 0 && this.target.removeEventListener('scroll', this.trigger, listenOpts.passive)
102+
this.__unconfigureScrollTarget()
75103
}
76104
})

‎ui/src/components/scroll-observer/QScrollObserver.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@
1515
"type": "Boolean",
1616
"desc": "Register for horizontal scroll instead of vertical (which is default)",
1717
"category": "behavior"
18+
},
19+
20+
"scroll-target": {
21+
"extends": "scroll-target"
1822
}
1923
},
2024

0 commit comments

Comments
 (0)