-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
116 lines (107 loc) · 3.75 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="CodeBen is a JavaScript sandbox for learning and testing JavaScript."
/>
<title>CodeBen - JavaScript Sandbox</title>
<link
rel="stylesheet"
type="text/css"
href="https://unpkg.com/normalize.css@8.0.1/normalize.css"
/>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"
/>
</head>
<body>
<div id="root"></div>
<script
src="https://unpkg.com/lz-string@1.5.0"
type="text/javascript"
charset="utf-8"
></script>
<script
src="https://cdn.jsdelivr.net/npm/toastify-js"
type="text/javascript"
></script>
<script src="flems.js" type="text/javascript" charset="utf-8"></script>
<script>
['Flems', 'Toastify', 'LZString'].forEach(n => {
if (!window[n]) throw new Error(`Missing ${n}!`);
});
const root = document.getElementById('root');
// https://github.com/benjammin4dayz/flems/blob/e05575325e7863d3496010517c078e454597e6ff/src/actions.js#L85-L89
// https://github.com/benjammin4dayz/flems/blob/e05575325e7863d3496010517c078e454597e6ff/src/state.js#L91-L95
//
const params = new URLSearchParams(window.location.hash.slice(1));
const param0 = params.get('0');
const state = {
...Flems.defaults(),
color: '#424242',
theme: 'material',
files: [
{ name: '.html', content: '' },
{
name: '.js',
content: 'console.log("Hello World!")',
},
{ name: '.css', content: '* { background-color: #777; }' },
],
...(param0
? JSON.parse(LZString.decompressFromEncodedURIComponent(param0))
: {}),
};
const flems = Flems(root, state);
flems.getState = () => state;
flems.setState = updater => {
if (typeof updater === 'function' && updater.length === 1) {
Object.assign(state, updater(Object.assign({}, state)));
} else {
Object.assign(state, updater);
}
};
// relabel existing tooltip
const shareTooltip = [...document.querySelectorAll('div.tooltip')].find(
el => el.textContent === 'Open / share on flems.io'
);
if (!shareTooltip) throw new Error('Missing share tooltip element!');
shareTooltip.innerText = 'Copy Link to Clipboard';
// repurpose share button
const shareButton = document.querySelector(`a[href*='https://flems.io']`);
if (!shareButton) throw new Error('Missing share button element!');
shareButton.onclick = e => {
// do not open a new window or navigate to flems.io
e.preventDefault();
// capture encoded params from href
const params = shareButton.href.split('/')[3];
const link = window.location.origin + params;
// copy link to clipboard and add params to the url hash
navigator.clipboard.writeText(link);
window.history.replaceState({}, document.title, link);
// great success!
Toastify({
text: 'Copied!',
duration: 2000,
close: false,
gravity: 'top', // `top` or `bottom`
position: 'right', // `left`, `center` or `right`
stopOnFocus: false, // Prevents dismissing of toast on hover
style: {
background: 'linear-gradient(to right, #66bb6a, #43a047)',
},
offset: {
x: 20,
y: 50,
},
}).showToast();
};
</script>
</body>
</html>