forked from adamschwartz/chrome-tabs
/
index.html
167 lines (152 loc) · 7.9 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!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/JS.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="demo/css/demo.css" rel="stylesheet">
<link href="css/chrome-tabs.css" rel="stylesheet">
<link href="css/chrome-tabs-dark-theme.css" rel="stylesheet">
</head>
<body>
<div class="surface">
<div class="mock-browser">
<div class="chrome-tabs" style="--tab-content-margin: 9px">
<div class="chrome-tabs-content">
<div class="chrome-tab">
<div class="chrome-tab-dividers"></div>
<div class="chrome-tab-background">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><symbol id="chrome-tab-geometry-left" viewBox="0 0 214 36"><path d="M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z"/></symbol><symbol id="chrome-tab-geometry-right" viewBox="0 0 214 36"><use xlink:href="#chrome-tab-geometry-left"/></symbol><clipPath id="crop"><rect class="mask" width="100%" height="100%" x="0"/></clipPath></defs><svg width="52%" height="100%"><use xlink:href="#chrome-tab-geometry-left" width="214" height="36" class="chrome-tab-geometry"/></svg><g transform="scale(-1, 1)"><svg width="52%" height="100%" x="-100%" y="0"><use xlink:href="#chrome-tab-geometry-right" width="214" height="36" class="chrome-tab-geometry"/></svg></g></svg>
</div>
<div class="chrome-tab-content">
<div class="chrome-tab-favicon" style="background-image: url('demo/images/google-favicon.ico')"></div>
<div class="chrome-tab-title">Google</div>
<div class="chrome-tab-drag-handle"></div>
<div class="chrome-tab-close"></div>
</div>
</div>
<div class="chrome-tab" active>
<div class="chrome-tab-dividers"></div>
<div class="chrome-tab-background">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><symbol id="chrome-tab-geometry-left" viewBox="0 0 214 36"><path d="M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z"/></symbol><symbol id="chrome-tab-geometry-right" viewBox="0 0 214 36"><use xlink:href="#chrome-tab-geometry-left"/></symbol><clipPath id="crop"><rect class="mask" width="100%" height="100%" x="0"/></clipPath></defs><svg width="52%" height="100%"><use xlink:href="#chrome-tab-geometry-left" width="214" height="36" class="chrome-tab-geometry"/></svg><g transform="scale(-1, 1)"><svg width="52%" height="100%" x="-100%" y="0"><use xlink:href="#chrome-tab-geometry-right" width="214" height="36" class="chrome-tab-geometry"/></svg></g></svg>
</div>
<div class="chrome-tab-content">
<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-drag-handle"></div>
<div class="chrome-tab-close"></div>
</div>
</div>
</div>
<div class="chrome-tabs-bottom-bar"></div>
<!-- Styles to prevent flash after JS initialization -->
<style>
.chrome-tabs .chrome-tab {
width: 258px
}
.chrome-tabs .chrome-tab:nth-child(1) {
transform: translate3d(0px, 0, 0)
}
.chrome-tabs .chrome-tab:nth-child(2) {
transform: translate3d(239px, 0, 0)
}
</style>
</div>
<div class="chrome-tabs-optional-shadow-below-bottom-bar"></div>
<div class="mock-browser-content">
<div class="buttons">
<button data-theme-toggle>Toggle dark theme</button>
<button data-add-tab>Add new tab</button>
<button data-add-background-tab>Add tab in the background</button>
<button data-remove-tab>Remove active tab</button>
</div>
</div>
</div>
<div class="carbonads-wrapper">
<script async="true" id="_carbonads_js" src="https://cdn.carbonads.com/carbon.js?serve=CKYILKQE&placement=adamschwartzco"></script>
</div>
<style>
.made-by {
margin-top: auto;
--active-background-color: #dee1e6;
color: #848890;
font-size: 14px;
font-family: Avenir, "Avenir Next", "Segoe UI", Arial, "Helvetica Neue", Helvetica, sans-serif;
text-align: center;
-webkit-font-smoothing: antialiased;
font-weight: bold;
}
html.dark-theme .made-by {
--active-background-color: #242628;
color: #838488;
}
.made-by-link { color: inherit; text-decoration: none; display: inline-block; padding: 1em; border-radius: .5em }
.made-by-link:hover:not(:active) { opacity: .7 }
.made-by-link:hover:active { background: var(--active-background-color) }
.made-by-logo { display: block; height: 3.5em; width: 7em; margin: 0 auto .75em }
</style>
<div class="made-by">
<a href="https://adamschwartz.co" class="made-by-link">
<svg class="made-by-logo" viewBox="0 0 222 127" role="img" aria-label="Adam Schwartz logo" fill="currentColor"><path d="M87.1 117C73.6 117 62.8 108.7 63 99 63.2 89.3 74.2 81.6 87.7 81.8 95.2 82 101.8 84.5 106.2 88.4 106.3 88.3 140.7 25.5 140.7 25.5L162.4 10 112.4 102.2C112 102.8 105 117 87.1 117Z" class="music-note"></path><path d="M56 20L56 36.6 32 59 56 80 56 98 10 59 56 20 56 20Z" class="less-than"></path><path d="M166 37L190 59 166 80 166 98 212 59 166 20 166 37 166 37Z" class="greater-than"></path></svg>
<div class="made-by-text">Made by Adam Schwartz</div>
</a>
</div>
</div>
<script src="https://unpkg.com/draggabilly@2.2.0/dist/draggabilly.pkgd.min.js"></script>
<script src="js/chrome-tabs.js"></script>
<script>
var el = document.querySelector('.chrome-tabs')
var chromeTabs = new ChromeTabs()
chromeTabs.init(el)
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', _ => {
chromeTabs.addTab({
title: 'New Tab',
favicon: false
})
})
document.querySelector('button[data-add-background-tab]').addEventListener('click', _ => {
chromeTabs.addTab({
title: 'New Tab',
favicon: false
}, {
background: true
})
})
document.querySelector('button[data-remove-tab]').addEventListener('click', _ => {
chromeTabs.removeTab(chromeTabs.activeTabEl)
})
document.querySelector('button[data-theme-toggle]').addEventListener('click', _ => {
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')
}
})
window.addEventListener('keydown', (event) => {
if (event.ctrlKey && event.key === 't') {
chromeTabs.addTab({
title: 'New Tab',
favicon: false
})
}
})
</script>
</body>
</html>