-
Notifications
You must be signed in to change notification settings - Fork 177
/
button-native.js
125 lines (107 loc) · 4.56 KB
/
button-native.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
114
115
116
117
118
119
120
121
122
123
124
/* Native Javascript for Bootstrap 3 | Button
---------------------------------------------*/
// BUTTON DEFINITION
// ===================
var Button = function( element, option ) {
// initialization element
element = queryElement(element);
// set option
option = option || null;
// constant
var toggled = false, // toggled makes sure to prevent triggering twice the change.bs.button events
// strings
component = 'button',
checked = 'checked',
reset = 'reset',
LABEL = 'LABEL',
INPUT = 'INPUT',
// private methods
setState = function() {
if ( !! option && option !== reset ) {
if ( option === loading ) {
addClass(element,disabled);
element[setAttribute](disabled,disabled);
}
element[setAttribute](dataOriginalText, element.innerHTML.replace(/^\s+|\s+$/g, '')); // trim the text
element.innerHTML = element[getAttribute]('data-'+option+'-text');
}
},
resetState = function() {
if (element[getAttribute](dataOriginalText)) {
if ( hasClass(element,disabled) || element[getAttribute](disabled) === disabled ) {
removeClass(element,disabled);
element.removeAttribute(disabled);
}
element.innerHTML = element[getAttribute](dataOriginalText);
}
},
toggle = function(e) {
var label = e[target].tagName === LABEL ? e[target] : e[target][parentNode].tagName === LABEL ? e[target][parentNode] : null; // the .btn label
if ( !label ) return; //react if a label or its immediate child is clicked
var eventTarget = this, // the button group, the target of the handler function
labels = getElementsByClassName(eventTarget,'btn'), // all the button group buttons
input = label[getElementsByTagName](INPUT)[0];
if ( !input ) return; //return if no input found
// manage the dom manipulation
if ( input.type === 'checkbox' ) { //checkboxes
if ( !input[checked] ) {
addClass(label,active);
input[getAttribute](checked);
input[setAttribute](checked,checked);
input[checked] = true;
} else {
removeClass(label,active);
input[getAttribute](checked);
input.removeAttribute(checked);
input[checked] = false;
}
if (!toggled) { // prevent triggering the event twice
toggled = true;
bootstrapCustomEvent.call(input, changeEvent, component); //trigger the change for the input
bootstrapCustomEvent.call(element, changeEvent, component); //trigger the change for the btn-group
}
}
if ( input.type === 'radio' && !toggled ) { // radio buttons
if ( !input[checked] ) { // don't trigger if already active
addClass(label,active);
input[setAttribute](checked,checked);
input[checked] = true;
bootstrapCustomEvent.call(input, changeEvent, component); //trigger the change for the input
bootstrapCustomEvent.call(element, changeEvent, component); //trigger the change for the btn-group
toggled = true;
for (var i = 0, ll = labels[length]; i<ll; i++) {
var otherLabel = labels[i], otherInput = otherLabel[getElementsByTagName](INPUT)[0];
if ( otherLabel !== label && hasClass(otherLabel,active) ) {
removeClass(otherLabel,active);
otherInput.removeAttribute(checked);
otherInput[checked] = false;
bootstrapCustomEvent.call(otherInput, changeEvent, component); // trigger the change
}
}
}
}
setTimeout( function() { toggled = false; }, 50 );
};
// init
if ( hasClass(element,'btn') ) { // when Button text is used we execute it as an instance method
if ( option !== null ) {
if ( option !== reset ) { setState(); }
else { resetState(); }
}
}
if ( hasClass(element,'btn-group') ) {
if ( !( stringButton in element ) ) { // prevent adding event handlers twice
on( element, clickEvent, toggle );
}
// activate items on load
var labelsToACtivate = getElementsByClassName(element, 'btn'), lbll = labelsToACtivate[length];
for (var i=0; i<lbll; i++) {
!hasClass(labelsToACtivate[i],active) && queryElement('input:checked',labelsToACtivate[i])
&& addClass(labelsToACtivate[i],active);
}
element[stringButton] = this;
}
};
// BUTTON DATA API
// =================
initializeDataAPI( stringButton, Button, doc[querySelectorAll]('['+dataToggle+'="buttons"]') );