Skip to content

Commit

Permalink
Refactored IDE code to be encapsulated by "IDE" function. Issues: #86, …
Browse files Browse the repository at this point in the history 
…#87, #89, #90
  • Loading branch information
@boxgaming
boxgaming committed Jan 8, 2024
1 parent cb8b666 commit 8c6aefc
Show file tree
Hide file tree
Showing 8 changed files with 1,152 additions and 901 deletions.
2 changes: 2 additions & 0 deletions codemirror/themes/vscode-dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,8 @@ dialog a:hover { color: #fff !important; }
a:before { content: ""; }
a:after { content: ""; }
a:hover { text-decoration: underline; }
dialog a.disabled, dialog a.disabled:hover { color: #999 !important; }
dialog a.disabled:hover { text-decoration: none; }

#fs-contents a { font-variant: normal; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 13px; }
#fs-contents a:hover { text-decoration: none; }
Expand Down
1 change: 1 addition & 0 deletions codemirror/themes/win-classic.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ a:active { border: 2px inset;}
a:hover { color: #000; }
a:before { content: ""; }
a:after { content: ""; }
dialog a.disabled:active { border: 2px outset; }

li a, li a:link, li a:visited { border: 0; text-decoration: underline; }
li a:active { border: 0; }
Expand Down
73 changes: 73 additions & 0 deletions img/upload-hover.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
73 changes: 73 additions & 0 deletions img/upload.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 27 additions & 26 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,21 +27,21 @@
</head>
<body style="display:none">
<div id="toolbar">
<a href="javascript:openProject()" class="toolbar-button" id="toolbar-button-open" title="Open"></a>
<a href="javascript:saveProject()" class="toolbar-button" id="toolbar-button-save" title="Save"></a>
<a href="javascript:IDE.openProject()" class="toolbar-button" id="toolbar-button-open" title="Open"></a>
<a href="javascript:IDE.saveProject()" class="toolbar-button" id="toolbar-button-save" title="Save"></a>
<div class="spacer"></div>
<a href="javascript:runProgram()" class="toolbar-button" id="toolbar-button-run" title="Run"></a>
<a href="javascript:stopProgram()" class="toolbar-button" id="toolbar-button-stop" title="Stop"></a>
<a href="javascript:shareProgram()" class="toolbar-button" id="toolbar-button-share" title="Share / Export"></a>
<a href="javascript:IDE.runProgram()" class="toolbar-button" id="toolbar-button-run" title="Run"></a>
<a href="javascript:IDE.stopProgram()" class="toolbar-button" id="toolbar-button-stop" title="Stop"></a>
<a href="javascript:IDE.shareProgram()" class="toolbar-button" id="toolbar-button-share" title="Share / Export"></a>
<div class="spacer"></div>
<a href="javascript:showOptionDialog()" class="toolbar-button" id="toolbar-button-settings" title="Settings"></a>
<a href="javascript:IDE.showOptionDialog()" class="toolbar-button" id="toolbar-button-settings" title="Settings"></a>

<a href="javascript:showDialog('about-dialog')" class="toolbar-button" id="toolbar-button-about" title="About QBJS"></a>
<a href="javascript:IDE.showDialog('about-dialog')" class="toolbar-button" id="toolbar-button-about" title="About QBJS"></a>
<div class="spacer" style="float:right"></div>
<a href="javascript:showConsole()" class="toolbar-button" id="toolbar-button-console-show" title="Show Console"></a>
<a href="javascript:showConsole()" class="toolbar-button" id="toolbar-button-console-hide" title="Hide Console" style="display:none"></a>
<a href="javascript:slideRight()" class="toolbar-button" id="toolbar-button-slide-right" title="Slide View Right"></a>
<a href="javascript:slideLeft()" class="toolbar-button" id="toolbar-button-slide-left" title="Slide View Left"></a>
<a href="javascript:IDE.showConsole()" class="toolbar-button" id="toolbar-button-console-show" title="Show Console"></a>
<a href="javascript:IDE.showConsole()" class="toolbar-button" id="toolbar-button-console-hide" title="Hide Console" style="display:none"></a>
<a href="javascript:IDE.slideRight()" class="toolbar-button" id="toolbar-button-slide-right" title="Slide View Right"></a>
<a href="javascript:IDE.slideLeft()" class="toolbar-button" id="toolbar-button-slide-left" title="Slide View Left"></a>
</div>
<div id="code-container">
<div id="code"></div>
Expand All @@ -55,16 +55,17 @@
<div id="vslider"></div>
<div id="output-container">
<div id="tabs">
<div id="tab-console" class="tab active" onclick="changeTab('console')">Console</div><div id="tab-js" class="tab" onclick="changeTab('js')">Javascript</div><div id="tab-fs" class="tab" onclick="changeTab('fs')">Files</div><div id="tab-help" class="tab" onclick="changeTab('help')">Help</div>
<div id="tab-console" class="tab active" onclick="IDE.changeTab('console')">Console</div><div id="tab-js" class="tab" onclick="IDE.changeTab('js')">Javascript</div><div id="tab-fs" class="tab" onclick="IDE.changeTab('fs')">Files</div><div id="tab-help" class="tab" onclick="IDE.changeTab('help')">Help</div>
</div>
<div id="output-content">
<div id="warning-container"></div>
<div id="js-code"></div>
<div id="fs-browser">
<div id="fs-path">
<span id="fs-url">/</span>
<div id="fs-refresh" title="Refresh" onclick="refreshFS()"></div>
<div id="fs-new-folder" title="New Directory" onclick="onNewDirectory()"></div>
<div id="fs-refresh" title="Refresh" onclick="IDE.refreshFS()"></div>
<div id="fs-new-folder" title="New Directory" onclick="IDE.onNewDirectory()"></div>
<div id="fs-upload" title="Upload" onclick="IDE.onUploadFile()"></div>
</div>
<div id="fs-contents">
</div>
Expand Down Expand Up @@ -92,15 +93,15 @@
<div style="margin-bottom:5px">Copy the link below to share your code:</div>
<div><textarea id="share-code" rows="15" cols="60" readonly></textarea></div>
<div style="margin-top: 5px; float:left">Launch Mode:
<select id="share-mode" onchange="shareProgram()">
<select id="share-mode" onchange="IDE.shareProgram()">
<option value="">IDE (Default)</option>
<option value="play">Play</option>
<option value="auto">Auto</option>
</select>
</div>
<a id="export-button" href="javascript:exportProgram()" style="display: none; float:left; margin-top: 7px; margin-left: 10px">Export</a>
<a href="javascript:closeDialog()" style="display:block; float:right; margin-top: 7px">Close</a>
<a href="javascript:testShare()" style="display: block; float:right; margin-top: 7px; margin-right: 10px">Test</a>
<a id="export-button" href="javascript:IDE.exportProgram()" style="float:left; margin-top: 7px; margin-left: 10px">Export</a>
<a href="javascript:IDE.closeDialog()" style="display:block; float:right; margin-top: 7px">Close</a>
<a href="javascript:IDE.testShare()" style="display: block; float:right; margin-top: 7px; margin-right: 10px">Test</a>
</dialog>

<dialog id="prog-sel-dialog">
Expand All @@ -110,22 +111,22 @@
</div>
<select id="prog-sel-sources" size="10" style="display:block; width:100%; margin-top:10px"></select>
<div style="text-align:center; margin-top:10px">
<a href="javascript:onSelMainProg()">Ok</a>
<a href="javascript:closeDialog()">Cancel</a>
<a href="javascript:IDE.onSelMainProg()">Ok</a>
<a href="javascript:IDE.closeDialog()">Cancel</a>
</div>
</dialog>

<dialog id="options-dialog">
<div>Select a theme:</div>
<select id="theme-picker" onchange="changeTheme(this.value)">
<select id="theme-picker" onchange="IDE.changeTheme(this.value)">
<option value="qbjs">Default</option>
<option value="qb45">QBasic</option>
<option value="qb64-vscode">QB64 VSCode</option>
<option value="win-classic">Windows Classic</option>
<option value="vscode-dark">VSCode Dark</option>
</select>
<div>
<a href="javascript:closeDialog()" style="display:block; float:right; margin-top: 7px">Close</a>
<a href="javascript:IDE.closeDialog()" style="display:block; float:right; margin-top: 7px">Close</a>
</div>
</dialog>

Expand All @@ -139,14 +140,14 @@
QBJS brings the fun and accessibility of QBasic to the browser.<br/>
Learn more:<br/>
<ul>
<li><a href="javascript:showHelp('language')">QBasic Language Support</a></li>
<li><a href="javascript:showHelp('keywords')">Supported Keywords</a></li>
<li><a href="javascript:showHelp('samples')">Samples</a></li>
<li><a href="javascript:IDE.showHelp('language')">QBasic Language Support</a></li>
<li><a href="javascript:IDE.showHelp('keywords')">Supported Keywords</a></li>
<li><a href="javascript:IDE.showHelp('samples')">Samples</a></li>
</ul>
</p>
<p>Copyright (c) 2022-2023 boxgaming</p>
<div>
<a href="javascript:closeDialog()" style="display:block; float:right">Close</a>
<a href="javascript:IDE.closeDialog()" style="display:block; float:right">Close</a>
</div>
</div>
</dialog>
Expand Down
22 changes: 12 additions & 10 deletions lib/web/console.bas
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,19 +42,20 @@ Sub Log (msg As String, msgType As String)
console.log(msgType + ":" + msg);
return;
}
var errorLine = await getErrorLine(new Error(), 1);
var errorLine = await IDE.getErrorLine(new Error(), 1);
var tr = document.createElement("tr");
addWarningCell(tr, msgType);
addWarningCell(tr, ":");
addWarningCell(tr, errorLine);
addWarningCell(tr, ":");
addWarningCell(tr, await func_EscapeHtml(msg), "99%");
IDE.addWarningCell(tr, msgType);
IDE.addWarningCell(tr, ":");
IDE.addWarningCell(tr, errorLine);
IDE.addWarningCell(tr, ":");
IDE.addWarningCell(tr, await func_EscapeHtml(msg), "99%");
tr.codeLine = errorLine - 1;
tr.onclick = gotoWarning;
tr.onclick = IDE.gotoWarning;
t.append(tr);
var container = document.getElementById("output-content");
container.scrollTop = container.scrollHeight;
changeTab("console");
IDE.changeTab("console");
IDE.showConsole();
$End If
End Sub

Expand All @@ -66,12 +67,13 @@ Sub Echo (msg As String)
return;
}
var tr = document.createElement("tr");
addWarningCell(tr, await func_EscapeHtml(msg));
IDE.addWarningCell(tr, await func_EscapeHtml(msg));
tr.firstChild.colSpan = "5";
t.append(tr);
var container = document.getElementById("output-content");
container.scrollTop = container.scrollHeight;
changeTab("console");
IDE.changeTab("console");
IDE.showConsole();
$End If
End Sub

Expand Down
10 changes: 9 additions & 1 deletion qbjs-ide.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,7 @@ dialog textarea,
}
dialog a { color: #333 !important; }
dialog a:hover { color: #000 !important; }
dialog a.disabled, dialog a.disabled:hover { color: #999 !important; }

#logo {
position: absolute;
Expand All @@ -213,7 +214,7 @@ dialog a:hover { color: #000 !important; }
padding: 5px;
border: 1px solid #333;
}
#fs-refresh, #fs-new-folder {
#fs-refresh, #fs-new-folder, #fs-upload {
float: right;
margin-top: -3px;
cursor: pointer;
Expand All @@ -236,6 +237,13 @@ dialog a:hover { color: #000 !important; }
#fs-new-folder:hover {
background-image: url('img/new-folder-hover.svg');
}
#fs-upload {
margin-right: 8px;
background-image: url('img/upload.svg');
}
#fs-upload:hover {
background-image: url('img/upload-hover.svg');
}

.fs-file, .fs-dir, .fs-delete {
display: block;
Expand Down
Loading

0 comments on commit 8c6aefc

Please sign in to comment.