ui: centrally load CodeMirror and init via data tag

This commit is contained in:
Jens Langhammer 2020-02-21 21:02:03 +01:00
parent 88c1ad4c1c
commit a3ae827839
5 changed files with 31 additions and 47 deletions

View File

@ -1 +1,14 @@
{% extends "overview/base.html" %}
{% load static %}
{% block head %}
{{ block.super }}
<script src="{% static 'node_modules/codemirror/lib/codemirror.js' %}"></script>
<script src="{% static 'node_modules/codemirror/addon/display/autorefresh.js' %}"></script>
<link rel="stylesheet" href="{% static 'node_modules/codemirror/lib/codemirror.css' %}">
<link rel="stylesheet" href="{% static 'node_modules/codemirror/theme/monokai.css' %}">
<script src="{% static 'node_modules/codemirror/mode/xml/xml.js' %}"></script>
<script src="{% static 'node_modules/codemirror/mode/yaml/yaml.js' %}"></script>
<script src="{% static 'node_modules/codemirror/mode/jinja2/jinja2.js' %}"></script>
{% endblock %}

View File

@ -16,11 +16,6 @@
<script type="text/javascript" src="{% static 'admin/js/prepopulate.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/SelectBox.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/SelectFilter2.js' %}"></script>
<script src="{% static 'node_modules/codemirror/lib/codemirror.js' %}"></script>
<link rel="stylesheet" href="{% static 'node_modules/codemirror/lib/codemirror.css' %}">
<link rel="stylesheet" href="{% static 'node_modules/codemirror/theme/monokai.css' %}">
<script src="{% static 'node_modules/codemirror/mode/yaml/yaml.js' %}"></script>
<script src="{% static 'node_modules/codemirror/mode/jinja2/jinja2.js' %}"></script>
{% endblock %}
{% block content %}

View File

@ -1,12 +1,5 @@
{% load i18n %}
{% load static %}
<script src="{% static 'node_modules/codemirror/lib/codemirror.js' %}"></script>
<script src="{% static 'node_modules/codemirror/addon/display/autorefresh.js' %}"></script>
<link rel="stylesheet" href="{% static 'node_modules/codemirror/lib/codemirror.css' %}">
<link rel="stylesheet" href="{% static 'node_modules/codemirror/theme/monokai.css' %}">
<script src="{% static 'node_modules/codemirror/mode/yaml/yaml.js' %}"></script>
<div class="pf-c-dropdown">
<button class="pf-c-button pf-m-tertiary pf-c-dropdown__toggle" type="button">
<span class="pf-c-dropdown__toggle-text">{% trans 'Setup with...' %}</span>
@ -31,7 +24,7 @@
<h1 class="pf-c-title pf-m-2xl">{% trans 'Setup with docker-compose' %}</h1>
<div class="pf-c-modal-box__body">
{% trans 'Add the following snippet to your docker-compose file.' %}
<textarea class="codemirror">{% include 'app_gw/docker-compose.yml' %}</textarea>
<textarea class="codemirror" readonly data-cm-mode="yaml">{% include 'app_gw/docker-compose.yml' %}</textarea>
</div>
<footer class="pf-c-modal-box__footer pf-m-align-left">
<button data-modal-close class="pf-c-button pf-m-primary" type="button">{% trans 'Close' %}</button>
@ -51,7 +44,7 @@
<p>{% trans 'Download the manifest to create the Gatekeeper deployment and service:' %}</p>
<a href="{% url 'passbook_providers_app_gw:k8s-manifest' provider=provider.pk %}">{% trans 'Here' %}</a>
<p>{% trans 'Afterwards, add the following annotations to the Ingress you want to secure:' %}</p>
<textarea class="codemirror">
<textarea class="codemirror" readonly data-cm-mode="yaml">
nginx.ingress.kubernetes.io/auth-url: "https://{{ provider.external_host }}/oauth2/auth"
nginx.ingress.kubernetes.io/auth-signin: "https://{{ provider.external_host }}/oauth2/start?rd=$escaped_request_uri"
</textarea>
@ -62,16 +55,3 @@ nginx.ingress.kubernetes.io/auth-signin: "https://{{ provider.external_host }}/o
</div>
</div>
</div>
<script>
let attributes = document.getElementsByClassName('codemirror');
for (let attrib of attributes) {
let myCodeMirror = CodeMirror.fromTextArea(attrib, {
mode: 'yaml',
theme: 'monokai',
lineNumbers: false,
readOnly: true,
autoRefresh: true,
});
}
</script>

View File

@ -1,12 +1,5 @@
{% load i18n %}
{% load static %}
<script src="{% static 'node_modules/codemirror/lib/codemirror.js' %}"></script>
<script src="{% static 'node_modules/codemirror/addon/display/autorefresh.js' %}"></script>
<link rel="stylesheet" href="{% static 'node_modules/codemirror/lib/codemirror.css' %}">
<link rel="stylesheet" href="{% static 'node_modules/codemirror/theme/monokai.css' %}">
<script src="{% static 'node_modules/codemirror/mode/xml/xml.js' %}"></script>
<button class="pf-c-button pf-m-tertiary" data-target="modal" data-modal="saml-{{ provider.pk }}">{% trans 'View Metadata' %}</button>
<div class="pf-c-backdrop" id="saml-{{ provider.pk }}" hidden>
@ -18,9 +11,7 @@
<h1 class="pf-c-title pf-m-2xl" id="modal-title">{% trans 'Metadata' %}</h1>
<div class="pf-c-modal-box__body" id="modal-description">
<form method="post">
<textarea class="codemirror" id="{{ provider.pk }}-textarea">
{{ metadata }}
</textarea>
<textarea class="codemirror" readonly data-cm-mode="xml">{{ metadata }}</textarea>
</form>
</div>
<footer class="pf-c-modal-box__footer pf-m-align-left">
@ -29,13 +20,3 @@
</div>
</div>
</div>
<script>
CodeMirror.fromTextArea(document.getElementById("{{ provider.pk }}-textarea"), {
mode: 'xml',
theme: 'monokai',
lineNumbers: false,
readOnly: true,
autoRefresh: true,
});
</script>

View File

@ -21,3 +21,18 @@ document.querySelectorAll(".pf-c-modal-box [data-modal-close]").forEach((b) => {
parentContainer.setAttribute("hidden", true);
});
});
// CodeMirror
document.querySelectorAll(".codemirror").forEach((cm) => {
let cmMode = 'xml';
if ('data-cm-mode' in cm.attributes) {
cmMode = cm.attributes['data-cm-mode'].value;
}
CodeMirror.fromTextArea(cm, {
mode: cmMode,
theme: 'monokai',
lineNumbers: false,
readOnly: cm.readOnly,
autoRefresh: true,
});
});