-
Notifications
You must be signed in to change notification settings - Fork 0
/
decorator.js
141 lines (126 loc) · 4.43 KB
/
decorator.js
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
function getById(id) { return document.getElementById(id) }
var SVGs = getById('svgs'),
icon = getById('example-icon'),
iconSelected = getById('hero'),
iconName = iconSelected.value,
sizeSlider = getById('size-slider'),
size = sizeSlider.value,
shdw_1 = getById('shadow-1'),
shdw_2 = getById('shadow-2'),
shdw_3 = getById('shadow-3'),
shadowIndicator = 0,
color = '#272822',
options = document.getElementsByClassName('option'),
shadowColor = document.querySelector('[name="shadowColor"]'),
shadowText = '',
CSSforSVG = getById('svg-info'),
CSSforIcon = getById('icon-info');
document.addEventListener('DOMContentLoaded', function () {
[].forEach.call(options, function (o) {
if (o.dataset.color) {
o.style.backgroundColor = o.dataset.color;
}
if (!window.matchMedia('screen and (min-width:420px)').matches) {
o.classList.toggle('hidden');
}
});
icon.style.fill = color;
});
//Editor functionality
SVGs.onclick = function (e) {
var element = e.target.closest('.iconset .box');
if (element) { iconName=element.textContent; iconSelected.value = element.textContent; applyIcon(iconName); }
};
iconSelected.oninput = function(e){iconName=this.value; applyIcon(this.value);}
function applyIcon(i) {
if (SVGs.textContent.split('\n').map(function (x) { return x.trim() }).indexOf(i) > -1) {
sizeSlider.disabled = false;
icon.innerHTML ='<use xlink:href="#' + "icon-"+i+'"></use>';
showCSSrules()
} else {
icon.innerHTML = '<text x="10" y="100"><tspan style="font-size:28px;font-weight:bold">Sorry, no icon</tspan></text>';
sizeSlider.disabled = true;
changeSize('200');
sizeSlider.value = '200';
CSSforSVG.value = '';
CSSforIcon.value = '';
}
if (icon.classList.contains('flipped')) {
icon.classList.remove('flipped');
showCSSrules();
}
}
getById('palette').onclick = function (e) {
if (e.target.dataset.color) {
color = e.target.style.backgroundColor;
icon.style.fill = color;
showCSSrules();
}
};
shadowColor.onchange = function (e) {
if (shadowIndicator) {
changeShadow(this.value);
showCSSrules();
}
};
getById('flip').onchange = function (e) {
icon.classList.toggle('flipped');
showCSSrules();
};
[shdw_1, shdw_2, shdw_3].forEach(function (slider) {
slider.onchange = function (e) {
if (slider.value * 1 !== 0) {
shadowIndicator = 1;
changeShadow(shadowColor.value);
showCSSrules();
} else if ([shdw_1, shdw_2, shdw_3].reduce(function (a, c) { return a + Math.abs(c.value) }, 0) == 0) {
shadowIndicator = 0;
}
}
});
sizeSlider.oninput = function () { size = this.value;
changeSize(size) };
sizeSlider.onchange = function () { size = this.value;
changeSize(size) };
function changeSize(px) {
icon.style.width = px + 'px';
icon.style.height = px + 'px';
icon.style.position = 'relative';
icon.style.top = (200 - px) / 2 + 'px';
showCSSrules();
}
function changeShadow(color) {
shadowText = [shdw_1, shdw_2, shdw_3].reduce(function (a, c) { return a + (c.value * 1 ? c.value + 'px ' : '0 ') }, '') + color;
icon.style.filter = 'drop-shadow(' + shadowText + ')';
showCSSrules();
}
function showCSSrules() {
var rows = 4,
colsSVG = 40,
colsIcon = 40;
CSSforSVG.value = '.' + "icon-"+iconName + ' {\n fill: ' + color + ';\n width: ' + size + 'px; height: ' + size + 'px;\n}';
CSSforIcon.value = '.' + "icon-"+iconName + ' {\n color: ' + color + ';\n font-size: ' + size + 'px;\n}';
if (shadowIndicator) {
CSSforSVG.value = CSSforSVG.value.split('\n}')[0] + '\n -webkit-filter: drop-shadow(' + shadowText + ');\n filter: drop-shadow(' + shadowText + ');\n}';
CSSforIcon.value = CSSforIcon.value.split('\n}')[0] + '\n text-shadow: ' + shadowText + ';\n}';
rows += 2;
colsSVG = 55;
colsIcon = 42;
}
if (colsSVG !== colsIcon) {
CSSforSVG.setAttribute('cols', colsSVG);
CSSforIcon.setAttribute('cols', colsIcon);
}
if (icon.classList.contains('flipped')) {
rows += 2;
}
[CSSforSVG, CSSforIcon].forEach(function (x) {
if (icon.classList.contains('flipped')) {
x.value = x.value.split('\n}')[0] + '\n -webkit-transform: scaleX(-1);\n transform: scaleX(-1);\n}';
}
x.setAttribute('rows', rows);
});
}
[CSSforSVG, CSSforIcon].forEach(function (area) {
area.onclick = function (e) { this.select() }
});