forked from
me.webbeef.org/browser.html
Rewild Your Web
1// SPDX-License-Identifier: AGPL-3.0-or-later
2
3import { MenuBase, css, html } from "./menu_base.js";
4
5export class WebViewMenu extends MenuBase {
6 static properties = {
7 ...MenuBase.properties,
8 x: { type: Number },
9 y: { type: Number },
10 };
11
12 constructor() {
13 super();
14 this.x = 0;
15 this.y = 0;
16 this.handleKeyDown = this.handleKeyDown.bind(this);
17 }
18
19 disconnectedCallback() {
20 super.disconnectedCallback();
21 this.removeEventListeners();
22 }
23
24 updated(changedProperties) {
25 if (changedProperties.has("open")) {
26 if (this.open) {
27 document.addEventListener("keydown", this.handleKeyDown);
28 } else {
29 this.removeEventListeners();
30 }
31 }
32 }
33
34 removeEventListeners() {
35 document.removeEventListener("keydown", this.handleKeyDown);
36 }
37
38 handleKeyDown(e) {
39 if (e.key === "Escape") {
40 this.close();
41 }
42 }
43
44 handleBackdropClick(e) {
45 // Only close if the click was directly on the backdrop
46 if (e.target.classList.contains("backdrop")) {
47 this.close();
48 }
49 }
50
51 static styles = css`
52 @import url(beaver://system/webview_menu.css);
53 `;
54
55 render() {
56 // Position the menu so its right edge aligns with x, top at y
57 const menuStyle = `right: calc(100% - ${this.x}px); top: ${this.y}px;`;
58
59 return html`
60 <div class="backdrop" @click=${this.handleBackdropClick}></div>
61 <menu style="${menuStyle}">
62 <li @click=${() => this.handleItemClick("split-horizontal")}>
63 <lucide-icon name="square-split-horizontal"></lucide-icon>
64 <span>Horizontal Split</span>
65 </li>
66 <li @click=${() => this.handleItemClick("split-vertical")}>
67 <lucide-icon name="square-split-vertical"></lucide-icon>
68 <span>Vertical Split</span>
69 </li>
70 <li @click=${() => this.handleItemClick("reduce-size")}>
71 <lucide-icon name="chevrons-right-left"></lucide-icon>
72 <span>Reduce Width</span>
73 </li>
74 <li @click=${() => this.handleItemClick("increase-size")}>
75 <lucide-icon name="chevrons-left-right"></lucide-icon>
76 <span>Increase Width</span>
77 </li>
78 <li class="menu-separator"></li>
79 <li @click=${() => this.handleItemClick("zoom-in")}>
80 <lucide-icon name="zoom-in"></lucide-icon>
81 <span>Zoom In</span>
82 </li>
83 <li @click=${() => this.handleItemClick("zoom-out")}>
84 <lucide-icon name="zoom-out"></lucide-icon>
85 <span>Zoom Out</span>
86 </li>
87 <li @click=${() => this.handleItemClick("zoom-reset")}>
88 <lucide-icon name="refresh-cw"></lucide-icon>
89 <span>Reset Zoom</span>
90 </li>
91 </menu>
92 `;
93 }
94}
95
96customElements.define("webview-menu", WebViewMenu);