norm/NP_CSM_Tool
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

So close! I'm able to use syntax highlighting AND grab the content with js (which then adds to a textarea), but the Flask for loop is only noticed on the first iteration. I can't grab the subsequent values. I need to find a way to dynamically find IDs.

Browse Source
This commit is contained in:
Norm Rasmussen
2023-03-13 17:23:56 -04:00
parent a435a66b81
commit 8afdec139b
16 changed files with 160 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/templates/head.html
View File

@ -15,15 +15,20 @@
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', filename="css/styles.css") }}" />
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}
</script>
<script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@1.2/code-input.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@1.2/code-input.min.css">
<link href="{{ url_for('static', filename='css/prism.css')}}" rel="stylesheet" />
</head>
<body>
{% block content %} {% endblock %}
<script src="{{ url_for('static', filename='css/prism.js' )}}"></script>
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/highlight.min.js"></script>
<script>
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}
</script>
</body>
</html>

87
app/templates/templates.html
View File

@ -7,12 +7,13 @@
<h3>{{ error }}</h4>
{% endif %}
{% if templates %}
<h2> Here are the liquid templates </h2>
<h2> Here are the liquid templates for </h2>
<h2 style="color:#F05323"><strong> {{ session.school }} </strong></h2>
{% endif %}
<div class="templates_display" >
{% for templates in templates %}
<p>&nbsp;</p>
<div class="html_code">
<div class="window-body">
<form
id="templates"
action="{{ url_for('templates')}}"
@ -20,17 +21,20 @@
<h2>
{{ templates[0] }}
</h2>
<textarea
placeholder={{ templates[0] }}
id="body"
name="body"
rows="35"
cols="100">
{{ templates[1] }}
</textarea>
<p>&nbsp;</p>
<code-input
lang="HTML"
value="{{ templates[1] }}"
id="editor"
name="body"
template="code-input">
{{ templates[1] }}
</code-input>
<textarea
name="loaded-content"
id="loaded-content"
style="width:100%;"></textarea>
<label for="template_name">
Create New Template (optional):
Create New Template Name (optional):
</label>
<input
type="text"
@ -38,10 +42,67 @@
value="{{ templates[0] }}">
</input>
<p>&nbsp;</p>
<input type="submit" name="submit_template" value="Submit Template"</input>
<div
name="load-template"
value="Load Changes"
onclick="copyToTextArea()"
style="cursor:pointer"
>Click here to load changes</div>
<input
type="submit"
name="submit-template"
value="Submit Template">
</input>
</form>
</div>
</div>
<p>&nbsp;</p>
{% endfor %}
<!--
<h3> Advanced users only: create new template </h3>
<p>&nbsp;</p>
<div class="html_code">
<form
id="templates"
action="{{ url_for('templates')}}"
method="post">
<h2>
Enter the code below
</h2>
<textarea
id="body"
name="body"
rows="35"
cols="100">
</textarea>
<p>&nbsp;</p>
<label for="template_name">
Template Name:
</label>
<input
type="text"
name="template_name">
</input>
<p>&nbsp;</p>
<input type="submit" name="submit_template" value="Submit Template"</input>
</form>
</div> -->
<script>
codeInput.registerTemplate("code-input", codeInput.templates.hljs(hljs,
[
]));
</script>
<script>
codeInput.registerTemplate("code-input", codeInput.templates.prism(Prism, []));
</script>
<script>
function copyToTextArea() {
var code = document.getElementById("editor").value;
let textarea = document.getElementById("loaded-content");
textarea.textContent = code;
console.log(code);
}
</script>