-
Notifications
You must be signed in to change notification settings - Fork 0
/
splitify.js
113 lines (103 loc) · 3.86 KB
/
splitify.js
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
(function() {
var $, Splitify;
$ = jQuery;
$.fn.extend({
splitify: function(options) {
return $(this).each(function(input) {
return new Splitify(this, options);
});
}
});
Splitify = (function() {
function Splitify(source,options) {
this.source = $(source);
this.options = options;
this.mergeOptions();
this.initializeDom();
this.initializeEvents();
}
Splitify.prototype.mergeOptions = function() {
var defaults = {
input: {text:'',classes:''},
label: {text:'Item',classes:''},
row: {type:'div',classes:''},
button: {text:'Add a row',classes:''},
validation: {regexp:false,callback:function(){}},
separator: ',',
allow_blank: false
};
this.options = $.extend(defaults, this.options);
};
Splitify.prototype.initializeDom = function() {
this.namespace = 'splitify_container_'+$('.splitify_container').length;
this.source.after('<div id="'+this.namespace+'" class="splitify_container"></div>');
this.context = $('#'+this.namespace);
this.initial_value = this.source.val();
this.source.hide();
var html = '';
var _this = this;
$(this.initial_value.split(this.options.separator)).each(function(index){
html += _this.createLineHTML(index,this);
});
if(typeof this.options.button == "object")
html += '<input type="button" value="'+this.options.button.text+'" class="'+this.options.button.classes+' splitify_add" />';
this.context.html(html);
};
Splitify.prototype.createLineHTML = function(index,value) {
var html = '<'+this.options.row.type+' class="'+this.options.row.classes+'">';
if(typeof this.options.label == "object")
html += '<label for="'+this.namespace+'_'+index+'" class="'+this.options.label.classes+'">'+this.options.label.text+'</label>';
html += '<input id="'+this.namespace+'_'+index+'" type="text" value="'+value+'" class="'+this.options.input.classes+' splitified" />';
html += '</'+this.options.row.type+'>';
return html;
};
Splitify.prototype.initializeEvents = function() {
var _this = this;
this.context.find('.splitified:last').live('keydown',function(e){
return _this.addRowAfter($(this),e);
});
this.context.find('.splitify_add').click(function(){
_this.addRow();
});
this.context.parents('form').bind('submit',function(){
return _this.replaceData();
});
};
Splitify.prototype.addRowAfter = function(input,e) {
if(e.which!='9') return true; // press Tab
if(e.shiftKey) return true; // try to go to previous input, don't change this behavior
if($.trim(input.val())==this.options.input.text){ e.preventDefault(); return false; } // don't create another one if still empty
this.addRow(this.context.find('.splitified').index(input)+1);
return false;
};
Splitify.prototype.addRow = function(index) {
this.context.find('.splitified:last').after(this.createLineHTML(index,this.options.input.text));
this.context.find('.splitified:last').focus().select();
};
Splitify.prototype.replaceData = function(index) {
var _this = this;
var content = [];
var must_validate = typeof _this.options.validation == "object" &&
typeof _this.options.validation.regexp == "object"
typeof _this.options.validation.callback == "function"
var is_valid = true;
this.context.find('.splitified').each(function(){
var must_be_saved = true;
var val = $(this).val();
if(must_validate){ // check with given Regexp
if(!_this.options.validation.regexp.test(val)){
is_valid = false;
_this.options.validation.callback(this);
return true; // continue
}
}else{
if(!_this.options.allow_blank && $.trim(val)=='') must_be_saved = false;
}
if(is_valid&&must_be_saved) content.push(val);
});
if(is_valid) this.source.val(content.join(this.options.separator));
return is_valid;
};
return Splitify;
})();
}).call(this);