forked from adamschwartz/chrome-tabs
/
index.html
135 lines (124 loc) · 6.21 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
<!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="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="//cdn.carbonads.com/carbon.js?serve=CKYILKQE&placement=adamschwartzco"></script>
</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>