SovBundle/Resources/assets/functions/widget-collection.js

import {SovTools} from "./tools";

export class SovWidgetCollection {
    static setCollectionWidgetAdd($collectionWidget) {
        if ($collectionWidget.data('allow-add')) {
            $collectionWidget.find('.field-collection-add').on('click', function (e) {
                // grab the prototype template
                var newWidget = $collectionWidget.attr('data-prototype');
                // replace the "__name__" used in the id and name of the prototype
                // with a number that's unique to your emails
                // end name attribute looks like name="contact[emails][2]"
                newWidget = newWidget.replace(/__name__/g, SovWidgetCollection.getNumItems($collectionWidget));

                // create a new list element and add it to the list
                $collectionWidget.find('.form-widget-compound .field-collection-group').append(newWidget);
                $collectionWidget.find('.field-collection-item:last').find('.field-position').val(SovWidgetCollection.getNumItems($collectionWidget));

                SovWidgetCollection.reindexKeyCollectionWidget($collectionWidget);
                SovWidgetCollection.setCollectionWidgetDelete($collectionWidget);
                $collectionWidget.trigger('collection-add-item');

                $collectionWidget.data('num-items', $collectionWidget.data('num-items') + 1);
                $collectionWidget.find('.collection-empty').hide();
            });
        }
    }

    static setCollectionWidgetDelete($collectionWidget) {
        if ($collectionWidget.data('allow-delete')) {
            $collectionWidget.find('.field-collection-delete').off('click');
            $collectionWidget.find('.field-collection-delete').on('click', function () {
                $(this).parents('.form-group:first').remove();
                SovWidgetCollection.reindexKeyCollectionWidget($collectionWidget);
                if (getNumItems($collectionWidget) == 0) $collectionWidget.find('.collection-empty').show();
            });
        }
    }

    static getNumItems($collectionWidget) {
        if ($collectionWidget.data('reindex-key')) {
            return $collectionWidget.find('.field-collection-item').length;
        } else {
            return $collectionWidget.data('num-items');
        }
    }

    static reindexKeyCollectionWidget($collectionWidget) {
        if ($collectionWidget.data('reindex-key')) {
            $collectionWidget.find('.field-collection-item').each(function (i, item) {
                $(item).find('input,textarea').each(function (y, field) {
                    let $field = $(field);
                    //Chanegment ID
                    let posIdPrefix = parseInt(SovTools.indexOfFirstDigit($field.prop('id')));
                    let posIdSuffix = parseInt(SovTools.indexOfLastDigit($field.prop('id')));

                    let idPrefix = $field.prop('id').substr(0, posIdPrefix);
                    let idSuffix = $field.prop('id').substr(posIdSuffix + 1);

                    $field.prop('id', idPrefix + i + idSuffix);

                    //Chanegment Name
                    let posNamePrefix = SovTools.indexOfFirstDigit($field.prop('name'));
                    let posNameSuffix = SovTools.indexOfLastDigit($field.prop('name'));
                    let namePrefix = $field.prop('name').substr(0, posNamePrefix);
                    let nameSuffix = $field.prop('name').substr(posNameSuffix + 1);
                    $field.prop('name', namePrefix + i + nameSuffix);
                });
            });
        }
    }

    static setCollectionWidgetSortable($collectionWidget) {
        if ($collectionWidget.data('sortable')) {
            $collectionWidget.find('.field-collection-group').sortable({
                "handle": '.lc-btn-sortable',
                cancel: ''
            });
            $collectionWidget.find('.field-collection-group').on("sortupdate", function (event, ui) {
                $collectionWidget.find('.field-collection-group>div').each(function (index, item) {
                    $(item).find('.field-position').val(index);
                });
            });
        }
    }
}