survey-bundle/public/js/survey-frontend-editor-sort.js

(function () {
    function ensureSortIconStyles() {
        if (document.getElementById('survey-question-sort-icon-theme')) {
            return;
        }

        var style = document.createElement('style');
        style.id = 'survey-question-sort-icon-theme';
        style.textContent = [
            '.survey-sort-icon{width:1.14rem !important;height:1.52rem !important;color:#58a6da !important;background:none !important;transform:translateY(1px) !important;}',
            '.survey-sort-icon::before,.survey-sort-icon::after{content:none !important;}',
            '.survey-sort-icon svg{display:block !important;width:100% !important;height:100% !important;transform:translateY(4px);}',
            '.survey-sort-icon svg path:first-child{transform:translateY(1.4px);transform-box:fill-box;transform-origin:center;}',
            '.survey-sort-icon svg path:nth-child(2){transform:translateY(-1.4px);transform-box:fill-box;transform-origin:center;}',
            '.survey-sort-icon svg path[stroke]{stroke-width:2px;}'
        ].join('');

        document.head.appendChild(style);
    }

    function initSurveyQuestionSorting() {
        ensureSortIconStyles();

        if (typeof Sortable !== 'function') {
            return;
        }

        var sortableList = document.querySelector('[data-survey-question-sortable]');
        var orderForm = document.querySelector('[data-survey-question-order-shell]');
        var orderInput = document.querySelector('[data-survey-question-order-input]');

        if (!sortableList || !orderForm || !orderInput || sortableList._surveyQuestionSortable) {
            return;
        }

        var getOrderedIds = function () {
            return Array.from(sortableList.querySelectorAll('[data-survey-question-item]')).map(function (item) {
                return item.getAttribute('data-question-id') || '';
            }).filter(function (value) {
                return value !== '';
            });
        };

        var initialOrder = getOrderedIds().join(',');

        var updateOrderField = function () {
            orderInput.value = getOrderedIds().join(',');
        };

        var updateQuestionIndices = function () {
            sortableList.querySelectorAll('[data-survey-question-item]').forEach(function (item, index) {
                var indexNode = item.querySelector('.survey-accordion-index');

                if (indexNode) {
                    indexNode.textContent = (index + 1) + '.';
                }
            });
        };

        var updateSaveVisibility = function () {
            var currentOrder = getOrderedIds().join(',');
            var isDirty = currentOrder !== initialOrder;

            orderForm.hidden = !isDirty;
            orderForm.classList.toggle('is-visible', isDirty);
            updateOrderField();
        };

        sortableList.querySelectorAll('[data-survey-question-sort-handle]').forEach(function (handle) {
            handle.addEventListener('click', function (event) {
                event.preventDefault();
                event.stopPropagation();
            });
        });

        updateQuestionIndices();
        updateOrderField();
        updateSaveVisibility();

        sortableList._surveyQuestionSortable = Sortable.create(sortableList, {
            animation: 180,
            draggable: '[data-survey-question-item]',
            handle: '[data-survey-question-sort-handle]',
            ghostClass: 'sortable-ghost',
            forceFallback: true,
            fallbackTolerance: 3,
            onStart: function (event) {
                if (event.item) {
                    event.item.classList.add('is-reordering');
                }
            },
            onEnd: function (event) {
                if (event.item) {
                    event.item.classList.remove('is-reordering');
                }

                updateQuestionIndices();
                updateSaveVisibility();
            }
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initSurveyQuestionSorting, { once: true });
    } else {
        initSurveyQuestionSorting();
    }

    window.addEventListener('load', initSurveyQuestionSorting, { once: true });
})();