django-simplecms/cms/templates/cms/edit.html

{% extends 'cms/admin.html' %}
{% load static i18n %}

{% block title %}{% trans 'Edit' %} {{form.instance}}{% endblock %}

{% block content %}
    <form method="POST" enctype="multipart/form-data" class="cms" novalidate>
        <div class="wrapper">
            {% csrf_token %}

            {% if form.errors %}
                <div class="global_error">
                    {% trans 'Please correct the error(s) below and save again' %}
                </div>
            {% endif %}

            {% include 'cms/form.html' %}

            <div class="edit page">
                <button><img src="{% static 'cms/save.png' %}" width="75"></button>
            </div>
        </div>
    </form>
{% endblock %}

{% block extrabody %}
    <script type="text/javascript" src="/static/admin/js/urlify.js"></script>
    <script>
        function addForm(node) {
            let base = node.previousElementSibling;
            let parent = node.parentNode;
            let counter = parent.firstElementChild;
            let extra_form = base.cloneNode(true);
            let prefix = extra_form.id

            increment(extra_form, prefix, 'id');
            for (let el of extra_form.querySelectorAll(`*[id^=${prefix}]`)) {
                increment(el, prefix, 'id');
            }
            for (let el of extra_form.querySelectorAll(`*[name^=${prefix}]`)) {
                increment(el, prefix, 'name');
            }
            for (let el of extra_form.querySelectorAll(`*[id^=id_${prefix}]`)) {
                increment(el, 'id_' + prefix, 'id');
            }
            for (let el of extra_form.querySelectorAll(`*[for^=id_${prefix}]`)) {
                increment(el, 'id_' + prefix, 'for');
            }
            for (let el of extra_form.querySelectorAll(`*[id^=formfield_${prefix}]`)) {
                increment(el, 'formfield_' + prefix, 'id');
            }

            node.remove();
            parent.appendChild(extra_form);
            parent.appendChild(node);
            base.hidden = false;
            counter.value = parseInt(counter.value) + 1;
            setEventHandlers();
            resizeTextareas();
        }

        function increment(node, prefix, attr) {
            let re = RegExp(`${prefix}(.*)`);
            let matches = node.getAttribute(attr).match(re);
            if (matches) {
                let suffix = matches[1];
                let name = prefix.replace(/-\d+$/, '');
                let index = parseInt(prefix.replace(/.*-/, ''));
                index++;
                let new_prefix = `${name}-${index}`;
                node.setAttribute(attr, new_prefix + suffix);
            }
        }

        function resizeTextareas() {
            let tx = document.getElementsByTagName('textarea');
            for (let i = 0; i < tx.length; i++) {
                tx[i].style.height = (tx[i].scrollHeight) + 1 + 'px';
                tx[i].addEventListener('input', function() {
                    this.style.height = (this.scrollHeight) + 1 + 'px'; // why the 1???
                });
            }
        }

        function showRelevantFields(form, type) {
            let fields_per_type = {{fields_per_type|safe}};
            for (let field of form.querySelectorAll(`fieldset#${form.id} > div.formfield`)) {
                if (!field.id.endsWith('DELETE')) {
                    field.hidden = true;
                }
            }
            for (let name of fields_per_type[type]) {
                document.getElementById(`formfield_${form.id}-${name}`).hidden = false;
            }
        }

        function setEventHandlers() {
            for (let typefield of document.querySelectorAll('select[name$=-type]')) {
                let formId = typefield.name.replace(/-type$/, '');
                let form = document.getElementById(formId);
                let type = typefield.value.toLowerCase();
                showRelevantFields(form, type);
                typefield.addEventListener('input', function() {
                    type = typefield.value.toLowerCase();
                    showRelevantFields(form, type);
                    resizeTextareas();
                });
            }
        }

        document.addEventListener("DOMContentLoaded", function(event) {
            setEventHandlers();
            resizeTextareas();
        });
    </script>
{% endblock %}