-
Notifications
You must be signed in to change notification settings - Fork 28
/
preview.html
109 lines (101 loc) · 2.8 KB
/
preview.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
<html>
<head>
<style>
body {
font-size: 16px;
max-width: 800px;
margin: 0 auto;
}
#preview {
text-align: center;
height: 50px;
padding: 8vh 0;
display: flex;
align-items: center;
justify-content: center;
}
#preview svg, #preview img {
transform: scale(2);
}
#markup {
border: none;
box-sizing: border-box;
background: #EEE;
padding: 1em 1.2em;
height: 30vh;
width: 100%;
font-size: 14px;
display: block;
}
#list {
margin: 2rem auto;
text-align: justify;
display: flex;
flex-flow: row wrap;
justify-content: spa;
}
#list img {
margin: 3px;
border: 1px solid transparent;
cursor: pointer;
}
#list img:hover {
opacity: 1;
transform: scale(1.06);
}
</style>
<script src="https://unpkg.com/badgen"></script>
</head>
<body>
<div id="preview"></div>
<textarea id="markup" placeholder="paste svg markup"></textarea>
<div id="list"></div>
<script>
const markup = document.querySelector('#markup')
const preview = document.querySelector('#preview')
const list = document.querySelector('#list')
const blankGIF = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
// init badge
// preview.innerHTML = createBadge()
// update badge on input
markup.oninput = function () {
const base64 = markup.value ? `data:image/svg+xml;base64,${btoa(markup.value)}` : blankGIF
preview.innerHTML = window.badgen({
status: 'icon',
subject: '',
icon: base64
})
}
// click
list.addEventListener('click', e => {
if (e.target.dataset.svg) {
markup.value = e.target.dataset.svg
// markup.oninput()
// preview.innerHTML = e.target.dataset.svg
preview.innerHTML = e.target.outerHTML
}
})
const fetchJSON = (url, init) => fetch(url, init).then(resp => resp.json());
// render badge gallery
fetchJSON('../icons.json').then(icons => {
preview.innerHTML = badgen({
status: 'icon',
subject: '',
icon: blankGIF
})
const badges = Object.keys(icons).map(name => {
const icon = icons[name]
const svg = badgen({
status: name,
subject: '',
icon: icon.base64,
iconWidth: icon.width
})
return `<img data-svg='${atob(icon.base64.slice(26))}' src='data:image/svg+xml;base64,${btoa(svg)}' />`
})
list.innerHTML = badges.join('')
})
</script>
</body>
<body>
</html>