Skip to content

Commit eef6c7d

Browse files
jasonwartajasonwarta
committed
updated webpage
1 parent f1655d2 commit eef6c7d

File tree

2 files changed

+195
-169
lines changed

2 files changed

+195
-169
lines changed

‎index.html

Lines changed: 78 additions & 169 deletions
Original file line numberDiff line numberDiff line change
@@ -1,176 +1,85 @@
1-
<!doctype html>
2-
1+
<!DOCTYPE html>
32
<html>
4-
<head>
5-
<title>Latex Matrix Generator</title>
6-
<script>
7-
addEvents = () => {
8-
// window.addEventListener("keyup", function(event) {
9-
// event.preventDefault();
10-
// if (event.keyCode == 13) {
11-
// document.getElementById("gen-latex").click();
12-
// }
13-
// });
14-
15-
document.getElementById('text-input').addEventListener("keyup", function(event) {
16-
event.preventDefault();
17-
if (event.keyCode == 13) {
18-
document.getElementById("gen-latex-text").click();
19-
}
20-
});
21-
22-
document.getElementById('text-input').addEventListener('keydown', (e) => {
23-
if (e.keyCode == 9) {
24-
console.log(this);
25-
let elem = document.getElementById('text-input');
26-
elem.value += " ";
27-
if (e.preventDefault)
28-
e.preventDefault();
29-
return false;
30-
}
31-
})
32-
}
33-
34-
genTable = () => {
35-
let table = document.getElementById('table');
36-
let rows = document.getElementById('rows').value;
37-
let cols = document.getElementById('cols').value;
38-
39-
table.innerHTML = "";
40-
41-
let table_wip = document.createElement('table');
42-
for(let i = 0; i < rows; i++) {
43-
let tr = document.createElement('tr');
44-
for(let j = 0; j < cols; j++) {
45-
let td = document.createElement('td');
46-
let input = document.createElement('input');
47-
input.type = 'text';
48-
input.style.width = "30px";
49-
input.value = `${String.fromCharCode(97+i)}_${j+1}`;
50-
input.addEventListener("keyup", function(event) {
51-
event.preventDefault();
52-
if (event.keyCode == 13) {
53-
document.getElementById("gen-latex-table").click();
54-
}
55-
});
56-
td.appendChild(input);
57-
tr.appendChild(td);
58-
}
59-
table_wip.appendChild(tr);
60-
}
61-
table.appendChild(table_wip);
62-
}
63-
64-
genLatexFromText = () => {
65-
let text = document.getElementById('text-input').value;
66-
let matrix_type = document.getElementById('matrix-value').value;
67-
let rows = text.split('\n');
68-
let latex = `$ \\begin{${matrix_type}}\n`;
69-
rows.forEach( (r_val,r_idx) => {
70-
let cols = r_val.split('\t');
71-
cols.forEach( (c_val,c_idx) => {
72-
let neg = false;
73-
if (c_val.indexOf('-') == 0) {
74-
neg = true;
75-
c_val = c_val.substr(1,c_val.length);
76-
}
77-
if (c_val.indexOf('/') != -1) {
78-
let vals = c_val.split('/');
79-
c_val = `\\frac{${vals[0]}}{${vals[1]}}`
80-
}
81-
latex += `${neg ? '-' : ''}${c_val}`;
82-
if (c_idx == cols.length - 1) {
83-
if (r_idx == rows.length - 1)
84-
latex += " \n";
85-
else
86-
latex += " \\\\\n";
87-
} else {
88-
latex += " & ";
89-
}
90-
});
91-
});
92-
latex += `\\end{${matrix_type}} $`
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>Latex Matrix Generator</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<script src="main.js"></script>
9+
<style>
10+
.header {
11+
grid-area: header;
12+
text-align: center;
13+
font-size: 20px;
14+
}
15+
.main {
16+
grid-area: main;
17+
}
9318

94-
document.getElementById("latex").value = latex;
95-
}
96-
97-
genLatex = () => {
98-
let table = document.getElementById('table').children[0];
99-
let matrix_type = document.getElementById('matrix-value').value;
100-
let latex = `$ \\begin{${matrix_type}}\n`;
101-
let rows = table.children;
102-
for (let row = 0; row < rows.length; row++ ){
103-
let cols = rows[row].children;
104-
for(let col = 0; col < cols.length; col++) {
105-
let val = cols[col].children[0].value;
106-
let neg = false;
107-
if (val.indexOf('-') == 0) {
108-
neg = true;
109-
val = val.substr(1,val.length);
110-
}
111-
if (val.indexOf('/') != -1) {
112-
let vals = val.split('/');
113-
val = `\\frac{${vals[0]}}{${vals[1]}}`
114-
}
115-
latex += `${neg ? '-' : ''}${val}`;
116-
if (col == cols.length - 1) {
117-
if (row == rows.length - 1) {
118-
latex += " \n";
119-
} else {
120-
latex += " \\\\\n";
121-
}
122-
} else {
123-
latex += " & ";
124-
}
125-
}
126-
}
127-
latex += `\\end{${matrix_type}} $`
128-
129-
document.getElementById("latex").value = latex;
130-
}
131-
</script>
132-
</head>
133-
<body onload="addEvents();genTable();" >
134-
<h2>Latex Matrix Generator</h2>
135-
<h4>Generate latex code for a given matrix</h4>
136-
<p>Matrices can be entered in the table or pasted into the text field as a tab-delimited glob of text. Correct latex is generated for any entered fractions.</p>
137-
<div>
138-
<label>Type
139-
<select id='matrix-value'>
140-
<option value="matrix">matrix</option>
141-
<option value="pmatrix">pmatrix</option>
142-
<option value="bmatrix" selected>bmatrix</option>
143-
<option value="Bmatrix">Bmatrix</option>
144-
<option value="vmatrix">vmatrix</option>
145-
<option value="Vmatrix">Vmatrix</option>
146-
</select>
147-
</label>
148-
<label>Rows
149-
<input type="number" id="rows" value="3" style="width:30px;" onchange="genTable();">
150-
</label>
151-
<label>Cols
152-
<input type="number" id="cols" value="3" style="width:30px;" onchange="genTable();">
153-
</label>
19+
.grid-container {
20+
display: grid;
21+
grid-template-columns: repeat(6,1fr);
22+
grid-template-areas:
23+
'header header header header header header'
24+
'. main main main main .';
25+
}
26+
.grid-container > div {
27+
padding: 20px 0;
28+
}
29+
</style>
30+
</head>
31+
<body onload="addEvents();genTable();">
32+
<a href="https://github.com/jasonwarta/latex-matrix">
33+
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"
34+
alt="Fork me on GitHub">
35+
</a>
36+
<div class="grid-container">
37+
<div class="header">
38+
Latex Matrix Generator
15439
</div>
155-
156-
<div style="display:inline">
157-
<div id="table" style="display:inline-block;"></div>
158-
<div id="textInput" style="display:inline-block;">
159-
<div>
160-
<span style="display: inherit;">Enter a tab-delimited matrix</span>
161-
<textarea style="width:200px;min-height:80px" id="text-input" cols="30" placeholder="a_1 a_2 a_3
162-
b_1 b_2 b_3
163-
c_1 c_2 c_3"></textarea>
40+
<div class="main">
41+
<div>
42+
<p>Generate latex code for a given matrix.</p>
43+
<p>Matricies can be entered in the table or pasted into the text field as a tab-delimited glob of text. Correct latex is generated for any entered fractions.</p>
44+
</div>
45+
<div>
46+
<label>Type
47+
<select id='matrix-value'>
48+
<option value="matrix">matrix</option>
49+
<option value="pmatrix">pmatrix</option>
50+
<option value="bmatrix" selected>bmatrix</option>
51+
<option value="Bmatrix">Bmatrix</option>
52+
<option value="vmatrix">vmatrix</option>
53+
<option value="Vmatrix">Vmatrix</option>
54+
</select>
55+
</label>
56+
<label>Rows
57+
<input type="number" id="rows" value="3" style="width:30px;" onchange="genTable();">
58+
</label>
59+
<label>Cols
60+
<input type="number" id="cols" value="3" style="width:30px;" onchange="genTable();">
61+
</label>
62+
</div>
63+
<div style="display:inline">
64+
<div id="table" style="display:inline-block;"></div>
65+
<div id="textInput" style="display:inline-block;">
66+
<div>
67+
<span style="display: inherit;">Enter a tab-delimited matrix</span>
68+
<textarea style="width:200px;min-height:80px" id="text-input" cols="30" placeholder="a_1 a_2 a_3
69+
b_1 b_2 b_3
70+
c_1 c_2 c_3"></textarea>
71+
</div>
72+
16473
</div>
165-
74+
</div>
75+
<br>
76+
Generate Latex...
77+
<button id="gen-latex-table" onclick="genLatex()">...From Table</button>
78+
<button id="gen-latex-text" onclick="genLatexFromText()">...From Text</button>
79+
<div>
80+
<textarea id="latex" cols="40" rows="20"></textarea>
16681
</div>
16782
</div>
168-
<br>
169-
Generate Latex...
170-
<button id="gen-latex-table" onclick="genLatex()">...From Table</button>
171-
<button id="gen-latex-text" onclick="genLatexFromText()">...From Text</button>
172-
<div>
173-
<textarea id="latex" cols="40" rows="20"></textarea>
174-
</div>
175-
</body>
83+
</div>
84+
</body>
17685
</html>

‎main.js

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
addEvents = () => {
2+
document.getElementById('text-input').addEventListener("keyup", function (event) {
3+
event.preventDefault();
4+
if (event.keyCode == 13) {
5+
document.getElementById("gen-latex-text").click();
6+
}
7+
});
8+
9+
document.getElementById('text-input').addEventListener('keydown', (e) => {
10+
if (e.keyCode == 9) {
11+
console.log(this);
12+
let elem = document.getElementById('text-input');
13+
elem.value += " ";
14+
if (e.preventDefault)
15+
e.preventDefault();
16+
return false;
17+
}
18+
});
19+
}
20+
21+
genTable = () => {
22+
let table = document.getElementById('table');
23+
let rows = document.getElementById('rows').value;
24+
let cols = document.getElementById('cols').value;
25+
26+
table.innerHTML = "";
27+
28+
let table_wip = document.createElement('table');
29+
for (let i = 0; i < rows; i++) {
30+
let tr = document.createElement('tr');
31+
for (let j = 0; j < cols; j++) {
32+
let td = document.createElement('td');
33+
let input = document.createElement('input');
34+
input.type = 'text';
35+
input.style.width = "30px";
36+
input.value = `${String.fromCharCode(97+i)}_${j+1}`;
37+
input.addEventListener("keyup", function (event) {
38+
event.preventDefault();
39+
if (event.keyCode == 13) {
40+
document.getElementById("gen-latex-table").click();
41+
}
42+
});
43+
td.appendChild(input);
44+
tr.appendChild(td);
45+
}
46+
table_wip.appendChild(tr);
47+
}
48+
table.appendChild(table_wip);
49+
}
50+
51+
genLatexFromText = () => {
52+
let text = document.getElementById('text-input').value;
53+
let matrix_type = document.getElementById('matrix-value').value;
54+
let rows = text.split('\n');
55+
let latex = `$ \\begin{${matrix_type}}\n`;
56+
rows.forEach((r_val, r_idx) => {
57+
let cols = r_val.split('\t');
58+
cols.forEach((c_val, c_idx) => {
59+
let neg = false;
60+
if (c_val.indexOf('-') == 0) {
61+
neg = true;
62+
c_val = c_val.substr(1, c_val.length);
63+
}
64+
if (c_val.indexOf('/') != -1) {
65+
let vals = c_val.split('/');
66+
c_val = `\\frac{${vals[0]}}{${vals[1]}}`
67+
}
68+
latex += `${neg ? '-' : ''}${c_val}`;
69+
if (c_idx == cols.length - 1) {
70+
if (r_idx == rows.length - 1)
71+
latex += " \n";
72+
else
73+
latex += " \\\\\n";
74+
} else {
75+
latex += " & ";
76+
}
77+
});
78+
});
79+
latex += `\\end{${matrix_type}} $`
80+
81+
document.getElementById("latex").value = latex;
82+
}
83+
84+
genLatex = () => {
85+
let table = document.getElementById('table').children[0];
86+
let matrix_type = document.getElementById('matrix-value').value;
87+
let latex = `$ \\begin{${matrix_type}}\n`;
88+
let rows = table.children;
89+
for (let row = 0; row < rows.length; row++) {
90+
let cols = rows[row].children;
91+
for (let col = 0; col < cols.length; col++) {
92+
let val = cols[col].children[0].value;
93+
let neg = false;
94+
if (val.indexOf('-') == 0) {
95+
neg = true;
96+
val = val.substr(1, val.length);
97+
}
98+
if (val.indexOf('/') != -1) {
99+
let vals = val.split('/');
100+
val = `\\frac{${vals[0]}}{${vals[1]}}`
101+
}
102+
latex += `${neg ? '-' : ''}${val}`;
103+
if (col == cols.length - 1) {
104+
if (row == rows.length - 1) {
105+
latex += " \n";
106+
} else {
107+
latex += " \\\\\n";
108+
}
109+
} else {
110+
latex += " & ";
111+
}
112+
}
113+
}
114+
latex += `\\end{${matrix_type}} $`
115+
116+
document.getElementById("latex").value = latex;
117+
}

0 commit comments

Comments
 (0)