c/webui
1
0
Fork 0
mirror of https://github.com/webui-dev/webui synced 2025-03-28 21:13:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Minor cleanup to example

Browse Source 
uniform quote usage
naming closer to conventions
add event only to relevant element
This commit is contained in:
Turiiya 2023-09-22 03:28:17 +02:00
parent d305b7697a
commit f00cb22e3b
3 changed files with 35 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/C/text-editor/text-editor.c
View File

@ -15,7 +15,7 @@ int main() {
int MainWindow = webui_new_window();
// Bind HTML element IDs with a C functions
webui_bind(MainWindow, "Close", Close);
webui_bind(MainWindow, "close-button", Close);
// Show a new window
webui_set_root_folder(MainWindow, "ui");

18
examples/C/text-editor/ui/MainWindow.html
View File

@ -10,12 +10,6 @@
<link rel="stylesheet" href="css/lucario.css">
<link rel="stylesheet" href="css/codemirror.min.css">
<link rel="stylesheet" href="css/all.min.css">
<script src="js/codemirror.min.js"></script>
<script src="js/xml.min.js"></script>
<script src="js/css.min.js"></script>
<script src="js/javascript.min.js"></script>
<script src="js/clike.min.js"></script>
<script src="js/python.min.js"></script>
</head>
<body>
<div class="topbar"></div>
@ -24,14 +18,14 @@
<li>
<a onclick="OpenFile();"><i class="fas fa-folder-open"></i></a>
</li>
<li id="SaveLi" style="pointer-events: none; color: #7ca0df;">
<li id="save-button" style="pointer-events: none; color: #7ca0df;">
<a onclick="SaveFile();"><i class="fa fa-floppy-disk"></i></a>
</li>
<li>
<a id="Close"><i class="fas fa-circle-xmark"></i></a>
<a id="close-button"><i class="fas fa-circle-xmark"></i></a>
</li>
<li>
<a id="About"><i class="fas fa-question-circle"></i></a>
<a id="about-button"><i class="fas fa-question-circle"></i></a>
</li>
</ul>
</nav>
@ -46,6 +40,12 @@
<p><a href="https://webui.me" target="_blank">webui.me</a> | (C)2023 Hassan Draga</p>
</div>
</div>
<script src="js/codemirror.min.js"></script>
<script src="js/xml.min.js"></script>
<script src="js/css.min.js"></script>
<script src="js/javascript.min.js"></script>
<script src="js/clike.min.js"></script>
<script src="js/python.min.js"></script>
<script src="js/ui.js"></script>
</body>
</html>

59
examples/C/text-editor/ui/js/ui.js
View File

@ -1,66 +1,57 @@
// Text Editor
// Elements
let About = document.getElementById("About");
let aboutBox = document.getElementById("about-box");
const aboutBtn = document.getElementById('about-button');
const aboutBox = document.getElementById('about-box');
const saveBtn = document.getElementById('save-button');
let fileHandle = null;
// About show
About.onclick = function() {
// Open ABout
aboutBox.style.display = "block";
}
aboutBtn.onclick = () => (aboutBox.style.display = 'block');
// About hide
window.onclick = function(event) {
if (event.target == aboutBox) {
// Close About
aboutBox.style.display = "none";
}
}
aboutBox.onclick = () => (aboutBox.style.display = 'none');
// Create the editor
const editor = document.getElementById("editor");
const editor = document.getElementById('editor');
const codeMirrorInstance = CodeMirror.fromTextArea(editor, {
mode: "text/x-csrc",
mode: 'text/x-csrc',
lineNumbers: true,
tabSize: 4,
indentUnit: 2,
lineWrapping: true,
theme: "lucario"
theme: 'lucario',
});
// Change editor language
function SetFileModeExtension(extension) {
let mode = "";
let mode = '';
switch (extension) {
case "js":
mode = "text/javascript";
case 'js':
mode = 'text/javascript';
break;
case "c":
case "cpp":
case "h":
mode = "text/x-csrc";
case 'c':
case 'cpp':
case 'h':
mode = 'text/x-csrc';
break;
case "py":
mode = "text/x-python";
case 'py':
mode = 'text/x-python';
break;
case "html":
mode = "text/html";
case 'html':
mode = 'text/html';
break;
default:
mode = "text/x-csrc";
mode = 'text/x-csrc';
}
codeMirrorInstance.setOption("mode", mode);
codeMirrorInstance.setOption('mode', mode);
}
// Add full text to the editor
function addText(text) {
codeMirrorInstance.setValue(text);
const element = document.getElementById('SaveLi');
element.style.color = '#ddecf9';
element.style.pointerEvents = 'all';
saveBtn.style.color = '#ddecf9';
saveBtn.style.pointerEvents = 'all';
}
async function OpenFile() {
@ -87,6 +78,6 @@ async function SaveFile() {
await writableStream.close();
}
window.addEventListener("DOMContentLoaded", (event) => {
codeMirrorInstance.setSize("100%", "99%");
window.addEventListener('DOMContentLoaded', () => {
codeMirrorInstance.setSize('100%', '99%');
});