elements.spinner.js
3.44 KB
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
/**
<b>Spinner</b>. A wrapper for FuelUX spinner element.
It's just a wrapper so you still need to include FuelUX spinner script first.
*/
(function($ , undefined) {
//a wrapper for fuelux spinner
function Ace_Spinner(element , _options) {
var attrib_values = ace.helper.getAttrSettings(element, $.fn.ace_spinner.defaults);
var options = $.extend({}, $.fn.ace_spinner.defaults, _options, attrib_values);
var max = options.max
max = (''+max).length
var width = parseInt(Math.max((max * 20 + 40) , 90))
var $element = $(element);
var btn_class = 'btn-sm';//default
var sizing = 2;
if($element.hasClass('input-sm')) {
btn_class = 'btn-xs';
sizing = 1;
}
else if($element.hasClass('input-lg')) {
btn_class = 'btn-lg';
sizing = 3;
}
if(sizing == 2) width += 25;
else if(sizing == 3) width += 50;
$element.addClass('spinbox-input form-control text-center').wrap('<div class="ace-spinner middle">')
var $parent_div = $element.closest('.ace-spinner').spinbox(options).wrapInner("<div class='input-group'></div>")
var $spinner = $parent_div.data('fu.spinbox');
if(options.on_sides)
{
$element
.before('<div class="spinbox-buttons input-group-btn">\
<button type="button" class="btn spinbox-down '+btn_class+' '+options.btn_down_class+'">\
<i class="icon-only '+ ace.vars['icon'] + options.icon_down+'"></i>\
</button>\
</div>')
.after('<div class="spinbox-buttons input-group-btn">\
<button type="button" class="btn spinbox-up '+btn_class+' '+options.btn_up_class+'">\
<i class="icon-only '+ ace.vars['icon'] + options.icon_up+'"></i>\
</button>\
</div>');
$parent_div.addClass('touch-spinner')
$parent_div.css('width' , width+'px')
}
else {
$element
.after('<div class="spinbox-buttons input-group-btn">\
<button type="button" class="btn spinbox-up '+btn_class+' '+options.btn_up_class+'">\
<i class="icon-only '+ ace.vars['icon'] + options.icon_up+'"></i>\
</button>\
<button type="button" class="btn spinbox-down '+btn_class+' '+options.btn_down_class+'">\
<i class="icon-only '+ ace.vars['icon'] + options.icon_down+'"></i>\
</button>\
</div>')
if(ace.vars['touch'] || options.touch_spinner) {
$parent_div.addClass('touch-spinner')
$parent_div.css('width' , width+'px')
}
else {
$element.next().addClass('btn-group-vertical');
$parent_div.css('width' , width+'px')
}
}
$parent_div.on('changed', function(){
$element.trigger('change')//trigger the input's change event
});
this._call = function(name, arg) {
$spinner[name](arg);
}
}
$.fn.ace_spinner = function(option, value) {
var retval;
var $set = this.each(function() {
var $this = $(this);
var data = $this.data('ace_spinner');
var options = typeof option === 'object' && option;
if (!data) {
options = $.extend({}, $.fn.ace_spinner.defaults, option);
$this.data('ace_spinner', (data = new Ace_Spinner(this, options)));
}
if (typeof option === 'string') retval = data._call(option, value);
});
return (retval === undefined) ? $set : retval;
}
$.fn.ace_spinner.defaults = {
'icon_up' : 'fa fa-chevron-up',
'icon_down': 'fa fa-chevron-down',
'on_sides': false,
'btn_up_class': '',
'btn_down_class' : '',
'max' : 999,
'touch_spinner': false
}
})(window.jQuery);