https://jobs.rtlbelgium.be/js/talentsquare-form.js

1(function() {
2    var TalentsquareForm = function() {
3        // Field converters
4        var fieldConverters = [];
5
6        /**
7         * Process AJAX fk-widget
8         */
9        function processAjaxWidget($el, name) {
10            var multiple = $el.attr('data-multiple') == '1';
11
12            var opts = {
13                width: 'resolve',
14                minimumInputLength: 1,
15                placeholder: 'data-placeholder',
16                ajax: {
17                    url: $el.attr('data-url'),
18                    data: function(term, page) {
19                        return {
20                            query: term,
21                            offset: (page - 1) * 10,
22                            limit: 10
23                        };
24                    },
25                    results: function(data, page) {
26                        var results = [];
27
28                        for (var k in data) {
29                            var v = data[k];
30
31                            results.push({id: v[0], text: v[1]});
32                        }
33
34                        return {
35                            results: results,
36                            more: results.length == 10
37                        };
38                    }
39                },
40                initSelection: function(element, callback) {
41                    $el = $(element);
42                    var value = jQuery.parseJSON($el.attr('data-json'));
43                    var result = null;
44
45                    if (value) {
46                        if (multiple) {
47                            result = [];
48
49                            for (var k in value) {
50                                var v = value[k];
51                                result.push({id: v[0], text: v[1]});
52                            }
53
54                            callback(result);
55                        } else {
56                            result = {id: value[0], text: value[1]};
57                        }
58                    }
59
60                    callback(result);
61                }
62            };
63
64            if ($el.attr('data-allow-blank'))
65                opts['allowClear'] = true;
66
67            opts['multiple'] = multiple;
68
69            $el.select2(opts);
70        }
71
72        /**
73         * Process data-role attribute for the given input element. Feel free to override
74         *
75         * @param {Selector} $el jQuery selector
76         * @param {String} name data-role value
77         */
78        this.applyStyle = function($el, name) {
79            // Process converters first
80            for (var conv in fieldConverters) {
81                var fieldConv = fieldConverters[conv];
82
83                if (fieldConv($el, name))
84                    return true;
85            }
86
87            switch (name) {
88                case 'select2':
89                    var opts = {
90                        width: 'resolve'
91                    };
92
93                    if ($el.attr('data-allow-blank'))
94                        opts['allowClear'] = true;
95
96                    if ($el.attr('data-tags')) {
97                        $.extend(opts, {
98                            tokenSeparators: [','],
99                            tags: []
100                        });
101                    }
102
103                    $el.select2(opts);
104                    return true;
105                case 'select2-ajax':
106                    processAjaxWidget($el, name);
107                    return true;
108                case 'datepicker':
109                    $el.datetimepicker({
110                        minView: 'month'
111                    });
112                    return true;
113
114                case 'timepicker':
115                    $el.datetimepicker({
116                        startView: 'day',
117                        maxView: 'day',
118                        formatViewType: 'time'
119                    });
120                    return true;
121            }
122        };
123
124        /**
125         * Add inline form field
126         *
127         * @method addInlineField
128         * @param {Node} el Button DOM node
129         * @param {String} elID Form ID
130         */
131        this.addInlineField = function(el, elID) {
132            // Get current inline field
133            var $el = $(el).closest('.inline-field');
134            // Figure out new field ID
135            var id = elID;
136
137            var $parentForm = $el.parent().closest('.inline-field');
138
139            if ($parentForm.length > 0) {
140                id = $parentForm.attr('id') + '-' + elID;
141            }
142
143            var $fieldList = $el.find('> .inline-field-list');
144            var $lastField = $fieldList.children('.inline-field').last();
145
146            var prefix = id + '-0';
147            if ($lastField.length > 0) {
148                var parts = $lastField.attr('id').split('-');
149                idx = parseInt(parts[parts.length - 1], 10) + 1;
150                prefix = id + '-' + idx;
151            }
152
153            // Get tempalate
154            var $template = $($el.find('> .inline-field-template').text());
155
156            // Set form ID
157            $template.attr('id', prefix);
158
159            // Fix form IDs
160            $('[name]', $template).each(function(e) {
161                var me = $(this);
162
163                var id = me.attr('id');
164                var name = me.attr('name');
165
166                id = prefix + (id !== '' ? '-' + id : '');
167                name = prefix + (name !== '' ? '-' + name : '');
168
169                me.attr('id', id);
170                me.attr('name', name);
171            });
172
173            $template.appendTo($fieldList);
174
175            // Select first field
176            $('input:first', $template).focus();
177
178            // Apply styles
179            this.applyGlobalStyles($template);
180        };
181
182        /**
183         * Apply global input styles.
184         *
185         * @method applyGlobalStyles
186         * @param {Selector} jQuery element
187         */
188        this.applyGlobalStyles = function(parent) {
189            var self = this;
190
191            $('[data-role]', parent).each(function() {
192                var $el = $(this);
193                self.applyStyle($el, $el.attr('data-role'));
194            });
195        };
196
197        /**
198         * Add a field converter for customizing styles
199         *
200         * @method addFieldConverter
201         * @param {converter} function($el, name)
202         */
203        this.addFieldConverter = function(converter) {
204            fieldConverters.push(converter);
205        };
206    };
207
208    // Add on event handler
209    $('body').on('click', '.inline-remove-field' , function(e) {
210        e.preventDefault();
211
212        var form = $(this).closest('.inline-field');
213        form.remove();
214    });
215
216    // Expose faForm globally
217    var faForm = window.faForm = new TalentsquareForm();
218
219    // Apply global styles for current page after page loaded
220    $(function() {
221        faForm.applyGlobalStyles(document);
222    });
223})();