-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbuild.html
More file actions
164 lines (137 loc) · 6.32 KB
/
build.html
File metadata and controls
164 lines (137 loc) · 6.32 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The disc Programming Language -- Create Something New</title>
<link rel="stylesheet" href="./styles/codemirror.css">
<link rel="stylesheet" href="./styles/panda-syntax.css">
<link rel="stylesheet" href="./styles/fullscreen.css">
<link rel="stylesheet" href="./styles/bootstrap.min.css">
<link rel="stylesheet" href="./styles/styles.css">
</head>
<body id="build">
<div id="editor-exit">Press Escape, or Tap/Click 4 times to exit full screen</div>
<header class="container">
<h1>The <em>disc</em> Language : Create Something New</h1>
<nav class="nav navbar">
<ul class="nav-list text-center">
<li><a href="./" id="home-link">home</a></li>
<li><a href="./getting-started/" id="getting-started-link">getting started</a></li>
<li><a href="./build.html" id="build-link">create something</a></li>
<li><a href="./command-reference.html" id="command-reference-link">language reference</a></li>
<li><a href="./about.html" id="about-link">about <em>disc</em> lang design</a></li>
</ul>
</nav>
</header>
<div class="container control-set">
<div class="row" id="code-view">
<div class="col-md-9 col-sm-12 order-md-2 editor-container clear">
<div class="row">
<div class="col-3 jump-to-div">
<select name="function-declarations" id="function-declarations">
<option value="">Function Declarations</option>
</select>
</div>
<div class="col-9 text-right">
<a href="#" id="view-full-screen" title="Press F9 for full screen">Toggle Code Full Screen (or
press F9)</a>
</div>
</div>
<div class="row source-editor-container">
<textarea name="program-source" id="source-editor" cols="30" rows="20" tabindex="-1"></textarea>
</div>
</div>
<div class="col-md-3 col-sm-12 order-md-1">
<h4>Build Something</h4>
<div>
<button id="new-program" class="btn btn-outline-secondary">New Program</button>
</div>
<hr>
<h4>See Examples</h4>
<select name="example-code" id="example-code" class="form-control">
</select>
<button id="load-example" class="btn btn-outline-secondary">Load Example</button>
<hr>
<div>
<button id="run-button" class="btn btn-primary" data-toggle="modal" data-target="#code-modal">
(re)Run This Program [F10]
</button>
<button id="open-display" class="btn btn-outline-secondary" data-toggle="modal"
data-target="#code-modal">
Show/Hide Program Display
</button>
</div>
<hr>
<div>
<button id="keybindings-modal-button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#keybindings-modal">
View Help [F1]
</button>
</div>
</div>
</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Tap/click 4 times or press F9 to exit full screen
</div>
</div>
<div class="modal bd-example-modal-lg" id="code-modal" tabindex="-1" role="dialog"
aria-labelledby="ProgramOutputScreen" aria-hidden="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<textarea id="code-output"></textarea>
</div>
</div>
</div>
<div class="modal bd-example-modal-lg" id="keybindings-modal" tabindex="-1" role="dialog"
aria-labelledby="ProgramOutputScreen" aria-hidden="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h3>Editor Keybindings (Hot Keys)</h3>
</div>
<div class="modal-body">
<ul>
<li><strong>Ctrl+E</strong> -- Focus on Editor</li>
<li><strong>Ctrl+J</strong> -- Jump to Definition or Declaration</li>
<li><strong>Ctrl+Escape</strong> -- Exit Editor Input</li>
<li><strong>Escape</strong> -- Exit and Return to Editor</li>
<li><strong>F1</strong> -- Show Keybindings Modal</li>
<li><strong>F9</strong> -- Toggle Code Editor Full Screen Mode</li>
<li><strong>F10</strong> -- Run Program</li>
</ul>
</div>
</div>
</div>
</div>
<script src="./scripts/jquery-3.5.1.min.js"></script>
<script src="./scripts/popper.js"></script>
<script src="./scripts/bootstrap.js"></script>
<script src="./scripts/codemirror.js"></script>
<script src="./scripts/simple-mode.js"></script>
<script src="./scripts/disc-lang-mode.js"></script>
<script src="./scripts/fullscreen.js"></script>
<script src="./scripts/web-interface.js"></script>
<script src="./scripts/disc-lang.min.js"></script>
<script src="./scripts/sample-programs.js"></script>
<script src="./scripts/code-tooling.js"></script>
<script>
const editorTextarea = document.getElementById('source-editor');
editorTextarea.value = getCurrentSource();
var editor = CodeMirror.fromTextArea(editorTextarea, {
lineNumbers: true,
lineWrapping: false,
mode: { name: 'disc-lang' },
theme: "panda-syntax",
indentUnit: 4,
extraKeys: {
"Ctrl-Space": "autocomplete",
// "Esc": function (editor) {
// editor.setOption("fullScreen", false);
// }
}
});
</script>
</body>
</html>