BindaCMS/binda

/**
 * SORTABLE
 */

import { openCollapsableStacks, closeCollapsableStacks } from './form_item_collapsable';

var sortableOptions = {
    stop: function(event, ui) {
        ui.item.css("z-index", 0);
    },
    placeholder: "ui-state-highlight",
    update: updateSortable
};

/* Initialize jQuery Sortable
 * 
 * This function handles several things:
 * - it sets Sortable for each ".sortable" element
 * - it adds handles only if required
 * - it disable itself if it finds ".sortable--disabled" class
 * - it sets up a toggle button and behaviour if required 
 */
export default function() {
    if ($(".sortable").length > 0) {
        // Initialize sortable item
        $(".sortable").sortable(sortableOptions);

        // Check if sortable item needs handles
        $(".sortable").each(function() {
            if ($(this).find(".sortable--handle").length > 0) {
                $(this).sortable("option", "handle", ".sortable--handle");
            } else {
                $(this).addClass("sortable--no-handle");
            }
        });

        $(".sortable--disabled").sortable("disable");
    }

    // If there is a sortable toggle button prepare the sortable items accordingly
    if ($(".sortable--toggle").length > 0) {
        setupSortableToggle();
    }
}

/* Setup Sortable Toggle
 *
 * It sets up each toggle button and add the events needed to enable or disable Sortable.
 */
function setupSortableToggle() {
    $(".sortable--toggle").each(function() {
        let id = "#" + $(this).data("sortable-target-id");
        closeCollapsableStacks(id);
    });
    // Add event to any sortable toggle button
    $(document).on("click", ".sortable--toggle", toggleSortable);
}

function toggleSortable(event) {
    event.preventDefault();
    let id = "#" + $(this).data("sortable-target-id");

    if ($(id).hasClass("sortable--disabled")) {
        $(id).sortable("enable");
        closeCollapsableStacks(id);
    } else {
        $(id).sortable("disable");
        openCollapsableStacks(id);
    }

    $(id).toggleClass("sortable--disabled");
    $(id).toggleClass("sortable--enabled");
    $(this)
        .children(".sortable--toggle-text")
        .toggle();
}

function updateSortable() {
    if ($(".popup-warning").length > 0) {
        $(this).addClass("sortable--disabled");
        $(".popup-warning--message").text($(this).data("message"));
        $(".popup-warning").removeClass("popup-warning--hidden");
        $(this).sortable("option", "disabled", true);
    }
    let url = $(this).data("update-url");
    let data = $(this).sortable("serialize");
    // If there is a pagination update accordingly
    data = data.concat(`&id=${$(this).attr("id")}`);
    $.post(url, data)
        .done(function(doneData) {
            $(doneData.id).sortable("option", "disabled", false);
            $(".popup-warning").addClass("popup-warning--hidden");
            $(doneData.id).removeClass("sortable--disabled");
        })
        .fail(function(failData) {
            $(".popup-warning").addClass("popup-warning--hidden");
            alert("Error: " + failData.message);
        });
}