Skip to content

Commit 9a67f06

Browse files
incognitotgtincognitotgt
committed
Added the Forward/Back buttons
Few problems: * Doesn't work in about:blank * Refreshing breaks the buttons. * Also no CSS
1 parent 78c1c5e commit 9a67f06

File tree

2 files changed

+130
-109
lines changed

2 files changed

+130
-109
lines changed

‎static/scripts/book.js‎

Lines changed: 74 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -4,36 +4,36 @@ document.addEventListener("DOMContentLoaded", function(event) {
44
const iframeContainer = document.getElementById('iframe-container');
55
const rightSideNav = document.getElementById('right-side-nav');
66
const toggleNavButton = document.getElementById('toggle-nav');
7-
7+
88
let tabCounter = 1;
99
let navOpen = true;
10-
10+
1111
addTabButton.addEventListener('click', () => {
1212
const newTab = document.createElement('li');
1313
const tabTitle = document.createElement('span');
1414
const newIframe = document.createElement('iframe');
15-
15+
1616
tabTitle.textContent = `New Tab`;
1717
tabTitle.className = 'tab-title';
1818
newTab.dataset.tabId = tabCounter;
1919
newTab.addEventListener('click', switchTab);
20-
newTab.setAttribute('draggable', true);
21-
20+
newTab.setAttribute('draggable', true);
21+
2222
const closeButton = document.createElement('button');
2323
closeButton.classList.add('close-tab');
2424
closeButton.innerHTML = '✕';
25-
25+
2626
closeButton.addEventListener('click', (event) => {
2727
event.stopPropagation();
28-
28+
2929
const tabToRemove = tabList.querySelector(`[data-tab-id='${newTab.dataset.tabId}']`);
3030
const iframeToRemove = iframeContainer.querySelector(`[data-tab-id='${newTab.dataset.tabId}']`);
31-
31+
3232
if (tabToRemove && iframeToRemove) {
3333
const removedTabId = parseInt(tabToRemove.dataset.tabId);
3434
tabToRemove.remove();
3535
iframeToRemove.remove();
36-
36+
3737
const remainingTabs = Array.from(tabList.querySelectorAll('li'));
3838
if (remainingTabs.length > 0) {
3939
let indexToActivate = remainingTabs.findIndex(tab => parseInt(tab.dataset.tabId) > removedTabId);
@@ -42,7 +42,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
4242
}
4343
const nextTabToActivate = remainingTabs[indexToActivate];
4444
const nextIframeToActivate = iframeContainer.querySelector(`[data-tab-id='${nextTabToActivate.dataset.tabId}']`);
45-
45+
4646
if (nextTabToActivate && nextIframeToActivate) {
4747
nextTabToActivate.classList.add('active');
4848
nextIframeToActivate.classList.add('active');
@@ -51,47 +51,47 @@ document.addEventListener("DOMContentLoaded", function(event) {
5151
}
5252
});
5353

54-
55-
54+
55+
5656
newTab.appendChild(tabTitle);
5757
newTab.appendChild(closeButton);
5858
tabList.appendChild(newTab);
59-
59+
6060
const allTabs = Array.from(tabList.querySelectorAll('li'));
6161
allTabs.forEach(tab => tab.classList.remove('active'));
6262
const allIframes = Array.from(iframeContainer.querySelectorAll('iframe'));
6363
allIframes.forEach(iframe => iframe.classList.remove('active'));
64-
64+
6565
newTab.classList.add('active');
66-
66+
6767
newIframe.src = '/';
6868
newIframe.dataset.tabId = tabCounter;
6969
newIframe.classList.add('active');
7070
iframeContainer.appendChild(newIframe);
71-
72-
// svery epic
73-
newIframe.addEventListener('load', () => {
74-
const title = newIframe.contentDocument.title;
75-
tabTitle.textContent = title;
76-
});
77-
71+
72+
// svery epic
73+
newIframe.addEventListener('load', () => {
74+
const title = newIframe.contentDocument.title;
75+
tabTitle.textContent = title;
76+
});
77+
7878
tabCounter++;
79-
});
80-
81-
82-
window.addEventListener('message', function(event) {
79+
});
80+
81+
82+
window.addEventListener('message', function(event) {
8383
console.log('Received message:', event.data);
84-
if(event.data && event.data.url) {
84+
if (event.data && event.data.url) {
8585
const iframes = Array.from(iframeContainer.querySelectorAll('iframe'));
8686
const activeIframe = iframes.find(iframe => iframe.classList.contains('active'));
87-
88-
if(activeIframe) {
87+
88+
if (activeIframe) {
8989
console.log('Visible iframe:', activeIframe);
9090
const tabToUpdate = tabList.querySelector(`[data-tab-id='${activeIframe.dataset.tabId}']`);
91-
if(tabToUpdate) {
91+
if (tabToUpdate) {
9292
console.log('Tab to update:', tabToUpdate);
9393
const tabTitle = tabToUpdate.querySelector('.tab-title');
94-
if(tabTitle) {
94+
if (tabTitle) {
9595
console.log('Tab title:', tabTitle);
9696
tabTitle.textContent = event.data.url
9797
console.log('Hostname:', event.data.url);
@@ -107,37 +107,37 @@ document.addEventListener("DOMContentLoaded", function(event) {
107107
} else {
108108
console.log('No URL data in the message.');
109109
}
110-
});
111-
112-
113-
114-
115-
116-
function switchTab(event) {
110+
});
111+
112+
113+
114+
115+
116+
function switchTab(event) {
117117
const tabId = event.target.closest('li').dataset.tabId;
118-
118+
119119
const allTabs = Array.from(tabList.querySelectorAll('li'));
120120
allTabs.forEach(tab => tab.classList.remove('active'));
121121
const allIframes = Array.from(iframeContainer.querySelectorAll('iframe'));
122122
allIframes.forEach(iframe => iframe.classList.remove('active'));
123-
123+
124124
const selectedTab = tabList.querySelector(`[data-tab-id='${tabId}']`);
125125
if (selectedTab) {
126126
selectedTab.classList.add('active');
127127
} else {
128128
console.log('No selected tab found with ID:', tabId);
129129
}
130-
130+
131131
const selectedIframe = iframeContainer.querySelector(`[data-tab-id='${tabId}']`);
132132
if (selectedIframe) {
133133
selectedIframe.classList.add('active');
134134
} else {
135135
console.log('No selected iframe found with ID:', tabId);
136136
}
137137
}
138-
139-
140-
138+
139+
140+
141141
toggleNavButton.addEventListener('click', () => {
142142
navOpen = !navOpen;
143143
toggleNavButton.classList.toggle('open');
@@ -147,20 +147,20 @@ document.addEventListener("DOMContentLoaded", function(event) {
147147
rightSideNav.style.transform = 'translateX(-100%)';
148148
}
149149
});
150-
151-
let dragTab = null;
152-
153-
150+
151+
let dragTab = null;
152+
153+
154154
tabList.addEventListener('dragstart', (event) => {
155155
dragTab = event.target;
156156
});
157-
158-
157+
158+
159159
tabList.addEventListener('dragover', (event) => {
160160
event.preventDefault();
161161
const targetTab = event.target;
162162
if (targetTab.tagName === 'LI' && targetTab !== dragTab) {
163-
163+
164164
const targetIndex = Array.from(tabList.children).indexOf(targetTab);
165165
const dragIndex = Array.from(tabList.children).indexOf(dragTab);
166166
if (targetIndex < dragIndex) {
@@ -170,14 +170,14 @@ document.addEventListener("DOMContentLoaded", function(event) {
170170
}
171171
}
172172
});
173-
174-
173+
174+
175175
tabList.addEventListener('dragend', () => {
176176
dragTab = null;
177177
});
178-
178+
179179
const container = document.querySelector('.container');
180-
180+
181181
toggleNavButton.addEventListener('click', () => {
182182
navOpen = !navOpen;
183183
toggleNavButton.classList.toggle('open');
@@ -188,25 +188,39 @@ document.addEventListener("DOMContentLoaded", function(event) {
188188
rightSideNav.style.transform = 'translateX(-100%)';
189189
}
190190
});
191-
191+
192192
toggleNavButton.addEventListener('click', () => {
193193
navOpen = !navOpen;
194194
toggleNavButton.classList.toggle('open');
195195
container.classList.toggle('nav-closed');
196196
});
197-
198-
});
197+
198+
});
199+
199200
function reload() {
200201
const iframeContainer = document.getElementById('iframe-container');
201202
const iframes = Array.from(iframeContainer.querySelectorAll('iframe'));
202203
const activeIframe = iframes.find(iframe => iframe.classList.contains('active'));
203-
activeIframe.src=activeIframe.src;
204+
activeIframe.src = activeIframe.src;
204205
}
206+
205207
function expand() {
206208
const iframeContainer = document.getElementById('iframe-container');
207209
const iframes = Array.from(iframeContainer.querySelectorAll('iframe'));
208210
const activeIframe = iframes.find(iframe => iframe.classList.contains('active'));
209211
activeIframe.requestFullscreen();
210212
}
211213

212-
214+
function goBack() {
215+
const iframeContainer = document.getElementById('iframe-container');
216+
const iframes = Array.from(iframeContainer.querySelectorAll('iframe'));
217+
const activeIframe = iframes.find(iframe => iframe.classList.contains('active'));
218+
activeIframe.contentWindow.history.back();
219+
}
220+
221+
function goForward() {
222+
const iframeContainer = document.getElementById('iframe-container');
223+
const iframes = Array.from(iframeContainer.querySelectorAll('iframe'));
224+
const activeIframe = iframes.find(iframe => iframe.classList.contains('active'));
225+
activeIframe.contentWindow.history.forward();
226+
}

‎static/tabs.html‎

Lines changed: 56 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,76 @@
11
<!DOCTYPE html>
2+
23
<head>
34
<link rel="shortcut icon" id="dynamic-favicon" href="favicon.png">
45
<title id="dynamic-title">Classes</title>
56
<script src="/./scripts/wisdom.js?v=1"></script>
6-
<link rel="stylesheet" type="text/css" href="/./css/tab.css"/>
7-
<link rel="stylesheet" href="/./css/tabinner.css"/>
7+
<link rel="stylesheet" type="text/css" href="/./css/tab.css" />
8+
<link rel="stylesheet" href="/./css/tabinner.css" />
89
<script src="/./scripts/book.js"></script>
910
<script src="https://kit.fontawesome.com/1237c86ba0.js" crossorigin="anonymous"></script>
10-
</head>
11-
<body>
12-
<input type="checkbox" id="toggle-nav-checkbox" class="toggle-nav-checkbox"/>
11+
</head>
12+
13+
<body>
14+
<input type="checkbox" id="toggle-nav-checkbox" class="toggle-nav-checkbox" />
1315
<label for="toggle-nav-checkbox" id="toggle-nav" class="toggle-nav">
1416
</label>
1517
<div class="container">
16-
<nav class="nav" id="right-side-nav">
17-
<ul id="tab-list"></ul>
18-
<button id="add-tab"><i class="fa-solid fa-plus"></i></button>
19-
<button id="expand" onclick="expand()"><i class="fa-solid fa-expand"></i></button>
20-
<button id="reload" onclick="reload()"><i class="fa-solid fa-rotate-right"></i></button>
21-
<div class="adress-bar-container">
22-
<form method="POST" class="adress-bar-search-form" id="inpbox">
23-
<input class="adress-bar-input" tag="searchbar" id="searchbar" placeholder="Search"/>
24-
</form>
25-
</div>
26-
</nav>
27-
<div class="iframe-container" id="iframe-container"></div>
18+
<nav class="nav" id="right-side-nav">
19+
<ul id="tab-list"></ul>
20+
<button id="add-tab"><i class="fa-solid fa-plus"></i></button>
21+
<button id="expand" onclick="expand()"><i class="fa-solid fa-expand"></i></button>
22+
<button id="reload" onclick="reload()"><i class="fa-solid fa-rotate-right"></i></button>
23+
<button onclick="goBack()">Back</button>
24+
<button onclick="goForward()">Forward</button>
25+
<div class="adress-bar-container">
26+
<form method="POST" class="adress-bar-search-form" id="inpbox">
27+
<input class="adress-bar-input" tag="searchbar" id="searchbar" placeholder="Search" />
28+
</form>
29+
</div>
30+
</nav>
31+
<div class="iframe-container" id="iframe-container"></div>
2832
</div>
2933
<script>
30-
window.addEventListener('load', () => {
31-
navigator.serviceWorker.register('../sw.js', {
32-
scope: '/reviews/',
33-
});
34-
});
35-
function isUrl(val = '') {
36-
const urlPattern = /^(http(s)?:\/\/)?([\w-]+\.)+[\w]{2,}(\/.*)?$/;
37-
return urlPattern.test(val);
38-
}
39-
function prependHttps(url) {
40-
if (!url.startsWith('http://') && !url.startsWith('https://')) {
41-
return 'https://' + url;
42-
}
43-
return url;
44-
}
34+
window.addEventListener('load', () => {
35+
navigator.serviceWorker.register('../sw.js', {
36+
scope: '/reviews/',
37+
});
38+
});
39+
40+
function isUrl(val = '') {
41+
const urlPattern = /^(http(s)?:\/\/)?([\w-]+\.)+[\w]{2,}(\/.*)?$/;
42+
return urlPattern.test(val);
43+
}
4544

46-
const form = document.querySelector('form');
47-
const input = document.querySelector('input');
45+
function prependHttps(url) {
46+
if (!url.startsWith('http://') && !url.startsWith('https://')) {
47+
return 'https://' + url;
48+
}
49+
return url;
50+
}
4851

49-
form.addEventListener('submit', async (event) => {
50-
event.preventDefault();
51-
const formValue = document.querySelector('form input').value;
52-
const url = isUrl(formValue)
53-
? prependHttps(formValue)
54-
: 'https://www.google.com/search?q=' + formValue;
52+
const form = document.querySelector('form');
53+
const input = document.querySelector('input');
5554

56-
const activeIframe = Array.from(
57-
document.getElementById('iframe-container').querySelectorAll('iframe')
58-
).find((iframe) => iframe.classList.contains('active'));
55+
form.addEventListener('submit', async(event) => {
56+
event.preventDefault();
57+
const formValue = document.querySelector('form input').value;
58+
const url = isUrl(formValue) ?
59+
prependHttps(formValue) :
60+
'https://www.google.com/search?q=' + formValue;
5961

60-
activeIframe.src = "/reviews/" + ("encodedUrl", __uv$config.encodeUrl(url));
61-
activeIframe.dataset.tabUrl = url;
62-
document.querySelector('form input').value = url;
63-
console.log(activeIframe.dataset.tabUrl);
64-
});
62+
const activeIframe = Array.from(
63+
document.getElementById('iframe-container').querySelectorAll('iframe')
64+
).find((iframe) => iframe.classList.contains('active'));
65+
66+
activeIframe.src = "/reviews/" + ("encodedUrl", __uv$config.encodeUrl(url));
67+
activeIframe.dataset.tabUrl = url;
68+
document.querySelector('form input').value = url;
69+
console.log(activeIframe.dataset.tabUrl);
70+
});
6571
</script>
6672
<script src="/./contact/mathematics.js"></script>
6773
<script src="/./contact/geography.js"></script>
68-
</body>
74+
</body>
75+
6976
</html>

0 commit comments

Comments
 (0)