293 lines
10 KiB
JavaScript
293 lines
10 KiB
JavaScript
// Native Javascript for Bootstrap 3 v1.1.0 | © dnp_theme | MIT-License
|
|
(function(root, factory) {
|
|
if (typeof define === 'function' && define.amd) {
|
|
// AMD support:
|
|
define([], factory);
|
|
} else if (typeof module === 'object' && module.exports) {
|
|
// CommonJS-like:
|
|
module.exports = factory();
|
|
} else {
|
|
// Browser globals (root is window)
|
|
var bsn = factory();
|
|
root.Affix = bsn.Affix;
|
|
root.Alert = bsn.Alert;
|
|
root.Button = bsn.Button;
|
|
root.Carousel = bsn.Carousel;
|
|
root.Collapse = bsn.Collapse;
|
|
root.Dropdown = bsn.Dropdown;
|
|
root.Modal = bsn.Modal;
|
|
root.Popover = bsn.Popover;
|
|
root.ScrollSpy = bsn.ScrollSpy;
|
|
root.Tab = bsn.Tab;
|
|
root.Tooltip = bsn.Tooltip;
|
|
}
|
|
}(this, function() {
|
|
// Native Javascript for Bootstrap 3 | Internal Utility Functions
|
|
// by dnp_theme
|
|
var addClass = function(el, c) { // where modern browsers fail, use classList
|
|
if (el.classList) {
|
|
el.classList.add(c);
|
|
} else {
|
|
el.className += ' ' + c;
|
|
el.offsetWidth;
|
|
}
|
|
},
|
|
removeClass = function(el, c) {
|
|
if (el.classList) {
|
|
el.classList.remove(c);
|
|
} else {
|
|
el.className = el.className.replace(c, '').replace(/^\s+|\s+$/g, '');
|
|
}
|
|
},
|
|
isIE = (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) ? parseFloat(RegExp.$1) : false,
|
|
getClosest = function(el, s) { //el is the element and s the selector of the closest item to find
|
|
// source http://gomakethings.com/climbing-up-and-down-the-dom-tree-with-vanilla-javascript/
|
|
var f = s.charAt(0);
|
|
for (; el && el !== document; el = el.parentNode) { // Get closest match
|
|
if (f === '.') { // If selector is a class
|
|
if (document.querySelector(s) !== undefined) {
|
|
return el;
|
|
}
|
|
}
|
|
if (f === '#') { // If selector is an ID
|
|
if (el.id === s.substr(1)) {
|
|
return el;
|
|
}
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
|
|
|
|
// tooltip / popover stuff
|
|
isElementInViewport = function(t) { // check if this.tooltip is in viewport
|
|
var r = t.getBoundingClientRect();
|
|
return (
|
|
r.top >= 0 && r.left >= 0 && r.bottom <= (window.innerHeight || document.documentElement.clientHeight) && r.right <= (window.innerWidth || document.documentElement.clientWidth))
|
|
},
|
|
getScroll = function() { // also Affix and scrollSpy uses it
|
|
return {
|
|
y: window.pageYOffset || document.documentElement.scrollTop,
|
|
x: window.pageXOffset || document.documentElement.scrollLeft
|
|
}
|
|
},
|
|
mouseHover = ('onmouseleave' in document) ? ['mouseenter', 'mouseleave'] : ['mouseover', 'mouseout'],
|
|
tipPositions = /\b(top|bottom|left|top)+/;
|
|
|
|
|
|
// Native Javascript for Bootstrap 3 | Collapse
|
|
// by dnp_theme
|
|
// COLLAPSE DEFINITION
|
|
// ===================
|
|
var Collapse = function(element, options) {
|
|
options = options || {};
|
|
|
|
this.btn = typeof element === 'object' ? element : document.querySelector(element);
|
|
this.accordion = null;
|
|
this.collapse = null;
|
|
this.duration = 300; // default collapse transition duration
|
|
this.options = {};
|
|
this.options.duration = (isIE && isIE < 10) ? 0 : (options.duration || this.duration);
|
|
var self = this;
|
|
var getOuterHeight = function(el) {
|
|
var s = el && (el.currentStyle || window.getComputedStyle(el)),
|
|
// the getComputedStyle polyfill would do this for us, but we want to make sure it does
|
|
btp = /px/.test(s.borderTopWidth) ? Math.round(s.borderTopWidth.replace('px', '')) : 0,
|
|
mtp = /px/.test(s.marginTop) ? Math.round(s.marginTop.replace('px', '')) : 0,
|
|
mbp = /px/.test(s.marginBottom) ? Math.round(s.marginBottom.replace('px', '')) : 0,
|
|
mte = /em/.test(s.marginTop) ? Math.round(s.marginTop.replace('em', '') * parseInt(s.fontSize)) : 0,
|
|
mbe = /em/.test(s.marginBottom) ? Math.round(s.marginBottom.replace('em', '') * parseInt(s.fontSize)) : 0;
|
|
return el.clientHeight + parseInt(btp) + parseInt(mtp) + parseInt(mbp) + parseInt(mte) + parseInt(mbe); //we need an accurate margin value
|
|
};
|
|
|
|
this.toggle = function(e) {
|
|
e.preventDefault();
|
|
|
|
if (!/\bin/.test(self.collapse.className)) {
|
|
self.open();
|
|
} else {
|
|
self.close();
|
|
}
|
|
};
|
|
this.close = function() {
|
|
this._close(this.collapse);
|
|
addClass(this.btn, 'collapsed');
|
|
};
|
|
this.open = function() {
|
|
this._open(this.collapse);
|
|
removeClass(this.btn, 'collapsed');
|
|
|
|
if (this.accordion !== null) {
|
|
var active = this.accordion.querySelectorAll('.collapse.in'),
|
|
al = active.length,
|
|
i = 0;
|
|
for (i; i < al; i++) {
|
|
if (active[i] !== this.collapse) this._close(active[i]);
|
|
}
|
|
}
|
|
};
|
|
this._open = function(c) {
|
|
this.removeEvent();
|
|
addClass(c, 'in');
|
|
c.setAttribute('aria-expanded', 'true');
|
|
addClass(c, 'collapsing');
|
|
setTimeout(function() {
|
|
c.style.height = self.getMaxHeight(c) + 'px'
|
|
c.style.overflowY = 'hidden';
|
|
}, 0);
|
|
setTimeout(function() {
|
|
c.style.height = '';
|
|
c.style.overflowY = '';
|
|
removeClass(c, 'collapsing');
|
|
self.addEvent();
|
|
}, this.options.duration);
|
|
};
|
|
this._close = function(c) {
|
|
this.removeEvent();
|
|
c.setAttribute('aria-expanded', 'false');
|
|
c.style.height = this.getMaxHeight(c) + 'px'
|
|
setTimeout(function() {
|
|
c.style.height = '0px';
|
|
c.style.overflowY = 'hidden';
|
|
addClass(c, 'collapsing');
|
|
}, 0);
|
|
|
|
setTimeout(function() {
|
|
removeClass(c, 'collapsing');
|
|
removeClass(c, 'in');
|
|
c.style.overflowY = '';
|
|
c.style.height = '';
|
|
self.addEvent();
|
|
}, this.options.duration);
|
|
};
|
|
this.getMaxHeight = function(l) { // get collapse trueHeight and border
|
|
var h = 0;
|
|
for (var k = 0, ll = l.children.length; k < ll; k++) {
|
|
h += getOuterHeight(l.children[k]);
|
|
}
|
|
return h;
|
|
};
|
|
this.removeEvent = function() {
|
|
this.btn.removeEventListener('click', this.toggle, false);
|
|
};
|
|
this.addEvent = function() {
|
|
this.btn.addEventListener('click', this.toggle, false);
|
|
};
|
|
this.getTarget = function() {
|
|
var t = this.btn,
|
|
h = t.href && t.getAttribute('href').replace('#', ''),
|
|
d = t.getAttribute('data-target') && (t.getAttribute('data-target')),
|
|
id = h || (d && /#/.test(d)) && d.replace('#', ''),
|
|
cl = (d && d.charAt(0) === '.') && d,
|
|
//the navbar collapse trigger targets a class
|
|
c = id && document.getElementById(id) || cl && document.querySelector(cl);
|
|
return c;
|
|
};
|
|
|
|
// init
|
|
this.addEvent();
|
|
this.collapse = this.getTarget();
|
|
this.accordion = this.btn.getAttribute('data-parent') && getClosest(this.btn, this.btn.getAttribute('data-parent'));
|
|
};
|
|
|
|
// COLLAPSE DATA API
|
|
// =================
|
|
var Collapses = document.querySelectorAll('[data-toggle="collapse"]');
|
|
for (var o = 0, cll = Collapses.length; o < cll; o++) {
|
|
var collapse = Collapses[o],
|
|
options = {};
|
|
options.duration = collapse.getAttribute('data-duration');
|
|
new Collapse(collapse, options);
|
|
}
|
|
|
|
// Native Javascript for Bootstrap 3 | Tab
|
|
// by dnp_theme
|
|
|
|
// TAB DEFINITION
|
|
// ===================
|
|
var Tab = function( element,options ) {
|
|
options = options || {};
|
|
this.tab = typeof element === 'object' ? element : document.querySelector(element);
|
|
this.tabs = this.tab.parentNode.parentNode;
|
|
this.dropdown = this.tabs.querySelector('.dropdown');
|
|
if ( /\bdropdown-menu/.test(this.tabs.className) ) {
|
|
this.dropdown = this.tabs.parentNode;
|
|
this.tabs = this.tabs.parentNode.parentNode;
|
|
}
|
|
this.options = options;
|
|
|
|
// default tab transition duration
|
|
this.duration = 150;
|
|
this.options.duration = (isIE && isIE < 10) ? 0 : (options.duration || this.duration);
|
|
|
|
var self = this;
|
|
|
|
this.handle = function(e) {
|
|
e = e || window.e; e.preventDefault();
|
|
var next = e.target; //the tab we clicked is now the next tab
|
|
var nextContent = document.getElementById(next.getAttribute('href').replace('#','')); //this is the actual object, the next tab content to activate
|
|
|
|
// get current active tab and content
|
|
var activeTab = self.getActiveTab();
|
|
var activeContent = self.getActiveContent();
|
|
|
|
if ( !/\bactive/.test(next.parentNode.className) ) {
|
|
// toggle "active" class name
|
|
removeClass(activeTab,'active');
|
|
addClass(next.parentNode,'active');
|
|
|
|
// handle dropdown menu "active" class name
|
|
if ( self.dropdown ) {
|
|
if ( !(/\bdropdown-menu/.test(self.tab.parentNode.parentNode.className)) ) {
|
|
if (/\bactive/.test(self.dropdown.className)) removeClass(self.dropdown,'active');
|
|
} else {
|
|
if (!/\bactive/.test(self.dropdown.className)) addClass(self.dropdown,'active');
|
|
}
|
|
}
|
|
|
|
//1. hide current active content first
|
|
removeClass(activeContent,'in');
|
|
|
|
setTimeout(function() {
|
|
//2. toggle current active content from view
|
|
removeClass(activeContent,'active');
|
|
addClass(nextContent,'active');
|
|
}, self.options.duration);
|
|
setTimeout(function() {
|
|
//3. show next active content
|
|
addClass(nextContent,'in');
|
|
}, self.options.duration*2);
|
|
}
|
|
};
|
|
this.getActiveTab = function() {
|
|
var activeTabs = this.tabs.querySelectorAll('.active');
|
|
if ( activeTabs.length === 1 && !/\bdropdown/.test(activeTabs[0].className) ) {
|
|
return activeTabs[0]
|
|
} else if ( activeTabs.length > 1 ) {
|
|
return activeTabs[activeTabs.length-1]
|
|
}
|
|
};
|
|
this.getActiveContent = function() {
|
|
var active = this.getActiveTab().getElementsByTagName('A')[0].getAttribute('href').replace('#','');
|
|
return active && document.getElementById(active)
|
|
};
|
|
|
|
// init
|
|
this.tab.addEventListener('click', this.handle, false);
|
|
};
|
|
|
|
// TAB DATA API
|
|
// =================
|
|
var Tabs = document.querySelectorAll("[data-toggle='tab'], [data-toggle='pill']");
|
|
for ( var tb = 0, tbl = Tabs.length; tb<tbl; tb++ ) {
|
|
var tab = Tabs[tb], options = {};
|
|
options.duration = tab.getAttribute('data-duration') && tab.getAttribute('data-duration') || false;
|
|
new Tab(tab,options);
|
|
}
|
|
|
|
return {
|
|
Tab: Tab,
|
|
Collapse: Collapse
|
|
};
|
|
}));
|