Skip to content

Commit ecc351c

Browse files
RoogRoog
authoredDec 5, 2019
Add files via upload
1 parent d3d0dd9 commit ecc351c

File tree

1 file changed

+303
-0
lines changed

1 file changed

+303
-0
lines changed
 

‎xcassets-parser.js

+303
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,303 @@
1+
2+
3+
/*
4+
* Parses the Asset.xcassets asset folder in same directory
5+
* Generates a html file with the colors and images displayed
6+
* Also some helping variables for Sass
7+
*/
8+
9+
var globalflattxt = "";
10+
var globallistindex = "";
11+
var globalflatSassNormal = "";
12+
var globalflatSass = "";
13+
14+
var header = `
15+
<meta charset='UTF-8'>
16+
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
17+
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'>
18+
<title>Assets xcassets parser</title>
19+
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">
20+
<style type='text/css'>
21+
body {
22+
margin: 0;
23+
padding: 0;
24+
font-size: 12pt;
25+
font-family: Arial, sans-serif;
26+
}
27+
.header-logo {
28+
font-size: 18pt;
29+
}
30+
.header {
31+
padding: 1vh 1vw;
32+
}
33+
.conf-container {
34+
padding: 1vh 1vw;
35+
background: #e8e8e8;
36+
}
37+
.json-pre {
38+
white-space: pre-wrap;
39+
background: #f1f1f1;
40+
}
41+
.colorbox--white {
42+
display: inline-block;
43+
padding: 5px;
44+
background: white;
45+
border: 1px solid grey;
46+
border-radius: 2px;
47+
}
48+
.colorbox--black {
49+
display: inline-block;
50+
padding: 5px;
51+
background: black;
52+
border: 1px solid grey;
53+
border-radius: 2px;
54+
}
55+
.colorblock {
56+
display: inline-block;
57+
padding: 5px;
58+
}
59+
img {
60+
max-width: 14vw;
61+
}
62+
</style>
63+
`;
64+
65+
var prebody = `
66+
<header class="header">
67+
<div class="header-logo">
68+
Assets
69+
</div>
70+
</header>
71+
`;
72+
73+
//===================================================
74+
// Assets
75+
76+
function allKeys(object) {
77+
return Object.keys(object).reduce((keys, key) =>
78+
keys.concat(key,
79+
typeof object[key] === 'object' ? allKeys(object[key]) : []
80+
),
81+
[]
82+
);
83+
}
84+
85+
function hasP(obj, param)
86+
{
87+
if(param)
88+
{
89+
if(obj.hasOwnProperty(param))
90+
{
91+
return obj[param];
92+
}
93+
else
94+
{
95+
return false;
96+
}
97+
}
98+
else
99+
{
100+
return false;
101+
}
102+
}
103+
104+
function isHex(h)
105+
{
106+
var a = parseInt(h,16);
107+
if(h == 'undefined')
108+
{
109+
return false;
110+
}
111+
return (a.toString(16) === h.toLowerCase())
112+
}
113+
114+
function colorConv(rawColor)
115+
{
116+
if(isHex(rawColor))
117+
{
118+
rawColor = parseInt(rawColor, 16);
119+
return Math.round(rawColor / 255, 3);
120+
}
121+
else
122+
{
123+
if(rawColor == "0.000")
124+
{
125+
return 0;
126+
}
127+
return Math.round((255) * rawColor, 3);
128+
}
129+
}
130+
131+
var parseContentsJson = function(content, dirName)
132+
{
133+
var valuName = dirName.split("/");
134+
let mash = "";
135+
try {
136+
if(content)
137+
{
138+
if(hasP(content, "colors"))
139+
{
140+
content.colors.forEach(function(item)
141+
{
142+
var rawAppearenceLast = "normal";
143+
if(appearances = hasP(item, "appearances"))
144+
{
145+
if(appearances.length != 0)
146+
{
147+
appearances.forEach(function(ap) {
148+
mash += `Appearances: ` + ap.appearance + `, ` + ap.value + `<br/>`;
149+
rawAppearenceLast = ap.value;
150+
});
151+
}
152+
}
153+
154+
if(color = hasP(item, "color"))
155+
{
156+
if(hasP(color.components, "white"))
157+
{
158+
let tmp = `rgba(`
159+
+ colorConv(color.components.white) + `,`
160+
+ colorConv(color.components.white) + `,`
161+
+ colorConv(color.components.white) + `,`
162+
+ color.components.alpha + `)`;
163+
164+
mash += `<span class='colorbox--black'><span class='colorblock' style='background-color: ` + tmp + `'>` + item.idiom + ` ` + tmp + `</span></span>`;
165+
mash += `<span class='colorbox--white'><span class='colorblock' style='background-color: ` + tmp + `'>` + item.idiom + ` ` + tmp + `</span></span><br/>`;
166+
167+
if(rawAppearenceLast == "normal")
168+
{
169+
globalflatSassNormal += "$" + valuName[2].replace('.', '').replace('colorset', '') + "" + ": " + tmp + ";\n";
170+
}
171+
else {
172+
globalflatSass += "$" + valuName[2].replace('.', '').replace('colorset', '') + "" + ": " + tmp + ";\n";
173+
}
174+
}
175+
else
176+
{
177+
let tmp = `rgba(`
178+
+ colorConv(color.components.red) + `,`
179+
+ colorConv(color.components.green) + `,`
180+
+ colorConv(color.components.blue) + `,`
181+
+ color.components.alpha + `)`;
182+
183+
mash += `<span class='colorbox--black'><span class='colorblock' style='background-color: ` + tmp + `'>` + item.idiom + ` ` + tmp + `</span></span>`;
184+
mash += `<span class='colorbox--white'><span class='colorblock' style='background-color: ` + tmp + `'>` + item.idiom + ` ` + tmp + `</span></span><br/>`;
185+
186+
if(rawAppearenceLast == "normal")
187+
{
188+
globalflatSassNormal += "$" + valuName[2].replace('.', '').replace('colorset', '') + "" + ": " + tmp + ";\n";
189+
}
190+
else {
191+
globalflatSass += "$" + valuName[2].replace('.', '').replace('colorset', '') + "" + ": " + tmp + ";\n";
192+
}
193+
}
194+
}
195+
console.log(mash);
196+
})
197+
}
198+
}
199+
} catch(err) {
200+
console.log("Error parsing:", err);
201+
}
202+
203+
return mash;
204+
}
205+
206+
// List all files
207+
var walkSync = function(dir, filelist)
208+
{
209+
var fs = fs || require('fs'),
210+
files = fs.readdirSync(dir);
211+
filelist = filelist || [];
212+
files.forEach(function(file)
213+
{
214+
if (fs.statSync(dir + '/' + file).isDirectory())
215+
{
216+
globalflattxt += '\t\t<li class="list--headline"><a id="tag_' + file + '"></a><h3>' + file.replace('-', ' ') + '</h3></li>\n';
217+
globallistindex += '\t\t<li class="list--hline"><a href="#tag_' + file + '"><span>' + file.replace('-', ' ') + '</span></a></li>\n';
218+
filelist.push(walkSync(dir + '/' + file, []));
219+
}
220+
else if (file.indexOf(".json") > -1)
221+
{
222+
filelist.push(dir+'/'+file);
223+
let filePath = dir+'/'+file;
224+
let fileContent = {};
225+
try
226+
{
227+
let rawdata = fs.readFileSync(filePath);
228+
fileContent = JSON.parse(rawdata);
229+
fileContentParsed = parseContentsJson(fileContent, dir);
230+
}
231+
catch(err)
232+
{
233+
console.log("error parse: ", err);
234+
}
235+
236+
globalflattxt += `\t\t<li><span class="list-item-filename">` + file + `</span><br/>
237+
` + fileContentParsed + `
238+
<pre class='json-pre'>` + JSON.stringify(fileContent) + `</pre></li>\n`;
239+
}
240+
else if (file == ".DS_Store")
241+
{
242+
243+
}
244+
else
245+
{
246+
filelist.push(dir+'/'+file);
247+
globalflattxt += '\t\t<li><img src="'+dir+'/'+file+'" > <br/><span class="list-item-filename">'+file + '</span></li>\n';
248+
}
249+
});
250+
return filelist;
251+
};
252+
253+
254+
function buildHtml() {
255+
256+
var body = '';
257+
258+
var list = walkSync('./Assets.xcassets', []);
259+
260+
body += `
261+
<div class='conf-container'>
262+
263+
</div>
264+
<div class='conf-container'>
265+
`
266+
267+
body += "\t<ul class='list-index'>\n";
268+
body += globallistindex;
269+
body += "\t</ul>\n";
270+
271+
body += "\t<ul class='list-assets'>\n";
272+
body += globalflattxt;
273+
body += "\t</ul>\n";
274+
275+
body += "\t<hr/>\n<h3>// Normal</h3><br/><pre>\n";
276+
body += globalflatSassNormal;
277+
body += "\t</pre>\n";
278+
279+
body += "\t<hr/>\n<h3>// Dark</h3><br/><pre>\n";
280+
body += globalflatSass;
281+
body += "\t</pre>\n";
282+
283+
body += `
284+
</div>
285+
<div class='conf-container'>
286+
287+
</div>
288+
`
289+
290+
return '<!DOCTYPE html>'
291+
+ '<html><head>' + header + '</head><body>' + prebody + body + '</body></html>';
292+
};
293+
294+
var fs = require('fs');
295+
296+
var fileName = './index.html';
297+
var stream = fs.createWriteStream(fileName);
298+
299+
stream.once('open', function(fd) {
300+
var html = buildHtml();
301+
302+
stream.end(html);
303+
});

0 commit comments

Comments
 (0)
Please sign in to comment.