CrossPosting/cms/templates/articles/new.html

{% extends 'base.html' %}
{% load bootstrap5 %}
{% block content %}
    <div class="container">
        <div class="row my-5">
            <div class="col-md-12">
                <h1>Заполните данные статьи для продвижения в соц. сетях</h1>
                <form
                        method="post"
                        enctype="application/x-www-form-urlencoded"
                        action="{% url 'create-article' %}"
                        class="form"
                >
                    {% csrf_token %}
                    {% bootstrap_form new_article_form %}
                    {% buttons %}
                        <div class="row">
                            <div class="col">
                                <button
                                            class="btn btn-primary"
                                            type="submit"
                                            id="submit-button">
                                            {% if new_article_form.publication_time.value %}
                                                disabled="disabled"
                                            {% endif %}
                                            {% if new_article_form.publication_time.value %}
                                                Запланировать
                                            {% else %}
                                                Опубликовать сейчас
                                            {% endif %}
                                </button>
                                &nbsp;
                                <a href="{% url 'planned' %}" class="btn btn-primary">Список отложенных публикаций</a>
                            </div>
                            <script>
                            document.getElementById("id_publication_time").addEventListener("change", function() {
                                var submitButton = document.getElementById("submit-button");
                                if (this.value) {
                                    submitButton.innerHTML = "Запланировать";
                                } else {
                                    submitButton.innerHTML = "Опубликовать";
                                }
                            });
                            </script>

                            <div id="vkShare" class="col"></div>
                        </div>
                    {% endbuttons %}
                </form>
            </div>
        </div>
    </div>
{% endblock content %}
{% block extra_scripts %}
    <script type="text/javascript">
        let submitBtn = null
        const enableSubmitBtn = () => {
            submitBtn.disabled = false
        }
        const appendShare = (e) => {
            submitBtn.disabled = true
            const articleLink = e.target.value;
            const gen = {
                url: articleLink
            }
            const buttonType = {
                type: "custom",
                text: '<img src="https://vk.com/images/share_32_2x.png" width="32" height="32" alt="share icon" />'
            }
            document.getElementById('vkShare').innerHTML = VK.Share.button(gen, buttonType)
            const vkButtons = document.querySelectorAll('a[href^="//vk.com/"]')
            vkButtons.forEach((vkBtn) => vkBtn.addEventListener('click', enableSubmitBtn))
        }
        const main = () => {
            submitBtn = document.querySelector('button[type="submit"]')
            const linkInput = document.querySelector('[name="link"]');
            linkInput.addEventListener('input', appendShare)
            linkInput.addEventListener('paste', appendShare)
        }
        window.addEventListener('DOMContentLoaded', main)
    </script>
{% endblock %}