mirror of
https://github.com/boxgaming/qbjs.git
synced 2024-05-12 08:00:12 +00:00
added support for multiple themes
This commit is contained in:
boxgaming
parent
a6169201da
commit
730023b026
103
codemirror/themes/mdn-like.css
vendored
Normal file
103
codemirror/themes/mdn-like.css
vendored
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
/*
|
||||
MDN-LIKE Theme - Mozilla
|
||||
Ported to CodeMirror by Peter Kroon <plakroon@gmail.com>
|
||||
Report bugs/issues here: https://github.com/codemirror/CodeMirror/issues
|
||||
GitHub: @peterkroon
|
||||
|
||||
The mdn-like theme is inspired on the displayed code examples at: https://developer.mozilla.org/en-US/docs/Web/CSS/animation
|
||||
|
||||
*/
|
||||
.cm-s-mdn-like.CodeMirror { color: #999; background-color: #fff; }
|
||||
.cm-s-mdn-like div.CodeMirror-selected { background: #cfc; }
|
||||
.cm-s-mdn-like .CodeMirror-line::selection, .cm-s-mdn-like .CodeMirror-line > span::selection, .cm-s-mdn-like .CodeMirror-line > span > span::selection { background: #cfc; }
|
||||
.cm-s-mdn-like .CodeMirror-line::-moz-selection, .cm-s-mdn-like .CodeMirror-line > span::-moz-selection, .cm-s-mdn-like .CodeMirror-line > span > span::-moz-selection { background: #cfc; }
|
||||
|
||||
.cm-s-mdn-like .CodeMirror-gutters { background: #f8f8f8; border-left: 6px solid rgba(0,83,159,0.65); color: #333; }
|
||||
.cm-s-mdn-like .CodeMirror-linenumber { color: #aaa; padding-left: 8px; }
|
||||
.cm-s-mdn-like .CodeMirror-cursor { border-left: 2px solid #222; }
|
||||
|
||||
.cm-s-mdn-like .cm-keyword { color: #6262FF; }
|
||||
.cm-s-mdn-like .cm-atom { color: #F90; }
|
||||
.cm-s-mdn-like .cm-number { color: #ca7841; }
|
||||
.cm-s-mdn-like .cm-def { color: #8DA6CE; }
|
||||
.cm-s-mdn-like span.cm-variable-2, .cm-s-mdn-like span.cm-tag { color: #690; }
|
||||
.cm-s-mdn-like span.cm-variable-3, .cm-s-mdn-like span.cm-def, .cm-s-mdn-like span.cm-type { color: #07a; }
|
||||
|
||||
.cm-s-mdn-like .cm-variable { color: #07a; }
|
||||
.cm-s-mdn-like .cm-property { color: #905; }
|
||||
.cm-s-mdn-like .cm-qualifier { color: #690; }
|
||||
|
||||
.cm-s-mdn-like .cm-operator { color: #cda869; }
|
||||
.cm-s-mdn-like .cm-comment { color:#777; font-weight:normal; }
|
||||
.cm-s-mdn-like .cm-string { color:#07a; font-style:italic; }
|
||||
.cm-s-mdn-like .cm-string-2 { color:#bd6b18; } /*?*/
|
||||
.cm-s-mdn-like .cm-meta { color: #000; } /*?*/
|
||||
.cm-s-mdn-like .cm-builtin { color: #9B7536; } /*?*/
|
||||
.cm-s-mdn-like .cm-tag { color: #997643; }
|
||||
.cm-s-mdn-like .cm-attribute { color: #d6bb6d; } /*?*/
|
||||
.cm-s-mdn-like .cm-header { color: #FF6400; }
|
||||
.cm-s-mdn-like .cm-hr { color: #AEAEAE; }
|
||||
.cm-s-mdn-like .cm-link { color:#ad9361; font-style:italic; text-decoration:none; }
|
||||
.cm-s-mdn-like .cm-error { border-bottom: 1px solid red; }
|
||||
|
||||
div.cm-s-mdn-like .CodeMirror-activeline-background { background: #efefff; }
|
||||
div.cm-s-mdn-like span.CodeMirror-matchingbracket { outline:1px solid grey; color: inherit; }
|
||||
|
||||
.cm-s-mdn-like.CodeMirror { background-image: url(data:image/png;base64,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); }
|
||||
|
||||
body {
|
||||
background-color: #ddd;
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
font-size: 12px;
|
||||
}
|
||||
#gx-container { background-color: #666; border: 2px inset; }
|
||||
|
||||
#toolbar { background-color: #ddd; border: 2px outset; font-size: 16px; }
|
||||
#toolbar a { filter: invert(1); border: none; padding: 0; }
|
||||
|
||||
a, a:link, a:visited { color: #666; border: 2px outset; padding: 2px 5px; }
|
||||
a:active { border: 2px inset;}
|
||||
a:hover { color: #999; }
|
||||
a:before { content: ""; }
|
||||
a:after { content: ""; }
|
||||
|
||||
#share-dialog textarea {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#share-dialog {
|
||||
border: 2px outset;
|
||||
}
|
||||
|
||||
#code {
|
||||
border: 2px inset;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
#logo { right: 2px; top: 2px; }
|
||||
|
||||
#output-content, #warning-container {
|
||||
font-family: 'Courier New', monospace;
|
||||
/*font-size: 14px;*/
|
||||
}
|
||||
|
||||
#output-content { border: 2px outset; }
|
||||
|
||||
.tab {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
border: 2px outset;
|
||||
border-bottom: 0;
|
||||
border-radius: 5px 5px 0px 0px;
|
||||
}
|
||||
|
||||
#tabs .active {
|
||||
color: #333;
|
||||
border-bottom: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.tab:hover, #tabs .active:hover {
|
||||
color: #333;
|
||||
background-color: transparent;
|
||||
}
|
||||
79
codemirror/themes/qb45.css
vendored
Normal file
79
codemirror/themes/qb45.css
vendored
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
.cm-s-qb45 { line-height: 1em; }
|
||||
.cm-s-qb45.CodeMirror { background: rgb(0, 0, 170); color: rgb(216, 216, 216); /*text-shadow: 0 -1px 1px #262626;*/ font-family: dosvga; letter-spacing: -1px}
|
||||
.cm-s-qb45 div.CodeMirror-selected { background: rgb(216, 216, 216, .5); } /* 33322B*/
|
||||
/*.cm-s-qb45 .CodeMirror-line::selection, .cm-s-qb45 .CodeMirror-line > span::selection, .cm-s-qb45 .CodeMirror-line > span > span::selection { background: rgb(216, 216, 216); color: rgb(0, 0, 170); }
|
||||
.cm-s-qb45 .CodeMirror-line::-moz-selection, .cm-s-qb45 .CodeMirror-line > span::-moz-selection, .cm-s-qb45 .CodeMirror-line > span > span::-moz-selection { background: rgb(216, 216, 216); color: rgb(0, 0, 170); }*/
|
||||
.cm-s-qb45 .CodeMirror-cursor { border-left: 1px solid #fff; overflow: hidden; width: 0px;}
|
||||
.cm-s-qb45 pre { padding: 0 8px; }/*editable code holder*/
|
||||
|
||||
.cm-s-qb45.CodeMirror span.CodeMirror-matchingbracket { color: #7EFC7E; }/*65FC65*/
|
||||
|
||||
.cm-s-qb45 .CodeMirror-gutters { background: rgb(0, 0, 170); border-right:1px solid rgb(177, 177, 177); }
|
||||
.cm-s-qb45 .CodeMirror-guttermarker { color: #599eff; }
|
||||
.cm-s-qb45 .CodeMirror-guttermarker-subtle { color: #777; }
|
||||
.cm-s-qb45 .CodeMirror-linenumber { color: rgb(177, 177, 177); }
|
||||
|
||||
.cm-s-qb45 span.cm-header { color: #a0a; }
|
||||
.cm-s-qb45 span.cm-quote { color: #090; }
|
||||
.cm-s-qb45 span.cm-keyword { color: rgb(177, 177, 177); }
|
||||
.cm-s-qb45 span.cm-atom { color: #C2B470; }
|
||||
.cm-s-qb45 span.cm-number { color: rgb(177, 177, 177); }
|
||||
.cm-s-qb45 span.cm-def { color: white; }
|
||||
.cm-s-qb45 span.cm-variable { color:rgb(177, 177, 177); }
|
||||
.cm-s-qb45 span.cm-variable-2 { color: rgb(177, 177, 177); }
|
||||
.cm-s-qb45 span.cm-variable-3, .cm-s-qb45 span.cm-type { color: white; }
|
||||
.cm-s-qb45 span.cm-property { color: #92A75C; }
|
||||
.cm-s-qb45 span.cm-operator { color: #92A75C; }
|
||||
.cm-s-qb45 span.cm-comment { color: rgb(177, 177, 177); }
|
||||
.cm-s-qb45 span.cm-string { color: rgb(177, 177, 177); }
|
||||
.cm-s-qb45 span.cm-string-2 { color: rgb(177, 177, 177); }
|
||||
.cm-s-qb45 span.cm-meta { color: #738C73; }
|
||||
.cm-s-qb45 span.cm-qualifier { color: #555; }
|
||||
.cm-s-qb45 span.cm-builtin { color: rgb(177, 177, 177); }
|
||||
.cm-s-qb45 span.cm-bracket { color: #EBEFE7; }
|
||||
.cm-s-qb45 span.cm-tag { color: #669199; }
|
||||
.cm-s-qb45 span.cm-attribute { color: #81a4d5; }
|
||||
.cm-s-qb45 span.cm-hr { color: #999; }
|
||||
.cm-s-qb45 span.cm-link { color: #7070E6; }
|
||||
.cm-s-qb45 span.cm-error { color: #999; }
|
||||
|
||||
.cm-s-qb45 .CodeMirror-activeline-background { background: rgb(0, 0, 170); }
|
||||
.cm-s-qb45 .CodeMirror-matchingbracket { outline:1px solid grey; color:white !important; }
|
||||
|
||||
.cm-s-qb45 .CodeMirror-search-field { font-family: dosvga; font-size: 1em; }
|
||||
.cm-s-qb45 .cm-searching { color: #333 !important; background-color: #ccc; }
|
||||
|
||||
body {
|
||||
background-color: rgb(0, 0, 170);
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
#gx-container {
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
#code, #gx-container, #toolbar, #toolbar .spacer, .tab, #output-content {
|
||||
border-color: rgb(177, 177, 177);
|
||||
}
|
||||
|
||||
#slider {
|
||||
color: rgb(177, 177, 177);
|
||||
}
|
||||
|
||||
#tabs .active {
|
||||
border-bottom: 1px solid rgb(0, 0, 170);
|
||||
}
|
||||
|
||||
.tab:hover, #tabs .active:hover {
|
||||
background-color: rgb(0, 0, 170);
|
||||
}
|
||||
|
||||
#warning-container .selected {
|
||||
color: rgb(0, 0, 170);
|
||||
background-color: rgb(216, 216, 216);
|
||||
}
|
||||
|
||||
#fs-path { border-color: rgb(177, 177, 177); }
|
||||
|
||||
#fs-contents a, #fs-contents a:visited, #fs-contents a:active { color: rgb(177, 177, 177); }
|
||||
#fs-contents a:hover { color: #efefef; }
|
||||
|
|
@ -44,4 +44,7 @@
|
|||
.cm-s-qbjs .CodeMirror-matchingbracket { outline:1px solid grey; color:white !important; }
|
||||
|
||||
.cm-s-qbjs .CodeMirror-search-field { font-family: dosvga; font-size: 1em; }
|
||||
.cm-s-qbjs .cm-searching { color: #333 !important; background-color: #ccc; }
|
||||
.cm-s-qbjs .cm-searching { color: #333 !important; background-color: #ccc; }
|
||||
|
||||
body { letter-spacing: -1px; }
|
||||
#gx-container { letter-spacing: normal; }
|
||||
111
codemirror/themes/vscode-dark.css
vendored
Normal file
111
codemirror/themes/vscode-dark.css
vendored
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
/**
|
||||
* @package vscode-dark theme
|
||||
* @version 1.0.0
|
||||
* @author Inter-Net PRO
|
||||
* @link https://inter-net.pro
|
||||
* @github https://github.com/Inter-Net-Pro/Theme-VSCode-Dark
|
||||
*/
|
||||
.cm-s-vscode-dark span.cm-meta {color: #569cd6}
|
||||
.cm-s-vscode-dark span.cm-number {color: #b5cea8}
|
||||
.cm-s-vscode-dark span.cm-keyword {line-height: 1em; color: #569cd6;}
|
||||
.cm-s-vscode-dark span.cm-def {color:#9cdcfe}
|
||||
.cm-s-vscode-dark span.cm-variable {color: #ddd6a3}
|
||||
.cm-s-vscode-dark span.cm-variable-2 {color: #9cdcfe}
|
||||
.cm-s-vscode-dark span.cm-variable-3,
|
||||
.cm-s-vscode-dark span.cm-type {color: #A9B7C6}
|
||||
.cm-s-vscode-dark span.cm-property {color: #9cdcfe}
|
||||
.cm-s-vscode-dark span.cm-operator {color: #d4d4d4}
|
||||
.cm-s-vscode-dark span.cm-string {color: #ce9178}
|
||||
.cm-s-vscode-dark span.cm-string-2 {color: #6A8759}
|
||||
.cm-s-vscode-dark span.cm-comment {color: #6A9955}
|
||||
.cm-s-vscode-dark span.cm-link {color: #287BDE}
|
||||
.cm-s-vscode-dark span.cm-atom {color: #569cd6}
|
||||
/*.cm-s-vscode-dark span.cm-error {color: #BC3F3C}*/
|
||||
.cm-s-vscode-dark span.cm-tag {color: #569cd6}
|
||||
.cm-s-vscode-dark span.cm-attribute {color: #9cdcfe}
|
||||
.cm-s-vscode-dark span.cm-qualifier {color: #d7ba7d}
|
||||
.cm-s-vscode-dark span.cm-bracket {color: #808080}
|
||||
|
||||
.cm-s-vscode-dark.CodeMirror {background: #1e1e1e; color: #e9e9e9;}
|
||||
.cm-s-vscode-dark .CodeMirror-cursor {border-left: 1px solid #bebebe;}
|
||||
.CodeMirror-activeline-background {background: #3A3A3A;}
|
||||
.cm-s-vscode-dark div.CodeMirror-selected {background: #1e496c}
|
||||
.cm-s-vscode-dark .CodeMirror-gutters {background: #252526; border-right: 1px solid grey; color: #606366}
|
||||
.cm-s-vscode-dark span.cm-builtin {color: #A9B7C6;}
|
||||
.cm-s-vscode-dark {font-family: Consolas, 'Courier New', monospace, serif;}
|
||||
.cm-s-vscode-dark .CodeMirror-matchingbracket {background-color: #3b514d; color: yellow !important;}
|
||||
|
||||
.CodeMirror * {
|
||||
font-size: 14px;
|
||||
}
|
||||
.CodeMirror-hints.vscode-dark {
|
||||
font-family: Consolas, 'Courier New', monospace;
|
||||
color: #9c9e9e;
|
||||
background-color: #3b3e3f !important;
|
||||
}
|
||||
|
||||
.CodeMirror-hints.vscode-dark .CodeMirror-hint-active {
|
||||
background-color: #494d4e !important;
|
||||
color: #9c9e9e !important;
|
||||
}
|
||||
|
||||
/* QBJS IDE styles */
|
||||
body {
|
||||
background-color: #3A3A3A;
|
||||
font-family: Arial, helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
#gx-container { background-color: #1e1e1e; }
|
||||
|
||||
#slider {
|
||||
font-family: dosvga;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
a, #tabs {
|
||||
font-family: arial, helvetica, sans-serif;
|
||||
font-variant: all-small-caps;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#output-content, #warning-container {
|
||||
font-family: Consolas, 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#output-content { background-color: #1e1e1e; }
|
||||
|
||||
#tabs .active {
|
||||
border-bottom: 1px solid #1e1e1e;
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
|
||||
.tab:hover, #tabs .active:hover {
|
||||
background-color: #1e1e1e;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
#toolbar a { font-size: 16px; }
|
||||
|
||||
dialog textarea {
|
||||
font-family: Consolas, 'Courier New', monospace;
|
||||
letter-spacing: normal;
|
||||
background-color: #1e1e1e;
|
||||
color: #ccc;
|
||||
/* border: 1px solid #ccc; */
|
||||
}
|
||||
|
||||
dialog {
|
||||
background-color: #3A3A3A;
|
||||
border: 1px solid #666;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
dialog a { color: #ccc !important; }
|
||||
dialog a:hover { color: #fff !important; }
|
||||
a:before { content: ""; }
|
||||
a:after { content: ""; }
|
||||
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; }
|
||||
120
codemirror/themes/win-classic.css
vendored
Normal file
120
codemirror/themes/win-classic.css
vendored
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
.cm-s-win-classic .cm-keyword { color: #6262FF; }
|
||||
.cm-s-win-classic .cm-atom { color: #F90; }
|
||||
.cm-s-win-classic .cm-number { color: #ca7841; }
|
||||
.cm-s-win-classic .cm-def { color: #8DA6CE; }
|
||||
.cm-s-win-classic span.cm-variable-2, .cm-s-win-classic span.cm-tag { color: #690; }
|
||||
.cm-s-win-classic span.cm-variable-3, .cm-s-win-classic span.cm-def, .cm-s-win-classic span.cm-type { color: #07a; }
|
||||
|
||||
.cm-s-win-classic .cm-variable { color: #07a; }
|
||||
.cm-s-win-classic .cm-property { color: #905; }
|
||||
.cm-s-win-classic .cm-qualifier { color: #690; }
|
||||
|
||||
.cm-s-win-classic .cm-operator { color: #cda869; }
|
||||
.cm-s-win-classic .cm-comment { color:#777; font-weight:normal; }
|
||||
.cm-s-win-classic .cm-string { color:#07a; font-style:italic; }
|
||||
.cm-s-win-classic .cm-string-2 { color:#bd6b18; } /*?*/
|
||||
.cm-s-win-classic .cm-meta { color: #000; } /*?*/
|
||||
.cm-s-win-classic .cm-builtin { color: #9B7536; } /*?*/
|
||||
.cm-s-win-classic .cm-tag { color: #997643; }
|
||||
.cm-s-win-classic .cm-attribute { color: #d6bb6d; } /*?*/
|
||||
.cm-s-win-classic .cm-header { color: #FF6400; }
|
||||
.cm-s-win-classic .cm-hr { color: #AEAEAE; }
|
||||
.cm-s-win-classic .cm-link { color:#ad9361; font-style:italic; text-decoration:none; }
|
||||
/*.cm-s-win-classic .cm-error { border-bottom: 1px solid red; }*/
|
||||
|
||||
div.cm-s-win-classic .CodeMirror-activeline-background { background: #efefff; }
|
||||
div.cm-s-win-classic span.CodeMirror-matchingbracket { outline:1px solid grey; color: inherit; }
|
||||
|
||||
|
||||
.cm-s-win-classic.CodeMirror { background-image: url(data:image/png;base64,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); }
|
||||
|
||||
body {
|
||||
background-color: #ddd;
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
font-size: 12px;
|
||||
}
|
||||
#gx-container { background-color: #666; border: 2px inset; }
|
||||
|
||||
#toolbar { background-color: #ddd; border: 2px outset; font-size: 16px; }
|
||||
#toolbar a { filter: invert(1); border: none; padding: 0; }
|
||||
|
||||
a, a:link, a:visited { color: #333; border: 2px outset; padding: 2px 5px; user-select: none; }
|
||||
a:active { border: 2px inset;}
|
||||
a:hover { color: #000; }
|
||||
a:before { content: ""; }
|
||||
a:after { content: ""; }
|
||||
|
||||
dialog textarea {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
letter-spacing: normal;
|
||||
border: 2px inset;
|
||||
}
|
||||
dialog textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
dialog {
|
||||
border: 2px outset;
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
#code {
|
||||
border: 2px inset;
|
||||
border-top: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#logo { right: 2px; top: 2px; }
|
||||
|
||||
#output-content, #warning-container {
|
||||
font-family: 'Courier New', monospace;
|
||||
/*font-size: 14px;*/
|
||||
}
|
||||
|
||||
#output-content {
|
||||
border: 2px outset;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tab {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
border: 2px outset;
|
||||
border-bottom: 0;
|
||||
border-radius: 5px 5px 0px 0px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#tabs .active {
|
||||
color: #333;
|
||||
border-bottom: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.tab:hover, #tabs .active:hover {
|
||||
color: #333;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#warning-container, #js-code, #fs-contents {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
border: 2px inset;
|
||||
overflow: auto;
|
||||
background-color: #efefef;
|
||||
color: #333;
|
||||
}
|
||||
#warning-container .selected { background-color: #ccc; }
|
||||
|
||||
#run-button, #edit-button, #stop-button, #share-button, #toggle-console { display: inline-block; }
|
||||
|
||||
#fs-browser { font-family: Verdana, Geneva, Tahoma, sans-serif; }
|
||||
#fs-path { border: 2px inset; color: #333; }
|
||||
#fs-path div { filter: invert(1); }
|
||||
#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; }
|
||||
41
img/settings-hover.svg
Normal file
41
img/settings-hover.svg
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
height="512"
|
||||
viewBox="0 0 512 512"
|
||||
width="512"
|
||||
version="1.1"
|
||||
id="svg6"
|
||||
sodipodi:docname="settings-hover.svg"
|
||||
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
|
||||
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">
|
||||
<defs
|
||||
id="defs10" />
|
||||
<sodipodi:namedview
|
||||
id="namedview8"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
showgrid="false"
|
||||
inkscape:zoom="1.8691406"
|
||||
inkscape:cx="256.2675"
|
||||
inkscape:cy="256.2675"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1137"
|
||||
inkscape:window-x="-8"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg6" />
|
||||
<title
|
||||
id="title2" />
|
||||
<path
|
||||
d="M262.29,192.31a64,64,0,1,0,57.4,57.4A64.13,64.13,0,0,0,262.29,192.31ZM416.39,256a154.34,154.34,0,0,1-1.53,20.79l45.21,35.46A10.81,10.81,0,0,1,462.52,326l-42.77,74a10.81,10.81,0,0,1-13.14,4.59l-44.9-18.08a16.11,16.11,0,0,0-15.17,1.75A164.48,164.48,0,0,1,325,400.8a15.94,15.94,0,0,0-8.82,12.14l-6.73,47.89A11.08,11.08,0,0,1,298.77,470H213.23a11.11,11.11,0,0,1-10.69-8.87l-6.72-47.82a16.07,16.07,0,0,0-9-12.22,155.3,155.3,0,0,1-21.46-12.57,16,16,0,0,0-15.11-1.71l-44.89,18.07a10.81,10.81,0,0,1-13.14-4.58l-42.77-74a10.8,10.8,0,0,1,2.45-13.75l38.21-30a16.05,16.05,0,0,0,6-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16,16,0,0,0-6.07-13.94l-38.19-30A10.81,10.81,0,0,1,49.48,186l42.77-74a10.81,10.81,0,0,1,13.14-4.59l44.9,18.08a16.11,16.11,0,0,0,15.17-1.75A164.48,164.48,0,0,1,187,111.2a15.94,15.94,0,0,0,8.82-12.14l6.73-47.89A11.08,11.08,0,0,1,213.23,42h85.54a11.11,11.11,0,0,1,10.69,8.87l6.72,47.82a16.07,16.07,0,0,0,9,12.22,155.3,155.3,0,0,1,21.46,12.57,16,16,0,0,0,15.11,1.71l44.89-18.07a10.81,10.81,0,0,1,13.14,4.58l42.77,74a10.8,10.8,0,0,1-2.45,13.75l-38.21,30a16.05,16.05,0,0,0-6.05,14.08C416.17,247.67,416.39,251.83,416.39,256Z"
|
||||
style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px;stroke-opacity:1"
|
||||
id="path4" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
18
img/settings.svg
Normal file
18
img/settings.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
height="512"
|
||||
viewBox="0 0 512 512"
|
||||
width="512"
|
||||
version="1.1"
|
||||
id="svg6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs10" />
|
||||
<title
|
||||
id="title2" />
|
||||
<path
|
||||
d="M262.29,192.31a64,64,0,1,0,57.4,57.4A64.13,64.13,0,0,0,262.29,192.31ZM416.39,256a154.34,154.34,0,0,1-1.53,20.79l45.21,35.46A10.81,10.81,0,0,1,462.52,326l-42.77,74a10.81,10.81,0,0,1-13.14,4.59l-44.9-18.08a16.11,16.11,0,0,0-15.17,1.75A164.48,164.48,0,0,1,325,400.8a15.94,15.94,0,0,0-8.82,12.14l-6.73,47.89A11.08,11.08,0,0,1,298.77,470H213.23a11.11,11.11,0,0,1-10.69-8.87l-6.72-47.82a16.07,16.07,0,0,0-9-12.22,155.3,155.3,0,0,1-21.46-12.57,16,16,0,0,0-15.11-1.71l-44.89,18.07a10.81,10.81,0,0,1-13.14-4.58l-42.77-74a10.8,10.8,0,0,1,2.45-13.75l38.21-30a16.05,16.05,0,0,0,6-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16,16,0,0,0-6.07-13.94l-38.19-30A10.81,10.81,0,0,1,49.48,186l42.77-74a10.81,10.81,0,0,1,13.14-4.59l44.9,18.08a16.11,16.11,0,0,0,15.17-1.75A164.48,164.48,0,0,1,187,111.2a15.94,15.94,0,0,0,8.82-12.14l6.73-47.89A11.08,11.08,0,0,1,213.23,42h85.54a11.11,11.11,0,0,1,10.69,8.87l6.72,47.82a16.07,16.07,0,0,0,9,12.22,155.3,155.3,0,0,1,21.46,12.57,16,16,0,0,0,15.11,1.71l44.89-18.07a10.81,10.81,0,0,1,13.14,4.58l42.77,74a10.8,10.8,0,0,1-2.45,13.75l-38.21,30a16.05,16.05,0,0,0-6.05,14.08C416.17,247.67,416.39,251.83,416.39,256Z"
|
||||
style="fill:none;stroke:#cccccc;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px;stroke-opacity:1"
|
||||
id="path4" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
24
index.html
24
index.html
|
|
@ -1,12 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>QBJS - QBasic for the Web!</title>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="qbjs-ide.css"></link>
|
||||
<link rel="stylesheet" href="codemirror/codemirror.min.css"></link>
|
||||
<link rel="stylesheet" href="codemirror/dialog.css">
|
||||
<link rel="stylesheet" href="codemirror/matchesonscrollbar.css">
|
||||
<link rel="stylesheet" href="codemirror/qb-ide.css"></link>
|
||||
<link id="ide-theme" rel="stylesheet" href="codemirror/themes/qbjs.css"></link>
|
||||
|
||||
<script type="text/javascript" src="codemirror/codemirror.min.js"></script>
|
||||
<script type="text/javascript" src="codemirror/qb-lang.js"></script>
|
||||
|
|
@ -14,6 +16,7 @@
|
|||
<script type="text/javascript" src="util/jszip.min.js"></script>
|
||||
<script type="text/javascript" src="util/lzutf8.js"></script>
|
||||
<script type="text/javascript" src="util/shorty.min.js"></script>
|
||||
<!-- <script type="text/javascript" src="util/stacktrace.js"></script> -->
|
||||
|
||||
<script type="text/javascript" src="codemirror/dialog.js"></script>
|
||||
<script type="text/javascript" src="codemirror/searchcursor.js"></script>
|
||||
|
|
@ -21,7 +24,7 @@
|
|||
<script type="text/javascript" src="codemirror/annotatescrollbar.js"></script>
|
||||
<script type="text/javascript" src="codemirror/matchesonscrollbar.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body style="display:none">
|
||||
<div id="code-container">
|
||||
<div id="toolbar">
|
||||
<a href="javascript:openProject()" class="toolbar-button" id="toolbar-button-open" title="Open"></a>
|
||||
|
|
@ -29,6 +32,7 @@
|
|||
<div class="spacer"></div>
|
||||
<a href="javascript:runProgram()" class="toolbar-button" id="toolbar-button-run" title="Run"></a>
|
||||
<a href="javascript:shareProgram()" class="toolbar-button" id="toolbar-button-share" title="Share / Export"></a>
|
||||
<a href="javascript:settings()" class="toolbar-button" id="toolbar-button-settings" title="Settings"></a>
|
||||
</div>
|
||||
<div id="code"></div>
|
||||
<a id="edit-button" href="javascript:slideRight()" display="none">Edit</a>
|
||||
|
|
@ -36,7 +40,7 @@
|
|||
<a id="stop-button" href="javascript:stopProgram()">Stop</a>
|
||||
<a id="share-button" href="javascript:shareProgram()">Share</a>
|
||||
</div>
|
||||
<div id="slider">
|
||||
<div id="slider" draggable="true">
|
||||
<div id="slider-left" class="slider-button" onclick="slideLeft()"><</div>
|
||||
<div id="slider-right" class="slider-button" onclick="slideRight()">></div>
|
||||
</div>
|
||||
|
|
@ -99,7 +103,21 @@
|
|||
<a href="javascript:closeProgSelDlg()">Cancel</a>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<dialog id="options-dialog">
|
||||
<div>Select a theme:</div>
|
||||
<select id="theme-picker" onchange="changeTheme(this.value)">
|
||||
<option value="qbjs">Default</option>
|
||||
<option value="qb45">QBasic</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>
|
||||
</div>
|
||||
</dialog>
|
||||
</body>
|
||||
<!-- <script language="javascript" src="gl.js"></script> -->
|
||||
<script language="javascript" src="vfs.js"></script>
|
||||
<script language="javascript" src="gx/gx.js"></script>
|
||||
<script language="javascript" src="qb.js"></script>
|
||||
|
|
|
|||
30
qbjs-ide.css
30
qbjs-ide.css
|
|
@ -5,7 +5,7 @@
|
|||
body {
|
||||
background-color: rgb(0, 0, 39);
|
||||
font-family: dosvga, Arial, Helvetica, sans-serif;
|
||||
letter-spacing: -1px;
|
||||
/* letter-spacing: -1px; */
|
||||
color: #999;
|
||||
}
|
||||
a, a:link, a:visited {
|
||||
|
|
@ -38,11 +38,12 @@ a:after { content: " >"; }
|
|||
border: 1px solid #666;
|
||||
text-align: center;
|
||||
background-color: #000;
|
||||
/*letter-spacing: 0px;*/
|
||||
}
|
||||
#gx-canvas {
|
||||
border: 1px solid #222;
|
||||
background-color: #000;
|
||||
letter-spacing: -1px;
|
||||
font-family: dosvga;
|
||||
}
|
||||
#output-container {
|
||||
position: absolute;
|
||||
|
|
@ -70,6 +71,10 @@ a:after { content: " >"; }
|
|||
color: #999;
|
||||
padding: 5px;
|
||||
}
|
||||
#warning-container .selected {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
#edit-button {
|
||||
float: left;
|
||||
}
|
||||
|
|
@ -159,11 +164,14 @@ a:after { content: " >"; }
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
#share-dialog,
|
||||
#prog-sel-dialog {
|
||||
background-color:#ddd;
|
||||
#options-dialog select {
|
||||
width: 100%;
|
||||
}
|
||||
#share-dialog textarea,
|
||||
dialog {
|
||||
background-color:#ddd;
|
||||
min-width: 250px;
|
||||
}
|
||||
dialog textarea,
|
||||
#prog-sel-dialog select {
|
||||
font-family: dosvga;
|
||||
font-size: 1em;
|
||||
|
|
@ -171,15 +179,15 @@ a:after { content: " >"; }
|
|||
background-color: #efefef;
|
||||
padding: 5px;
|
||||
}
|
||||
#share-dialog a, #prog-sel-dialog a { color: #333; }
|
||||
#share-dialog a:hover, #prog-sel-dialog a:hover { color: #000; }
|
||||
dialog a { color: #333 !important; }
|
||||
dialog a:hover { color: #000 !important; }
|
||||
|
||||
#logo {
|
||||
position: absolute;
|
||||
right: 1px;
|
||||
top: 1px;
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
opacity: 0.33;
|
||||
}
|
||||
#logo:hover { opacity: 1.0; }
|
||||
|
||||
|
|
@ -278,12 +286,14 @@ a:after { content: " >"; }
|
|||
#toolbar-button-open { background-image: url('img/open.svg'); }
|
||||
#toolbar-button-save { background-image: url('img/save.svg'); background-size: 1.08em, 1.08em; background-position: .05em .05em; }
|
||||
#toolbar-button-run { background-image: url('img/run.svg'); }
|
||||
#toolbar-button-share { background-image: url('img/share.svg'); float: right; }
|
||||
#toolbar-button-share { background-image: url('img/share.svg'); }
|
||||
#toolbar-button-settings { background-image: url('img/settings.svg'); float: right; }
|
||||
|
||||
#toolbar-button-open:hover { background-image: url('img/open-hover.svg'); }
|
||||
#toolbar-button-save:hover { background-image: url('img/save-hover.svg'); }
|
||||
#toolbar-button-run:hover { background-image: url('img/run-hover.svg'); }
|
||||
#toolbar-button-share:hover { background-image: url('img/share-hover.svg'); }
|
||||
#toolbar-button-settings:hover { background-image: url('img/settings-hover.svg'); }
|
||||
|
||||
#toolbar .spacer {
|
||||
display: inline-block;
|
||||
|
|
|
|||
147
qbjs-ide.js
147
qbjs-ide.js
|
|
@ -10,8 +10,14 @@ var editor;
|
|||
var selectedError = null;
|
||||
var currPath = "/";
|
||||
var mainProg = null;
|
||||
var theme = "qbjs";
|
||||
|
||||
async function init() {
|
||||
var themeCss = document.getElementById("ide-theme");
|
||||
themeCss.href = "codemirror/themes/" + theme + ".css";
|
||||
document.body.style.display = "initial";
|
||||
|
||||
//alert(document.getElementById("ide-theme"));
|
||||
if (window.innerWidth < 1200) {
|
||||
sizeMode = "max";
|
||||
}
|
||||
|
|
@ -53,7 +59,7 @@ async function init() {
|
|||
indentUnit: 4,
|
||||
value: qbcode,
|
||||
module: "qbjs",
|
||||
theme: "qbjs",
|
||||
theme: theme,
|
||||
height: "auto",
|
||||
styleActiveLine: true,
|
||||
smartIndent: false,
|
||||
|
|
@ -117,6 +123,54 @@ async function init() {
|
|||
}
|
||||
}
|
||||
|
||||
async function getErrorLine(error, stackDepth) {
|
||||
if (stackDepth) {
|
||||
stackDepth = 0;
|
||||
}
|
||||
else if (error._stackDepth) {
|
||||
stackDepth = error._stackDepth;
|
||||
}
|
||||
console.log("_stackDepth: " + error._stackDepth);
|
||||
console.log("stackDepth: " + stackDepth);
|
||||
//console.log(StackTrace.fromError(error));
|
||||
|
||||
var cdepth = 0;
|
||||
var srcLine = "";
|
||||
if (error.line) { // safari
|
||||
srcLine = error.line - 1;
|
||||
}
|
||||
var stack = error.stack.split("\n");
|
||||
for (var i=0; i < stack.length; i++) {
|
||||
// chrome
|
||||
if (stack[i].trim().indexOf("(eval at runProgram") > -1) {
|
||||
if (cdepth == stackDepth) {
|
||||
var idx = stack[i].indexOf("<anonymous>:");
|
||||
var pos = stack[i].substring(idx + 12);
|
||||
pos = pos.substring(0, pos.length - 1);
|
||||
pos = pos.split(":");
|
||||
srcLine = pos[0] - 2;
|
||||
}
|
||||
cdepth++;
|
||||
}
|
||||
// firefox
|
||||
else if (stack[i].trim().indexOf("> AsyncFunction:") > -1) {
|
||||
if (cdepth == stackDepth) {
|
||||
var idx = stack[i].indexOf("> AsyncFunction:");
|
||||
var pos = stack[i].substring(idx + 16);
|
||||
pos = pos.split(":");
|
||||
srcLine = pos[0] - 2;
|
||||
}
|
||||
cdepth++;
|
||||
}
|
||||
}
|
||||
|
||||
if (!isNaN(srcLine)) {
|
||||
srcLine = QBCompiler.getSourceLine(srcLine);
|
||||
}
|
||||
|
||||
return srcLine;
|
||||
}
|
||||
|
||||
async function runProgram() {
|
||||
document.getElementById("gx-load-screen").style.display = "none";
|
||||
|
||||
|
|
@ -144,32 +198,8 @@ async function runProgram() {
|
|||
console.error(error);
|
||||
|
||||
// find the source line, if possible
|
||||
var srcLine = "";
|
||||
if (error.line) {
|
||||
srcLine = error.line - 1;
|
||||
}
|
||||
var stack = error.stack.split("\n");
|
||||
for (var i=0; i < stack.length; i++) {
|
||||
// chrome
|
||||
if (stack[i].trim().startsWith("at eval (eval at runProgram")) {
|
||||
var idx = stack[i].indexOf("<anonymous>:");
|
||||
var pos = stack[i].substring(idx + 12);
|
||||
pos = pos.substring(0, pos.length - 1);
|
||||
pos = pos.split(":");
|
||||
srcLine = pos[0] - 2;
|
||||
}
|
||||
// firefox
|
||||
else if (stack[i].trim().indexOf("> AsyncFunction:") > -1) {
|
||||
var idx = stack[i].indexOf("> AsyncFunction:");
|
||||
var pos = stack[i].substring(idx + 16);
|
||||
pos = pos.split(":");
|
||||
srcLine = pos[0] - 2;
|
||||
}
|
||||
}
|
||||
|
||||
if (!isNaN(srcLine)) {
|
||||
srcLine = QBCompiler.getSourceLine(srcLine);
|
||||
}
|
||||
var srcLine = await getErrorLine(error);
|
||||
console.log("returned: " + srcLine);
|
||||
|
||||
var table = document.getElementById("warning-table");
|
||||
if (table) {
|
||||
|
|
@ -184,10 +214,6 @@ async function runProgram() {
|
|||
table.append(tr);
|
||||
}
|
||||
|
||||
/*var wdiv = document.getElementById("warning-container");
|
||||
var div = document.createElement("div");
|
||||
div.innerHTML = error.name + ": " + error.message + "\n" + error.stack;
|
||||
wdiv.appendChild(div); */
|
||||
consoleVisible = true;
|
||||
window.onresize();
|
||||
QB.halt();
|
||||
|
|
@ -227,6 +253,20 @@ function shareProgram() {
|
|||
document.getElementById("export-button").style.display = (exportVisible) ? "block" : "none";
|
||||
}
|
||||
|
||||
function settings() {
|
||||
var settingsDialog = document.getElementById("options-dialog");
|
||||
if (!settingsDialog.open) {
|
||||
settingsDialog.showModal();
|
||||
}
|
||||
}
|
||||
|
||||
function changeTheme(newTheme) {
|
||||
theme = newTheme;
|
||||
var themeCss = document.getElementById("ide-theme");
|
||||
themeCss.href = "codemirror/themes/" + theme + ".css";
|
||||
editor.setOption("theme", theme);
|
||||
}
|
||||
|
||||
async function exportProgram() {
|
||||
var zip = new JSZip();
|
||||
|
||||
|
|
@ -264,7 +304,6 @@ async function exportProgram() {
|
|||
}
|
||||
|
||||
function addVFSFiles(vfs, zip, parent) {
|
||||
//alert("addVFSFiles: " + parent);
|
||||
var files = vfs.getChildren(parent, vfs.FILE);
|
||||
for (var i=0; i < files.length; i++) {
|
||||
var f = files[i];
|
||||
|
|
@ -289,11 +328,7 @@ async function saveProject() {
|
|||
// save a single .bas file
|
||||
if (count == 0) {
|
||||
var progFile = new Blob([ editor.getValue() ]);
|
||||
const link = document.createElement("a");
|
||||
link.href = URL.createObjectURL(progFile);
|
||||
link.download = "program.bas";
|
||||
link.click();
|
||||
link.remove();
|
||||
QB.downloadFile(progFile, "program.bas");
|
||||
}
|
||||
|
||||
// save a project .zip file
|
||||
|
|
@ -306,11 +341,7 @@ async function saveProject() {
|
|||
addVFSFiles(vfs, zip, node);
|
||||
|
||||
zip.generateAsync({type:"blob"}).then(function(content) {
|
||||
const link = document.createElement("a");
|
||||
link.href = URL.createObjectURL(content);
|
||||
link.download = "project.zip";
|
||||
link.click();
|
||||
link.remove();
|
||||
QB.downloadFile(content, "project.zip");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -445,6 +476,7 @@ function testShare() {
|
|||
|
||||
function closeDialog() {
|
||||
document.getElementById("share-dialog").close();
|
||||
document.getElementById("options-dialog").close();
|
||||
}
|
||||
|
||||
async function displayWarnings() {
|
||||
|
|
@ -476,12 +508,7 @@ async function displayWarnings() {
|
|||
addWarningCell(tr, w[i].text, "99%");
|
||||
table.append(tr);
|
||||
tr.codeLine = w[i].line - 1;
|
||||
tr.onclick = gotoWarning; /*function() {
|
||||
if (selectedError ) { selectedError.style.backgroundColor = "transparent"; }
|
||||
editor.setCursor({ line: this.codeLine});
|
||||
this.style.backgroundColor = "#333";
|
||||
selectedError = this;
|
||||
};*/
|
||||
tr.onclick = gotoWarning;
|
||||
}
|
||||
}
|
||||
if (!consoleVisible && w.length > 0) {
|
||||
|
|
@ -490,9 +517,10 @@ async function displayWarnings() {
|
|||
}
|
||||
|
||||
function gotoWarning() {
|
||||
if (selectedError ) { selectedError.style.backgroundColor = "transparent"; }
|
||||
if (selectedError ) { selectedError.classList.remove("selected"); } //.style.backgroundColor = "transparent"; }
|
||||
editor.setCursor({ line: this.codeLine});
|
||||
this.style.backgroundColor = "#333";
|
||||
//this.style.backgroundColor = "#333";
|
||||
this.classList.add("selected");
|
||||
selectedError = this;
|
||||
};
|
||||
|
||||
|
|
@ -510,7 +538,6 @@ function addWarningCell(tr, text, width) {
|
|||
function showConsole() {
|
||||
consoleVisible = !consoleVisible;
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
//window.onresize();
|
||||
}
|
||||
|
||||
function changeTab(tabName) {
|
||||
|
|
@ -556,7 +583,6 @@ function slideLeft() {
|
|||
sizeMode = "min"
|
||||
document.getElementById("slider-left").style.display = "none";
|
||||
}
|
||||
//window.onresize();
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
}
|
||||
|
||||
|
|
@ -569,7 +595,6 @@ function slideRight() {
|
|||
sizeMode = "max"
|
||||
document.getElementById("slider-right").style.display = "none";
|
||||
}
|
||||
//window.onresize();
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
}
|
||||
|
||||
|
|
@ -598,14 +623,14 @@ window.onresize = function() {
|
|||
if (sizeMode == "min") {
|
||||
cmwidth = 0;
|
||||
editor.getWrapperElement().style.display = "none";
|
||||
document.getElementById("code").style.borderRight = "0";
|
||||
//document.getElementById("code").style.borderRight = "0";
|
||||
document.getElementById("game-container").style.display = "block";
|
||||
document.getElementById("edit-button").style.display = "block";
|
||||
}
|
||||
else if (sizeMode == "max") {
|
||||
cmwidth = window.innerWidth - 25;
|
||||
document.getElementById("game-container").style.display = "none";
|
||||
document.getElementById("code").style.borderRight = "1px solid #666";
|
||||
//document.getElementById("code").style.borderRight = "1px solid #666";
|
||||
document.getElementById("slider").style.border = "1px solid #666";
|
||||
document.getElementById("slider").style.borderLeft = "0";
|
||||
editor.getWrapperElement().style.display = "block";
|
||||
|
|
@ -614,7 +639,7 @@ window.onresize = function() {
|
|||
else {
|
||||
editor.getWrapperElement().style.display = "block";
|
||||
document.getElementById("game-container").style.display = "block";
|
||||
document.getElementById("code").style.borderRight = "1px solid #666";
|
||||
//document.getElementById("code").style.borderRight = "1px solid #666";
|
||||
document.getElementById("slider").style.border = "0";
|
||||
document.getElementById("edit-button").style.display = "none";
|
||||
}
|
||||
|
|
@ -630,14 +655,6 @@ window.onresize = function() {
|
|||
jsDiv.style.display = "block";
|
||||
jsDiv.style.top = (window.innerHeight - 327) + "px";
|
||||
document.getElementById("toggle-console").innerHTML = "Hide Console";
|
||||
/*if (currTab == "console") {
|
||||
document.getElementById("warning-container").style.display = "block";
|
||||
document.getElementById("js-code").style.display = "none";
|
||||
}
|
||||
else {
|
||||
document.getElementById("warning-container").style.display = "none";
|
||||
document.getElementById("js-code").style.display = "block";
|
||||
}*/
|
||||
}
|
||||
else {
|
||||
f.style.height = (window.innerHeight - 50) + "px";
|
||||
|
|
@ -648,11 +665,9 @@ window.onresize = function() {
|
|||
document.getElementById("show-js-container").style.right = "5px";
|
||||
|
||||
editor.setSize(cmwidth, window.innerHeight - 79);
|
||||
//document.getElementById("code").style.height = (window.innerHeight - 50) + "px";
|
||||
document.getElementById("code").style.height = (window.innerHeight - 79) + "px";
|
||||
document.getElementById("slider").style.height = (window.innerHeight - 50) + "px";
|
||||
}
|
||||
//QB.resize(f.style.width.replace("px", ""), f.style.height.replace("px", ""));
|
||||
QB.resize(f.clientWidth, f.clientHeight);
|
||||
}
|
||||
window.onresize();
|
||||
|
|
|
|||
Loading…
Reference in a new issue