Skip to content

Commit

Permalink
Refactor all components using target/scroll-target to use the same in…
Browse files Browse the repository at this point in the history 
…terface #5906 (#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 #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>
  • Loading branch information
@pdanpdan @rstoenescu
pdanpdan and rstoenescu committed Jan 16, 2020
1 parent 40984e8 commit 06f7696
Show file tree
Hide file tree
Showing 16 changed files with 142 additions and 90 deletions.
17 changes: 4 additions & 13 deletions ui/src/components/infinite-scroll/QInfiniteScroll.js
View file
Expand Up @@ -18,7 +18,9 @@ export default Vue.extend({
type: [String, Number],
default: 100
},
scrollTarget: {},
scrollTarget: {
default: void 0
},
disable: Boolean,
reverse: Boolean
},
Expand Down Expand Up @@ -132,18 +134,7 @@ export default Vue.extend({
this.scrollContainer.removeEventListener('scroll', this.poll, listenOpts.passive)
}

if (typeof this.scrollTarget === 'string') {
this.scrollContainer = document.querySelector(this.scrollTarget)
if (this.scrollContainer === null) {
console.error(`InfiniteScroll: scroll target container "${this.scrollTarget}" not found`, this)
return
}
}
else {
this.scrollContainer = this.scrollTarget === document.defaultView || this.scrollTarget instanceof Element
? this.scrollTarget
: getScrollTarget(this.$el)
}
this.scrollContainer = getScrollTarget(this.$el, this.scrollTarget)

if (this.working === true) {
this.scrollContainer.addEventListener('scroll', this.poll, listenOpts.passive)
Expand Down
8 changes: 1 addition & 7 deletions ui/src/components/infinite-scroll/QInfiniteScroll.json
View file
Expand Up @@ -22,13 +22,7 @@
},

"scroll-target": {
"type": [ "Element", "String" ],
"desc": "CSS selector or DOM element to be used as scroll container instead of the auto detected one",
"examples": [
":scroll-target=\"$refs.scrollTarget\"",
"scroll-target=\"scroll-target\""
],
"category": "behavior"
"extends": "scroll-target"
},

"disable": {
Expand Down
16 changes: 10 additions & 6 deletions ui/src/components/menu/QMenu.js
View file
Expand Up @@ -52,6 +52,10 @@ export default Vue.extend({
validator: validateOffset
},

scrollTarget: {
default: void 0
},

touchPosition: Boolean,

maxHeight: {
Expand Down Expand Up @@ -201,16 +205,16 @@ export default Vue.extend({
},

__unconfigureScrollTarget () {
if (this.scrollTarget !== void 0) {
this.__changeScrollEvent(this.scrollTarget)
this.scrollTarget = void 0
if (this.__scrollTarget !== void 0) {
this.__changeScrollEvent(this.__scrollTarget)
this.__scrollTarget = void 0
}
},

__configureScrollTarget () {
if (this.anchorEl !== void 0) {
this.scrollTarget = getScrollTarget(this.anchorEl)
this.__changeScrollEvent(this.scrollTarget, this.updatePosition)
if (this.anchorEl !== void 0 || this.scrollTarget !== void 0) {
this.__scrollTarget = getScrollTarget(this.anchorEl, this.scrollTarget)
this.__changeScrollEvent(this.__scrollTarget, this.updatePosition)
}
},

Expand Down
4 changes: 4 additions & 0 deletions ui/src/components/menu/QMenu.json
View file
Expand Up @@ -58,6 +58,10 @@
"category": "position"
},

"scroll-target": {
"extends": "scroll-target"
},

"touch-position": {
"type": "Boolean",
"desc": "Allows for the target position to be set by the mouse position, when the target of the menu is either clicked or touched",
Expand Down
37 changes: 28 additions & 9 deletions ui/src/components/parallax/QParallax.js
View file
Expand Up @@ -19,6 +19,10 @@ export default Vue.extend({
type: Number,
default: 1,
validator: v => v >= 0 && v <= 1
},

scrollTarget: {
default: void 0
}
},

Expand All @@ -32,6 +36,11 @@ export default Vue.extend({
watch: {
height () {
this.__updatePos()
},

scrollTarget () {
this.__unconfigureScrollTarget()
this.__configureScrollTarget()
}
},

Expand All @@ -42,7 +51,7 @@ export default Vue.extend({
},

__onResize () {
if (this.scrollTarget) {
if (this.__scrollTarget) {
this.mediaHeight = this.media.naturalHeight || this.media.videoHeight || height(this.media)
this.__updatePos()
}
Expand All @@ -51,14 +60,14 @@ export default Vue.extend({
__updatePos () {
let containerTop, containerHeight, containerBottom, top, bottom

if (this.scrollTarget === window) {
if (this.__scrollTarget === window) {
containerTop = 0
containerHeight = window.innerHeight
containerBottom = containerHeight
}
else {
containerTop = offset(this.scrollTarget).top
containerHeight = height(this.scrollTarget)
containerTop = offset(this.__scrollTarget).top
containerHeight = height(this.__scrollTarget)
containerBottom = containerTop + containerHeight
}

Expand All @@ -75,6 +84,19 @@ export default Vue.extend({
__setPos (offset) {
// apply it immediately without any delay
this.media.style.transform = `translate3D(-50%,${Math.round(offset)}px, 0)`
},

__configureScrollTarget () {
this.__scrollTarget = getScrollTarget(this.$el, this.scrollTarget)
this.__scrollTarget.addEventListener('scroll', this.__updatePos, listenOpts.passive)
this.__onResize()
},

__unconfigureScrollTarget () {
if (this.__scrollTarget !== void 0) {
this.__scrollTarget.removeEventListener('scroll', this.__updatePos, listenOpts.passive)
this.__scrollTarget = void 0
}
}
},

Expand Down Expand Up @@ -120,17 +142,14 @@ export default Vue.extend({

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

this.scrollTarget = getScrollTarget(this.$el)

window.addEventListener('resize', this.resizeHandler, listenOpts.passive)
this.scrollTarget.addEventListener('scroll', this.__updatePos, listenOpts.passive)

this.__onResize()
this.__configureScrollTarget()
},

beforeDestroy () {
window.removeEventListener('resize', this.resizeHandler, listenOpts.passive)
this.scrollTarget !== void 0 && this.scrollTarget.removeEventListener('scroll', this.__updatePos, listenOpts.passive)
this.__unconfigureScrollTarget()
this.media.onload = this.media.onloadstart = this.media.loadedmetadata = null
}
})
4 changes: 4 additions & 0 deletions ui/src/components/parallax/QParallax.json
View file
Expand Up @@ -34,6 +34,10 @@
"desc": "Speed of parallax effect (0.0 < x < 1.0)",
"examples": [ ":speed=\"0.24\"" ],
"category": "behavior"
},

"scroll-target": {
"extends": "scroll-target"
}
},

Expand Down
14 changes: 12 additions & 2 deletions ui/src/components/pull-to-refresh/QPullToRefresh.js
View file
Expand Up @@ -24,7 +24,11 @@ export default Vue.extend({
color: String,
icon: String,
noMouse: Boolean,
disable: Boolean
disable: Boolean,

scrollTarget: {
default: void 0
}
},

data () {
Expand All @@ -47,6 +51,12 @@ export default Vue.extend({
}
},

watch: {
scrollTarget () {
this.updateScrollTarget()
}
},

methods: {
trigger () {
this.$emit('refresh', () => {
Expand All @@ -57,7 +67,7 @@ export default Vue.extend({
},

updateScrollTarget () {
this.scrollContainer = getScrollTarget(this.$el)
this.scrollContainer = getScrollTarget(this.$el, this.scrollTarget)
},

__pull (event) {
Expand Down
4 changes: 4 additions & 0 deletions ui/src/components/pull-to-refresh/QPullToRefresh.json
View file
Expand Up @@ -21,6 +21,10 @@

"disable": {
"extends": "disable"
},

"scroll-target": {
"extends": "scroll-target"
}
},

Expand Down
42 changes: 35 additions & 7 deletions ui/src/components/scroll-observer/QScrollObserver.js
View file
Expand Up @@ -8,7 +8,11 @@ export default Vue.extend({

props: {
debounce: [String, Number],
horizontal: Boolean
horizontal: Boolean,

scrollTarget: {
default: void 0
}
},

render () {}, // eslint-disable-line
Expand All @@ -22,6 +26,13 @@ export default Vue.extend({
}
},

watch: {
scrollTarget () {
this.__unconfigureScrollTarget()
this.__configureScrollTarget()
}
},

methods: {
getPosition () {
return {
Expand All @@ -44,13 +55,19 @@ export default Vue.extend({
},

__emit () {
const fn = this.horizontal === true
? getHorizontalScrollPosition
: getScrollPosition

const
pos = Math.max(0, (this.horizontal === true ? getHorizontalScrollPosition(this.target) : getScrollPosition(this.target))),
pos = Math.max(0, fn(this.__scrollTarget)),
delta = pos - this.pos,
dir = this.horizontal
dir = this.horizontal === true
? delta < 0 ? 'left' : 'right'
: delta < 0 ? 'up' : 'down'

this.dirChanged = this.dir !== dir

if (this.dirChanged) {
this.dir = dir
this.dirChangePos = this.pos
Expand All @@ -59,18 +76,29 @@ export default Vue.extend({
this.timer = null
this.pos = pos
this.$emit('scroll', this.getPosition())
},

__configureScrollTarget () {
this.__scrollTarget = getScrollTarget(this.$el.parentNode, this.scrollTarget)
this.__scrollTarget.addEventListener('scroll', this.trigger, listenOpts.passive)
this.trigger(true)
},

__unconfigureScrollTarget () {
if (this.__scrollTarget !== void 0) {
this.__scrollTarget.removeEventListener('scroll', this.trigger, listenOpts.passive)
this.__scrollTarget = void 0
}
}
},

mounted () {
this.target = getScrollTarget(this.$el.parentNode)
this.target.addEventListener('scroll', this.trigger, listenOpts.passive)
this.trigger(true)
this.__configureScrollTarget()
},

beforeDestroy () {
clearTimeout(this.timer)
cancelAnimationFrame(this.timer)
this.target !== void 0 && this.target.removeEventListener('scroll', this.trigger, listenOpts.passive)
this.__unconfigureScrollTarget()
}
})
4 changes: 4 additions & 0 deletions ui/src/components/scroll-observer/QScrollObserver.json
View file
Expand Up @@ -15,6 +15,10 @@
"type": "Boolean",
"desc": "Register for horizontal scroll instead of vertical (which is default)",
"category": "behavior"
},

"scroll-target": {
"extends": "scroll-target"
}
},

Expand Down
16 changes: 10 additions & 6 deletions ui/src/components/tooltip/QTooltip.js
View file
Expand Up @@ -51,6 +51,10 @@ export default Vue.extend({
validator: validateOffset
},

scrollTarget: {
default: void 0
},

delay: {
type: Number,
default: 0
Expand Down Expand Up @@ -170,20 +174,20 @@ export default Vue.extend({
},

__unconfigureScrollTarget () {
if (this.scrollTarget !== void 0) {
this.__changeScrollEvent(this.scrollTarget)
this.scrollTarget = void 0
if (this.__scrollTarget !== void 0) {
this.__changeScrollEvent(this.__scrollTarget)
this.__scrollTarget = void 0
}
},

__configureScrollTarget () {
if (this.anchorEl !== void 0) {
this.scrollTarget = getScrollTarget(this.anchorEl)
if (this.anchorEl !== void 0 || this.scrollTarget !== void 0) {
this.__scrollTarget = getScrollTarget(this.anchorEl, this.scrollTarget)
const fn = this.noParentEvent === true
? this.updatePosition
: this.hide

this.__changeScrollEvent(this.scrollTarget, fn)
this.__changeScrollEvent(this.__scrollTarget, fn)
}
},

Expand Down
4 changes: 4 additions & 0 deletions ui/src/components/tooltip/QTooltip.json
View file
Expand Up @@ -62,6 +62,10 @@
"category": "position"
},

"scroll-target": {
"extends": "scroll-target"
},

"target": {
"type": [ "Boolean", "String" ],
"desc": "Configure a target element to trigger Tooltip toggle; 'true' means it enables the parent DOM element, 'false' means it disables attaching events to any DOM elements; By using a String (CSS selector) it attaches the events to the specified DOM element (if it exists)",
Expand Down

8 comments on commit 06f7696

@dariodepaolis
Copy link
Contributor

@dariodepaolis dariodepaolis commented on 06f7696 Jan 17, 2020 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just updated from v1.7.3 to v1.7.4 and now Webstorm don't recognize anymore html tags, maybe this is related to this huge refactoring?

I tried rebuilding node_modules too and clearing cache on webstorm, but nothing... I have one project with 1.7.1 and it works without problem, another on v1.7.3 and it works, so only this new project with v1.7.4 with that error.

If i revert to v1.7.3 it works.

I know that maybe this is only a problem of Webstorm but it can be fixed in some way it will be a good thing. Thank you

@rstoenescu
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi,

The commit above didn't go into 1.7.4.
Your issue must be something else, but can't tell what...

@dariodepaolis
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok sorry, I'll try to investigate further.

@rstoenescu
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dariodepaolis pls do tell me if you get to the bottom of this. we'll also try to see if there's anything wrong.

@dariodepaolis
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, I'll let you know, I think it's something related to components registration, I'll differ 1.7.4 from 1.7.3 ;)

@panstromek
Copy link
Contributor

@panstromek panstromek commented on 06f7696 Jan 17, 2020 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dariodepaolis I will try to update the project and find out the problem. Just to clear out - WebStorm recognizes components based on web-types.json file that is generated during build from JSON API (so it's probably our problem (likely mine 😄 or someone else who broke JSON api) )

@panstromek
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems like an issue with WebStorm, so I filed an issue, you can follow it here . Workaround for now is to use 1.7.3 or revert only package.json file in node_modules/quasar to an older version.

@dariodepaolis
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you so much!

Please sign in to comment.