Skip to content

Commit e7095e3

Browse files
dklassicdklassic
committed
Merge branch 'browsing-history' into 'main'
feat: support browsing history on navigation buttons See merge request verso-browser/verso!322
2 parents 78ea43e + 6c31acc commit e7095e3

File tree

9 files changed

+747
-262
lines changed

9 files changed

+747
-262
lines changed

‎resources/components/history_menu.html

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
<html>
2+
<head>
3+
<style>
4+
body {
5+
font-family: Arial, Helvetica, sans-serif;
6+
margin: 0;
7+
padding: 0;
8+
}
9+
.window-mask {
10+
position: absolute;
11+
top: 0;
12+
left: 0;
13+
background: transparent;
14+
width: 200%;
15+
height: 200%;
16+
z-index: 0;
17+
}
18+
.menu {
19+
position: absolute;
20+
display: flex;
21+
flex-direction: column;
22+
align-items: center;
23+
justify-content: start;
24+
background: #dfdfdf;
25+
width: 284px;
26+
padding: 10px 8px 10px 8px;
27+
border-radius: 5px;
28+
z-index: 1;
29+
}
30+
.menu-item {
31+
cursor: pointer;
32+
display: inline-block;
33+
height: 30px;
34+
width: 100%;
35+
line-height: 30px;
36+
padding-left: 5px;
37+
overflow: hidden;
38+
white-space: nowrap;
39+
text-overflow: ellipsis;
40+
}
41+
.menu-item:hover {
42+
background: #cecece;
43+
border-radius: 5px;
44+
}
45+
.menu-item.disabled {
46+
cursor: default;
47+
background: #dfdfdf;
48+
color: #505050;
49+
cursor: pointer;
50+
}
51+
.menu-item:hover.disabled {
52+
background: #dfdfdf;
53+
}
54+
</style>
55+
</head>
56+
<body>
57+
<div id="mask" class="window-mask"></div>
58+
<div id="menu" class="menu"></div>
59+
</body>
60+
<script>
61+
const menuEl = document.getElementById('menu');
62+
const maskEl = document.getElementById('mask');
63+
64+
/* register event listener */
65+
66+
// prevent create context menu when menu exists
67+
document.oncontextmenu = (ev) => {
68+
ev.preventDefault();
69+
};
70+
71+
// close menu when click on mask
72+
maskEl.onmousedown = (ev) => {
73+
const msg = JSON.stringify({
74+
index: null,
75+
action,
76+
});
77+
window.prompt(`HISTORY_MENU:${msg}`);
78+
};
79+
80+
/* parse params */
81+
82+
let url = URL.parse(window.location.href);
83+
let params = url.searchParams;
84+
const pos = {
85+
x: parseInt(params.get('pos_x')),
86+
y: parseInt(params.get('pos_y')),
87+
};
88+
const options = JSON.parse(params.get('items'));
89+
const action = params.get('action');
90+
91+
/* calc menu position */
92+
93+
// Avoid overflow to the window, adjust position if necessary
94+
let windowSize = {
95+
width: window.innerWidth,
96+
height: window.innerHeight,
97+
};
98+
let menuSize = {
99+
width: 300,
100+
height: options.length * 30 + 20,
101+
};
102+
let overflow = {
103+
x: pos.x + menuSize.width - windowSize.width,
104+
y: pos.y + menuSize.height - windowSize.height,
105+
};
106+
107+
if (overflow.x >= 0) {
108+
// check if the menu can be shown on left side of the cursor
109+
if (pos.x - menuSize.width >= 0) {
110+
pos.x = Math.max(0, pos.x - menuSize.width);
111+
} else {
112+
// if menu can't fit to left side of the cursor,
113+
// shift left the menu, but not less than zero.
114+
// TODO: if still smaller than screen, should show scroller
115+
pos.x = Math.max(0, pos.x - overflow.x);
116+
}
117+
}
118+
if (overflow.y >= 0) {
119+
// check if the menu can be shown above the cursor
120+
if (pos.y - menuSize.height >= 0) {
121+
pos.y = Math.max(0, pos.y - menuSize.height);
122+
} else {
123+
// if menu can't fit to top of the cursor
124+
// shift up the menu, but not less than zero.
125+
// TODO: if still smaller than screen, should show scroller
126+
pos.y = Math.max(0, pos.y - overflow.y);
127+
}
128+
}
129+
130+
menuEl.style.left = `${pos.x}px`;
131+
menuEl.style.top = `${pos.y}px`;
132+
133+
/* create menu items */
134+
for (option of options) {
135+
createMenuItem(option.index, option.title, option.url);
136+
}
137+
138+
function createMenuItem(index, title, url) {
139+
const menuItem = document.createElement('div');
140+
menuItem.classList.add('menu-item');
141+
menuItem.index = index;
142+
menuItem.innerText = title;
143+
144+
menuItem.onclick = (ev) => {
145+
// accept left click only
146+
if (ev.buttons !== 1) {
147+
return;
148+
}
149+
const msg = JSON.stringify({
150+
action,
151+
index,
152+
});
153+
console.log(`HISTORY_MENU:${msg}`);
154+
window.prompt(`HISTORY_MENU:${msg}`);
155+
};
156+
157+
menuEl.appendChild(menuItem);
158+
}
159+
</script>
160+
</html>

‎resources/components/panel.html

Lines changed: 13 additions & 13 deletions
Large diffs are not rendered by default.

‎src/compositor.rs

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1276,10 +1276,10 @@ impl IOCompositor {
12761276
}
12771277
}
12781278
#[cfg(linux)]
1279-
if let Some(context_menu) = &mut window.context_menu {
1279+
if let Some(webview_menu) = &mut window.webview_menu {
12801280
let rect = DeviceIntRect::from_size(size);
1281-
context_menu.webview.rect = rect;
1282-
self.on_resize_webview_event(context_menu.webview.webview_id, rect);
1281+
webview_menu.set_webview_rect(rect);
1282+
self.on_resize_webview_event(webview_menu.webview().webview_id, rect);
12831283
}
12841284

12851285
self.send_root_pipeline_display_list(window);

0 commit comments

Comments
 (0)