update
parent
46bf05acf1
commit
46c974f7ca
|
@ -5,7 +5,10 @@
|
|||
"scripts": {
|
||||
"build-sass": "sass --style compressed src/main.scss public/css/main.css",
|
||||
"build-js": "parcel build src/main.js --dist-dir public/js",
|
||||
"build-sass-dev": "sass src/main.scss public/css/main.css",
|
||||
"build-js-dev": "parcel build src/main.js --dist-dir public/js --no-optimize",
|
||||
"start":"npm run build-sass && npm run build-js",
|
||||
"serve":"npm run build-sass-dev && npm run build-js-dev",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
|
|
|
@ -1,5 +1 @@
|
|||
import Prism from "prismjs";
|
||||
import "prismjs/plugins/custom-class/prism-custom-class";
|
||||
|
||||
|
||||
Prism.plugins.customClass.map({ number: "prism-number", tag: "prism-tag" });
|
||||
import "./editor"
|
|
@ -1,2 +1,5 @@
|
|||
@charset "utf-8";
|
||||
@import "../node_modules/bulma/bulma.sass";
|
||||
@import "../node_modules/bulma/bulma.sass";
|
||||
|
||||
@import "./scss/prism.scss";
|
||||
@import "./scss/editor.scss";
|
39
src/tmp.js
39
src/tmp.js
|
@ -1,39 +0,0 @@
|
|||
// codeInput
|
||||
// by WebCoder49
|
||||
// Based on a CSS-Tricks Post
|
||||
// Needs Prism.js
|
||||
function update(text) {
|
||||
let result_element = document.querySelector("#highlighting-content");
|
||||
// Handle final newlines (see article)
|
||||
if(text[text.length-1] == "\n") {
|
||||
text += " ";
|
||||
}
|
||||
// Update code
|
||||
result_element.innerHTML = text.replace(new RegExp("&", "g"), "&").replace(new RegExp("<", "g"), "<"); /* Global RegExp */
|
||||
// Syntax Highlight
|
||||
Prism.highlightElement(result_element);
|
||||
}
|
||||
|
||||
function sync_scroll(element) {
|
||||
/* Scroll result to scroll coords of event - sync with textarea */
|
||||
let result_element = document.querySelector("#highlighting");
|
||||
// Get and set x and y
|
||||
result_element.scrollTop = element.scrollTop;
|
||||
result_element.scrollLeft = element.scrollLeft;
|
||||
}
|
||||
|
||||
function check_tab(element, event) {
|
||||
let code = element.value;
|
||||
if(event.key == "Tab") {
|
||||
/* Tab key pressed */
|
||||
event.preventDefault(); // stop normal
|
||||
let before_tab = code.slice(0, element.selectionStart); // text before tab
|
||||
let after_tab = code.slice(element.selectionEnd, element.value.length); // text after tab
|
||||
let cursor_pos = element.selectionEnd + 1; // where cursor moves after tab - moving forward by 1 char to after tab
|
||||
element.value = before_tab + "\t" + after_tab; // add tab char
|
||||
// move cursor
|
||||
element.selectionStart = cursor_pos;
|
||||
element.selectionEnd = cursor_pos;
|
||||
update(element.value); // Update text to include indent
|
||||
}
|
||||
}
|
|
@ -2,7 +2,7 @@
|
|||
<script src="/public/js/main.js"></script>
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
|
||||
|
||||
<script src="public/js/prism1.23.0.min.js"></script>
|
||||
<script src="public/js/main.js"></script>
|
||||
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script> -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -5,7 +5,6 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>ConfigUI</title>
|
||||
<link rel="stylesheet" href="/public/css/bulma0.9.3.min.css">
|
||||
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> -->
|
||||
<link rel="stylesheet" href="/public/css/main.css">
|
||||
</head>
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
{{define "components/editor"}}
|
||||
<code-input class="content" style="height: 70vh; width: 100%" lang="{{.Lang}}" name="editor">
|
||||
{{.Content}}
|
||||
</code-input>
|
||||
{{end}}
|
|
@ -0,0 +1,20 @@
|
|||
{{define "components/menu"}}
|
||||
<section class="is-large">
|
||||
<aside class="menu">
|
||||
<p class="menu-label">
|
||||
Files
|
||||
</p>
|
||||
<ul class="menu-list">
|
||||
{{ range .Files }}
|
||||
<li><a>{{ . }}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
<p class="menu-label">
|
||||
ConfigUI
|
||||
</p>
|
||||
<ul class="menu-list">
|
||||
<li><a{{if eq .Active "ConfigUI"}} class="is-active"{{end}}>config.json</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
</section>
|
||||
{{end}}
|
|
@ -14,24 +14,7 @@
|
|||
<div class="tile is-ancestor mx-2">
|
||||
<div class="tile is-3 is-vertical is-parent">
|
||||
<div class="tile is-child box">
|
||||
<section class="is-large">
|
||||
<aside class="menu">
|
||||
<p class="menu-label">
|
||||
Files
|
||||
</p>
|
||||
<ul class="menu-list">
|
||||
{{ range .Files }}
|
||||
<li><a>{{ . }}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
<p class="menu-label">
|
||||
ConfigUI
|
||||
</p>
|
||||
<ul class="menu-list">
|
||||
<li><a{{if eq .Active "ConfigUI"}} class="is-active"{{end}}>config.json</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
</section>
|
||||
{{template "components/menu" .}}
|
||||
</div>
|
||||
<div class="tile is-child box">
|
||||
<p class="title">Two</p>
|
||||
|
@ -40,12 +23,7 @@
|
|||
<div class="tile is-parent">
|
||||
<div class="tile is-child box">
|
||||
<p class="title">Three</p>
|
||||
<textarea class="content" placeholder="Enter HTML Source Code" id="editing" spellcheck="false" oninput="update(this.value); sync_scroll(this);" onscroll="sync_scroll(this);" onkeydown="check_tab(this, event);"></textarea>
|
||||
<pre id="highlighting" aria-hidden="true">
|
||||
<code class="language-html" id="highlighting-content">{{.Content}}</code>
|
||||
</pre>
|
||||
|
||||
<!-- <code-input class="content" id="edit" lang="{{.Lang}}" name="config">{{.Content}}</code-input> -->
|
||||
{{template "components/editor" .}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue