mirror of
https://github.com/boxgaming/qbjs.git
synced 2024-05-12 08:00:12 +00:00
Added support for Help tab in Console (#70)
This commit is contained in:
boxgaming
parent
b4574e9876
commit
f5c82a7160
1
codemirror/themes/vscode-dark.css
vendored
1
codemirror/themes/vscode-dark.css
vendored
|
|
@ -109,6 +109,7 @@ a:hover { text-decoration: underline; }
|
|||
#fs-contents a { font-variant: normal; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 13px; }
|
||||
#fs-contents a:hover { text-decoration: none; }
|
||||
|
||||
.help a { font-variant: normal; font-size: 15px }
|
||||
/* #code {
|
||||
border-top: 0px;
|
||||
} */
|
||||
14
codemirror/themes/win-classic.css
vendored
14
codemirror/themes/win-classic.css
vendored
|
|
@ -120,4 +120,16 @@ dialog {
|
|||
#fs-contents a { border: 0; user-select: auto; color: #333; }
|
||||
#fs-contents a:hover { background-color: #ddd; }
|
||||
#fs-contents { top: 70px; color: #333; grid-auto-rows: 25px; padding-top: 5px; padding-right: 5px; }
|
||||
.fs-delete:hover { background-color: transparent; }
|
||||
.fs-delete:hover { background-color: transparent; }
|
||||
|
||||
.help { background-color: #f6f6f6; color: #333; }
|
||||
.help a, .help a:link, .help a:visited { border: 0; padding: 0; user-select: auto; }
|
||||
.help a:active { border: 0;}
|
||||
.help a:hover { color: #000; text-decoration: underline; }
|
||||
.help a:before { content: ""; }
|
||||
.help a:after { content: ""; }
|
||||
|
||||
.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; }
|
||||
83
githelp.js
Normal file
83
githelp.js
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
var GitHelp = new function() {
|
||||
var navhist = [];
|
||||
var page = document.getElementById("help-page");
|
||||
var sidebar = document.getElementById("help-sidebar");
|
||||
var sconverter = new showdown.Converter();
|
||||
sconverter.setFlavor("github");
|
||||
|
||||
baseUrl = window.location.origin;
|
||||
|
||||
function fixlinks(div, project) {
|
||||
var a = div.getElementsByTagName("a");
|
||||
for (var i=0; i < a.length; i++) {
|
||||
if (a[i].href) {
|
||||
var href = a[i].href;
|
||||
if (href.startsWith("https://github.com") && href.includes("/wiki/")) {
|
||||
href = href.replace("/wiki/", "/");
|
||||
href = href.replace("github.com", "raw.githubusercontent.com/wiki") + ".md";
|
||||
a[i].href = "javascript:GitHelp.wikinav('" + href + "')";
|
||||
}
|
||||
else if (href.startsWith("#") || href.startsWith(baseUrl + "/index.html#")) {
|
||||
// do nothing
|
||||
}
|
||||
else if (href.startsWith(baseUrl + "#") || href.startsWith(baseUrl + "/#")) {
|
||||
a[i].href = href.substring(href.indexOf("#"));
|
||||
}
|
||||
else if (href.startsWith(baseUrl + "?") ||
|
||||
href.startsWith(baseUrl + "/?") ||
|
||||
href.startsWith(baseUrl + "/index.html?")) {
|
||||
a[i].target = "_blank";
|
||||
}
|
||||
else if (href.startsWith(baseUrl + "/")) {
|
||||
href = href.replace(baseUrl + "/", "");
|
||||
href = "https://raw.githubusercontent.com/wiki/" + project + "/" + href + ".md";
|
||||
a[i].href = "javascript:GitHelp.wikinav('" + href + "')";
|
||||
}
|
||||
else {
|
||||
a[i].target = "_blank";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.navhome = function() {
|
||||
navhist = [];
|
||||
this.wikinav("https://raw.githubusercontent.com/wiki/boxgaming/qbjs/QBasic-Language-Support.md");
|
||||
return false;
|
||||
};
|
||||
|
||||
this.navback = function() {
|
||||
if (navhist.length > 1) {
|
||||
navhist.pop();
|
||||
var prev = navhist.pop();
|
||||
this.wikinav(prev);
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
this.navto = function(id) {
|
||||
document.getElementById(id).scrollIntoView();
|
||||
};
|
||||
|
||||
this.wikinav = async function(url) {
|
||||
var project;
|
||||
var pageName;
|
||||
var res = await QB.func_Fetch(url);
|
||||
|
||||
navhist.push(url);
|
||||
page.scrollTop = 0;
|
||||
|
||||
project = url.replace("https://raw.githubusercontent.com/wiki/", "");
|
||||
project = project.substring(0, project.lastIndexOf("/"));
|
||||
pageName = url.substring(url.lastIndexOf("/")+1);
|
||||
pageName = pageName.replaceAll("-", " ");
|
||||
pageName = pageName.replace(".md", "");
|
||||
|
||||
page.innerHTML = "<h1>" + pageName + "</h1>" + sconverter.makeHtml(res.text);
|
||||
fixlinks(page, project);
|
||||
|
||||
res = await QB.func_Fetch("https://raw.githubusercontent.com/wiki/" + project + "/_Sidebar.md");
|
||||
sidebar.innerHTML = sconverter.makeHtml(res.text);
|
||||
fixlinks(sidebar, project);
|
||||
}
|
||||
};
|
||||
21
index.html
21
index.html
|
|
@ -22,6 +22,8 @@
|
|||
<script type="text/javascript" src="codemirror/search.js"></script>
|
||||
<script type="text/javascript" src="codemirror/annotatescrollbar.js"></script>
|
||||
<script type="text/javascript" src="codemirror/matchesonscrollbar.js"></script>
|
||||
|
||||
<script type="text/javascript" src="util/showdown.min.js"></script>
|
||||
</head>
|
||||
<body style="display:none">
|
||||
<div id="toolbar">
|
||||
|
|
@ -53,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-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>
|
||||
<div id="output-content">
|
||||
<div id="warning-container"></div>
|
||||
|
|
@ -67,6 +69,16 @@
|
|||
<div id="fs-contents">
|
||||
</div>
|
||||
</div>
|
||||
<div id="help">
|
||||
<div id="help-nav" class="help-nav">
|
||||
<a href="javascript:GitHelp.navhome()">Home</a>
|
||||
<a href="javascript:GitHelp.navback()">Back</a>
|
||||
</div>
|
||||
<div id="help-container" class="help">
|
||||
<div id="help-sidebar" class="help-sidebar"></div>
|
||||
<div id="help-page" class="help-page"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -127,9 +139,9 @@
|
|||
QBJS brings the fun and accessibility of QBasic to the browser.<br/>
|
||||
Learn more:<br/>
|
||||
<ul>
|
||||
<li><a href="https://github.com/boxgaming/qbjs/wiki/QBasic-Language-Support" target="_blank">QBasic Language Support</a></li>
|
||||
<li><a href="https://github.com/boxgaming/qbjs/wiki/Supported-Keywords" target="_blank">Supported Keywords</a></li>
|
||||
<li><a href="https://github.com/boxgaming/qbjs/wiki/Samples" target="_blank">Samples</a></li>
|
||||
<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>
|
||||
</ul>
|
||||
</p>
|
||||
<p>Copyright (c) 2022-2023 boxgaming</p>
|
||||
|
|
@ -143,5 +155,6 @@
|
|||
<script language="javascript" src="gx/gx.js?v=0.8.0"></script>
|
||||
<script language="javascript" src="qb.js?v=0.8.0"></script>
|
||||
<script language="javascript" src="qb2js.js?v=0.8.0"></script>
|
||||
<script language="javascript" src="githelp.js?v=0.8.0"></script>
|
||||
<script language="javascript" src="qbjs-ide.js?v=0.8.0"></script>
|
||||
</html>
|
||||
54
qbjs-ide.css
54
qbjs-ide.css
|
|
@ -328,4 +328,58 @@ dialog a:hover { color: #000 !important; }
|
|||
height: 1.25em;
|
||||
border-left: 1px solid rgba(102,102,102,.6);
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
#help {
|
||||
overflow: hidden;
|
||||
}
|
||||
#help-container {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
grid-template-columns: max-content auto;
|
||||
width: 100%;
|
||||
}
|
||||
.help, .help table {
|
||||
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';
|
||||
letter-spacing: normal;
|
||||
font-size: 15px;
|
||||
}
|
||||
.help table { border-collapse: collapse }
|
||||
.help th, .help td { border: 1px solid #444; border-spacing: 0; padding: 4px }
|
||||
.help a:hover { text-decoration: underline; }
|
||||
.help a { color: #4E91E6 !important; }
|
||||
.help a:after { display: none; }
|
||||
.help a:before { display: none; }
|
||||
.help code {
|
||||
display: inline-block;
|
||||
border: 1px solid #444;
|
||||
padding: 2px;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(50, 50, 50, .5);
|
||||
font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
|
||||
}
|
||||
.help pre code { padding: 15px; display: block; }
|
||||
.help tr:nth-child(even) { background: rgba(50, 50, 50, .5) }
|
||||
.help h1, .help h2 { border-bottom: 1px solid #444; padding-bottom: 5px }
|
||||
.help h2, .help h3, .help h4, .help h5 { color: #4E91E6; font-weight: 600 }
|
||||
.help h1 { font-weight: normal; }
|
||||
.help blockquote { border-left: 4px solid #666; color: #666; margin-left: 5px; padding-left: 20px; }
|
||||
.help-sidebar {
|
||||
border-right: 1px solid #444;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px
|
||||
}
|
||||
.help-page {
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.help-nav {
|
||||
border-bottom: 1px solid #444;
|
||||
padding-left: 15px;
|
||||
padding-bottom: 8px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
.help-nav a {
|
||||
margin-right: 10px;
|
||||
}
|
||||
28
qbjs-ide.js
28
qbjs-ide.js
|
|
@ -47,7 +47,11 @@ var _e = {
|
|||
fsContents: _el("fs-contents"),
|
||||
fsUrl: _el("fs-url"),
|
||||
code: _el("code"),
|
||||
themePicker: _el("theme-picker")
|
||||
themePicker: _el("theme-picker"),
|
||||
help: _el("help"),
|
||||
helpSidebar: _el("help-sidebar"),
|
||||
helpPage: _el("help-page"),
|
||||
helpContainer: _el("help-container")
|
||||
};
|
||||
|
||||
function _el(id) {
|
||||
|
|
@ -106,6 +110,7 @@ async function init() {
|
|||
theme = stheme;
|
||||
}
|
||||
_e.ideTheme.href = "codemirror/themes/" + theme + ".css";
|
||||
GitHelp.navhome();
|
||||
}
|
||||
|
||||
// initialize the code editor
|
||||
|
|
@ -613,18 +618,38 @@ function changeTab(tabName) {
|
|||
_e.warningContainer.style.display = "block";
|
||||
_e.jsCode.style.display = "none";
|
||||
_e.fsBrowser.style.display = "none";
|
||||
_e.help.style.display = "none";
|
||||
}
|
||||
else if (currTab == "js") {
|
||||
_e.warningContainer.style.display = "none";
|
||||
_e.fsBrowser.style.display = "none";
|
||||
_e.jsCode.style.display = "block";
|
||||
_e.help.style.display = "none";
|
||||
}
|
||||
else if (currTab == "fs") {
|
||||
_e.fsBrowser.style.display = "block";
|
||||
_e.warningContainer.style.display = "none";
|
||||
_e.jsCode.style.display = "none";
|
||||
_e.help.style.display = "none";
|
||||
refreshFS();
|
||||
}
|
||||
else if (currTab == "help") {
|
||||
_e.warningContainer.style.display = "none";
|
||||
_e.jsCode.style.display = "none";
|
||||
_e.fsBrowser.style.display = "none";
|
||||
_e.help.style.display = "block";
|
||||
}
|
||||
}
|
||||
|
||||
function showHelp(page) {
|
||||
changeTab("help");
|
||||
var helpUrl = "";
|
||||
if (page == "language") { GitHelp.wikinav("https://raw.githubusercontent.com/wiki/boxgaming/qbjs/QBasic-Language-Support.md"); }
|
||||
else if (page == "keywords") { GitHelp.wikinav("https://raw.githubusercontent.com/wiki/boxgaming/qbjs/Supported-Keywords.md"); }
|
||||
else if (page == "samples") { GitHelp.wikinav("https://raw.githubusercontent.com/wiki/boxgaming/qbjs/Samples.md"); }
|
||||
else { GitHelp.navhome(); }
|
||||
consoleVisible = false;
|
||||
showConsole();
|
||||
}
|
||||
|
||||
function displayTypes() {
|
||||
|
|
@ -717,6 +742,7 @@ window.onresize = function() {
|
|||
jsDiv.style.display = "block";
|
||||
jsDiv.style.top = (window.innerHeight - splitHeight + 10) + "px";
|
||||
_e.outputContent.style.height = (splitHeight - 77) + "px";
|
||||
_e.helpContainer.style.height = (splitHeight - 110) + "px";
|
||||
}
|
||||
else {
|
||||
_e.vslider.style.display = "none";
|
||||
|
|
|
|||
3
util/showdown.min.js
vendored
Normal file
3
util/showdown.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
util/showdown.min.js.map
Normal file
1
util/showdown.min.js.map
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue