Skip to content

Commit af85cee

Browse files
rstoenescurstoenescu
committed
fix(touch): Touch related improvements quasarframework#5532 
1 parent 0eb9f53 commit af85cee

File tree

9 files changed

+188
-181
lines changed

9 files changed

+188
-181
lines changed

‎ui/dev/components/touch-directives/touch-pan.vue‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -24,17 +24,17 @@
2424
<pre>{{ info }}</pre>
2525
</div>
2626
<div v-else class="text-center q-pa-xl custom-area-placeholder">
27-
<q-icon name="arrow_upward" />
27+
<q-icon size="md" name="arrow_upward" />
2828
<div class="row items-center">
29-
<q-icon name="arrow_back" />
29+
<q-icon size="md" name="arrow_back" />
3030
<div>Pan in any direction</div>
31-
<q-icon name="arrow_forward" />
31+
<q-icon size="md" name="arrow_forward" />
3232
</div>
33-
<q-icon name="arrow_downward" />
33+
<q-icon size="md" name="arrow_downward" />
3434
</div>
3535

3636
<div v-if="panning" class="touch-signal">
37-
<q-icon name="touch_app" />
37+
<q-icon size="md" name="touch_app" />
3838
</div>
3939
</div>
4040

@@ -59,12 +59,12 @@
5959
<div v-else class="text-center q-pa-xl custom-area-placeholder">
6060
<div class="row items-center">
6161
<div>Pan right</div>
62-
<q-icon name="arrow_forward" />
62+
<q-icon size="md" name="arrow_forward" />
6363
</div>
6464
</div>
6565

6666
<div v-if="panningRight" class="touch-signal">
67-
<q-icon name="touch_app" />
67+
<q-icon size="md" name="touch_app" />
6868
</div>
6969
</div>
7070

@@ -87,15 +87,15 @@
8787
<pre>{{ infoUpRight }}</pre>
8888
</div>
8989
<div v-else class="text-center q-pa-xl custom-area-placeholder">
90-
<q-icon name="arrow_upward" />
90+
<q-icon size="md" name="arrow_upward" />
9191
<div class="row items-center">
9292
<div>Pan up & right</div>
93-
<q-icon name="arrow_forward" />
93+
<q-icon size="md" name="arrow_forward" />
9494
</div>
9595
</div>
9696

9797
<div v-if="panningUpRight" class="touch-signal">
98-
<q-icon name="touch_app" />
98+
<q-icon size="md" name="touch_app" />
9999
</div>
100100
</div>
101101

@@ -126,13 +126,13 @@
126126
<pre>{{ infoHorizontal }}</pre>
127127
</div>
128128
<div v-else class="row items-center q-pa-xl custom-area-placeholder">
129-
<q-icon name="arrow_back" />
129+
<q-icon size="md" name="arrow_back" />
130130
<div>Pan to left or right only</div>
131-
<q-icon name="arrow_forward" />
131+
<q-icon size="md" name="arrow_forward" />
132132
</div>
133133

134134
<div v-if="panningHorizontal" class="touch-signal">
135-
<q-icon name="touch_app" />
135+
<q-icon size="md" name="touch_app" />
136136
</div>
137137
</div>
138138

@@ -155,15 +155,15 @@
155155
<pre>{{ infoVertical }}</pre>
156156
</div>
157157
<div v-else class="text-center q-pa-xl custom-area-placeholder">
158-
<q-icon name="arrow_upward" />
158+
<q-icon size="md" name="arrow_upward" />
159159
<div>
160160
Pan to up or down only
161161
</div>
162-
<q-icon name="arrow_downward" />
162+
<q-icon size="md" name="arrow_downward" />
163163
</div>
164164

165165
<div v-if="panningVertical" class="touch-signal">
166-
<q-icon name="touch_app" />
166+
<q-icon size="md" name="touch_app" />
167167
</div>
168168
</div>
169169

@@ -177,7 +177,7 @@
177177
<div
178178
v-touch-pan.prevent.mouse="handlePanTest"
179179
@click="e => onEvt('click', e)"
180-
class="row flex-center"
180+
class="row flex-center bg-blue-4"
181181
>
182182
<div @touchstart="handleEvt" @mousedown="handleEvt" style="padding: 24px" class="cursor-pointer bg-primary text-white rounded-borders shadow-2 relative-position">
183183
<div>
@@ -189,17 +189,17 @@
189189
</div>
190190

191191
<div v-else class="text-center q-pa-xl custom-area-placeholder">
192-
<q-icon name="arrow_upward" />
192+
<q-icon size="md" name="arrow_upward" />
193193
<div class="row items-center">
194-
<q-icon name="arrow_back" />
194+
<q-icon size="md" name="arrow_back" />
195195
<div>Pan in any direction</div>
196-
<q-icon name="arrow_forward" />
196+
<q-icon size="md" name="arrow_forward" />
197197
</div>
198-
<q-icon name="arrow_downward" />
198+
<q-icon size="md" name="arrow_downward" />
199199
</div>
200200

201201
<div v-if="panningTest" class="touch-signal">
202-
<q-icon name="touch_app" />
202+
<q-icon size="md" name="touch_app" />
203203
</div>
204204
</div>
205205
</div>
@@ -211,25 +211,25 @@
211211
<div
212212
v-touch-pan.prevent.capture.mouse.mouseCapture="handlePanTestCapture"
213213
@click="e => onEvt('click', e)"
214-
class="row flex-center"
214+
class="row flex-center bg-blue-4"
215215
>
216216
<div @touchstart.stop @mousedown.stop style="padding: 24px" class="cursor-pointer bg-primary text-white rounded-borders shadow-2 relative-position">
217217
<div v-if="infoTestCapture" class="custom-info">
218218
<pre>{{ infoTestCapture }}</pre>
219219
</div>
220220

221221
<div v-else class="text-center q-pa-xl custom-area-placeholder">
222-
<q-icon name="arrow_upward" />
222+
<q-icon size="md" name="arrow_upward" />
223223
<div class="row items-center">
224-
<q-icon name="arrow_back" />
224+
<q-icon size="md" name="arrow_back" />
225225
<div>Pan in any direction</div>
226-
<q-icon name="arrow_forward" />
226+
<q-icon size="md" name="arrow_forward" />
227227
</div>
228-
<q-icon name="arrow_downward" />
228+
<q-icon size="md" name="arrow_downward" />
229229
</div>
230230

231231
<div v-if="panningTestCapture" class="touch-signal">
232-
<q-icon name="touch_app" />
232+
<q-icon size="md" name="touch_app" />
233233
</div>
234234
</div>
235235
</div>

‎ui/src/components/btn/QBtn.js‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import BtnMixin from '../../mixins/btn.js'
77

88
import slot from '../../utils/slot.js'
99
import { stopAndPrevent, listenOpts } from '../../utils/event.js'
10+
import { getTouchTarget } from '../../utils/touch.js'
1011

1112
const { passiveCapture } = listenOpts
1213

@@ -120,10 +121,10 @@ export default Vue.extend({
120121
__onTouchstart (e) {
121122
if (touchTarget !== this.$el) {
122123
touchTarget !== void 0 && this.__cleanup()
123-
124124
touchTarget = e.target
125-
touchTarget.addEventListener('touchcancel', this.__onPressEnd, passiveCapture)
126-
touchTarget.addEventListener('touchend', this.__onPressEnd, passiveCapture)
125+
const target = getTouchTarget(touchTarget)
126+
target.addEventListener('touchcancel', this.__onPressEnd, passiveCapture)
127+
target.addEventListener('touchend', this.__onPressEnd, passiveCapture)
127128
}
128129

129130
this.$emit('touchstart', e)
@@ -132,7 +133,6 @@ export default Vue.extend({
132133
__onMousedown (e) {
133134
if (mouseTarget !== this.$el) {
134135
mouseTarget !== void 0 && this.__cleanup()
135-
136136
mouseTarget = this.$el
137137
document.addEventListener('mouseup', this.__onPressEnd, passiveCapture)
138138
}
@@ -161,18 +161,20 @@ export default Vue.extend({
161161
this.__cleanup()
162162
},
163163

164-
__cleanup () {
164+
__cleanup (destroying) {
165165
if (
166+
destroying !== true &&
166167
(touchTarget === this.$el || mouseTarget === this.$el) &&
167168
this.$refs.blurTarget !== void 0 &&
168169
this.$refs.blurTarget !== document.activeElement
169170
) {
170171
this.$refs.blurTarget.focus()
171172
}
172173

173-
if (touchTarget !== void 0 && touchTarget === this.$el) {
174-
touchTarget.removeEventListener('touchcancel', this.__onPressEnd, passiveCapture)
175-
touchTarget.removeEventListener('touchend', this.__onPressEnd, passiveCapture)
174+
if (touchTarget === this.$el) {
175+
const target = getTouchTarget(touchTarget)
176+
target.removeEventListener('touchcancel', this.__onPressEnd, passiveCapture)
177+
target.removeEventListener('touchend', this.__onPressEnd, passiveCapture)
176178
touchTarget = void 0
177179
}
178180

@@ -192,7 +194,7 @@ export default Vue.extend({
192194
},
193195

194196
beforeDestroy () {
195-
this.__cleanup()
197+
this.__cleanup(true)
196198
},
197199

198200
render (h) {
@@ -216,14 +218,14 @@ export default Vue.extend({
216218
if (this.$q.platform.has.touch === true) {
217219
data.on.touchstart = this.__onTouchstart
218220
}
221+
}
219222

220-
if (this.ripple !== false) {
221-
data.directives = [{
222-
name: 'ripple',
223-
value: this.computedRipple,
224-
modifiers: { center: this.isRound }
225-
}]
226-
}
223+
if (this.disable !== true && this.ripple !== false) {
224+
data.directives = [{
225+
name: 'ripple',
226+
value: this.computedRipple,
227+
modifiers: { center: this.isRound }
228+
}]
227229
}
228230

229231
if (this.icon !== void 0) {

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

Lines changed: 30 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import TransitionMixin from '../../mixins/transition.js'
77

88
import { getScrollTarget } from '../../utils/scroll.js'
99
import { listenOpts } from '../../utils/event.js'
10+
import { addEvt, cleanEvt, getTouchTarget } from '../../utils/touch.js'
11+
import { clearSelection } from '../../utils/selection.js'
1012
import slot from '../../utils/slot.js'
1113
import {
1214
validatePosition, validateOffset, setPosition, parsePosition
@@ -97,6 +99,7 @@ export default Vue.extend({
9799

98100
__anchorCleanup () {
99101
this.__unconfigureScrollTarget()
102+
cleanEvt(this, 'tooltipTemp')
100103
},
101104

102105
updatePosition () {
@@ -123,56 +126,50 @@ export default Vue.extend({
123126
},
124127

125128
__delayShow (evt) {
126-
this.$q.platform.is.mobile === true && document.body.classList.add('non-selectable')
129+
if (this.$q.platform.is.mobile === true) {
130+
clearSelection()
131+
document.body.classList.add('non-selectable')
132+
133+
const target = getTouchTarget(this.anchorEl)
134+
const evts = ['touchmove', 'touchcancel', 'touchend', 'click']
135+
.map(e => ([ target, e, '__delayHide', 'passiveCapture' ]))
136+
137+
addEvt(this, 'tooltipTemp', evts)
138+
}
139+
127140
this.__setTimeout(() => {
128141
this.show(evt)
129142
}, this.delay)
130143
},
131144

132145
__delayHide (evt) {
133146
this.__clearTimeout()
134-
this.$q.platform.is.mobile === true && document.body.classList.remove('non-selectable')
135-
this.hide(evt)
136-
},
137-
138-
__unconfigureAnchorEl () {
139-
if (this.anchorEl === void 0) {
140-
return
141-
}
142147

143-
// mobile hover ref https://stackoverflow.com/a/22444532
144148
if (this.$q.platform.is.mobile === true) {
145-
this.anchorEl.removeEventListener('touchstart', this.__delayShow, passive)
146-
;['touchcancel', 'touchmove', 'click'].forEach(evt => {
147-
this.anchorEl.removeEventListener(evt, this.__delayHide, passive)
148-
})
149-
}
150-
else {
151-
this.anchorEl.removeEventListener('mouseenter', this.__delayShow, passive)
149+
cleanEvt(this, 'tooltipTemp')
150+
clearSelection()
151+
// delay needed otherwise selection still occurs
152+
setTimeout(() => {
153+
document.body.classList.remove('non-selectable')
154+
}, 10)
152155
}
153156

154-
if (this.$q.platform.is.ios !== true) {
155-
this.anchorEl.removeEventListener('mouseleave', this.__delayHide, passive)
156-
}
157+
this.hide(evt)
157158
},
158159

159160
__configureAnchorEl () {
160161
if (this.noParentEvent === true || this.anchorEl === void 0) { return }
161162

162-
// mobile hover ref https://stackoverflow.com/a/22444532
163-
if (this.$q.platform.is.mobile) {
164-
this.anchorEl.addEventListener('touchstart', this.__delayShow, passive)
165-
;['touchcancel', 'touchmove', 'click'].forEach(evt => {
166-
this.anchorEl.addEventListener(evt, this.__delayHide, passive)
167-
})
168-
}
169-
else {
170-
this.anchorEl.addEventListener('mouseenter', this.__delayShow, passive)
171-
}
163+
const evts = this.$q.platform.is.mobile === true
164+
? [
165+
[ this.anchorEl, 'touchstart', '__delayShow', 'passive' ]
166+
]
167+
: [
168+
[ this.anchorEl, 'mouseenter', '__delayShow', 'passive' ],
169+
[ this.anchorEl, 'mouseleave', '__delayHide', 'passive' ]
170+
]
172171

173-
if (this.$q.platform.is.ios !== true) {
174-
this.anchorEl.addEventListener('mouseleave', this.__delayHide, passive)
175-
}
172+
addEvt(this, 'anchor', evts)
176173
},
177174

178175
__unconfigureScrollTarget () {

0 commit comments

Comments
 (0)