Skip to content

Commit 4444488

Browse files
ggortanggortan
committed
Revert "Implementação de abas de navegação e sintaxe aprimorada"
This reverts commit b72ace2.
1 parent b72ace2 commit 4444488

3 files changed

Lines changed: 17 additions & 167 deletions

File tree

‎index.html‎

Lines changed: 8 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@ <h6 class="mb-0"><i class="fas fa-list me-2"></i>Queries Salvas</h6>
5151

5252
</div>
5353

54-
<!-- Editor Central com Abas -->
55-
<div class="col-md-6 query-editor p-0 d-flex flex-column">
54+
<!-- Editor Central -->
55+
<div class="col-md-6 query-editor p-0">
5656
<div class="section-header d-flex justify-content-between align-items-center">
5757
<h6 class="mb-0"><i class="fas fa-code me-2"></i>Editor SQL</h6>
5858
<div class="btn-group-custom d-flex">
@@ -67,44 +67,26 @@ <h6 class="mb-0"><i class="fas fa-code me-2"></i>Editor SQL</h6>
6767
</button>
6868
</div>
6969
</div>
70-
<!-- Abas -->
71-
<ul class="nav nav-tabs sql-tabs" id="editorTabs" role="tablist">
72-
<li class="nav-item" role="presentation">
73-
<button class="nav-link active" id="tab-sql" data-bs-toggle="tab" data-bs-target="#tabPanel-sql" type="button" role="tab" aria-controls="tabPanel-sql" aria-selected="true">
74-
<i class="fas fa-pen"></i> Editor SQL
75-
</button>
76-
</li>
77-
<li class="nav-item" role="presentation">
78-
<button class="nav-link" id="tab-preview" data-bs-toggle="tab" data-bs-target="#tabPanel-preview" type="button" role="tab" aria-controls="tabPanel-preview" aria-selected="false">
79-
<i class="fas fa-eye"></i> Preview
80-
</button>
81-
</li>
82-
</ul>
83-
<div class="tab-content flex-grow-1 d-flex flex-column p-3 query-section" id="editorTabsContent">
84-
<div class="tab-pane fade show active flex-grow-1 d-flex flex-column" id="tabPanel-sql" role="tabpanel" aria-labelledby="tab-sql">
70+
71+
<div class="p-3 flex-grow-1 d-flex flex-column query-section">
8572
<div class="mb-3">
8673
<label class="form-label fw-bold">Nome da Query:</label>
8774
<input type="text" class="form-control" id="queryName" placeholder="Digite o nome da query..." onchange="updateCurrentQuery()">
8875
</div>
89-
<div class="mb-3 flex-grow-1 d-flex flex-column position-relative">
76+
77+
<div class="mb-3 flex-grow-1 d-flex flex-column">
9078
<label class="form-label fw-bold">SQL Query:</label>
91-
<div class="editor-highlight-wrapper flex-grow-1 position-relative">
92-
<!-- Overlay de syntax highlight será inserido via JS -->
93-
<pre class="editor-highlight-output"></pre>
94-
<textarea class="sql-editor flex-grow-1 position-absolute top-0 start-0 w-100 h-100" id="queryEditor" placeholder="-- Digite sua query SQL aqui
79+
<textarea class="sql-editor flex-grow-1" id="queryEditor" placeholder="-- Digite sua query SQL aqui
9580
-- Use [variavel] para criar variáveis dinâmicas
9681
-- Exemplo: SELECT * FROM usuarios WHERE id = [user_id] AND status = '[status]'" oninput="handleQueryInput()"></textarea>
97-
</div>
9882
</div>
99-
</div>
100-
<div class="tab-pane fade flex-grow-1 d-flex flex-column" id="tabPanel-preview" role="tabpanel" aria-labelledby="tab-preview">
83+
10184
<div class="mb-2">
10285
<label class="form-label fw-bold">Preview com Variáveis:</label>
10386
<div class="sql-preview" id="queryPreview">
10487
<span class="text-muted">A query processada aparecerá aqui...</span>
10588
</div>
10689
</div>
107-
</div>
10890
</div>
10991
</div>
11092

‎script.js‎

Lines changed: 9 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,3 @@
1-
// --- Syntax Highlighting Overlay e Abas ---
2-
function syncEditorHighlight() {
3-
const textarea = document.getElementById('queryEditor');
4-
const overlay = document.querySelector('.editor-highlight-output');
5-
if (!textarea || !overlay) return;
6-
// Pega o valor do textarea e aplica highlight
7-
let value = textarea.value || '';
8-
overlay.innerHTML = queryManager ? queryManager.highlightSQL(value) : value;
9-
// Sincroniza scroll
10-
overlay.scrollTop = textarea.scrollTop;
11-
overlay.scrollLeft = textarea.scrollLeft;
12-
}
13-
14-
// Sincronizar overlay ao digitar e ao rolar
15-
document.addEventListener('DOMContentLoaded', function() {
16-
const textarea = document.getElementById('queryEditor');
17-
if (textarea) {
18-
textarea.addEventListener('input', syncEditorHighlight);
19-
textarea.addEventListener('scroll', syncEditorHighlight);
20-
// Inicializa overlay
21-
syncEditorHighlight();
22-
}
23-
// Abas Bootstrap: garantir que o overlay seja atualizado ao trocar para o editor
24-
const tabSql = document.getElementById('tab-sql');
25-
if (tabSql) {
26-
tabSql.addEventListener('shown.bs.tab', function() {
27-
setTimeout(syncEditorHighlight, 10);
28-
});
29-
}
30-
});
31-
32-
// Atualizar overlay ao carregar query
33-
const originalLoadQueryInEditor = SQLQueryManager.prototype.loadQueryInEditor;
34-
SQLQueryManager.prototype.loadQueryInEditor = function() {
35-
originalLoadQueryInEditor.call(this);
36-
setTimeout(syncEditorHighlight, 10);
37-
};
38-
39-
// Atualizar overlay ao atualizar query
40-
const originalUpdateCurrentQuery = SQLQueryManager.prototype.updateCurrentQuery;
41-
SQLQueryManager.prototype.updateCurrentQuery = function() {
42-
originalUpdateCurrentQuery.call(this);
43-
setTimeout(syncEditorHighlight, 10);
44-
};
45-
46-
// Atualizar overlay ao manipular input
47-
const originalHandleQueryInput = SQLQueryManager.prototype.handleQueryInput;
48-
SQLQueryManager.prototype.handleQueryInput = function() {
49-
if (originalHandleQueryInput) originalHandleQueryInput.call(this);
50-
setTimeout(syncEditorHighlight, 10);
51-
};
521
class ThemeManager {
532
constructor() {
543
this.STORAGE_KEY = 'sqlQueryManager_theme';
@@ -371,18 +320,20 @@ autoResizeTextarea() {
371320
highlightSQL(sql) {
372321
// Palavras-chave SQL
373322
const keywords = ['SELECT', 'FROM', 'WHERE', 'JOIN', 'INNER', 'LEFT', 'RIGHT', 'ON', 'AND', 'OR', 'ORDER', 'BY', 'GROUP', 'HAVING', 'INSERT', 'UPDATE', 'DELETE', 'AS', 'DISTINCT', 'COUNT', 'SUM', 'AVG', 'MAX', 'MIN'];
323+
374324
let highlighted = sql;
375-
// Variáveis customizadas [nome]
376-
highlighted = highlighted.replace(/\[([a-zA-Z0-9_]+)\]/g, '<span class="sql-variable">[$1]</span>');
377-
// Strings
378-
highlighted = highlighted.replace(/'([^']*)'/g, '<span class="sql-string">\'$1\'</span>');
379-
// Comentários
380-
highlighted = highlighted.replace(/--(.*)$/gm, '<span class="sql-comment">--$1</span>');
381-
// Palavras-chave (após variáveis para não afetar dentro de variáveis)
325+
382326
keywords.forEach(keyword => {
383327
const regex = new RegExp(`\\b${keyword}\\b`, 'gi');
384328
highlighted = highlighted.replace(regex, `<span class="sql-keyword">${keyword.toUpperCase()}</span>`);
385329
});
330+
331+
// Strings
332+
highlighted = highlighted.replace(/'([^']*)'/g, '<span class="sql-string">\'$1\'</span>');
333+
334+
// Comentários
335+
highlighted = highlighted.replace(/--(.*)$/gm, '<span class="sql-comment">--$1</span>');
336+
386337
return highlighted;
387338
}
388339

‎style.css‎

Lines changed: 0 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,3 @@
1-
/* Abas do editor SQL */
2-
.sql-tabs {
3-
background: var(--bg-secondary);
4-
border-bottom: 1px solid var(--border-color);
5-
margin-bottom: 0;
6-
}
7-
.sql-tabs .nav-link {
8-
color: var(--text-secondary);
9-
font-weight: 500;
10-
border: none;
11-
border-bottom: 2px solid transparent;
12-
background: none;
13-
transition: color 0.2s, border-color 0.2s;
14-
}
15-
.sql-tabs .nav-link.active {
16-
color: #0d6efd;
17-
border-bottom: 2px solid #0d6efd;
18-
background: var(--bg-primary);
19-
}
20-
.sql-tabs .nav-link:focus {
21-
outline: none;
22-
box-shadow: none;
23-
}
24-
25-
/* Overlay de syntax highlight no editor */
26-
.editor-highlight-wrapper {
27-
position: relative;
28-
width: 100%;
29-
height: 100%;
30-
min-height: 150px;
31-
flex: 1 1 auto;
32-
}
33-
.editor-highlight-output {
34-
pointer-events: none;
35-
user-select: none;
36-
position: absolute;
37-
top: 0; left: 0; right: 0; bottom: 0;
38-
width: 100%;
39-
height: 100%;
40-
margin: 0;
41-
padding: 1rem;
42-
font-family: 'Courier New', monospace;
43-
font-size: 1rem;
44-
line-height: 1.5;
45-
white-space: pre-wrap;
46-
word-break: break-all;
47-
background: transparent;
48-
color: transparent;
49-
z-index: 1;
50-
overflow-y: auto;
51-
}
52-
.sql-editor {
53-
background: transparent;
54-
color: var(--text-primary);
55-
position: relative;
56-
z-index: 2;
57-
/* O resto já está definido acima */
58-
}
59-
60-
/* Syntax highlight para variáveis customizadas */
61-
.sql-variable {
62-
color: #b8860b;
63-
background: #fffbe6;
64-
border-radius: 0.2em;
65-
padding: 0 0.15em;
66-
font-weight: 600;
67-
border: 1px solid #ffeaa7;
68-
transition: color 0.3s, background 0.3s, border 0.3s;
69-
}
70-
71-
@media (max-width: 991.98px) {
72-
.main-container {
73-
height: auto;
74-
}
75-
.sidebar, .query-editor, .variables-panel {
76-
height: auto;
77-
min-height: 0;
78-
}
79-
.query-section, .variables-content {
80-
max-height: 300px;
81-
overflow-y: auto;
82-
}
83-
}
841
:root {
852
/* Light theme colors */
863
--bg-primary: #ffffff;

0 commit comments

Comments
 (0)