QB64/qbjs
QB64/qbjs
1
1
Fork 0
mirror of https://github.com/boxgaming/qbjs.git synced 2024-04-29 01:30:13 +00:00
Code Issues Releases Wiki Activity

Refactored IDE code to be encapsulated by "IDE" function. Issues: #86, #87, #89, #90

Browse source
This commit is contained in:
boxgaming 2024-01-08 12:06:04 -06:00
parent cb8b666256
commit 8c6aefc403
8 changed files with 1178 additions and 927 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
codemirror/themes/vscode-dark.css vendored
View file

@ -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; }

1
codemirror/themes/win-classic.css vendored
View file

@ -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; }

73
img/upload-hover.svg Normal file
View file

@ -0,0 +1,73 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="0 0 256 256"
version="1.1"
id="svg1"
sodipodi:docname="upload-hover.svg"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="3.6679688"
inkscape:cx="128"
inkscape:cy="128"
inkscape:window-width="1920"
inkscape:window-height="1177"
inkscape:window-x="1912"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg1" />
<defs
id="defs1" />
<rect
fill="none"
height="256"
width="256"
id="rect1" />
<path
d="M176,128h48a8,8,0,0,1,8,8v64a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8V136a8,8,0,0,1,8-8H80"
fill="none"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="12"
id="path1"
style="fill:none;fill-opacity:1;stroke:#cccccc;stroke-opacity:1;stroke-width:16;stroke-dasharray:none" />
<line
fill="none"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="12"
x1="128"
x2="128"
y1="128"
y2="24"
id="line1"
style="fill:none;fill-opacity:1;stroke:#cccccc;stroke-opacity:1;stroke-width:16;stroke-dasharray:none" />
<polyline
fill="none"
points="80 72 128 24 176 72"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="12"
id="polyline1"
style="fill:none;fill-opacity:1;stroke:#cccccc;stroke-opacity:1;stroke-width:16;stroke-dasharray:none" />
<circle
cx="188"
cy="168"
r="10"
id="circle1"
style="fill:#cccccc;fill-opacity:1;stroke:#cccccc;stroke-opacity:1;stroke-width:5;stroke-dasharray:none" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

73
img/upload.svg Normal file
View file

@ -0,0 +1,73 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="0 0 256 256"
version="1.1"
id="svg1"
sodipodi:docname="upload.svg"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="3.6679688"
inkscape:cx="128"
inkscape:cy="128"
inkscape:window-width="1920"
inkscape:window-height="1177"
inkscape:window-x="1912"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg1" />
<defs
id="defs1" />
<rect
fill="none"
height="256"
width="256"
id="rect1" />
<path
d="M176,128h48a8,8,0,0,1,8,8v64a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8V136a8,8,0,0,1,8-8H80"
fill="none"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="12"
id="path1"
style="fill:none;fill-opacity:1;stroke:#666666;stroke-opacity:1;stroke-width:16;stroke-dasharray:none" />
<line
fill="none"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="12"
x1="128"
x2="128"
y1="128"
y2="24"
id="line1"
style="fill:none;fill-opacity:1;stroke:#666666;stroke-opacity:1;stroke-width:16;stroke-dasharray:none" />
<polyline
fill="none"
points="80 72 128 24 176 72"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="12"
id="polyline1"
style="fill:none;fill-opacity:1;stroke:#666666;stroke-opacity:1;stroke-width:16;stroke-dasharray:none" />
<circle
cx="188"
cy="168"
r="10"
id="circle1"
style="fill:#666666;fill-opacity:1;stroke:#666666;stroke-opacity:1;stroke-width:5;stroke-dasharray:none" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

53
index.html
View file

@ -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>
@ -55,7 +55,7 @@
<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>
@ -63,8 +63,9 @@
<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>
@ -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">
@ -110,14 +111,14 @@
</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>
@ -125,7 +126,7 @@
<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>
@ -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>

22
lib/web/console.bas
View file

@ -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
@ -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

10
qbjs-ide.css
View file

@ -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;
@ -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;
@ -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;

1871
qbjs-ide.js
View file

File diff suppressed because it is too large Load diff