mirror of
https://github.com/boxgaming/qbjs.git
synced 2024-09-28 06:27:47 +00:00
Add support for methods dialog (F2)
This commit is contained in:
boxgaming
parent
e1b461606f
commit
a945cdbeed
5 changed files with 231 additions and 6 deletions
42
codemirror/themes/vscode-dark.css
vendored
42
codemirror/themes/vscode-dark.css
vendored
|
|
@ -61,7 +61,7 @@ body {
|
|||
font-family: dosvga;
|
||||
}
|
||||
|
||||
a, #tabs {
|
||||
a, #tabs, #method-tabs {
|
||||
font-family: arial, helvetica, sans-serif;
|
||||
font-variant: all-small-caps;
|
||||
font-size: 14px;
|
||||
|
|
@ -74,12 +74,12 @@ a, #tabs {
|
|||
|
||||
#output-content { background-color: #1e1e1e; }
|
||||
|
||||
#tabs .active {
|
||||
#tabs .active, #method-tabs .active {
|
||||
border-bottom: 1px solid #1e1e1e;
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
|
||||
.tab:hover, #tabs .active:hover {
|
||||
.tab:hover, #tabs .active:hover, #method-tabs .active:hover {
|
||||
background-color: #1e1e1e;
|
||||
color: #ccc;
|
||||
}
|
||||
|
|
@ -110,3 +110,39 @@ dialog a.disabled:hover { text-decoration: none; }
|
|||
#fs-contents a:hover { text-decoration: none; }
|
||||
|
||||
.help a { font-variant: normal; font-size: 15px }
|
||||
|
||||
|
||||
/*.methods thead {
|
||||
border: 1px solid #666;
|
||||
}*/
|
||||
|
||||
.methods thead tr {
|
||||
background-color: #1e1e1e;
|
||||
box-shadow: 0px 1px 1px #666;
|
||||
}
|
||||
|
||||
.methods tbody {
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
|
||||
.methods {
|
||||
border: 1px solid #666;
|
||||
}
|
||||
|
||||
#method-tabs .tab {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#method-tabs .tab {
|
||||
border-color: #666;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
#method-tabs .tab:hover {
|
||||
color: #ccc;
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
#method-tabs .active {
|
||||
color: #ccc;
|
||||
/*border-bottom-color: #1e1e1e;*/
|
||||
}
|
||||
35
codemirror/themes/win-classic.css
vendored
35
codemirror/themes/win-classic.css
vendored
|
|
@ -129,4 +129,37 @@ dialog {
|
|||
.help tr:nth-child(even) { background: rgba(175, 175, 175, .5) }
|
||||
.help code { background-color: rgba(175, 175, 175, .5); }
|
||||
.help-nav { padding-left: 5px; }
|
||||
.help-nav a { color: #333 !important; font-family: Verdana, Geneva, Tahoma, sans-serif; margin-right: 0px; }
|
||||
.help-nav a { color: #333 !important; font-family: Verdana, Geneva, Tahoma, sans-serif; margin-right: 0px; }
|
||||
|
||||
|
||||
#method-tabs .tab {
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
.methods {
|
||||
border: 2px inset;
|
||||
border-top: 2px outset;
|
||||
}
|
||||
|
||||
.methods thead {
|
||||
border: 2px outset;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
.methods thead tr {
|
||||
box-shadow: 0px 1px 0px #999;
|
||||
}
|
||||
|
||||
.methods th {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.methods tbody {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
#method-tabs {
|
||||
margin-left: 10px;
|
||||
}
|
||||
#method-tabs .active {
|
||||
border-bottom: 2px solid #ddd;
|
||||
}
|
||||
27
index.html
27
index.html
|
|
@ -133,6 +133,33 @@
|
|||
</div>
|
||||
</dialog>
|
||||
|
||||
<dialog id="methods-dialog">
|
||||
<div id="method-tabs">
|
||||
<div id="tab-methods" class="tab active" onclick="IDE.changeMethodTab('methods')">Methods</div><div id="tab-imports" class="tab" onclick="IDE.changeMethodTab('imports')">Imports</div>
|
||||
</div>
|
||||
<div id="methods" class="methods">
|
||||
<table>
|
||||
<thead>
|
||||
<th>Method</th>
|
||||
<th>Type</th>
|
||||
<th>Arguments</th>
|
||||
</thead>
|
||||
<tbody id="methods-content"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="imports" class="methods" style="display:none">
|
||||
<table>
|
||||
<thead>
|
||||
<th>Method</th>
|
||||
<th>Type</th>
|
||||
<th>Arguments</th>
|
||||
</thead>
|
||||
<tbody id="imports-content"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<a href="javascript:IDE.closeDialog()" style="display:block; float:right; margin-top: 7px">Close</a>
|
||||
</dialog>
|
||||
|
||||
<dialog id="about-dialog">
|
||||
<div>
|
||||
<img id="logo" src="logo.png" onclick="window.open('https://github.com/boxgaming/qbjs/wiki', '_blank')">
|
||||
|
|
|
|||
36
qbjs-ide.css
36
qbjs-ide.css
|
|
@ -114,7 +114,7 @@ a:after { content: " >"; }
|
|||
display: block;
|
||||
}
|
||||
|
||||
#tabs {
|
||||
#tabs, #method-tabs {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.tab {
|
||||
|
|
@ -127,18 +127,32 @@ a:after { content: " >"; }
|
|||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
#method-tabs .tab {
|
||||
color: #333;
|
||||
border-color: #333;
|
||||
}
|
||||
.tab:hover {
|
||||
color: #fff;
|
||||
background-color: rgb(0, 49, 78);
|
||||
}
|
||||
#method-tabs .tab:hover {
|
||||
color: #000;
|
||||
background-color: #aaa;
|
||||
}
|
||||
#tabs .active {
|
||||
border-bottom: 1px solid rgb(0, 0, 39);
|
||||
color: #ccc;
|
||||
}
|
||||
#method-tabs .active {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
#tabs .active:hover {
|
||||
background-color: transparent;
|
||||
color: #ccc;
|
||||
}
|
||||
#method-tabs .active:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
#gx-load-screen {
|
||||
display: none;
|
||||
text-align: center;
|
||||
|
|
@ -192,6 +206,24 @@ dialog textarea,
|
|||
dialog a { color: #333 !important; }
|
||||
dialog a:hover { color: #000 !important; }
|
||||
dialog a.disabled, dialog a.disabled:hover { color: #999 !important; }
|
||||
dialog pre { font-family: dosvga; }
|
||||
|
||||
.methods {
|
||||
overflow-y: auto;
|
||||
min-height: 100px;
|
||||
max-height: 600px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
.methods table { border-collapse: collapse; width: 100%; }
|
||||
.methods thead tr { position: sticky; top: 0; background-color: #ddd; box-shadow: 0px 1px 1px #000; }
|
||||
.methods th { font-weight: normal; text-align: left; padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 2px; }
|
||||
.methods td { padding-left: 5px; padding-right: 10px; padding-top: 1px; padding-bottom: 1px; vertical-align: top; }
|
||||
.methods tbody tr:hover { background-color: #333; color: #fff; cursor: pointer; }
|
||||
.methods tbody tr:hover .method-type, .methods tbody tr:hover .method-arg-type { color: #ccc; }
|
||||
|
||||
.method-type, .method-arg-type {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#logo {
|
||||
position: absolute;
|
||||
|
|
@ -388,4 +420,4 @@ dialog a.disabled, dialog a.disabled:hover { color: #999 !important; }
|
|||
}
|
||||
.help-nav a {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
97
qbjs-ide.js
97
qbjs-ide.js
|
|
@ -8,6 +8,7 @@ var IDE = new function() {
|
|||
var appMode = "ide";
|
||||
var consoleVisible = false;
|
||||
var currTab = "js";
|
||||
var currMethodTab = "methods";
|
||||
var editor;
|
||||
var selectedError = null;
|
||||
var currPath = "/";
|
||||
|
|
@ -32,6 +33,7 @@ var IDE = new function() {
|
|||
progSelDialog: _el("prog-sel-dialog"),
|
||||
optionsDialog: _el("options-dialog"),
|
||||
aboutDialog: _el("about-dialog"),
|
||||
methodsDialog: _el("methods-dialog"),
|
||||
toolbar: _el("toolbar"),
|
||||
tbConsoleShow: _el("toolbar-button-console-show"),
|
||||
tbConsoleHide: _el("toolbar-button-console-hide"),
|
||||
|
|
@ -166,6 +168,11 @@ var IDE = new function() {
|
|||
event.preventDefault();
|
||||
shareProgram();
|
||||
}
|
||||
// show method dialog
|
||||
else if (event.code == "F2") {
|
||||
event.preventDefault();
|
||||
_showMethodDialog();
|
||||
}
|
||||
});
|
||||
}
|
||||
if (appMode == "ide" && !inIframe()) {
|
||||
|
|
@ -250,6 +257,78 @@ var IDE = new function() {
|
|||
return srcLine;
|
||||
}
|
||||
|
||||
async function _showMethodDialog() {
|
||||
// compile the source
|
||||
var qbCode = editor.getValue();
|
||||
if (!QBCompiler) { QBCompiler = await _QBCompiler(); }
|
||||
var jsCode = await QBCompiler.compile(qbCode);
|
||||
|
||||
var mbody = document.getElementById("methods-content");
|
||||
mbody.innerHTML = "";
|
||||
_addMethods(mbody, QBCompiler.getMethods(), _gotoMethod);
|
||||
|
||||
var imports = QBCompiler.getExportMethods();
|
||||
var consts = QBCompiler.getExportConsts();
|
||||
for (var i=0; i < consts.length; i++) {
|
||||
var obj = consts[i];
|
||||
obj.uname = obj.name.toUpperCase();
|
||||
obj.args = "";
|
||||
obj.type = "CONST";
|
||||
imports.push(obj);
|
||||
}
|
||||
mbody = document.getElementById("imports-content");
|
||||
mbody.innerHTML = "";
|
||||
_addMethods(mbody, imports);
|
||||
|
||||
_showDialog(_e.methodsDialog);
|
||||
}
|
||||
|
||||
function _gotoMethod(e) {
|
||||
editor.setCursor({ line: e.target.parentNode.line - 1 });
|
||||
_closeDialog();
|
||||
};
|
||||
|
||||
function _addMethods(mbody, methods, fnCallback) {
|
||||
methods.sort((a, b) => a.uname.localeCompare(b.uname));
|
||||
for (var i=0; i < methods.length; i++) {
|
||||
if (methods[i].jsname.indexOf("GX.") == -1 &&
|
||||
methods[i].jsname.indexOf("GXSTR.") == -1 &&
|
||||
methods[i].jsname.indexOf("QB.") == -1 &&
|
||||
methods[i].jsname.indexOf("JSON.") == -1) {
|
||||
var tr = document.createElement("tr");
|
||||
tr.line = methods[i].line;
|
||||
var td = document.createElement("td");
|
||||
td.innerHTML = methods[i].name;
|
||||
tr.appendChild(td);
|
||||
td = document.createElement("td");
|
||||
td.className = "method-type";
|
||||
td.innerHTML = methods[i].type;
|
||||
tr.appendChild(td);
|
||||
td = document.createElement("td");
|
||||
tr.appendChild(td);
|
||||
td.innerHTML = formatMethodArgs(methods[i].args);
|
||||
mbody.appendChild(tr);
|
||||
tr.onclick = fnCallback;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function formatMethodArgs(argstr) {
|
||||
var result = "";
|
||||
var args = argstr.split(",");
|
||||
if (args.length < 2 && args[0] == "") {
|
||||
return result;
|
||||
}
|
||||
for (var i=0; i < args.length; i++) {
|
||||
var nv = args[i].split(":");
|
||||
if (result != "") {
|
||||
result += ", ";
|
||||
}
|
||||
result += nv[0] + " <span class='method-arg-type'>As " + nv[1] + "</span>";
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
async function _runProgram() {
|
||||
_e.loadScreen.style.display = "none";
|
||||
|
||||
|
|
@ -583,6 +662,7 @@ var IDE = new function() {
|
|||
_e.progSelDialog.close();
|
||||
_e.optionsDialog.close();
|
||||
_e.aboutDialog.close();
|
||||
_e.methodsDialog.close();
|
||||
}
|
||||
|
||||
async function displayWarnings() {
|
||||
|
|
@ -690,6 +770,22 @@ var IDE = new function() {
|
|||
}
|
||||
}
|
||||
|
||||
function _changeMethodTab(tabName) {
|
||||
if (tabName == currMethodTab) { return; }
|
||||
_el("tab-" + currMethodTab).classList.remove("active");
|
||||
_el("tab-" + tabName).classList.add("active");
|
||||
currMethodTab = tabName;
|
||||
|
||||
if (currMethodTab == "methods") {
|
||||
_el("methods").style.display = "block";
|
||||
_el("imports").style.display = "none";
|
||||
}
|
||||
else if (currMethodTab == "imports") {
|
||||
_el("methods").style.display = "none";
|
||||
_el("imports").style.display = "block";
|
||||
}
|
||||
}
|
||||
|
||||
function _showHelp(page) {
|
||||
_changeTab("help");
|
||||
var helpUrl = "";
|
||||
|
|
@ -1096,6 +1192,7 @@ var IDE = new function() {
|
|||
this.addWarningCell = _addWarningCell;
|
||||
this.showConsole = _showConsole;
|
||||
this.changeTab = _changeTab;
|
||||
this.changeMethodTab = _changeMethodTab;
|
||||
this.showHelp = _showHelp;
|
||||
this.slideLeft = _slideLeft;
|
||||
this.slideRight = _slideRight;
|
||||
|
|
|
|||
Loading…
Reference in a new issue