🎯 Мета

Створення візуального модуля конструктора предметів для системи DLE 14.0, що дозволяє перетворювати додаткові поля (типу "одна рядок") у інтерфейс drag-n-drop з збереженням даних.
Система має бути повністю інтегрована в адмінку DLE і використовувати макет dragitems.html як візуальний шаблон.

📁 Розділ 1. Розширення типу додаткового поля "одна рядок"

В адмінці DLE у розділі редагування додаткових полів потрібно додати новий чекбокс:

☑ Включити drag-n-drop конструктор предметів

Цей чекбокс додається лише для полів типу "одна рядок".

При його активації:

• поле автоматично перетворюється у інтерфейс drag-n-drop;

• при деактивації відображається звичайне текстове поле;

• значення чекбокса зберігається у параметрі поля (наприклад, editedxfield[28]).

Поведінка має бути сумісною з системою xfields:

• чекбокс відображається у формі редагування доп. поля;

• його значення зберігається і підвантажується при редагуванні;

• в адмінці, у формі додавання/редагування новини, на основі цього параметра підключається інтерфейс drag-n-drop.

🪟 Розділ 2. Модальне вікно з предметами (єдине джерело)

Створюється єдине модальне вікно, яке:

• відображає доступні предмети;

• працює з усіма полями, де активовано drag-n-drop;

• відкривається і закривається вручну кнопкою;

• не закривається автоматично після вибору предметів.

Джерело:

• Предмети підвантажуються з категорії DLE з ID = 11.

Кожен предмет має:

• поле itemimage (зображення предмета);

• поле rune-color (тип урона: red, orange, green, blue).

• Кожен предмет у модалці має містити свій ID.

• Саме цей ID буде передаватися у поле drag-n-drop при перетягуванні.
  
  ❗ Кожен предмет у модальному вікні має містити свій фактичний ID (ID матеріалу), який буде використовуватися при перетягуванні предмета у зону “дроп”. Після скидання предмета його ID зберігається у вигляді рядка значень через кому — наприклад: 3,7,12,6,8. Ці значення є кінцевим вмістом додаткового поля.

Фільтрація:

• модалка має мати фільтри за кольором (red, orange, green, blue);

• кнопка "Скинути" показує всі предмети.

Винятки:

• у коді модуля можна задати масив ID предметів, які не повинні відображатися;
  приклад:

  php$excluded_items = [12, 57, 88];

📦 Розділ 4. Технологія завантаження предметів

Всі предмети для конструктора зберігаються як звичайні новини у категорії DLE з ID = 11.

При відкритті форми додавання або редагування новини:

JavaScript надсилає AJAX-запит на спеціальний PHP-файл (наприклад, load_items.php), який:

• завантажує всі новини з категорії 11;

• зчитує додаткові поля itemimage і rune-color;

• виключає задані ID (наприклад, $excluded_items = [12, 45]);

• повертає JSON або HTML зі списком предметів.

Після отримання даних:

• конструктор відображає предмети у модалці;

• дозволяє фільтрувати їх за кольором;

• дозволяє перетягувати у будь-яке активне поле.

🔧 Розділ 5. Поведінка та логіка drag-n-drop полів

Кожне поле з увімкненим drag-n-drop:

• відображає область, куди можна перетягувати предмети;

• відображає поточні обрані предмети (іконки) у заданому порядку;

• дозволяє змінювати порядок перетягуванням;

• дозволяє видалити предмет (іконка з хрестиком);

• не допускає повторного додавання одного й того ж предмета;

• зберігає обрані ID у рядок через кому (наприклад: 3,7,12,6,8).

Поля мають мати унікальні ID і бути пов’язані з input name="xfield[ім'я]".

Можна використовувати кілька таких полів на одній сторінці.

💾 Розділ 6. Поведінка при збереженні та редагуванні

При збереженні новини:

• обрані предмети зберігаються у прихованому input-полі;

• це значення передається у DLE і зберігається як звичайне значення додаткового поля.

При повторному редагуванні:

• модуль зчитує рядок ID (наприклад: "5,9,14");

• згідно цим ID відновлюються предмети у інтерфейсі у потрібному порядку;

• користувач бачить ті самі предмети, що й збережені, і може їх редагувати.

Вся логіка зберігається у рамках стандартного механізму DLE xfields.

🎨 Розділ 7. Дизайн і реалізація

• Використовувати дизайн і стилі з макета dragitems.html

🎛️ Розділ 8. Поведінка drag-n-drop і модалки

Перетягування:

• користувач може змінювати порядок предметів;

• placeholder показує місце вставки;

• жодних обмежень на переміщення, крім перевірки на дублювання.

Модальне вікно:

• завжди доступне при додаванні або редагуванні новини;

• не закривається автоматично при виборі;

• працює для всіх зон drag-н-дроп на сторінці.

📑 Розділ 9. Що надати:

Повністю робочий модуль:

• патч для xfields.php  та всіх необхідних файлів

• інструкції з встановлення.

Документація:

• по підключенню модуля та налаштуванню.

Сумісність:

• Повна сумісність з DLE 14.0 і

• модулем xField Tab — групування додаткових полів по вкладках.