mirror of
https://github.com/He4eT/tabswiper.git
synced 2026-05-04 16:47:23 +00:00
Initial commit
This commit is contained in:
parent
b47ce482b8
commit
9306068d2a
7 changed files with 478 additions and 0 deletions
57
popup/css/popup.css
Normal file
57
popup/css/popup.css
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
html, body {
|
||||
font-family: sans;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.popup {
|
||||
--color-bg: #eeeeee;
|
||||
--color-text: #333333;
|
||||
--color-accent: #666666;
|
||||
|
||||
--step: 8px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.popup {
|
||||
--color-bg: darkgray;
|
||||
--color-text: white;
|
||||
--color-accent: blue;
|
||||
}
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
|
||||
*:focus-visible {
|
||||
outline-color: var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
outline-style: solid;
|
||||
outline-width: 1px;
|
||||
}
|
||||
|
||||
/* Button */
|
||||
|
||||
button {
|
||||
background: var(--color-bg);
|
||||
|
||||
border-radius: 0;
|
||||
border: 1px solid var(--color-text);
|
||||
|
||||
color: var(--color-text);
|
||||
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
|
||||
padding: var(--step);
|
||||
}
|
||||
|
||||
button:active {
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Link */
|
||||
|
||||
a {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
53
popup/tabswiper/tabswiper.css
Normal file
53
popup/tabswiper/tabswiper.css
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
.tabswiper {
|
||||
background-color: var(--color-bg);
|
||||
border: 1px solid var(--color-accent);
|
||||
color: var(--color-text);
|
||||
width: 640px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
|
||||
.tabswiper header {
|
||||
padding: var(--step);
|
||||
border-block-end: 1px solid var(--color-accent);
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
aligh-items: center;
|
||||
}
|
||||
|
||||
/* Current Tab */
|
||||
|
||||
.tabswiper .currentTab {
|
||||
padding: calc(1 * var(--step)) var(--step);
|
||||
cursor: pointer;
|
||||
word-wrap: break-word;
|
||||
/* line-height: 1.5; */
|
||||
}
|
||||
|
||||
.tabswiper .currentTab .title {
|
||||
/* font-size: 1.2em; */
|
||||
margin-block-end: calc(1 * var(--step));
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tabswiper .currentTab .url {
|
||||
/* font-size: 0.8em; */
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
|
||||
.tabswiper footer {
|
||||
padding: var(--step);
|
||||
border-block-start: 1px solid var(--color-accent);
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--step);
|
||||
}
|
||||
|
||||
.tabswiper footer .actionButton {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
58
popup/tabswiper/tabswiper.html
Normal file
58
popup/tabswiper/tabswiper.html
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<!doctype html>
|
||||
<html lang='en'>
|
||||
<head>
|
||||
<meta charset='UTF-8'>
|
||||
<title>Tabswiper</title>
|
||||
<link rel='stylesheet' href='../css/popup.css' />
|
||||
<link rel='stylesheet' href='./tabswiper.css' />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main class='popup'>
|
||||
<article class='tabswiper'>
|
||||
<header>
|
||||
<section class='tabCounter'>
|
||||
Tab 1 of 20
|
||||
</section>
|
||||
<a
|
||||
class='infoLink'
|
||||
target='_blank'
|
||||
href='#'
|
||||
>
|
||||
Info
|
||||
</a>
|
||||
</header>
|
||||
<section class='currentTab'>
|
||||
<section id='titleTab' class='title'>
|
||||
Some title here
|
||||
</section>
|
||||
<a
|
||||
id='linkTab'
|
||||
class='url'
|
||||
href='https://some.url/here'
|
||||
>
|
||||
https://some.url/here
|
||||
</a>
|
||||
</section>
|
||||
<footer>
|
||||
<button
|
||||
id='buttonClose'
|
||||
class='actionButton close'
|
||||
title='Close this tab. Shortcuts: [J], [Left Arrow]'
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
id='buttonKeep'
|
||||
class='actionButton keep'
|
||||
title='Keep this tab. Shortcuts: [K], [Right Arrow]'
|
||||
>
|
||||
Keep
|
||||
</button>
|
||||
</footer>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<script type='module' src='./tabswiper.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
85
popup/tabswiper/tabswiper.js
Normal file
85
popup/tabswiper/tabswiper.js
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
/* */
|
||||
|
||||
const state = {
|
||||
tabs: [],
|
||||
skipped: [],
|
||||
currentTab: null,
|
||||
}
|
||||
|
||||
const updateState = () =>
|
||||
updateTabs()
|
||||
.then(updateCurrent)
|
||||
.then(updateInterface)
|
||||
|
||||
const updateTabs = () =>
|
||||
browser.tabs.query({currentWindow: true})
|
||||
.then((tabs) => tabs.reverse())
|
||||
.then((tabs) => void (state.tabs = tabs))
|
||||
|
||||
const updateCurrent = () => {
|
||||
const filteredTabs = state.tabs
|
||||
.filter(({ id }) => state.skipped.includes(id) === false)
|
||||
state.currentTab = filteredTabs[0] ?? null
|
||||
}
|
||||
|
||||
const keepTab = (tab) => {
|
||||
state.skipped.push(tab.id)
|
||||
updateState()
|
||||
}
|
||||
|
||||
const goToTab = (tab) => {
|
||||
browser.tabs.update(tab.id, { active: true })
|
||||
updateState()
|
||||
}
|
||||
|
||||
const closeTab = (tab) => {
|
||||
browser.tabs.remove(tab.id)
|
||||
updateState()
|
||||
}
|
||||
|
||||
/* */
|
||||
|
||||
const setDOMListeners = () => {
|
||||
const pairs = [
|
||||
['buttonClose', closeTab],
|
||||
['buttonKeep', keepTab],
|
||||
['linkTab', goToTab],
|
||||
]
|
||||
|
||||
pairs.forEach(([elementId, handler]) => {
|
||||
document.getElementById(elementId).addEventListener('click', (e) => {
|
||||
console.log('Element:', elementId, 'Handler:', handler)
|
||||
e.preventDefault()
|
||||
handler(state.currentTab)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const updateInterface = () => {
|
||||
console.log(state)
|
||||
|
||||
if (state.currentTab === null) {
|
||||
location.reload()
|
||||
return
|
||||
}
|
||||
|
||||
const items = [
|
||||
['titleTab', 'textContent', state.currentTab.title],
|
||||
['linkTab', 'textContent', state.currentTab.url],
|
||||
['linkTab', 'href', state.currentTab.url],
|
||||
]
|
||||
|
||||
items.forEach(([elementId, property, value]) => {
|
||||
document.getElementById(elementId)[property] = value
|
||||
})
|
||||
}
|
||||
|
||||
/* */
|
||||
|
||||
const init = () =>
|
||||
updateState()
|
||||
.then(setDOMListeners)
|
||||
// .then(setKeyboardListeners)
|
||||
// .then(setBrowserListeners)
|
||||
|
||||
init()
|
||||
Loading…
Add table
Add a link
Reference in a new issue