-
Notifications
You must be signed in to change notification settings - Fork 317
/
Copy pathsidebar-additional-tabs.html
134 lines (123 loc) · 4.79 KB
/
sidebar-additional-tabs.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Box Content Sidebar Test Page</title>
<style>
body,
html,
.sidebar {
background: #ccc;
border: 0 none;
box-sizing: border-box !important;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
.sidebar {
display: flex;
}
.inputs {
padding: 15px;
}
.inputs input {
margin-bottom: 10px;
}
</style>
<link rel="stylesheet" type="text/css" href="../dev/en-US/sidebar.css" />
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="../dev/en-US/sidebar.js"></script>
</head>
<body>
<div class="sidebar">
<div class="inputs">
<div>
<label>
<div>File Id</div>
<input class="file" type="text" placeholder="Enter file id" />
</label>
<label>
<div>Auth Token</div>
<input class="token" type="text" placeholder="Enter auth token" />
</label>
</div>
<button type="button" onclick="load(true)">Submit</button>
</div>
<div class="preview sidebar"></div>
</div>
<script>
const svg = `<svg xmlns="http://www.w3.org/2000/svg" fill="#555" height="24" viewBox="0 0 24 24" width="24" focusable="false">
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>`;
const blob = new Blob([svg], { type: 'image/svg+xml' });
// Used to simulate an icon URL coming back from the server
const url = URL.createObjectURL(blob);
const tabData = [
{
id: 200,
title: 'Open with Gmail', // used as tooltip
iconUrl: url,
callback: data => window.alert(JSON.stringify(data)),
status: 'ADDED',
},
{
id: 201,
title: 'Open with Slack',
iconUrl: url,
callback: () => window.alert('slack'),
status: 'ADDED',
},
{
id: 201,
title: 'Open with Slack',
iconUrl: url,
callback: () => window.alert('slack'),
status: 'ADDED',
},
{
id: -1,
title: 'More Apps',
callback: () => window.alert('more apps'),
status: 'ADDED',
},
];
function load(tabData) {
const { ContentSidebar } = Box;
const token = document.querySelector('.token').value || localStorage.getItem('token');
const fileId = document.querySelector('.file').value || localStorage.getItem('file');
if (!token || !fileId) {
return;
}
localStorage.setItem('token', token);
document.querySelector('.token').value = token;
localStorage.setItem('file', fileId);
document.querySelector('.file').value = fileId;
const placeholder = document.createElement('div');
placeholder.textContent = 'test';
const sidebar = new ContentSidebar();
sidebar.show(fileId, token, {
hasAdditionalTabs: true,
additionalTabs: tabData,
container: '.preview.sidebar',
isLarge: true,
hasActivityFeed: true,
detailsSidebarProps: {
hasProperties: true,
hasNotices: true,
hasAccessStats: true,
hasVersions: true,
hasNotices: true,
onAccessStatsClick: () => {
alert('Hello, world!');
},
},
});
}
load();
setTimeout(() => load(tabData), 1500);
</script>
</body>
</html>