Skip to content

Commit a619460

Browse files
author
Uku Pattak
committed
Use unpkg cdn and move index.html to master
This helps keeping demo page up to date with ease
1 parent d60431f commit a619460

File tree

1 file changed

+128
-0
lines changed

1 file changed

+128
-0
lines changed

‎index.html

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8">
6+
7+
<title>SQL formatter</title>
8+
<meta name="description" content="A whitespace formatter for different query languages">
9+
10+
<meta property="og:title" content="SQL Formatter">
11+
<meta property="og:description" content="A whitespace formatter for different query languages">
12+
<meta property="og:url" content="https://zeroturnaround.github.io/sql-formatter">
13+
14+
<link rel="shortcut icon" href="http://static.zeroturnaround.com/theme55/images/favicon.ico">
15+
16+
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
17+
18+
<style>
19+
html, body {
20+
height: 100%;
21+
margin: 0;
22+
padding: 0;
23+
overflow: hidden;
24+
font-family: 'Roboto Mono', monospace;
25+
}
26+
header {
27+
position: relative;
28+
height: 120px;
29+
padding: 10px 20px;
30+
border-bottom: 2px solid #8DC63F;
31+
box-sizing: border-box;
32+
}
33+
.select-wrapper {
34+
position: absolute;
35+
bottom: 0;
36+
left: 50%;
37+
transform: translate(-50%, -50%);
38+
}
39+
h1 {
40+
margin: 0 0 8px 0;
41+
}
42+
a {
43+
text-decoration: none;
44+
}
45+
main {
46+
overflow: hidden;
47+
display: flex;
48+
flex-direction: row;
49+
-webkit-align-items: stretch;
50+
align-items: stretch;
51+
height: calc(100% - 120px);
52+
}
53+
.input, .output {
54+
display: flex;
55+
-webkit-align-items: stretch;
56+
align-items: stretch;
57+
width: 50%;
58+
height: 100%;
59+
}
60+
.output {
61+
border-left: 2px solid #8DC63F;
62+
}
63+
textarea {
64+
width: 100%;
65+
padding: 20px;
66+
border: 0;
67+
box-sizing: border-box;
68+
font-size: 1.3em;
69+
resize: none;
70+
outline: none;
71+
line-height: 1.3;
72+
font-family: 'Roboto Mono', monospace;
73+
}
74+
</style>
75+
</head>
76+
77+
<body>
78+
<header>
79+
<h1>SQL Formatter</h1>
80+
81+
<div class="buttons">
82+
<a href="https://www.npmjs.com/package/sql-formatter">
83+
<img src="https://img.shields.io/npm/v/sql-formatter.svg" height="18" />
84+
</a>
85+
<iframe src="https://ghbtns.com/github-btn.html?user=zeroturnaround&repo=sql-formatter&type=star&count=true" frameborder="0" scrolling="0" width="120px" height="20px" style="position: relative;top: 1px;"></iframe>
86+
</div>
87+
88+
<div class="select-wrapper">
89+
Format
90+
<select id="language">
91+
<option value="sql">
92+
SQL
93+
</option>
94+
<option value="n1ql">
95+
N1QL
96+
</option>
97+
</select>
98+
</div>
99+
</header>
100+
<main>
101+
<section class="input">
102+
<textarea id="input" autofocus="true" wrap="off">SELECT supplier_name, city FROM suppliers&#10;WHERE supplier_id > 500&#10;ORDER BY supplier_name ASC, city DESC;</textarea>
103+
</section>
104+
<section class="output">
105+
<textarea id="output" readonly="true" wrap="off"></textarea>
106+
</section>
107+
</main>
108+
109+
<script type="text/javascript" src="https://unpkg.com/sql-formatter@1.0.0/dist/sql-formatter.min.js"></script>
110+
<script>
111+
let language = document.getElementById('language');
112+
let input = document.getElementById('input');
113+
let output = document.getElementById('output');
114+
115+
input.addEventListener('input', format);
116+
language.addEventListener('change', format);
117+
118+
function format() {
119+
console.time('formatting');
120+
121+
output.value = sqlFormatter.format(input.value, {language: language.options[language.selectedIndex].value});
122+
123+
console.timeEnd('formatting');
124+
}
125+
format();
126+
</script>
127+
</body>
128+
</html>

0 commit comments

Comments
 (0)