Skip to content

Commit

Permalink
added history saving feature
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomatopickle
tomatopickle committed Sep 26, 2021
1 parent 2aa4d63 commit 5469072
Show file tree
Hide file tree
Showing 5 changed files with 241 additions and 39 deletions.
91 changes: 67 additions & 24 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,49 @@
<x-label>Search or type an address</x-label>
</x-input>
<div class="cntrlBtns toolbarBtns">
<x-button skin="flat" computedSize="small" size="small" style="width:max-content">
<x-button id="historyBtn" onclick="getHistory(event)" skin="flat" computedSize="small" size="small"
style="width:max-content">
<x-icon size="small" iconset="fluent-outlined.svg" name="clock"></x-icon>
<dialog id="historyPanel" modal class="sidePanel">
<main>
<strong>History</strong>
<p>
<span style="display: flex;align-items: center;">
<x-button style="width: 26%;">
<x-icon iconset="fluent-outlined.svg" name="delete"></x-icon>
<x-menu>
<x-menuitem onclick="deleteInMins(1)">
<x-label>Last 1 minute</x-label>
</x-menuitem>
<x-menuitem onclick="deleteInMins(5)">
<x-label>Last 5 minutes</x-label>
</x-menuitem>
<x-menuitem onclick="deleteInMins(30)">
<x-label>Last 30 minutes</x-label>
</x-menuitem>
<x-menuitem onclick="deleteInMins(60)">
<x-label>Last 1 hour</x-label>
</x-menuitem>
<x-menuitem onclick="deleteInMins()">
<x-label>Everything</x-label>
</x-menuitem>
<x-menuitem onclick="openModal('delHistModal')">
<x-label>Custom</x-label>
</x-menuitem>
</x-menu>
</x-button>
<x-input oninput="searchHistory(event.target.value)">
<x-icon iconset="fluent-outlined.svg" name="search"></x-icon>
<x-label>Search</x-label>
</x-input>
</span>
<br>
<small>Double Click to delete a site from history</small>
<br>
<div class="list"></div>
</p>
</main>
</dialog>
</x-button>
<x-button id="settingsBtn" skin="flat" computedSize="small" size="small" style="width:max-content">
<x-icon size="small" iconset="fluent-outlined.svg" name="tune"></x-icon>
Expand Down Expand Up @@ -186,30 +227,32 @@ <h2>Min Browser</h2>
</div>
</div>
<div id="windows">
<x-card class="sidePanel" id="historyPanel" hidden>
<main>
<strong>History</strong>
<p>
<x-input>
<x-icon iconset="fluent-outlined.svg" name="search"></x-icon>
<x-label>Search</x-label>
</x-input>
<br>
<div class="list">
<x-label>
<h4>Hai</h4>
<p>https://google.com</p>
<br>
</x-label>
<x-label>
<h4>Hai</h4>
<p>https://google.com</p>
</x-label>
</div>
</p>
</main>
</x-card>

</div>

<dialog id="delHistModal" style="height: max-content !important;">
<main>
<h3>Delete History</h3>
<p>
<small style="display: block;margin-bottom: 15px;">How many minutes' of history should we
delete?</small>
<x-numberinput id="delHistInp" style="max-width: 100%;" value="30" suffix=" minutes">
<x-stepper></x-stepper>
</x-numberinput>
</p>
</main>
<br>
<footer>
<x-button onclick="closeModal('delHistModal');">
<x-label>Cancel</x-label>
</x-button>
<x-button onclick="deleteInMins(document.getElementById('delHistInp').value)" autofocus toggled
id="agree-button">
<x-label>Delete</x-label>
<x-notification>History Deleted</x-notification>
</x-button>
</footer>
</dialog>
</div>
</body>
<script src="./scripts/opendb.min.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "Min",
"description": "description",
"author": "tomatopickle",
"version": "1.0.4",
"version": "1.1.0",
"main": "main.js",
"scripts": {
"start": "electron .",
Expand Down
116 changes: 110 additions & 6 deletions scripts/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,11 +99,6 @@ function openLink(url) {
if (e.target.classList.contains("open")) {
document.getElementById("reloadBtn").innerHTML = `<x-icon size="small" iconset="fluent-outlined.svg" name="refresh"></x-icon> `;
}
if (!page.src.includes("views") && !page.src.includes("newtab")) {
var history = db.local.getJSON("history") || [];
history.unshift(({ url: page.src, title: page.getTitle() }));
db.local.setJSON("history", history);
}
});
tab.addEventListener("wheel", event => {
tabs.closeTab(tab);
Expand All @@ -116,6 +111,25 @@ function openLink(url) {
document.getElementById("backBtn").disabled = !window.canGoBack();
document.getElementById("forwardBtn").disabled = !window.canGoForward();
}

if (!page.src.includes("views") && !page.src.includes("newtab")) {
var history = db.local.getJSON("history") || [];
var time = Date.now();
history.unshift(({ url: page.src, title: page.getTitle(), time: time }));
db.local.setJSON("history", history);
e.target.addEventListener("did-finish-load", () => {
var hist = db.local.getJSON("history");
page = document.getElementById(e.target.id);
hist.forEach((item, i) => {
if (item.time == time && item.url == page.src) {
hist[i].title = page.getTitle();
hist[i].url = page.src;
console.log(hist[i]);
db.local.setJSON("history", hist);
}
});
});
}
});
tabs.openTab(tab);
selectTab(id, true);
Expand Down Expand Up @@ -271,4 +285,94 @@ function toggleLoaderModal() {
}
ipcRenderer.on("downloadingUpdate", (e, data) => {
document.getElementById(`updateLoaderBg`).hidden = !data;
})
});
function getHistory(e, f) {
if (e?.target.id != "historyBtn" && !f) return
var history = db.local.getJSON("history") || [];
if (history.length > 25) {
history.length = 25;
}
renderHistory(history);
}
function searchHistory(q) {
if (!q) { getHistory(null, true); return }
var hist = db.local.getJSON("history");
hist = hist.filter(
function (data) {
return data.url.includes(q) || data.title.includes(q)
}
);
var panel = document.querySelector("#historyPanel .list");
panel.innerHTML = "";
renderHistory(hist);

}

function time(time) {
var date = new Date(time);
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0' + minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
}
function deleteInMins(min) {
var panel = document.querySelector("#historyPanel .list");
if (!min) {
db.local.setJSON("history", []);
panel.innerHTML = "";
return
}
var hist = db.local.getJSON("history");
hist = hist.filter(
function (data) {
return (new Date() - new Date(data.time)) > min * 60 * 1000
}
);
renderHistory(hist);
db.local.setJSON("history", hist);
closeModal('delHistModal');
}
function openModal(modalId) {
document.getElementById(modalId).showModal();
}
function closeModal(modalId) {
document.getElementById(modalId).close();
}
function renderHistory(history) {
var panel = document.querySelector("#historyPanel .list");
panel.innerHTML = "";
history.forEach((item, i) => {
var el = document.createElement("x-label");
el.innerHTML = `<x-label>
<h4><img src="${getBase(item.url)}/favicon.ico">${item.title}</h4>
<p>${item.url}</p>
<small>${time(item.time)}</small>
</x-contextmenu>
</x-label>`;
let pendingClick = 0;
el.onclick = (e) => {
if (pendingClick) {
clearTimeout(pendingClick);
pendingClick = 0;
}
switch (e.detail) {
case 1:
pendingClick = setTimeout(function () {
openLink(item.url);
}, 500);
break;
case 2:
history.splice(i, i + 1);
db.local.setJSON("history", history);
renderHistory(history);
console.log(history, history.slice(i))
break;
}
}
panel.appendChild(el);
});
}
71 changes: 63 additions & 8 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,10 +212,6 @@ x-doctab {
border-radius: 2px;
}

.sidePanel#historyPanel {
width: 300px;
}

@media (prefers-color-scheme: dark) {
x-doctab:hover {
background: rgb(144 144 144 / 10%) !important;
Expand Down Expand Up @@ -249,7 +245,7 @@ x-doctab {
}
}

dialog {
dialog:not(.sidePanel) {
top: 25% !important;
border-radius: 7px !important;
overflow-x: hidden !important;
Expand Down Expand Up @@ -348,15 +344,74 @@ x-doctabs::part(open-button) {
height: 90%;
margin: auto;
}
#updateLoaderBg{

#updateLoaderBg {
position: relative;
}
#updateLoaderBg x-backdrop{

#updateLoaderBg x-backdrop {
display: none !important;
}
#updateLoaderBg x-popover{

#updateLoaderBg x-popover {
position: absolute;
top: 28px !important;
width: max-content;
left: -44px !important;
}

#historyPanel {
width: 300px;
}

#historyPanel .list {
padding-bottom: 35px;
}

#historyPanel {
width: 300px;
height: 100%;
top: 56px;
left: 0;
right: auto;
bottom: 0;
backdrop-filter: blur(10px);
background-color: #3131319c;
}

#historyPanel::backdrop {
background-color: transparent;
}

.list h4 {
display: flex;
align-items: center;
word-break: break-all;
}

.list img {
height: 20px;
margin-right: 5px;
}

.list x-label {
padding: 5px;
border-radius: 5px;
margin-bottom: 15px;
}

.list x-label:hover {
background-color: var(--accent-color);
}
.list x-label:active {
filter: brightness(.90);
}

#historyPanel x-input {
max-width: 100vw;
}

.list x-label p {
text-overflow: ellipsis;
overflow: hidden;
}
Binary file modified views/newtab/wallpapers/upload.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 5469072

Please sign in to comment.