jquery.dynamiclist/jquery.dynamiclist.js at master · ikelin/jquery.dynamiclist · 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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
/**
 * jQuery Dynamic List v 2.0.1
 * Copyright 2012 Ike Lin
 * http://www.apache.org/licenses/LICENSE-2.0.txt
 */
;(function($) {

    $.fn.dynamiclist = function(options) {

        // support multiple elements
        if (this.length > 1) {
            this.each(function() {
                $(this).dynamiclist(options)
            });
            return this;
        }

        // ------------------------------------------------
        // private variables
        // ------------------------------------------------

        // setting plugin default settings and overriding options
        var settings = $.extend( {
            itemClass: "list-item",
            addClass: "list-add",
            removeClass: "list-remove",
            minSize: 1,
            maxSize: 10,
            withEvents: false,
            addCallbackFn: null,
            removeCallbackFn: null
        }, options);

        // ------------------------------------------------
        // private methods
        // ------------------------------------------------

        // Appends new item to the list by cloning the first item. The new
        // item is normalized and cleared of value before adding to the list.
        var handleAdd = function(list, event, settings) {
            var length = list.find("." + settings.itemClass).length;
            if (length < settings.maxSize) {
                // clone new item from first item
                var item = list.find("." + settings.itemClass + ":first").clone(
                    settings.withEvents);

                // register new item remove link
                item.find("." + settings.removeClass).show().click(function(event) {
                    handleRemove(list, $(this), event, settings);
                });

                // clean up new item
                normalizeItem(item, length);
                clearItem(item);

                // add new item
                var last = list.find("." + settings.itemClass + ":last");
                last.after(item);

                // call back before adding
                if (settings.addCallbackFn != null)
                    settings.addCallbackFn(item);
            }

            if (event != null)
                event.preventDefault();
        }

        // Handles remove link action. Removes an item from the list. Normalizes
        // the list before returning. If there is only minimal item left, clear
        // the value but do not remove the item.
        var handleRemove = function(list, alink, event, settings) {
            var length = list.find("." + settings.itemClass).length;
            var item = alink.parents("." + settings.itemClass + ":first");

            if (length == settings.minSize)
                clearItem(item);
            else
                item.remove();

            normalizeList(list, settings);

            if (settings.removeCallbackFn != null)
                settings.removeCallbackFn(item);

            event.preventDefault();
        }

        // Normalizes the list but changing all id, name and for attribute
        // inside the item to the current item number.
        var normalizeItem = function(item, itemNum) {
            item.find("label, input, select, textarea").each(function() {
                var attributes = ["class", "name", "id", "for"]
                for (var i = 0; i < attributes.length; i++) {
                    var attr = $(this).attr(attributes[i]);
                    if (attr) {
                        attr = attr.replace(/\d+\./, itemNum + ".");
                        attr = attr.replace(/\[\d+\]\./, "[" + itemNum + "].");
                    }
                    $(this).attr(attributes[i], attr);
                }
            });
        }

        // Normalizes the entire list.
        var normalizeList = function(list, settings) {
            list.find("." + settings.itemClass).each(function() {
                var index = list.find("." + settings.itemClass).index(this);
                normalizeItem($(this), index);
            });
        }

        // Clears value from all input text items.
        var clearItem = function(item) {
            item.find("input[type=text], textarea").val("");
            item.find("input[type=radio]").attr({checked: false});
            item.find("input[type=checkbox]").attr({checked: false});
        }

        var init = function(list) {

            // remove first item's remove link
            list.find("." + settings.itemClass + ":first " + "." + settings.removeClass).hide()

            // initializes the list
            var length = list.find("." + settings.itemClass).length;
            while (settings.minSize > length) {
                handleAdd(list, null, settings);
                length++;
            }

            // when add link is clicked
            list.find("." + settings.addClass).click(function(event) {
                handleAdd(list, event, settings);
            });

            // when remove link is clicked
            list.find("." + settings.removeClass).click(function(event) {
                handleRemove(list, $(this), event, settings);
            });

            return list;
        }

        return init(this);
    }
})(jQuery);