Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit3536f9d

Browse files
committed
no inline css in js
1 parent739fb78 commit3536f9d

File tree

3 files changed

+114
-115
lines changed

3 files changed

+114
-115
lines changed

‎examples/GUI/demo.css‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -413,6 +413,14 @@ tr:nth-child(even) {
413413
display: flex;
414414
align-items: center;
415415
gap:10px;
416+
margin-left: auto;
417+
}
418+
419+
.shortcutsspan {
420+
display: flex;
421+
align-items: center;
422+
margin-left:8px;
423+
color:var(--text-muted);
416424
}
417425

418426
.shortcut-key {
@@ -421,6 +429,8 @@ tr:nth-child(even) {
421429
border-radius:3px;
422430
font-family:'JetBrains Mono', monospace;
423431
font-size:0.85em;
432+
margin-left:4px;
433+
color:var(--text-secondary);
424434
}
425435

426436
footer {
@@ -514,6 +524,7 @@ footer a:hover {
514524

515525
.panel-resizable {
516526
max-width:100%;
527+
width:100%!important;
517528
height:50%;
518529
min-height:200px;
519530
max-height:calc(100%-200px);
@@ -532,4 +543,59 @@ footer a:hover {
532543
bottom:-3px;
533544
top: auto;
534545
}
546+
547+
.shortcuts {
548+
display: none;
549+
}
550+
}
551+
552+
body.resizing {
553+
cursor: col-resize;
554+
user-select: none;
555+
}
556+
557+
@media (max-width:768px) {
558+
body.resizing {
559+
cursor: row-resize;
560+
}
561+
}
562+
563+
.error-result {
564+
color:#ff6b6b;
565+
border-left:3px solid#ff6b6b;
566+
background:rgba(255,0,0,0.05);
567+
}
568+
569+
.github-corner:hover .octo-arm {
570+
animation: octocat-wave560ms ease-in-out;
571+
}
572+
573+
@keyframes octocat-wave {
574+
0%,100% {transform:rotate(0); }
575+
20%,60% {transform:rotate(-25deg); }
576+
40%,80% {transform:rotate(10deg); }
577+
}
578+
579+
@media (max-width:500px) {
580+
.github-corner:hover .octo-arm {
581+
animation: none;
582+
}
583+
.github-corner .octo-arm {
584+
animation: octocat-wave560ms ease-in-out;
585+
}
586+
}
587+
588+
.actions {
589+
display: flex;
590+
flex-wrap: wrap;
591+
margin:15px0;
592+
}
593+
594+
.results-header, .editor-header {
595+
display: flex;
596+
justify-content: space-between;
597+
align-items: center;
598+
margin-bottom:8px;
599+
color:rgba(255,255,255,0.7);
600+
font-weight:500;
535601
}

‎examples/GUI/gui.js‎

Lines changed: 45 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,12 @@ function error(e) {
4343

4444
updateStatus('error',`Error:${e.message}`);
4545

46+
// Clear loading spinner in the current tab when an error occurs
47+
consttabOutputElm=document.querySelector(`#${currentTabId} .results-content`);
48+
if(tabOutputElm){
49+
tabOutputElm.innerHTML=`<div class="no-results error-result">Query failed:${e.message}</div>`;
50+
}
51+
4652
setTimeout(()=>{
4753
errorElm.style.opacity=0;
4854
setTimeout(()=>{
@@ -102,7 +108,7 @@ function execute(commands, tabId = currentTabId) {
102108
constexecutionTime=toc("Executing SQL");
103109

104110
if(!results){
105-
error({message:event.data.error});
111+
error({message:event.data.error||"Unknown error occurred"});
106112
return;
107113
}
108114

@@ -125,6 +131,11 @@ function execute(commands, tabId = currentTabId) {
125131
}
126132

127133
worker.postMessage({action:'exec',sql:commands});
134+
135+
// Set up error handling for the worker
136+
worker.onerror=function(e){
137+
error(e);
138+
};
128139
}
129140

130141
// Create an HTML table
@@ -172,7 +183,11 @@ function execEditorContents() {
172183
createNewTab();
173184
}
174185

175-
execute(editor.getValue()+';');
186+
try{
187+
execute(editor.getValue()+';');
188+
}catch(e){
189+
error(e);
190+
}
176191

177192
// Add visual feedback for button click
178193
execBtn.classList.add('active');
@@ -298,6 +313,7 @@ function showNotification(message) {
298313
// Initialize resizable panels
299314
functioninitResizer(){
300315
consteditorPanel=document.querySelector('.editor-panel');
316+
constisMobileView=window.matchMedia('(max-width: 768px)').matches;
301317

302318
panelResizerElm.addEventListener('mousedown',function(e){
303319
isResizing=true;
@@ -312,7 +328,7 @@ function initResizer() {
312328
letnewWidth;
313329

314330
// Check if we're in mobile view (flexbox column)
315-
constisMobileView=window.getComputedStyle(document.querySelector('.app-container')).flexDirection==='column';
331+
constisMobileView=window.matchMedia('(max-width: 768px)').matches;
316332

317333
if(isMobileView){
318334
// In mobile view, resize height instead of width
@@ -341,6 +357,15 @@ function initResizer() {
341357
panelResizerElm.classList.remove('active');
342358
}
343359
});
360+
361+
// Set initial width/height based on view
362+
if(isMobileView){
363+
editorPanel.style.height='50%';
364+
editorPanel.style.width='';
365+
}else{
366+
editorPanel.style.width='50%';
367+
editorPanel.style.height='';
368+
}
344369
}
345370

346371
// Initialize tabs
@@ -368,6 +393,12 @@ function initTabs() {
368393
}
369394
}
370395
});
396+
397+
// Initialize the first tab
398+
constfirstTab=document.querySelector('.tab[data-tab="tab1"]');
399+
if(firstTab){
400+
setActiveTab('tab1');
401+
}
371402
}
372403

373404
// Create a new results tab
@@ -535,116 +566,23 @@ window.addEventListener('resize', function() {
535566
}
536567
});
537568

538-
// Add CSS for new elements
539-
conststyle=document.createElement('style');
540-
style.textContent=`
541-
.loading {
542-
display: flex;
543-
align-items: center;
544-
justify-content: center;
545-
flex-direction: column;
546-
height: 100px;
547-
color: rgba(255, 255, 255, 0.7);
548-
}
549-
550-
.spinner {
551-
width: 30px;
552-
height: 30px;
553-
border: 3px solid rgba(79, 190, 255, 0.3);
554-
border-radius: 50%;
555-
border-top-color: #4fbeff;
556-
animation: spin 1s ease-in-out infinite;
557-
margin-bottom: 15px;
558-
}
559-
560-
@keyframes spin {
561-
to { transform: rotate(360deg); }
562-
}
563-
564-
.table-wrapper {
565-
margin-bottom: 20px;
566-
}
567-
568-
.table-caption {
569-
color: rgba(255, 255, 255, 0.6);
570-
font-size: 0.85em;
571-
margin-bottom: 8px;
572-
text-align: right;
573-
}
574-
575-
.no-results {
576-
color: rgba(255, 255, 255, 0.5);
577-
text-align: center;
578-
padding: 30px;
579-
}
580-
581-
.notification {
582-
position: fixed;
583-
bottom: -60px;
584-
left: 50%;
585-
transform: translateX(-50%);
586-
background: rgba(40, 60, 80, 0.9);
587-
color: #fff;
588-
padding: 12px 20px;
589-
border-radius: 8px;
590-
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
591-
transition: bottom 0.3s ease;
592-
z-index: 1000;
593-
border-left: 3px solid #4fbeff;
594-
}
595-
596-
.notification.show {
597-
bottom: 20px;
598-
}
599-
600-
.button.active {
601-
transform: translateY(1px);
602-
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
603-
}
604-
605-
.results-header, .editor-header {
606-
display: flex;
607-
justify-content: space-between;
608-
align-items: center;
609-
margin-bottom: 8px;
610-
color: rgba(255, 255, 255, 0.7);
611-
font-weight: 500;
612-
}
613-
614-
.actions {
615-
display: flex;
616-
flex-wrap: wrap;
617-
margin: 15px 0;
618-
}
619-
620-
.github-corner:hover .octo-arm {
621-
animation: octocat-wave 560ms ease-in-out;
622-
}
623-
624-
@keyframes octocat-wave {
625-
0%, 100% { transform: rotate(0); }
626-
20%, 60% { transform: rotate(-25deg); }
627-
40%, 80% { transform: rotate(10deg); }
628-
}
629-
630-
@media (max-width: 500px) {
631-
.github-corner:hover .octo-arm {
632-
animation: none;
633-
}
634-
.github-corner .octo-arm {
635-
animation: octocat-wave 560ms ease-in-out;
636-
}
637-
}
638-
`;
639-
document.head.appendChild(style);
640-
641569
// Add keyboard shortcuts info
642570
document.addEventListener('DOMContentLoaded',function(){
643571
consteditorHeader=document.querySelector('.editor-header');
644572
if(editorHeader){
645573
constshortcuts=document.createElement('div');
646574
shortcuts.className='shortcuts';
647-
shortcuts.innerHTML='<span title="Execute: Ctrl/Cmd+Enter, Save: Ctrl/Cmd+S">Keyboard shortcuts</span>';
575+
shortcuts.innerHTML=`
576+
<span title="Execute: Ctrl/Cmd+Enter">
577+
<span class="shortcut-key">Ctrl+Enter</span>
578+
</span>
579+
<span title="Save DB: Ctrl/Cmd+S">
580+
<span class="shortcut-key">Ctrl+S</span>
581+
</span>
582+
<span title="Toggle History: Ctrl+Space">
583+
<span class="shortcut-key">Ctrl+Space</span>
584+
</span>
585+
`;
648586
editorHeader.appendChild(shortcuts);
649587
}
650588
});

‎examples/GUI/index.html‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,8 @@ <h1>SQL.js Interpreter</h1>
5454
<divclass="app-container">
5555
<!-- Editor Panel -->
5656
<divclass="panel panel-resizable editor-panel">
57-
<divclass="panel-header">
57+
<divclass="panel-header editor-header">
5858
<span>SQL Editor</span>
59-
<divclass="shortcuts">
60-
<spantitle="Execute query">
61-
<spanclass="shortcut-key">Ctrl+Enter</span>
62-
</span>
63-
</div>
6459
</div>
6560
<divclass="panel-content">
6661
<textareaid="commands">DROP TABLE IF EXISTS employees;
@@ -84,7 +79,7 @@ <h1>SQL.js Interpreter</h1>
8479
INSERT INTO employees VALUES (13,'MONROE','ENGINEER',10,'2000-12-03',30000,NULL,2);
8580
INSERT INTO employees VALUES (14,'ROOSEVELT','CPA',9,'1995-10-12',35000,NULL,1);
8681

87-
SELECT designation,COUNT(*) AS nbr,(AVG(salary)) AS avg_salary FROM employees GROUP BY designation ORDER BY avg_salary DESC;
82+
SELECT designation,COUNT(*) AS nbr, AVG(salary) AS avg_salary FROM employees GROUP BY designation ORDER BY avg_salary DESC;
8883
SELECT name,hired_on FROM employees ORDER BY hired_on;</textarea>
8984
<divclass="query-history"id="queryHistory">
9085
<!-- History items will be added here dynamically -->
@@ -107,7 +102,7 @@ <h1>SQL.js Interpreter</h1>
107102
<divclass="panel-content">
108103
<divid="error"class="error"></div>
109104
<divclass="tab-panel active"id="tab1">
110-
<divid="output"class="results-content">Results will be displayed here</div>
105+
<divclass="results-content">Results will be displayed here</div>
111106
</div>
112107
</div>
113108
<divclass="status-bar">

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp