jquery-duplicate-fields/jquery.duplicateFields.js at master · iatanasov77/jquery-duplicate-fields · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
/**
 *  jquery.duplicateFields
 *  version 0.1
 *  author: Ivan I. Atanasov
 *  licensed under the GPL3
 *  https://github.com/iatanasov77/jquery-duplicate-fields
 */

(function ($)
{
    $.fn.duplicateFields = function (options)
    {
        var options = $.extend({}, $.fn.duplicateFields.defaults, options);

        return this.each(function ()
        {
            if(!$(this).children().length) {
                createElement($(this));
            }

            initButtons($(this));
            bindAddEvent($(this));
            bindRemoveEvent($(this));
        });

        /**
         * Init buttons
         *
         * @param container
         */
        function initButtons(container)
        {
            container.find(options.btnRemoveSelector).show();
            container.find(options.btnRemoveSelector).last().hide();

            container.find(options.btnAddSelector).hide();
            container.find(options.btnAddSelector).last().show();
        }

        /**
         * Generate new fild on click
         * @param container
         */
        function bindAddEvent(container)
        {
            container.on("click", options.btnAddSelector, function(event)
            {
                // Prevent Double Handling onClick
                container.find( options.btnAddSelector ).hide();
                container.find( options.btnAddSelector ).removeClass( options.btnAddSelector.substring( 1 ) );

                var newElement  = createElement(container, $(this));
                if (typeof options.onCreate === "function") {
                    options.onCreate(newElement, $(this), event);
                }
                initButtons(container);

                event.preventDefault();
                event.stopPropagation();
                return false;
            });
        }

        /**
         * Remove a fild on click
         * @param container
         */
        function bindRemoveEvent(container)
        {
            container.on("click", options.btnRemoveSelector, function(event) {
                removeElement(container, $(this));

                if (typeof options.onRemove === "function") {
                    options.onRemove($(this));
                }
                initButtons(container);

                event.preventDefault();
                return false;
            });
        }

        /**
         * Create element
         *
         * @param container
         * @param target
         */
        function createElement(container, target)
        {
            var elementNumber = container.children().length + 1;
            var newElement = $(container.attr('data-prototype'));
            newElement.find(':input').each(function() {
                var id = $(this).attr('id').replace('__name__', elementNumber);
                $(this).attr('id', id);

                var name = $(this).attr('name').replace('__name__', elementNumber);
                $(this).attr('name', name);
            });
            container.append(newElement);

            return newElement;
        }

        /**
         * Remove element
         *
         * @param container
         * @param target
         */
        function removeElement(container, target)
        {
            /*
            var elementClass = $(container.attr('data-prototype')).attr('class');
            target.closest('.' + elementClass).remove();
            */
            target.closest('.' + options.removeElementClass).remove();
        }
    };

    // Set up the default options.
    $.fn.duplicateFields.defaults = {
        removeElementClass: "row",
        btnRemoveSelector:  ".btnRemove",
        btnAddSelector:     ".btnAdd",
        onCreate:           false,
        onRemove:           false
    };
})(jQuery);