Skip to content

Commit ae6b298

Browse files
MotorTruck1221MotorTruck1221
committed
right click context menu!
1 parent 721dd29 commit ae6b298

8 files changed

Lines changed: 187 additions & 2 deletions

File tree

‎src/public/css/style.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/public/js/controls.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,8 +115,10 @@ function updateSearch(value) {
115115
function isIframeLoaded() {
116116
let currentTab = getCurrentTab();
117117
let iframe = document.querySelector(`[data-iframe-id="${currentTab}"]`);
118+
addRightClickToIframe(currentTab);
118119
updateTabDetail("Loading...", "loading.gif");
119120
iframe.addEventListener('load', function() {
121+
addRightClickToIframe(currentTab);
120122
updateTabDetail(iframe.contentWindow.document.title, iframe.contentWindow.document.querySelector('link[rel="icon"]') ? proxyOtherStuff(iframe.contentWindow.document.querySelector('link[rel="icon"]').href) : "favicon.ico", currentTab);
121123
updateURLBar(iframe.contentWindow.location.href);
122124
addToHistory(iframe.contentWindow.location.href, iframe.contentWindow.document.title, iframe.contentWindow.document.querySelector('link[rel="icon"]') ? proxyOtherStuff(iframe.contentWindow.document.querySelector('link[rel="icon"]').href) : "favicon.ico");

‎src/public/js/eruda/rightClick.js‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
function rightClick() {
2+
event.preventDefault();
3+
let menu = document.getElementById("rightClickMenu");
4+
menu.style.display = "block";
5+
menu.style.position = "absolute";
6+
menu.style.visibility = "visible";
7+
let x = event.clientX;
8+
let y = event.clientY;
9+
let w = window.innerWidth;
10+
let h = window.innerHeight;
11+
let menuW = menu.offsetWidth;
12+
let menuH = menu.offsetHeight;
13+
if (y < 86) {
14+
menu.style.display = "none";
15+
menu.style.position = "absolute";
16+
menu.style.visibility = "hidden";
17+
menu.style.left = "0px";
18+
menu.style.top = "0px";
19+
return;
20+
}
21+
if (x + menuW > w) {
22+
x = w - menuW;
23+
}
24+
if (y + menuH > h) {
25+
y = h - menuH;
26+
}
27+
menu.style.left = x + "px";
28+
menu.style.top = y + "px"
29+
return false
30+
}
31+
32+
function hideRightClick() {
33+
let menu = document.getElementById("rightClickMenu");
34+
menu.style.display = "none";
35+
menu.style.position = "absolute";
36+
menu.style.visibility = "hidden";
37+
menu.style.left = "0px";
38+
menu.style.top = "0px";
39+
}
40+
41+
function rightClickIframe(iframe) {
42+
event.preventDefault();
43+
let menu = document.getElementById("rightClickMenu");
44+
menu.style.display = "block";
45+
menu.style.position = "absolute";
46+
menu.style.visibility = "visible";
47+
let x = event.clientX;
48+
let y = event.clientY;
49+
let w = iframe.offsetWidth;
50+
let h = iframe.offsetHeight;
51+
let menuW = menu.offsetWidth;
52+
let menuH = menu.offsetHeight;
53+
if (y < 86) {
54+
menu.style.display = "none";
55+
menu.style.position = "absolute";
56+
menu.style.visibility = "hidden";
57+
menu.style.left = "0px";
58+
menu.style.top = "0px";
59+
return;
60+
}
61+
if (x + menuW > w) {
62+
x = w - menuW;
63+
}
64+
if (y + menuH > h) {
65+
y = h - menuH;
66+
}
67+
menu.style.left = x + "px";
68+
menu.style.top = y + "px"
69+
return false
70+
}
71+
72+
73+
function controls(iframeId) {
74+
let back = document.getElementById("rcmb-back");
75+
let forward = document.getElementById("rcmb-forward");
76+
let reload = document.getElementById("rcmb-reload");
77+
let inspect = document.getElementById("rcmb-inspect");
78+
79+
back.onclick = function () {
80+
previousPage();
81+
}
82+
forward.onclick = function () {
83+
nextPage();
84+
}
85+
reload.onclick = function () {
86+
refreshPage();
87+
}
88+
inspect.onclick = function () {
89+
if (iframeId) {
90+
createDevTools(iframeId);
91+
}
92+
else {
93+
createDevTools();
94+
}
95+
}
96+
}
97+
98+
function addRightClickToIframe(currentIframeId) {
99+
let iframe = document.querySelector(`[data-iframe-id="${currentIframeId}"]`);
100+
iframe.contentDocument.oncontextmenu = function () {
101+
rightClickIframe(iframe);
102+
}
103+
iframe.contentDocument.onclick = hideRightClick;
104+
controls(currentIframeId);
105+
}
106+
107+
function initRightClick() {
108+
document.oncontextmenu = rightClick;
109+
document.onclick = hideRightClick;
110+
controls();
111+
console.log("Right Click Handler Initialized");
112+
}

‎src/public/js/keyBinds.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,6 @@ historySidebarKeybinds();
99

1010
// keybind located in ./eruda/create.js
1111
devToolsKeybinds();
12+
13+
//keybind located in ./eruda/rightClick.js
14+
initRightClick();

‎src/public/js/tabs.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ function handoffToTABS(url) {
9595
let tabId = chromeTabs.activeTabEl.getAttribute('data-tab-id');
9696
iframe.setAttribute('data-iframe-id', tabId);
9797
document.body.appendChild(iframe);
98+
addRightClickToIframe(tabId);
9899
isIframeLoaded();
99100
function resetOmniBox() {
100101
document.getElementById("uv-form").style.marginTop = "20px";

‎src/public/sass/style.scss‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -481,6 +481,61 @@
481481
}
482482
}
483483

484+
#rightClickMenu {
485+
display: none;
486+
visibility: hidden;
487+
background: var(--text-bg-color);
488+
//height: 200px;
489+
width: 150px;
490+
z-index: 9999;
491+
border-radius: 5px;
492+
border: 1px solid var(--border-color);
493+
display: flex;
494+
align-items: left;
495+
justify-content: top;
496+
flex-direction: column;
497+
box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
498+
#rcmb-back {
499+
margin-top: 5px;
500+
}
501+
.rcmb {
502+
width: 100%;
503+
height: 30px;
504+
border: none;
505+
background: var(--text-bg-color);
506+
color: var(--text-color);
507+
text-align: left;
508+
padding-left: 5px;
509+
outline: none;
510+
&:hover {
511+
cursor: pointer;
512+
background: var(--text-color);
513+
color: var(--text-bg-color);
514+
transition: 0.3s;
515+
}
516+
&:active {
517+
opacity: 0.5;
518+
}
519+
}
520+
.rcmb-separator {
521+
width: 100%;
522+
border-top: 1px solid var(--border-color);
523+
margin-top: 2px;
524+
margin-bottom: 10px;
525+
}
526+
#rcmb-inspect {
527+
margin-bottom: 5px;
528+
#rcmb-inspect-info {
529+
font-size: 10px;
530+
opacity: 0.5;
531+
position: relative;
532+
bottom: 12px;
533+
left: 68px;
534+
width: 0;
535+
}
536+
}
537+
}
538+
484539
#games-container {
485540
position: absolute;
486541
z-index: 9999;

‎src/views/components/rightClickMenu.erb‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div id="rightClickMenu">
2+
<button class="rcmb" id="rcmb-back" type="button" name="back">Back</button>
3+
<button class="rcmb" id="rcmb-forward" type="button" name="forward">Forward</button>
4+
<button class="rcmb" id="rcmb-reload" type="button" name="reload">Reload</button>
5+
<div class="rcmb-separator"></div>
6+
<button class="rcmb" id="rcmb-inspect" type="button" name="inspect">
7+
Inspect
8+
<div id="rcmb-inspect-info">CTRL+SHIFT+I</div>
9+
</button>
10+
</div>

‎src/views/index.erb‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
13 => '<script src="js/omnibox.js" defer></script>',
1616
14 => '<script src="js/updates.js" defer></script>',
1717
15 => '<script src="js/eruda/create.js" defer></script>',
18-
16 => '<script src="js/keyBinds.js" defer></script>',
18+
16 => '<script src="js/eruda/rightClick.js" defer></script>',
19+
17 => '<script src="js/keyBinds.js" defer></script>',
1920
})
2021
%>
2122
<div class="chrome-tabs" style="--tab-content-margin: 9px">
@@ -97,3 +98,4 @@
9798
<% showComponent("games") %>
9899
<% showComponent("credit") %>
99100
<% showComponent("history") %>
101+
<% showComponent("rightClickMenu") %>

0 commit comments

Comments
 (0)