me.webbeef.org
Rewild Your Web
web
browser
dweb
ui: replace touch events by pointer events
webbeef.tngl.sh
+15
-22
ui/system/edge_gesture_handler.js
+15
-22
ui/system/edge_gesture_handler.js
···
59
59
this.edgeOverlays[edge.name] = overlay;
60
60
61
61
// Add listeners to each edge overlay
62
-
overlay.addEventListener("touchstart", this.onEdgeTouchStart.bind(this), {
62
+
overlay.addEventListener("pointerdown", this.onEdgePointerDown.bind(this), {
63
63
capture: false,
64
64
});
65
-
overlay.addEventListener("touchmove", this.onTouchMove.bind(this), {
65
+
overlay.addEventListener("pointermove", this.onPointerMove.bind(this), {
66
66
capture: false,
67
67
});
68
-
overlay.addEventListener("touchend", this.onTouchEnd.bind(this), {
68
+
overlay.addEventListener("pointerup", this.onPointerUp.bind(this), {
69
69
capture: false,
70
70
});
71
-
overlay.addEventListener("touchcancel", this.onTouchCancel.bind(this), {
71
+
overlay.addEventListener("pointercancel", this.onPointerCancel.bind(this), {
72
72
capture: false,
73
73
});
74
74
});
75
75
}
76
76
77
-
onEdgeTouchStart(event) {
78
-
if (event.touches.length !== 1) {
79
-
return;
80
-
}
81
-
82
-
const touch = event.touches[0];
83
-
84
-
this.touchStartX = touch.clientX;
85
-
this.touchStartY = touch.clientY;
86
-
this.touchCurrentX = touch.clientX;
87
-
this.touchCurrentY = touch.clientY;
77
+
onEdgePointerDown(event) {
78
+
this.touchStartX = event.clientX;
79
+
this.touchStartY = event.clientY;
80
+
this.touchCurrentX = event.clientX;
81
+
this.touchCurrentY = event.clientY;
88
82
89
83
// Set edge swipe state based on which edge was touched
90
84
this.isEdgeSwipe = true;
···
97
91
event.preventDefault();
98
92
}
99
93
100
-
onTouchMove(event) {
101
-
if (!this.isEdgeSwipe || event.touches.length !== 1) {
94
+
onPointerMove(event) {
95
+
if (!this.isEdgeSwipe) {
102
96
return;
103
97
}
104
98
105
-
const touch = event.touches[0];
106
-
this.touchCurrentX = touch.clientX;
107
-
this.touchCurrentY = touch.clientY;
99
+
this.touchCurrentX = event.clientX;
100
+
this.touchCurrentY = event.clientY;
108
101
109
102
const deltaX = this.touchCurrentX - this.touchStartX;
110
103
const deltaY = this.touchCurrentY - this.touchStartY;
···
125
118
}
126
119
}
127
120
128
-
onTouchEnd() {
121
+
onPointerUp() {
129
122
if (!this.isEdgeSwipe) {
130
123
return;
131
124
}
···
142
135
this.resetGestureState();
143
136
}
144
137
145
-
onTouchCancel() {
138
+
onPointerCancel() {
146
139
this.resetGestureState();
147
140
this.animatePreviewOut();
148
141
}
+11
-13
ui/system/mobile_notification_sheet.js
+11
-13
ui/system/mobile_notification_sheet.js
···
86
86
}
87
87
88
88
// Touch handlers for swipe-to-dismiss
89
-
handleTouchStart(e, notification) {
90
-
const touch = e.touches[0];
89
+
handlePointerDown(event, notification) {
91
90
this.swipeState = {
92
91
notification,
93
-
startX: touch.clientX,
94
-
currentX: touch.clientX,
95
-
element: e.currentTarget,
92
+
startX: event.clientX,
93
+
currentX: event.clientX,
94
+
element: event.currentTarget,
96
95
};
97
-
e.currentTarget.classList.add("swiping");
96
+
event.currentTarget.classList.add("swiping");
98
97
}
99
98
100
-
handleTouchMove(e) {
99
+
handlePointerMove(event) {
101
100
if (!this.swipeState) {
102
101
return;
103
102
}
104
103
105
-
const touch = e.touches[0];
106
-
this.swipeState.currentX = touch.clientX;
104
+
this.swipeState.currentX = event.clientX;
107
105
const deltaX = this.swipeState.currentX - this.swipeState.startX;
108
106
109
107
// Only allow left swipe (dismiss)
···
113
111
}
114
112
}
115
113
116
-
handleTouchEnd(e) {
114
+
handlePointerUp(event) {
117
115
if (!this.swipeState) {
118
116
return;
119
117
}
···
171
169
<div
172
170
class="notification-item"
173
171
@click=${() => this.handleNotificationClick(notification)}
174
-
@touchstart=${(e) => this.handleTouchStart(e, notification)}
175
-
@touchmove=${this.handleTouchMove}
176
-
@touchend=${this.handleTouchEnd}
172
+
@pointerdown=${(e) => this.handlePointerDown(e, notification)}
173
+
@pointermove=${this.handlePointerMove}
174
+
@pointerup=${this.handlePointerUp}
177
175
>
178
176
<div class="notification-icon">
179
177
${notification.iconUrl
+10
-12
ui/system/mobile_overview.js
+10
-12
ui/system/mobile_overview.js
···
76
76
}
77
77
78
78
// Touch handlers for swipe-up-to-close on cards
79
-
handleTouchStart(e, tab) {
80
-
const touch = e.touches[0];
79
+
handlePointerDown(event, tab) {
81
80
this.swipeState = {
82
81
tab,
83
-
startY: touch.clientY,
84
-
currentY: touch.clientY,
85
-
element: e.currentTarget,
82
+
startY: event.clientY,
83
+
currentY: event.clientY,
84
+
element: event.currentTarget,
86
85
};
87
86
}
88
87
89
-
handleTouchMove(e) {
88
+
handlePointerMove(event) {
90
89
if (!this.swipeState) {
91
90
return;
92
91
}
93
92
94
-
const touch = e.touches[0];
95
-
this.swipeState.currentY = touch.clientY;
93
+
this.swipeState.currentY = event.clientY;
96
94
const deltaY = this.swipeState.currentY - this.swipeState.startY;
97
95
98
96
// Only allow upward swipe (close)
···
102
100
}
103
101
}
104
102
105
-
handleTouchEnd(e) {
103
+
handlePointerUp(event) {
106
104
if (!this.swipeState) {
107
105
return;
108
106
}
···
147
145
<div
148
146
class="tab-card ${tab.id === this.activeTabId ? "active" : ""}"
149
147
@click=${() => this.handleTabClick(tab)}
150
-
@touchstart=${(e) => this.handleTouchStart(e, tab)}
151
-
@touchmove=${this.handleTouchMove}
152
-
@touchend=${this.handleTouchEnd}
148
+
@pointerdown=${(e) => this.handlePointerDown(e, tab)}
149
+
@pointermove=${this.handlePointerMove}
150
+
@pointerup=${this.handlePointerUp}
153
151
>
154
152
${tab.screenshotUrl
155
153
? html`<img