me.webbeef.org
Rewild Your Web
web
browser
dweb
ui: replace mouse events by pointer events
webbeef.tngl.sh
+20
-15
ui/system/color_picker.js
+20
-15
ui/system/color_picker.js
···
207
207
}
208
208
209
209
// Event handlers for the picker areas
210
-
handleSLMouseDown(e) {
210
+
handleSLPointerDown(e) {
211
211
this.dragging = "sl";
212
212
this.updateSL(e);
213
-
document.addEventListener("mousemove", this.handleMouseMove);
214
-
document.addEventListener("mouseup", this.handleMouseUp);
213
+
document.addEventListener("pointermove", this.handlePointerMove);
214
+
document.addEventListener("pointerup", this.handlePointerUp);
215
215
}
216
216
217
-
handleHueMouseDown(e) {
217
+
handleHuePointerDown(e) {
218
218
this.dragging = "hue";
219
219
this.updateHue(e);
220
-
document.addEventListener("mousemove", this.handleMouseMove);
221
-
document.addEventListener("mouseup", this.handleMouseUp);
220
+
document.addEventListener("pointermove", this.handlePointerMove);
221
+
document.addEventListener("pointerup", this.handlePointerUp);
222
222
}
223
223
224
-
handleMouseMove = (e) => {
225
-
if (this.dragging === "sl") this.updateSL(e);
226
-
else if (this.dragging === "hue") this.updateHue(e);
224
+
handlePointerMove = (e) => {
225
+
if (this.dragging === "sl") {
226
+
this.updateSL(e);
227
+
} else if (this.dragging === "hue") {
228
+
this.updateHue(e);
229
+
}
227
230
};
228
231
229
-
handleMouseUp = () => {
232
+
handlePointerUp = () => {
230
233
this.dragging = null;
231
-
document.removeEventListener("mousemove", this.handleMouseMove);
232
-
document.removeEventListener("mouseup", this.handleMouseUp);
234
+
document.removeEventListener("pointermove", this.handlePointerMove);
235
+
document.removeEventListener("pointerup", this.handlePointerUp);
233
236
};
234
237
235
238
updateSL(e) {
···
272
275
273
276
handleHexInput(e) {
274
277
let hex = e.target.value;
275
-
if (!hex.startsWith("#")) hex = "#" + hex;
278
+
if (!hex.startsWith("#")) {
279
+
hex = "#" + hex;
280
+
}
276
281
if (/^#[0-9a-fA-F]{6}$/.test(hex)) {
277
282
const rgb = this.hexToRgb(hex);
278
283
if (rgb) {
···
320
325
<div
321
326
class="sl-area"
322
327
style="background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${hueColor});"
323
-
@mousedown=${this.handleSLMouseDown}
328
+
@pointerdown=${this.handleSLPointerDown}
324
329
>
325
330
<div
326
331
class="sl-cursor"
···
329
334
</div>
330
335
331
336
<!-- Hue bar -->
332
-
<div class="hue-bar" @mousedown=${this.handleHueMouseDown}>
337
+
<div class="hue-bar" @pointerdown=${this.handleHuePointerDown}>
333
338
<div
334
339
class="hue-cursor"
335
340
style="top: ${(this.hue / 360) * 100}%;"
+3
-3
ui/system/index.js
+3
-3
ui/system/index.js
···
723
723
// Desktop-only header handlers
724
724
const headerSpan = document.querySelector("header span");
725
725
if (headerSpan) {
726
-
headerSpan.onmousedown = (e) => {
726
+
headerSpan.onpointerdown = (e) => {
727
727
e.preventDefault();
728
728
navigator.embedder.startWindowDrag();
729
729
};
···
731
731
732
732
const headerResize = document.querySelector("header .resize");
733
733
if (headerResize) {
734
-
headerResize.onmousedown = (e) => {
734
+
headerResize.onpointerdown = (e) => {
735
735
e.preventDefault();
736
736
navigator.embedder.startWindowResize();
737
737
};
···
739
739
740
740
const headerClose = document.querySelector("header .close");
741
741
if (headerClose) {
742
-
headerClose.onmousedown = (e) => {
742
+
headerClose.onpointerdown = (e) => {
743
743
e.preventDefault();
744
744
navigator.embedder.closeCurrentOSWindow();
745
745
};
+8
-8
ui/system/layout_manager.js
+8
-8
ui/system/layout_manager.js
···
677
677
handleEl.style.height = "0.5em";
678
678
}
679
679
680
-
handleEl.addEventListener("mousedown", (e) => {
680
+
handleEl.addEventListener("pointerdown", (event) => {
681
681
e.preventDefault();
682
-
this.startResize(e, handle.splitNode, handle.direction, panelIndex);
682
+
this.startResize(event, handle.splitNode, handle.direction, panelIndex);
683
683
});
684
684
685
685
panel.element.appendChild(handleEl);
···
741
741
// Disable pointer events on all webviews during resize
742
742
document.body.classList.add("resizing");
743
743
744
-
const onMouseMove = (e) => {
744
+
const onPointerMove = (e) => {
745
745
e.preventDefault();
746
746
e.stopPropagation();
747
747
···
755
755
this.applyPanelLayout(panelIndex);
756
756
};
757
757
758
-
const onMouseUp = (e) => {
758
+
const onPointerUp = (e) => {
759
759
e.preventDefault();
760
760
e.stopPropagation();
761
761
762
-
document.body.removeEventListener("mousemove", onMouseMove, true);
763
-
document.body.removeEventListener("mouseup", onMouseUp, true);
762
+
document.body.removeEventListener("pointermove", onPointerMove, true);
763
+
document.body.removeEventListener("pointerup", onPointerUp, true);
764
764
document.body.style.cursor = "";
765
765
document.body.style.userSelect = "";
766
766
···
769
769
};
770
770
771
771
// Use capture phase on body to intercept events before they reach webviews
772
-
document.body.addEventListener("mousemove", onMouseMove, true);
773
-
document.body.addEventListener("mouseup", onMouseUp, true);
772
+
document.body.addEventListener("pointermove", onPointerMove, true);
773
+
document.body.addEventListener("pointerup", onPointerUp, true);
774
774
document.body.style.cursor =
775
775
direction === "horizontal" ? "col-resize" : "row-resize";
776
776
document.body.style.userSelect = "none";