tangled
alpha
login
or
join now
me.webbeef.org
/
browser.html
18
fork
atom
Rewild Your Web
web
browser
dweb
18
fork
atom
overview
issues
1
pulls
pipelines
system: improve edge gestures management
webbeef.tngl.sh
3 weeks ago
c2b39b69
ea9878ad
+78
-3
5 changed files
expand all
collapse all
unified
split
ui
system
edge_gesture_handler.js
mobile.css
mobile_action_bar.js
mobile_layout_manager.js
mobile_notification_sheet.js
+15
ui/system/edge_gesture_handler.js
···
332
this.peekPreview.style.transform = "";
333
}
334
}
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
335
}
···
332
this.peekPreview.style.transform = "";
333
}
334
}
335
+
336
+
// Enable or disable specific edge overlays
337
+
// edges: object with left, right, bottom, top boolean properties
338
+
setEdgesEnabled(edges) {
339
+
for (const [edge, enabled] of Object.entries(edges)) {
340
+
const overlay = this.edgeOverlays[edge];
341
+
if (overlay) {
342
+
if (edge === "left" || edge === "right") {
343
+
overlay.style.width = enabled ? `${this.edgeThreshold}px` : "0";
344
+
} else {
345
+
overlay.style.height = enabled ? `${this.edgeThreshold}px` : "0";
346
+
}
347
+
}
348
+
}
349
+
}
350
}
+1
-1
ui/system/mobile.css
···
296
touch-action: none;
297
pointer-events: auto;
298
background: transparent;
299
-
/* rgba(77, 215, 220, 0.49); */
300
}
301
302
/* Expand edge overlay to full screen during active gesture,
···
296
touch-action: none;
297
pointer-events: auto;
298
background: transparent;
299
+
/* background: rgba(77, 215, 220, 0.49); */
300
}
301
302
/* Expand edge overlay to full screen during active gesture,
+6
-1
ui/system/mobile_action_bar.js
···
56
show() {
57
this.updateState();
58
this.open = true;
0
0
0
59
}
60
61
hide() {
···
63
this.results = [];
64
this.groups = [];
65
this.searchController.clear();
0
0
0
66
}
67
68
toggle() {
···
167
if (this.layoutManager) {
168
this.layoutManager.reload();
169
}
170
-
this.hide();
171
}
172
173
handleViews() {
···
56
show() {
57
this.updateState();
58
this.open = true;
59
+
this.dispatchEvent(
60
+
new CustomEvent("action-bar-opened", { bubbles: true, composed: true }),
61
+
);
62
}
63
64
hide() {
···
66
this.results = [];
67
this.groups = [];
68
this.searchController.clear();
69
+
this.dispatchEvent(
70
+
new CustomEvent("action-bar-closed", { bubbles: true, composed: true }),
71
+
);
72
}
73
74
toggle() {
···
173
if (this.layoutManager) {
174
this.layoutManager.reload();
175
}
0
176
}
177
178
handleViews() {
+42
ui/system/mobile_layout_manager.js
···
47
this.actionBar.updateState();
48
}
49
});
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
50
}
51
52
generateId() {
···
56
// Set the homescreen webview
57
setHomescreen(webviewId) {
58
this.homescreenWebviewId = webviewId;
0
0
0
0
59
}
60
61
// Check if a webview is the homescreen
···
178
container.classList.add("active");
179
}
180
}
0
0
0
181
}
182
183
// Switch to webview at given index
···
47
this.actionBar.updateState();
48
}
49
});
50
+
51
+
// Disable all edges when action bar or notification sheet opens
52
+
document.addEventListener("action-bar-opened", () => {
53
+
this.disableAllEdges();
54
+
});
55
+
document.addEventListener("action-bar-closed", () => {
56
+
this.restoreEdges();
57
+
});
58
+
document.addEventListener("sheet-opened", () => {
59
+
this.disableAllEdges();
60
+
});
61
+
document.addEventListener("sheet-closed", () => {
62
+
this.restoreEdges();
63
+
});
64
+
}
65
+
66
+
// Disable all edge gestures (when overlay UI is open)
67
+
disableAllEdges() {
68
+
this.gestureHandler.setEdgesEnabled({
69
+
left: false,
70
+
right: false,
71
+
bottom: false,
72
+
top: false,
73
+
});
74
+
}
75
+
76
+
// Restore edge gestures based on current state
77
+
restoreEdges() {
78
+
const onHomescreen = this.isHomescreen(this.activeWebviewId);
79
+
this.gestureHandler.setEdgesEnabled({
80
+
left: !onHomescreen,
81
+
right: !onHomescreen,
82
+
bottom: !onHomescreen,
83
+
top: true,
84
+
});
85
}
86
87
generateId() {
···
91
// Set the homescreen webview
92
setHomescreen(webviewId) {
93
this.homescreenWebviewId = webviewId;
94
+
// Update edge gestures if homescreen is currently active
95
+
if (this.activeWebviewId === webviewId) {
96
+
this.restoreEdges();
97
+
}
98
}
99
100
// Check if a webview is the homescreen
···
217
container.classList.add("active");
218
}
219
}
220
+
221
+
// Update edge gesture areas based on whether we're on the homescreen
222
+
this.restoreEdges();
223
}
224
225
// Switch to webview at given index
+14
-1
ui/system/mobile_notification_sheet.js
···
57
58
close() {
59
this.open = false;
60
-
this.dispatchEvent(new CustomEvent("sheet-closed", { bubbles: true }));
0
0
0
0
0
0
0
0
0
0
0
0
0
61
}
62
63
handleNotificationClick(notification) {
···
57
58
close() {
59
this.open = false;
60
+
}
61
+
62
+
updated(changedProperties) {
63
+
if (changedProperties.has("open")) {
64
+
if (this.open) {
65
+
this.dispatchEvent(
66
+
new CustomEvent("sheet-opened", { bubbles: true, composed: true }),
67
+
);
68
+
} else {
69
+
this.dispatchEvent(
70
+
new CustomEvent("sheet-closed", { bubbles: true, composed: true }),
71
+
);
72
+
}
73
+
}
74
}
75
76
handleNotificationClick(notification) {