Merge pull request #20 from Ruby-Network/history

Add History
Ruby-Network · Nov 11, 2023 · c7b2931 · c7b2931
2 parents 8ed9517 + 9c48f8e
commit c7b2931
Show file tree

Hide file tree

Showing 10 changed files with 248 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -90,7 +90,7 @@ This is our third edition of [Ruby](https://github.com/ruby-network/ruby-v1). Th
 
 - [ ]  Apps 
 
-- [ ]  History page
+-  [x]  History page
 
 - [ ]  Backgrounds, using Particles.js and other libraries
 

diff --git a/src/public/css/style.css b/src/public/css/style.css
diff --git a/src/public/js/controls.js b/src/public/js/controls.js
@@ -119,6 +119,7 @@ function isIframeLoaded() {
     iframe.addEventListener('load', function() {
         updateTabDetail(iframe.contentWindow.document.title,  iframe.contentWindow.document.querySelector('link[rel="icon"]') ? proxyOtherStuff(iframe.contentWindow.document.querySelector('link[rel="icon"]').href) : "favicon.ico", currentTab);
         updateURLBar(iframe.contentWindow.location.href);
+        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");
     });
 }
 function exitIframe() {
@@ -130,4 +131,131 @@ function exitIframe() {
     iframe.style.zIndex = '';
     iframe.style.transition = '';
     document.getElementById('exit-iframe').classList.add('dnone');
-}
+}
+
+function historySidebar() {
+    let history = document.getElementById('history');
+    history.classList.remove('dnone');
+    setPage('history');
+}
+
+function closeHistorySidebar() {
+    let history = document.getElementById('history');
+    history.classList.add('dnone');
+}
+
+function addToHistory(url, title, favicon) {
+    let history = document.getElementById('history');
+    let historyContent = document.getElementById('history-content');
+    let historyItem = document.createElement('div');
+
+    historyItem.setAttribute('id', 'history-item');
+
+    let historyLink = document.createElement('a');
+    historyLink.setAttribute('id', 'history-link');
+    historyLink.setAttribute('onclick', `handoffToTABS('${url}')`);
+
+    let historyTitle = document.createElement('p');
+    historyTitle.innerText = title;
+
+    let historyFavicon = document.createElement('img');
+    historyFavicon.setAttribute('src', favicon);
+
+    let historyDelete = document.createElement('li');
+    historyDelete.setAttribute('id', 'history-delete');
+    historyDelete.setAttribute('onclick', `deleteHistoryItem(${historyContent.childElementCount})`);
+    historyDelete.classList.add('fa-solid', 'fa-trash');
+
+    historyLink.appendChild(historyFavicon);
+    historyLink.appendChild(historyTitle);
+    historyItem.appendChild(historyLink);
+    historyContent.appendChild(historyItem);
+    historyItem.appendChild(historyDelete);
+
+    if (localStorage.getItem('history') === null) {
+        let historyArray = [];
+        historyArray.push({
+            url: url,
+            title: title,
+            favicon: favicon,
+        });
+        localStorage.setItem('history', JSON.stringify({history: historyArray}));
+    }
+    else {
+        let historyJSON = JSON.parse(localStorage.getItem('history'));
+        let historyArray = historyJSON.history;
+        historyArray.push({
+            url: url,
+            title: title,
+            favicon: favicon,
+            id: historyArray.length,
+        });
+        localStorage.setItem('history', JSON.stringify({history: historyArray}));
+    }
+}
+
+function restoreHistory() {
+    let history = document.getElementById('history');
+    let historyContent = document.getElementById('history-content');
+    if (localStorage.getItem('history') === null) {
+        return;
+    }
+    let historyJSON = JSON.parse(localStorage.getItem('history'));
+    let historyArray = historyJSON.history;
+    historyArray.forEach(function(item) {
+        let historyItem = document.createElement('div');
+
+        historyItem.setAttribute('id', 'history-item');
+
+        let historyLink = document.createElement('a');
+        historyLink.setAttribute('id', 'history-link');
+        historyLink.setAttribute('onclick', `handoffToTABS('${item.url}')`);
+
+        let historyTitle = document.createElement('p');
+        historyTitle.innerText = item.title;
+
+        let historyFavicon = document.createElement('img');
+        historyFavicon.setAttribute('src', item.favicon);
+
+        let historyDelete = document.createElement('li');
+        historyDelete.setAttribute('id', 'history-delete');
+        historyDelete.setAttribute('onclick', `deleteHistoryItem(${item.id})`);
+        historyDelete.classList.add('fa-solid', 'fa-trash');
+
+        historyLink.appendChild(historyFavicon);
+        historyLink.appendChild(historyTitle);
+        historyItem.appendChild(historyLink);
+        historyItem.appendChild(historyDelete);
+        historyContent.appendChild(historyItem);
+    });
+}
+
+function deleteHistoryItem(id) {
+    if (localStorage.getItem('history') === null) {
+        return;
+    }
+    let historyJSON = JSON.parse(localStorage.getItem('history'));
+    let historyArray = historyJSON.history;
+    historyArray = historyArray.filter((item) => item.id != id);
+    localStorage.setItem('history', JSON.stringify({history: historyArray}));
+    let historyContent = document.getElementById('history-content');
+    historyContent.innerHTML = '';
+    restoreHistory();
+}
+
+
+function historySidebarKeybinds() {
+    document.addEventListener('keydown', function(e) {
+        if (e.altKey && e.key === 'h') {
+            if (document.getElementById('history').classList.contains('dnone')) {
+                historySidebar();
+            }
+            else {
+                home(closeHistorySidebar());
+            }
+        }
+    });
+    console.log('history keybinds loaded');
+    restoreHistory();
+    console.log('history restored');
+}
diff --git a/src/public/js/keyBinds.js b/src/public/js/keyBinds.js
@@ -0,0 +1,8 @@
+// keybind located in ./tabs.js 
+tabKeybinds();
+
+// keybind located in ./settings.js
+passwordKeybinds();
+
+// keybind located in ./controls.js 
+historySidebarKeybinds();
diff --git a/src/public/js/pages.js b/src/public/js/pages.js
@@ -8,6 +8,9 @@ window.addEventListener('load', () => {
         case 'games':
             gamesPage(true);
             break;
+        case 'history':
+            historySidebar();
+            break;
     }
 });
 

diff --git a/src/public/js/settings.js b/src/public/js/settings.js
@@ -222,14 +222,12 @@ function init() {
         localStorage.setItem('bare', window.location.origin + '/bare/');
         localStorage.setItem('fullScreen', 'page');
         setItems();
-        passwordKeybinds();
     }
     else {
         if (localStorage.getItem('unlocked') === "false") {
             passwordLock();
         }
         setItems();
-        passwordKeybinds();
     }
 }
 init();
diff --git a/src/public/js/tabs.js b/src/public/js/tabs.js
@@ -130,7 +130,7 @@ function restoreTabs() {
         chromeTabs.removeTab(chromeTabs.activeTabEl);
     });
 }
-function keybinds() {
+function tabKeybinds() {
     console.log("tab keybinds initalized")
     //override ctrl + t
     document.addEventListener('keydown', function (e) {
@@ -184,6 +184,5 @@ function init() {
         title: 'Search',
         favicon: 'favicon.ico',
     });
-    keybinds();
 }
 init();
diff --git a/src/public/sass/style.scss b/src/public/sass/style.scss
@@ -181,7 +181,7 @@
     #menu-buttons-right {
         position: absolute;
         top: 3.2rem;
-        right: 30px;
+        right: 20px;
         display: flex;
         align-items: center;
         gap: 0.25rem;
@@ -390,6 +390,97 @@
     }
 }
 
+#history {
+    height: 100%;
+    transition: 0.3s ease-in-out;
+    background: var(--bg-color);
+    color: var(--text-color);
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 9999;
+    width: 200px;
+    border-left: 1px solid var(--border-color);
+    overflow-y: auto;
+    h2 {
+        margin-top: 10px;
+        text-align: center;
+    }
+    a {
+        text-decoration: none;
+        color: var(--text-color);
+    }
+    #history-content {
+        position: relative;
+        top: 20px;
+        width: 100%;
+        padding: 0 10px;
+        #history-item {
+            width: 100%;
+            display: flex;
+            align-items: flex-start;
+            justify-content: left;
+            flex-direction: row;
+            margin-bottom: 20px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid var(--border-color);
+            #history-link {
+                display: flex;
+                align-items: flex-start;
+                justify-content: left;
+                flex-direction: column;
+                width: 100%;
+                img {
+                    width: 20px;
+                    height: 20px;
+                    border-radius: 50%;
+                }
+                p {
+                    margin: 0;
+                    margin-left: 30px;
+                    font-size: 15px;
+                    margin-top: -20px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    width: 60%;
+                }
+                &:hover {
+                    cursor: pointer;
+                    opacity: 0.5;
+                    transition: 0.3s;
+                }
+            }
+        }
+    }
+    #exit-history {
+        position: absolute;
+        top: 20px;
+        right: 10px;
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        border: none;
+        opacity: 0.5;
+        &:hover {
+            cursor: pointer;
+            opacity: 1;
+        }
+    }
+    #history-delete {
+        position: absolute;
+        right: 5px;
+        width: 30px;
+        height: 30px;
+        &:hover {
+            cursor: pointer;
+            opacity: 0.5;
+            transition: 0.3s;
+        }
+    }
+}
+
 #games-container {
     position: absolute;
     z-index: 9999;

diff --git a/src/views/components/history.erb b/src/views/components/history.erb
@@ -0,0 +1,6 @@
+<div id="history" class="dnone">
+  <h2>History</h2>
+  <i class="fa fa-circle-xmark" id="exit-history" onclick="home(closeHistorySidebar())"></i>
+  <div id="history-content">
+  </div>
+</div>
diff --git a/src/views/index.erb b/src/views/index.erb
@@ -14,6 +14,7 @@
     12 => '<script src="js/games.js" defer></script>',
     13 => '<script src="js/omnibox.js" defer></script>',
     14 => '<script src="js/updates.js" defer></script>',
+    15 => '<script src="js/keyBinds.js" defer></script>',
   })
 %>
 <div class="chrome-tabs" style="--tab-content-margin: 9px">
@@ -56,6 +57,10 @@
       <div id="menu-button" onclick="gamesPage(true)"><i class="fa-solid fa-gamepad"></i></div>
     </div>
     <div id="menu-buttons-right">
+      <div id="menu-button" class="tooltip" onclick="historySidebar(true)">
+        <span class="tooltiptext">View History</span>
+        <i class="fa-solid fa-history"></i>
+      </div>
       <div id="menu-button" class="tooltip" onclick="fullscreen()">
         <span class="tooltiptext">Full Screen</span>
         <i class="fa-solid fa-expand"></i>
@@ -81,6 +86,7 @@
   </form>
   <div id="mobile-buttons">
     <div id="mobile-button" onclick="settingsPage(true)"><i class="fa-solid fa-cog"></i></div>
+    <div id="mobile-button" onclick="historySidebar()"><i class="fa-solid fa-history"></i></div>
     <a id="mobile-button" href="https://github.com/ruby-network/ruby" target="_blank"><i class="fa-brands fa-github"></i></a>
     <a id="mobile-button" href="https://dsc.gg/rubynetwork" target="_blank"><i class="fa-brands fa-discord"></i></a>
   </div>
@@ -89,3 +95,4 @@
 <% showComponent("settings") %>
 <% showComponent("games") %>
 <% showComponent("credit") %>
+<% showComponent("history") %>