diff --git a/lpon_site/frontend/utils.py b/lpon_site/frontend/utils.py index 68e71a8..5082683 100644 --- a/lpon_site/frontend/utils.py +++ b/lpon_site/frontend/utils.py @@ -402,24 +402,19 @@ def validate_entity_for_admin_form(form_instance, cleaned_data, dup_list = ", ".join(dup_links) # Кнопка подтверждения создания несмотря на синонимы - # При клике добавляет класс force-ignore-validation ко всем submit-кнопкам + # При клике вызывает функцию markSubmitButtonsToIgnoreValidation() + # которая добавляет класс force-ignore-validation ко всем submit-кнопкам. # Вотчер видит этот класс и добавляет onclick обработчик к кнопкам - # Onclick обработчик вызывает addGetParam() перед отправкой формы + # для добавления GET параметра ignore_validate=1 перед отправкой формы. + # Весь JS код находится в form-field-watcher.js для чистоты и переиспользования. confirmation_button = ''' -
-
- - - Теперь нажмите стандартные кнопки сохранения снизу, чтобы сохранить. - + Теперь нажмите стандартные кнопки сохранения снизу, чтобы сохранить.
''' diff --git a/public/static/css/validation-override.css b/public/static/css/validation-override.css index 6d45308..cdb6123 100644 --- a/public/static/css/validation-override.css +++ b/public/static/css/validation-override.css @@ -7,16 +7,46 @@ input[type=submit].force-ignore-validation { background-color: #f39c12 !important; /* Оранжевый/жёлтый цвет */ color: #fff; - border: 2px solid #e67e22; } input[type=submit].force-ignore-validation:hover { background-color: #e67e22 !important; cursor: pointer; + transition: background-color 0.3s ease; +} +input[type=submit].force-ignore-validation:not(:hover) { + transition: background-color 0.6s ease; } -/* Скрываем красную кнопку подтверждения если она есть */ + +/* Блок красной кнопки подтверждения игнорирования валидации */ .confirmation-button-container { - display: none; + display: block; + padding-top: 15px; +} + +.confirmation-button-container button { + padding: 10px 15px; + background: #e74c3c; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + font-weight: bold; +} + +.confirmation-button-container button:hover { + background: #c0392b; + transition: background-color 0.6s ease; +} +.confirmation-button-container button:not(:hover) { + transition: background-color 0.6s ease; +} + +.confirmation-button-container em { + display: block; + margin-top: 8px; + color: #666; + font-size: 12px; } diff --git a/public/static/js/form-field-watcher.js b/public/static/js/form-field-watcher.js index 508c2e4..a2d37d3 100644 --- a/public/static/js/form-field-watcher.js +++ b/public/static/js/form-field-watcher.js @@ -31,6 +31,17 @@ function addGetParam(button, key, value) { button.formAction = baseAction + separator + key + '=' + value; } +// Функция для добавления класса force-ignore-validation ко всем submit-кнопкам формы +// Используется при клике на кнопку "Я проверил и уверен!" +function markSubmitButtonsToIgnoreValidation() { + // Находим все submit-кнопки на странице и добавляем им класс + // form-field-watcher.js потом отследит добавление класса через MutationObserver + // и добавит соответствующие onclick обработчики + document.querySelectorAll('input[type=submit]').forEach(function(btn) { + btn.classList.add('force-ignore-validation'); + }); +} + document.addEventListener('DOMContentLoaded', function() { // Находим все submit-кнопки администратора let submitButtons = document.querySelectorAll('input[type=submit]'); @@ -124,4 +135,3 @@ document.addEventListener('DOMContentLoaded', function() { observer.observe(btn, { attributes: true, attributeFilter: ['class'] }); }); }); -