forked from adamschwartz/chrome-tabs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
110 lines (99 loc) · 5.41 KB
/
index.html
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html><!--
| _
| /| / / |\
| / | / / | \
| / / / / \ \
| \ \ ___ / / / /
| \ | / \/ / | /
| \| | / |/
| \____/
|
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Chrome Tabs - Chrome-style Tabs in HTML/CSS/ES6</title>
<meta name="description" content="Chrome-style tabs in HTML/CSS and JavaScript (ES6).">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="demo/css/demo.css">
<link rel="stylesheet" href="css/chrome-tabs.css">
<link rel="stylesheet" href="css/chrome-tabs-dark-theme.css">
</head>
<body>
<div class="chrome-tabs">
<div class="chrome-tabs-content">
<div class="chrome-tab">
<div class="chrome-tab-background">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><symbol id="topleft" viewBox="0 0 214 29" ><path d="M14.3 0.1L214 0.1 214 29 0 29C0 29 12.2 2.6 13.2 1.1 14.3-0.4 14.3 0.1 14.3 0.1Z"/></symbol><symbol id="topright" viewBox="0 0 214 29"><use xlink:href="#topleft"/></symbol><clipPath id="crop"><rect class="mask" width="100%" height="100%" x="0"/></clipPath></defs><svg width="50%" height="100%" transfrom="scale(-1, 1)"><use xlink:href="#topleft" width="214" height="29" class="chrome-tab-background"/><use xlink:href="#topleft" width="214" height="29" class="chrome-tab-shadow"/></svg><g transform="scale(-1, 1)"><svg width="50%" height="100%" x="-100%" y="0"><use xlink:href="#topright" width="214" height="29" class="chrome-tab-background"/><use xlink:href="#topright" width="214" height="29" class="chrome-tab-shadow"/></svg></g></svg>
</div>
<div class="chrome-tab-favicon" style="background-image: url('demo/images/google-favicon.png')"></div>
<div class="chrome-tab-title">Google</div>
<div class="chrome-tab-close"></div>
</div>
<div class="chrome-tab chrome-tab-current">
<div class="chrome-tab-background">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><symbol id="topleft" viewBox="0 0 214 29" ><path d="M14.3 0.1L214 0.1 214 29 0 29C0 29 12.2 2.6 13.2 1.1 14.3-0.4 14.3 0.1 14.3 0.1Z"/></symbol><symbol id="topright" viewBox="0 0 214 29"><use xlink:href="#topleft"/></symbol><clipPath id="crop"><rect class="mask" width="100%" height="100%" x="0"/></clipPath></defs><svg width="50%" height="100%" transfrom="scale(-1, 1)"><use xlink:href="#topleft" width="214" height="29" class="chrome-tab-background"/><use xlink:href="#topleft" width="214" height="29" class="chrome-tab-shadow"/></svg><g transform="scale(-1, 1)"><svg width="50%" height="100%" x="-100%" y="0"><use xlink:href="#topright" width="214" height="29" class="chrome-tab-background"/><use xlink:href="#topright" width="214" height="29" class="chrome-tab-shadow"/></svg></g></svg>
</div>
<div class="chrome-tab-favicon" style="background-image: url('demo/images/facebook-favicon.ico')"></div>
<div class="chrome-tab-title">Facebook</div>
<div class="chrome-tab-close"></div>
</div>
</div>
<div class="chrome-tabs-bottom-bar"></div>
<!-- Styles to prevent flash after JS initialization -->
<style>
.chrome-tabs .chrome-tab {
width: 243px
}
.chrome-tabs .chrome-tab:nth-child(1) {
transform: translate3d(0px, 0, 0)
}
.chrome-tabs .chrome-tab:nth-child(2) {
transform: translate3d(229px, 0, 0)
}
</style>
</div>
<br>
<p>
<button data-theme-toggle>Toggle dark theme</button>
<button data-add-tab>Add new tab</button>
<button data-remove-tab>Remove current tab</button>
</p>
<div class="carbonads-wrapper">
<script async="true" id="_carbonads_js" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=adamschwartzco"></script>
</div>
<script src="js/deps/draggabilly.js"></script>
<script src="js/chrome-tabs.js"></script>
<script>
var el = document.querySelector('.chrome-tabs')
var chromeTabs = new ChromeTabs()
chromeTabs.init(el, {
tabOverlapDistance: 14,
minWidth: 45,
maxWidth: 243
})
el.addEventListener('activeTabChange', ({ detail }) => console.log('Active tab changed', detail.tabEl))
el.addEventListener('tabAdd', ({ detail }) => console.log('Tab added', detail.tabEl))
el.addEventListener('tabRemove', ({ detail }) => console.log('Tab removed', detail.tabEl))
document.querySelector('button[data-add-tab]').addEventListener('click', function(){
chromeTabs.addTab({
title: 'New Tab',
favicon: 'demo/images/default-favicon.png'
})
});
document.querySelector('button[data-remove-tab]').addEventListener('click', function(){
chromeTabs.removeTab(el.querySelector('.chrome-tab-current'))
});
document.querySelector('button[data-theme-toggle]').addEventListener('click', function(){
if (el.classList.contains('chrome-tabs-dark-theme')) {
document.documentElement.classList.remove('dark-theme')
el.classList.remove('chrome-tabs-dark-theme')
} else {
document.documentElement.classList.add('dark-theme')
el.classList.add('chrome-tabs-dark-theme')
}
})
</script>
</body>
</html>