Skip to content

Commit dfb1375

Browse files
VD171VD171
authored
Create index.html
1 parent 80cecd3 commit dfb1375

File tree

1 file changed

+147
-0
lines changed

1 file changed

+147
-0
lines changed

‎index.html‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<style>
6+
html, body {margin:0; padding:0; height:100%; background:#f4f4f4; font-family:sans-serif}
7+
#pagina {display:flex; flex-direction:column; align-items:center; padding:20px; gap:10px}
8+
#planilha-wrapper {max-width:90vw; max-height:80vh; overflow:auto; border:1px solid #ccc; background:white; box-shadow:0 2px 10px rgba(0,0,0,0.1)}
9+
table {border-collapse:collapse; table-layout:fixed}
10+
th, td {padding:8px; border:1px solid #ccc; overflow:hidden; word-break:break-word}
11+
th {background:#444; color:#fff; position:sticky; top:0; z-index:2}
12+
.th-wrapper {position:relative; width:100%; height:100%; cursor:pointer}
13+
.resizer {position:absolute; top:0; width:20px; height:100%; cursor:col-resize; z-index:10; user-select:none}
14+
</style>
15+
</head>
16+
<body>
17+
<div id="pagina">
18+
<div id="planilha-topo"></div>
19+
<div id="planilha-wrapper">
20+
<div id="planilha-container"><noscript>Enable JavaScript!</noscript></div>
21+
</div>
22+
</div>
23+
24+
<script>
25+
const path = location.hash.replace(/^#/, "");
26+
const script = document.createElement("script");
27+
script.src = `${path}.js`;
28+
script.onload = () => initPlanilha();
29+
script.onerror = () => alert("Table not found: " + path + ".");
30+
document.head.appendChild(script);
31+
32+
function initPlanilha(){
33+
document.getElementById("planilha-topo").innerHTML = info;
34+
document.title = title;
35+
36+
let colRefs = [], ordemCrescente = {};
37+
38+
function renderTabela(){
39+
const tabela = document.createElement("table");
40+
const colgroup = document.createElement("colgroup");
41+
colRefs = columns.map((_, i) => {
42+
const col = document.createElement("col");
43+
col.style.width = "100px";
44+
colgroup.appendChild(col);
45+
return col;
46+
});
47+
tabela.appendChild(colgroup);
48+
49+
const thead = document.createElement("thead");
50+
const trHead = document.createElement("tr");
51+
columns.forEach((titulo, i) => {
52+
const th = document.createElement("th");
53+
const wrapper = document.createElement("div");
54+
wrapper.className = "th-wrapper";
55+
wrapper.textContent = titulo;
56+
wrapper.addEventListener("click", () => ordenarPorColuna(i));
57+
if (i > 0) {
58+
const resizerLeft = document.createElement("div");
59+
resizerLeft.className = "resizer";
60+
resizerLeft.style.left = "-24px";
61+
resizerLeft.style.top = "-8px";
62+
resizerLeft.style.padding = "8px";
63+
resizerLeft.addEventListener("mousedown", iniciarResize(i - 1));
64+
wrapper.appendChild(resizerLeft);
65+
}
66+
const resizerRight = document.createElement("div");
67+
resizerRight.className = "resizer";
68+
resizerRight.style.right = "-24px";
69+
resizerRight.style.top = "-8px";
70+
resizerRight.style.padding = "8px";
71+
resizerRight.addEventListener("mousedown", iniciarResize(i));
72+
wrapper.appendChild(resizerRight);
73+
74+
th.appendChild(wrapper);
75+
trHead.appendChild(th);
76+
});
77+
thead.appendChild(trHead);
78+
tabela.appendChild(thead);
79+
80+
const tbody = document.createElement("tbody");
81+
data.forEach(linha => {
82+
const tr = document.createElement("tr");
83+
linha.forEach((cel, i) => {
84+
const td = document.createElement("td");
85+
td.innerHTML = cel.texto.replace(/\n/g, "<br>");
86+
td.style.backgroundColor = cel.bg;
87+
td.style.color = cel.cor;
88+
td.style.position = "relative";
89+
if (i > 0) {
90+
const resizerLeft = document.createElement("div");
91+
resizerLeft.className = "resizer";
92+
resizerLeft.style.left = "-2.5px";
93+
resizerLeft.addEventListener("mousedown", iniciarResize(i - 1));
94+
td.appendChild(resizerLeft);
95+
}
96+
const resizerRight = document.createElement("div");
97+
resizerRight.className = "resizer";
98+
resizerRight.style.right = "-2.5px";
99+
resizerRight.addEventListener("mousedown", iniciarResize(i));
100+
td.appendChild(resizerRight);
101+
tr.appendChild(td);
102+
});
103+
tbody.appendChild(tr);
104+
});
105+
tabela.appendChild(tbody);
106+
107+
const container = document.getElementById("planilha-container");
108+
container.innerHTML = "";
109+
container.appendChild(tabela);
110+
}
111+
112+
function ordenarPorColuna(indice){
113+
ordemCrescente = {[indice]: !(ordemCrescente[indice] ?? false)};
114+
data.sort((a, b) => {
115+
const v1 = a[indice].texto.toLowerCase();
116+
const v2 = b[indice].texto.toLowerCase();
117+
if (v1 < v2) return ordemCrescente[indice] ? -1 : 1;
118+
if (v1 > v2) return ordemCrescente[indice] ? 1 : -1;
119+
return 0;
120+
});
121+
renderTabela();
122+
}
123+
124+
function iniciarResize(index){
125+
return function(e){
126+
e.preventDefault();
127+
const startX = e.pageX;
128+
const col = colRefs[index];
129+
const startWidth = parseInt(window.getComputedStyle(col).width, 10);
130+
function onMouseMove(e){
131+
const newWidth = startWidth + (e.pageX - startX);
132+
col.style.width = Math.max(newWidth, 40) + "px";
133+
}
134+
function onMouseUp(){
135+
document.removeEventListener("mousemove", onMouseMove);
136+
document.removeEventListener("mouseup", onMouseUp);
137+
}
138+
document.addEventListener("mousemove", onMouseMove);
139+
document.addEventListener("mouseup", onMouseUp);
140+
}
141+
}
142+
143+
renderTabela();
144+
}
145+
</script>
146+
</body>
147+
</html>

0 commit comments

Comments
 (0)