ui: centrally load CodeMirror and init via data tag
This commit is contained in:
parent
88c1ad4c1c
commit
a3ae827839
|
@ -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 %}
|
||||
|
|
|
@ -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 %}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
});
|
||||
});
|
||||
|
|
Reference in New Issue