Skip to content

Commit c7b2931

Browse files
MotorTruck1221MotorTruck1221
authored
Merge pull request #20 from Ruby-Network/history
Add History
2 parents 8ed9517 + 9c48f8e commit c7b2931

File tree

10 files changed

+248
-8
lines changed

10 files changed

+248
-8
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ This is our third edition of [Ruby](https://github.com/ruby-network/ruby-v1). Th
9090

9191
- [ ] Apps
9292

93-
- [ ] History page
93+
- [x] History page
9494

9595
- [ ] Backgrounds, using Particles.js and other libraries
9696

‎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: 129 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ function isIframeLoaded() {
119119
iframe.addEventListener('load', function() {
120120
updateTabDetail(iframe.contentWindow.document.title, iframe.contentWindow.document.querySelector('link[rel="icon"]') ? proxyOtherStuff(iframe.contentWindow.document.querySelector('link[rel="icon"]').href) : "favicon.ico", currentTab);
121121
updateURLBar(iframe.contentWindow.location.href);
122+
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");
122123
});
123124
}
124125
function exitIframe() {
@@ -130,4 +131,131 @@ function exitIframe() {
130131
iframe.style.zIndex = '';
131132
iframe.style.transition = '';
132133
document.getElementById('exit-iframe').classList.add('dnone');
133-
}
134+
}
135+
136+
function historySidebar() {
137+
let history = document.getElementById('history');
138+
history.classList.remove('dnone');
139+
setPage('history');
140+
}
141+
142+
function closeHistorySidebar() {
143+
let history = document.getElementById('history');
144+
history.classList.add('dnone');
145+
}
146+
147+
function addToHistory(url, title, favicon) {
148+
let history = document.getElementById('history');
149+
let historyContent = document.getElementById('history-content');
150+
let historyItem = document.createElement('div');
151+
152+
historyItem.setAttribute('id', 'history-item');
153+
154+
let historyLink = document.createElement('a');
155+
historyLink.setAttribute('id', 'history-link');
156+
historyLink.setAttribute('onclick', `handoffToTABS('${url}')`);
157+
158+
let historyTitle = document.createElement('p');
159+
historyTitle.innerText = title;
160+
161+
let historyFavicon = document.createElement('img');
162+
historyFavicon.setAttribute('src', favicon);
163+
164+
let historyDelete = document.createElement('li');
165+
historyDelete.setAttribute('id', 'history-delete');
166+
historyDelete.setAttribute('onclick', `deleteHistoryItem(${historyContent.childElementCount})`);
167+
historyDelete.classList.add('fa-solid', 'fa-trash');
168+
169+
historyLink.appendChild(historyFavicon);
170+
historyLink.appendChild(historyTitle);
171+
historyItem.appendChild(historyLink);
172+
historyContent.appendChild(historyItem);
173+
historyItem.appendChild(historyDelete);
174+
175+
if (localStorage.getItem('history') === null) {
176+
let historyArray = [];
177+
historyArray.push({
178+
url: url,
179+
title: title,
180+
favicon: favicon,
181+
});
182+
localStorage.setItem('history', JSON.stringify({history: historyArray}));
183+
}
184+
else {
185+
let historyJSON = JSON.parse(localStorage.getItem('history'));
186+
let historyArray = historyJSON.history;
187+
historyArray.push({
188+
url: url,
189+
title: title,
190+
favicon: favicon,
191+
id: historyArray.length,
192+
});
193+
localStorage.setItem('history', JSON.stringify({history: historyArray}));
194+
}
195+
}
196+
197+
function restoreHistory() {
198+
let history = document.getElementById('history');
199+
let historyContent = document.getElementById('history-content');
200+
if (localStorage.getItem('history') === null) {
201+
return;
202+
}
203+
let historyJSON = JSON.parse(localStorage.getItem('history'));
204+
let historyArray = historyJSON.history;
205+
historyArray.forEach(function(item) {
206+
let historyItem = document.createElement('div');
207+
208+
historyItem.setAttribute('id', 'history-item');
209+
210+
let historyLink = document.createElement('a');
211+
historyLink.setAttribute('id', 'history-link');
212+
historyLink.setAttribute('onclick', `handoffToTABS('${item.url}')`);
213+
214+
let historyTitle = document.createElement('p');
215+
historyTitle.innerText = item.title;
216+
217+
let historyFavicon = document.createElement('img');
218+
historyFavicon.setAttribute('src', item.favicon);
219+
220+
let historyDelete = document.createElement('li');
221+
historyDelete.setAttribute('id', 'history-delete');
222+
historyDelete.setAttribute('onclick', `deleteHistoryItem(${item.id})`);
223+
historyDelete.classList.add('fa-solid', 'fa-trash');
224+
225+
historyLink.appendChild(historyFavicon);
226+
historyLink.appendChild(historyTitle);
227+
historyItem.appendChild(historyLink);
228+
historyItem.appendChild(historyDelete);
229+
historyContent.appendChild(historyItem);
230+
});
231+
}
232+
233+
function deleteHistoryItem(id) {
234+
if (localStorage.getItem('history') === null) {
235+
return;
236+
}
237+
let historyJSON = JSON.parse(localStorage.getItem('history'));
238+
let historyArray = historyJSON.history;
239+
historyArray = historyArray.filter((item) => item.id != id);
240+
localStorage.setItem('history', JSON.stringify({history: historyArray}));
241+
let historyContent = document.getElementById('history-content');
242+
historyContent.innerHTML = '';
243+
restoreHistory();
244+
}
245+
246+
247+
function historySidebarKeybinds() {
248+
document.addEventListener('keydown', function(e) {
249+
if (e.altKey && e.key === 'h') {
250+
if (document.getElementById('history').classList.contains('dnone')) {
251+
historySidebar();
252+
}
253+
else {
254+
home(closeHistorySidebar());
255+
}
256+
}
257+
});
258+
console.log('history keybinds loaded');
259+
restoreHistory();
260+
console.log('history restored');
261+
}

‎src/public/js/keyBinds.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// keybind located in ./tabs.js
2+
tabKeybinds();
3+
4+
// keybind located in ./settings.js
5+
passwordKeybinds();
6+
7+
// keybind located in ./controls.js
8+
historySidebarKeybinds();

‎src/public/js/pages.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ window.addEventListener('load', () => {
88
case 'games':
99
gamesPage(true);
1010
break;
11+
case 'history':
12+
historySidebar();
13+
break;
1114
}
1215
});
1316

‎src/public/js/settings.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -222,14 +222,12 @@ function init() {
222222
localStorage.setItem('bare', window.location.origin + '/bare/');
223223
localStorage.setItem('fullScreen', 'page');
224224
setItems();
225-
passwordKeybinds();
226225
}
227226
else {
228227
if (localStorage.getItem('unlocked') === "false") {
229228
passwordLock();
230229
}
231230
setItems();
232-
passwordKeybinds();
233231
}
234232
}
235233
init();

‎src/public/js/tabs.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ function restoreTabs() {
130130
chromeTabs.removeTab(chromeTabs.activeTabEl);
131131
});
132132
}
133-
function keybinds() {
133+
function tabKeybinds() {
134134
console.log("tab keybinds initalized")
135135
//override ctrl + t
136136
document.addEventListener('keydown', function (e) {
@@ -184,6 +184,5 @@ function init() {
184184
title: 'Search',
185185
favicon: 'favicon.ico',
186186
});
187-
keybinds();
188187
}
189188
init();

‎src/public/sass/style.scss

Lines changed: 92 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@
181181
#menu-buttons-right {
182182
position: absolute;
183183
top: 3.2rem;
184-
right: 30px;
184+
right: 20px;
185185
display: flex;
186186
align-items: center;
187187
gap: 0.25rem;
@@ -390,6 +390,97 @@
390390
}
391391
}
392392

393+
#history {
394+
height: 100%;
395+
transition: 0.3s ease-in-out;
396+
background: var(--bg-color);
397+
color: var(--text-color);
398+
position: absolute;
399+
top: 0;
400+
bottom: 0;
401+
right: 0;
402+
z-index: 9999;
403+
width: 200px;
404+
border-left: 1px solid var(--border-color);
405+
overflow-y: auto;
406+
h2 {
407+
margin-top: 10px;
408+
text-align: center;
409+
}
410+
a {
411+
text-decoration: none;
412+
color: var(--text-color);
413+
}
414+
#history-content {
415+
position: relative;
416+
top: 20px;
417+
width: 100%;
418+
padding: 0 10px;
419+
#history-item {
420+
width: 100%;
421+
display: flex;
422+
align-items: flex-start;
423+
justify-content: left;
424+
flex-direction: row;
425+
margin-bottom: 20px;
426+
padding-bottom: 10px;
427+
border-bottom: 1px solid var(--border-color);
428+
#history-link {
429+
display: flex;
430+
align-items: flex-start;
431+
justify-content: left;
432+
flex-direction: column;
433+
width: 100%;
434+
img {
435+
width: 20px;
436+
height: 20px;
437+
border-radius: 50%;
438+
}
439+
p {
440+
margin: 0;
441+
margin-left: 30px;
442+
font-size: 15px;
443+
margin-top: -20px;
444+
overflow: hidden;
445+
text-overflow: ellipsis;
446+
white-space: nowrap;
447+
width: 60%;
448+
}
449+
&:hover {
450+
cursor: pointer;
451+
opacity: 0.5;
452+
transition: 0.3s;
453+
}
454+
}
455+
}
456+
}
457+
#exit-history {
458+
position: absolute;
459+
top: 20px;
460+
right: 10px;
461+
width: 30px;
462+
height: 30px;
463+
border-radius: 50%;
464+
border: none;
465+
opacity: 0.5;
466+
&:hover {
467+
cursor: pointer;
468+
opacity: 1;
469+
}
470+
}
471+
#history-delete {
472+
position: absolute;
473+
right: 5px;
474+
width: 30px;
475+
height: 30px;
476+
&:hover {
477+
cursor: pointer;
478+
opacity: 0.5;
479+
transition: 0.3s;
480+
}
481+
}
482+
}
483+
393484
#games-container {
394485
position: absolute;
395486
z-index: 9999;

‎src/views/components/history.erb

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<div id="history" class="dnone">
2+
<h2>History</h2>
3+
<i class="fa fa-circle-xmark" id="exit-history" onclick="home(closeHistorySidebar())"></i>
4+
<div id="history-content">
5+
</div>
6+
</div>

‎src/views/index.erb

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
12 => '<script src="js/games.js" defer></script>',
1515
13 => '<script src="js/omnibox.js" defer></script>',
1616
14 => '<script src="js/updates.js" defer></script>',
17+
15 => '<script src="js/keyBinds.js" defer></script>',
1718
})
1819
%>
1920
<div class="chrome-tabs" style="--tab-content-margin: 9px">
@@ -56,6 +57,10 @@
5657
<div id="menu-button" onclick="gamesPage(true)"><i class="fa-solid fa-gamepad"></i></div>
5758
</div>
5859
<div id="menu-buttons-right">
60+
<div id="menu-button" class="tooltip" onclick="historySidebar(true)">
61+
<span class="tooltiptext">View History</span>
62+
<i class="fa-solid fa-history"></i>
63+
</div>
5964
<div id="menu-button" class="tooltip" onclick="fullscreen()">
6065
<span class="tooltiptext">Full Screen</span>
6166
<i class="fa-solid fa-expand"></i>
@@ -81,6 +86,7 @@
8186
</form>
8287
<div id="mobile-buttons">
8388
<div id="mobile-button" onclick="settingsPage(true)"><i class="fa-solid fa-cog"></i></div>
89+
<div id="mobile-button" onclick="historySidebar()"><i class="fa-solid fa-history"></i></div>
8490
<a id="mobile-button" href="https://github.com/ruby-network/ruby" target="_blank"><i class="fa-brands fa-github"></i></a>
8591
<a id="mobile-button" href="https://dsc.gg/rubynetwork" target="_blank"><i class="fa-brands fa-discord"></i></a>
8692
</div>
@@ -89,3 +95,4 @@
8995
<% showComponent("settings") %>
9096
<% showComponent("games") %>
9197
<% showComponent("credit") %>
98+
<% showComponent("history") %>

0 commit comments

Comments
 (0)