1 |
2
|
Manuela
|
// Native Javascript for Bootstrap 3 | Button
|
2 |
|
|
// by dnp_theme
|
3 |
|
|
|
4 |
|
|
(function(factory){
|
5 |
|
|
|
6 |
|
|
// CommonJS/RequireJS and "native" compatibility
|
7 |
|
|
if(typeof module !== "undefined" && typeof exports == "object") {
|
8 |
|
|
// A commonJS/RequireJS environment
|
9 |
|
|
if(typeof window != "undefined") {
|
10 |
|
|
// Window and document exist, so return the factory's return value.
|
11 |
|
|
module.exports = factory();
|
12 |
|
|
} else {
|
13 |
|
|
// Let the user give the factory a Window and Document.
|
14 |
|
|
module.exports = factory;
|
15 |
|
|
}
|
16 |
|
|
} else {
|
17 |
|
|
// Assume a traditional browser.
|
18 |
|
|
window.Button = factory();
|
19 |
|
|
}
|
20 |
|
|
|
21 |
|
|
})(function(){
|
22 |
|
|
|
23 |
|
|
// BUTTON DEFINITION
|
24 |
|
|
// ===================
|
25 |
|
|
var Button = function( element, option ) {
|
26 |
|
|
this.btn = typeof element === 'object' ? element : document.querySelector(element);
|
27 |
|
|
this.option = typeof option === 'string' ? option : null;
|
28 |
|
|
|
29 |
|
|
this.init();
|
30 |
|
|
};
|
31 |
|
|
|
32 |
|
|
// BUTTON METHODS
|
33 |
|
|
// ================
|
34 |
|
|
Button.prototype = {
|
35 |
|
|
|
36 |
|
|
init : function() {
|
37 |
|
|
var self = this;
|
38 |
|
|
this.actions();
|
39 |
|
|
|
40 |
|
|
if ( /btn/.test(this.btn.className) ) {
|
41 |
|
|
if ( this.option && this.option !== 'reset' ) {
|
42 |
|
|
|
43 |
|
|
this.state = this.btn.getAttribute('data-'+this.option+'-text') || null;
|
44 |
|
|
|
45 |
|
|
!this.btn.getAttribute('data-original-text') && this.btn.setAttribute('data-original-text',self.btn.innerHTML.replace(/^\s+|\s+$/g, ''));
|
46 |
|
|
this.setState();
|
47 |
|
|
|
48 |
|
|
} else if ( this.option === 'reset' ) {
|
49 |
|
|
this.reset();
|
50 |
|
|
}
|
51 |
|
|
}
|
52 |
|
|
|
53 |
|
|
if ( /btn-group/.test(this.btn.className) ) {
|
54 |
|
|
this.btn.addEventListener('click', this.toggle, false);
|
55 |
|
|
}
|
56 |
|
|
},
|
57 |
|
|
|
58 |
|
|
actions : function() {
|
59 |
|
|
var self = this,
|
60 |
|
|
changeEvent = (('CustomEvent' in window) && window.dispatchEvent)
|
61 |
|
|
? new CustomEvent('bs.button.change') : null; // The custom event that will be triggered on demand
|
62 |
|
|
|
63 |
|
|
// assign event to a trigger function
|
64 |
|
|
function triggerChange(t) { if (changeEvent) { t.dispatchEvent(changeEvent); } }
|
65 |
|
|
|
66 |
|
|
this.setState = function() {
|
67 |
|
|
if ( this.option === 'loading' ) {
|
68 |
|
|
this.addClass(this.btn,'disabled');
|
69 |
|
|
this.btn.setAttribute('disabled','disabled');
|
70 |
|
|
}
|
71 |
|
|
this.btn.innerHTML = this.state;
|
72 |
|
|
},
|
73 |
|
|
|
74 |
|
|
this.reset = function() {
|
75 |
|
|
if ( /disabled/.test(self.btn.className) || self.btn.getAttribute('disabled') === 'disabled' ) {
|
76 |
|
|
this.removeClass(this.btn,'disabled');
|
77 |
|
|
self.btn.removeAttribute('disabled');
|
78 |
|
|
}
|
79 |
|
|
self.btn.innerHTML = self.btn.getAttribute('data-original-text');
|
80 |
|
|
},
|
81 |
|
|
|
82 |
|
|
this.toggle = function(e) {
|
83 |
|
|
var parent = e.target.parentNode,
|
84 |
|
|
label = e.target.tagName === 'LABEL' ? e.target : parent.tagName === 'LABEL' ? parent : null; // the .btn label
|
85 |
|
|
|
86 |
|
|
if ( !label ) return; //react if a label or its immediate child is clicked
|
87 |
|
|
|
88 |
|
|
var target = this, //e.currentTarget || e.srcElement; // the button group, the target of the handler function
|
89 |
|
|
labels = target.querySelectorAll('.btn'), ll = labels.length, i = 0, // all the button group buttons
|
90 |
|
|
input = label.getElementsByTagName('INPUT')[0];
|
91 |
|
|
|
92 |
|
|
if ( !input ) return; //return if no input found
|
93 |
|
|
|
94 |
|
|
//manage the dom manipulation
|
95 |
|
|
if ( input.type === 'checkbox' ) { //checkboxes
|
96 |
|
|
if ( !input.checked ) {
|
97 |
|
|
self.addClass(label,'active');
|
98 |
|
|
input.getAttribute('checked');
|
99 |
|
|
input.setAttribute('checked','checked');
|
100 |
|
|
input.checked = true;
|
101 |
|
|
} else {
|
102 |
|
|
self.removeClass(label,'active');
|
103 |
|
|
input.getAttribute('checked');
|
104 |
|
|
input.removeAttribute('checked');
|
105 |
|
|
input.checked = false;
|
106 |
|
|
}
|
107 |
|
|
triggerChange(input); //trigger the change for the input
|
108 |
|
|
triggerChange(self.btn); //trigger the change for the btn-group
|
109 |
|
|
}
|
110 |
|
|
|
111 |
|
|
if ( input.type === 'radio' ) { // radio buttons
|
112 |
|
|
if ( !input.checked ) { // don't trigger if already active
|
113 |
|
|
self.addClass(label,'active');
|
114 |
|
|
input.setAttribute('checked','checked');
|
115 |
|
|
input.checked = true;
|
116 |
|
|
triggerChange(self.btn);
|
117 |
|
|
triggerChange(input); //trigger the change
|
118 |
|
|
|
119 |
|
|
for (i;i<ll;i++) {
|
120 |
|
|
var l = labels[i];
|
121 |
|
|
if ( l !== label && /active/.test(l.className) ) {
|
122 |
|
|
var inp = l.getElementsByTagName('INPUT')[0];
|
123 |
|
|
self.removeClass(l,'active');
|
124 |
|
|
inp.removeAttribute('checked');
|
125 |
|
|
inp.checked = false;
|
126 |
|
|
triggerChange(inp); // trigger the change
|
127 |
|
|
}
|
128 |
|
|
}
|
129 |
|
|
}
|
130 |
|
|
}
|
131 |
|
|
},
|
132 |
|
|
this.addClass = function(el,c) { // where modern browsers fail, use classList
|
133 |
|
|
if (el.classList) { el.classList.add(c); } else { el.className += ' '+c; el.offsetWidth; }
|
134 |
|
|
},
|
135 |
|
|
this.removeClass = function(el,c) {
|
136 |
|
|
if (el.classList) { el.classList.remove(c); } else { el.className = el.className.replace(c,'').replace(/^\s+|\s+$/g,''); el.offsetWidth; }
|
137 |
|
|
}
|
138 |
|
|
}
|
139 |
|
|
}
|
140 |
|
|
|
141 |
|
|
// BUTTON DATA API
|
142 |
|
|
// =================
|
143 |
|
|
var Buttons = document.querySelectorAll('[data-toggle=button]'), i = 0, btl = Buttons.length;
|
144 |
|
|
for (i;i<btl;i++) {
|
145 |
|
|
new Button(Buttons[i]);
|
146 |
|
|
}
|
147 |
|
|
|
148 |
|
|
var ButtonGroups = document.querySelectorAll('[data-toggle=buttons]'), j = 0, bgl = ButtonGroups.length;
|
149 |
|
|
for (j;j<bgl;j++) {
|
150 |
|
|
new Button(ButtonGroups[j]);
|
151 |
|
|
}
|
152 |
|
|
|
153 |
|
|
return Button;
|
154 |
|
|
|
155 |
|
|
});
|