-
Notifications
You must be signed in to change notification settings - Fork 2
/
smooth-tab-switch-scroll.js
72 lines (62 loc) · 2.28 KB
/
smooth-tab-switch-scroll.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
// Smooth tab switching when scrolling the tab bar. Also adds Shift+Scroll to scroll the tab bar
// Set wrap to false to disable switching to the first tab from the bottom and vice versa
(function() {
let wrap = true,
tabStrip;
document.addEventListener("wheel", replaceTabScroll, true);
function replaceTabScroll(e) {
tabStrip = e.target.closest(".tab-strip");
if(tabStrip){
// Prevent default scroll
e.preventDefault();
e.stopImmediatePropagation();
if(e.wheelDelta < 0) {
e.shiftKey
? tabStrip.scrollTop += 100
: switchActiveTab();
}
else if(e.wheelDelta > 0) {
e.shiftKey
? tabStrip.scrollTop -= 100
: switchActiveTab("previous");
}
}
}
function switchActiveTab(direction) {
const activeTab = tabStrip.getElementsByClassName("tab active")[0],
newTabButton = tabStrip.getElementsByClassName("newtab")[0];
let switchTabSpan = activeTab.parentNode.parentNode;
do {
// Get next or previous tab
switchTabSpan = (direction == "previous")
? switchTabSpan.previousSibling
: switchTabSpan.nextSibling;
// If there is no next/prev sibling, wrap to top/bottom tab
if(!switchTabSpan && wrap) {
switchTabSpan = (direction == "previous")
? tabStrip.lastChild
: tabStrip.firstChild;
}
if(!switchTabSpan)
return;
}
// Skip newtab button
while(switchTabSpan === newTabButton);
// Remove any active classes
activeTab.classList.remove("active");
const stillActiveTab = tabStrip.getElementsByClassName("tab active")[0];
if(stillActiveTab)
stillActiveTab.classList.remove("active");
// Give switch tab active class
const switchTab = switchTabSpan.getElementsByClassName("tab")[0];
switchTab.classList.add("active");
// Scroll the tab into view
if(switchTabSpan.nextSibling === newTabButton || switchTabSpan === tabStrip.firstChild)
switchTabSpan.scrollIntoView({block: "center"});
else
switchTabSpan.scrollIntoView({block: "nearest"});
// Activate tab
const switchTabId = switchTab.id.match(/\d{1,}/)[0];
chrome.tabs.update(parseInt(switchTabId), {active: true});
}
})();