Skip to content

Commit ffc789a

Browse files
taufik-nurrohmantaufik-nurrohman
committed
Begin Creating JavaScript Beautifier
1 parent 7f7d1f9 commit ffc789a

File tree

7 files changed

+286
-70
lines changed

7 files changed

+286
-70
lines changed

‎favicon.ico‎

1.12 KB
Binary file not shown.

‎index.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
:root {
2+
background: #fff;
3+
color: #000;
4+
border-top: 4px solid;
5+
font-family: serif;
6+
}
7+
a {
8+
color: #00f;
9+
text-decoration: none;
10+
}
11+
a:focus {
12+
text-decoration: underline;
13+
}
14+
a:visited {
15+
color: #009;
16+
}
17+
a, code {
18+
word-wrap: break-word;
19+
}
20+
button {
21+
cursor: pointer;
22+
}
23+
code {
24+
font-family: monospace;
25+
}
26+
footer, header, main, nav {
27+
max-width: 700px;
28+
margin: 0 auto;
29+
}
30+
footer hr, header hr {
31+
display: none;
32+
}
33+
footer {
34+
border-top: 1px dashed;
35+
}
36+
header {
37+
border-bottom: 1px dashed;
38+
}
39+
input[type="radio"], input[type="checkbox"] {
40+
cursor: pointer;
41+
}
42+
label, select {
43+
cursor: pointer;
44+
}
45+
pre {
46+
white-space: pre-wrap;
47+
word-wrap: break-word;
48+
}
49+
pre code {
50+
display: block;
51+
background: #eee;
52+
padding: 1em;
53+
}
54+
table {
55+
width: 100%;
56+
}
57+
textarea {
58+
display: block;
59+
width: 100%;
60+
min-height: 250px;
61+
}
62+
[hidden] {
63+
display: none;
64+
}
65+
66+
@media (prefers-color-scheme: dark) {
67+
:root {
68+
background: #000;
69+
color: #fff;
70+
}
71+
a {
72+
color: #aaf;
73+
}
74+
a:visited {
75+
color: #77c;
76+
}
77+
pre code {
78+
background: #111;
79+
}
80+
}

‎index.html‎

Lines changed: 7 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -7,70 +7,7 @@
77
<meta content="A set of online tools for those who know enough about web programming languages such as HTML, CSS and JavaScript, but are not very proficient in using automatic build tools to tidy their files. These people, usually just need a kind of tool that allows them to paste certain data into a text area and then to click on a submit button to get the results quickly. For example, to tidy CSS and JavaScript files." name="description">
88
<title>Tidy Tools</title>
99
<link href="favicon.ico" rel="icon">
10-
<style>
11-
:root {
12-
background: #fff;
13-
color: #000;
14-
border-top: 4px solid;
15-
font-family: serif;
16-
}
17-
a {
18-
color: #00f;
19-
text-decoration: none;
20-
}
21-
a:focus {
22-
text-decoration: underline;
23-
}
24-
a:visited {
25-
color: #009;
26-
}
27-
a, code {
28-
word-wrap: break-word;
29-
}
30-
code {
31-
font-family: monospace;
32-
}
33-
footer, header, main, nav {
34-
max-width: 700px;
35-
margin: 0 auto;
36-
}
37-
footer hr, header hr {
38-
display: none;
39-
}
40-
footer {
41-
border-top: 1px dashed;
42-
}
43-
header {
44-
border-bottom: 1px dashed;
45-
}
46-
pre {
47-
white-space: pre-wrap;
48-
word-wrap: break-word;
49-
}
50-
pre code {
51-
display: block;
52-
background: #eee;
53-
padding: 1em;
54-
}
55-
table {
56-
width: 100%;
57-
}
58-
@media (prefers-color-scheme: dark) {
59-
:root {
60-
background: #000;
61-
color: #fff;
62-
}
63-
a {
64-
color: #aaf;
65-
}
66-
a:visited {
67-
color: #77c;
68-
}
69-
pre code {
70-
background: #111;
71-
}
72-
}
73-
</style>
10+
<link href="index.css" rel="stylesheet">
7411
</head>
7512
<body>
7613
<header>
@@ -81,16 +18,16 @@ <h1>Tidy Tools</h1>
8118
<main>
8219
<h2>List of Tools</h2>
8320
<article>
84-
<h3><a href="#">Tidy HTML</a></h3>
85-
<p>Lorem ipsum dolor sit amet.</p>
21+
<h3><a href="html">Tidy HTML</a></h3>
22+
<p>Tidy HTML files online.</p>
8623
</article>
8724
<article>
88-
<h3><a href="#">Tidy CSS</a></h3>
89-
<p>Lorem ipsum dolor sit amet.</p>
25+
<h3><a href="css">Tidy CSS</a></h3>
26+
<p>Tidy CSS files online.</p>
9027
</article>
9128
<article>
92-
<h3><a href="#">Tidy JavaScript</a></h3>
93-
<p>Lorem ipsum dolor sit amet.</p>
29+
<h3><a href="js">Tidy JavaScript</a></h3>
30+
<p>Tidy JavaScript files online.</p>
9431
</article>
9532
</main>
9633
<footer>

‎index.js‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
(function(win, doc) {
2+
3+
var form = document.forms[0],
4+
accepts = form.dataset.files.split(/\s+/),
5+
state = {},
6+
sourceBack = form.x,
7+
sourceDo = form.v,
8+
sourceFrom = form['source[from]'],
9+
sourcePicker = doc.createElement('input'),
10+
sourceTo = form['source[to]'];
11+
12+
function hide(node) {
13+
node.style.display = 'none';
14+
}
15+
16+
function reset(node) {
17+
node.style.display = "";
18+
}
19+
20+
function show(node) {
21+
node.style.display = 'block';
22+
}
23+
24+
function onBack() {
25+
hide(sourceTo), reset(sourceFrom);
26+
sourceFrom.focus();
27+
sourceFrom.select();
28+
hide(sourceBack), reset(sourceDo);
29+
}
30+
31+
function onDo() {
32+
var result = win.tidy(sourceFrom.value, state);
33+
hide(sourceFrom), show(sourceTo);
34+
sourceTo.value = result.error ? result.error.message : result.code;
35+
sourceTo.focus();
36+
sourceTo.select();
37+
hide(sourceDo), show(sourceBack);
38+
}
39+
40+
function onLocationHashChange(e) {
41+
'#/result' === win.location.hash ? (e ? onDo() : (win.location.hash = '#/home')) : onBack();
42+
}
43+
44+
function onFormReset(e) {
45+
win.history.back();
46+
e.preventDefault();
47+
}
48+
49+
function onFormSubmit(e) {
50+
win.location.hash = '#/result';
51+
e.preventDefault();
52+
}
53+
54+
// Double-click to open files… (should works on mobile)
55+
function onInputDoubleClick(e) {
56+
sourcePicker.click();
57+
}
58+
59+
function onInputKeyDown(e) {
60+
var ctrlKey = e.ctrlKey,
61+
key = e.key,
62+
keyCode = e.keyCode;
63+
// Open files…
64+
if (
65+
ctrlKey && (
66+
key && 'o' === key ||
67+
keyCode && 79 === keyCode
68+
)
69+
) {
70+
sourcePicker.click();
71+
e.preventDefault();
72+
}
73+
// Submit with “Ctrl + Enter”
74+
if (
75+
ctrlKey && (
76+
key && 'Enter' === key ||
77+
keyCode && 13 === keyCode
78+
)
79+
) {
80+
sourceDo.click();
81+
e.preventDefault();
82+
}
83+
}
84+
85+
function onOutputKeyDown(e) {
86+
var ctrlKey = e.ctrlKey,
87+
key = e.key,
88+
keyCode = e.keyCode;
89+
if (
90+
(
91+
key && 'Backspace' === key ||
92+
keyCode && 8 === keyCode
93+
)
94+
) {
95+
sourceBack.click();
96+
e.preventDefault();
97+
}
98+
}
99+
100+
function onPickerChange() {
101+
var data = "",
102+
files = this.files, file, type;
103+
sourceFrom.value = "";
104+
for (var i = 0, j = files.length; i < j; ++i) {
105+
file = files[i];
106+
if (-1 !== accepts.indexOf(type = file.type)) {
107+
var r = new FileReader;
108+
r._file = file;
109+
r.readAsText(file);
110+
r.onload = function() {
111+
sourceFrom.value += '// ' + this._file.name + "\n" + this.result + "\n\n";
112+
sourceFrom.focus();
113+
sourceFrom.select();
114+
};
115+
} else if (type) {
116+
alert('MIME type `' + type + '` is not allowed.');
117+
}
118+
}
119+
}
120+
121+
win.addEventListener('hashchange', onLocationHashChange, false);
122+
123+
form.addEventListener('reset', onFormReset, false);
124+
form.addEventListener('submit', onFormSubmit, false);
125+
126+
sourceFrom.addEventListener('dblclick', onInputDoubleClick, false);
127+
sourceFrom.addEventListener('keydown', onInputKeyDown, false);
128+
sourceTo.addEventListener('keydown', onOutputKeyDown, false);
129+
130+
sourcePicker.type = 'file';
131+
sourcePicker.multiple = 'multiple';
132+
sourcePicker.style.cssText = 'display:block;position:fixed;top:-2px;left:-2px;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;';
133+
sourcePicker.addEventListener('change', onPickerChange, false);
134+
135+
doc.body.appendChild(sourcePicker);
136+
137+
onLocationHashChange(0);
138+
139+
})(this, this.document);

‎js/index.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html dir="ltr">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta content="#000" name="color-scheme">
6+
<meta content="width=device-width" name="viewport">
7+
<meta content="Tidy your JavaScript files online by pasting some JavaScript code into the text area below, or by opening a JavaScript file to start the tidy." name="description">
8+
<title>Tidy JavaScript Online</title>
9+
<link href="../favicon.ico" rel="icon">
10+
<link href="../index.css" rel="stylesheet">
11+
</head>
12+
<body>
13+
<header>
14+
<h1><a href="..">Tidy</a> &raquo; Tidy JavaScript</h1>
15+
<p>Paste your JavaScript code into the text area below, or open a JavaScript file to start the tidy. This tool supports ES6 syntax!</p>
16+
<hr>
17+
</header>
18+
<main>
19+
<form data-files="application/javascript application/x-javascript text/javascript">
20+
<p>
21+
<textarea name="source[from]" placeholder="Try &ldquo;Ctrl + O&rdquo; to open JavaScript files&hellip;"></textarea><!--
22+
--><textarea hidden name="source[to]" placeholder="Nothing here. Press the &ldquo;Backspace&rdquo; key to reset the form." readonly></textarea>
23+
</p>
24+
<p>
25+
<button name="v" type="submit">Tidy</button><!--
26+
--><button hidden name="x" type="reset">Back</button>
27+
</p>
28+
</form>
29+
<p><small>JavaScript beautifier powered by <a href="https://github.com/beautify-web/js-beautify" rel="nofollow" target="_blank">@beautify-web/js-beautify</a>.</small></p>
30+
</main>
31+
<footer>
32+
<hr>
33+
<p>&copy; 2020 <a href="https://taufik-nurrohman.js.org">Taufik Nurrohman</a></p>
34+
</footer>
35+
<script src="tidy.js/index.js"></script>
36+
<script src="../index.js"></script>
37+
<script>
38+
function tidy(text, o) {
39+
var result = js_beautify(text, o);
40+
return result ? {
41+
code: result
42+
} : {
43+
error: {
44+
message: 'Test.'
45+
}
46+
};
47+
}
48+
</script>
49+
</body>
50+
</html>

‎js/tidy.js/LICENSE‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2007-2018 Einar Lielmanis, Liam Newman, and contributors.
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6+
7+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8+
9+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎js/tidy.js/index.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)