src/scripts/utils/dom.js
'use strict';
var utilities = require('./utilityFunctions');
var dom = {};
dom.isVisible = function isVisible(el) {
var style = window.getComputedStyle(el);
return style.visibility !== 'hidden';
};
dom.isHidden = function isHidden(el) {
var style = window.getComputedStyle(el);
return style.display === 'none';
};
dom.isShown = function isShown(el) {
return !dom.isHidden(el);
};
dom.hide = function hide(el) {
el.__prev_style_display_ = el.style.display;
el.style.display = 'none';
};
dom.show = function show(el) {
if (dom.isHidden(el)) {
el.style.display = el.__prev_style_display_;
}
el.__prev_style_display_ = undefined;
};
dom.hasClass = function hasClass(el, cssClass) {
var classes, i, len;
if (utilities.isNotEmptyString(cssClass)) {
if (el.classList) {
return el.classList.contains(cssClass);
}
classes = utilities.isString(el.getAttribute('class')) ? el.getAttribute('class').split(/\s+/) : [];
cssClass = (cssClass || '');
for (i = 0, len = classes.length; i < len; i += 1) {
if (classes[i] === cssClass) {
return true;
}
}
}
return false;
};
dom.addClass = function (el, cssClass) {
var classes;
if (utilities.isNotEmptyString(cssClass)) {
if (el.classList) {
return el.classList.add(cssClass);
}
classes = utilities.isString(el.getAttribute('class')) ? el.getAttribute('class').split(/\s+/) : [];
if (utilities.isString(cssClass) && utilities.isNotEmptyString(cssClass.replace(/\s+/, ''))) {
classes.push(cssClass);
el.setAttribute('class', classes.join(' '));
}
}
};
dom.removeClass = function (el, cssClass) {
var classes;
if (utilities.isNotEmptyString(cssClass)) {
if (el.classList) {
return el.classList.remove(cssClass);
}
classes = utilities.isString(el.getAttribute('class')) ? el.getAttribute('class').split(/\s+/) : [];
var newClasses = [];
var i, len;
if (utilities.isString(cssClass) && utilities.isNotEmptyString(cssClass.replace(/\s+/, ''))) {
for (i = 0, len = classes.length; i < len; i += 1) {
if (cssClass !== classes[i]) {
newClasses.push(classes[i]);
}
}
el.setAttribute('class', newClasses.join(' '));
}
}
};
dom.addEventListener = function addEventListener(el, type, handler) {
if(utilities.isArray(el)){
utilities.forEach(el, function(e) {
dom.addEventListener(e, type, handler);
});
return;
}
if(utilities.isArray(type)){
utilities.forEach(type, function(t) {
dom.addEventListener(el, t, handler);
});
return;
}
if (el.addEventListener) {
el.addEventListener(type, handler, false);
} else if (el.attachEvent) {
// WARNING!!! this is a very naive implementation !
// the event object that should be passed to the handler
// would not be there for IE8
// we should use "window.event" and then "event.srcElement"
// instead of "event.target"
el.attachEvent("on" + type, handler);
}
};
dom.removeEventListener = function removeEventListener(el, type, handler) {
if(utilities.isArray(el)){
utilities.forEach(el, function(e) {
dom.removeEventListener(e, type, handler);
});
return;
}
if(utilities.isArray(type)){
utilities.forEach(type, function(t) {
dom.removeEventListener(el, t, handler);
});
return;
}
if (el.removeEventListener) {
el.removeEventListener(type, handler, false);
} else if (el.detachEvent) {
el.detachEvent("on" + type, handler);
} else {
el["on" + type] = null;
}
};
dom.dispatchEvent = function dispatchEvent(el, event) {
if (el.dispatchEvent) {
el.dispatchEvent(event);
} else {
el.fireEvent("on" + event.eventType, event);
}
};
dom.isDescendant = function isDescendant(parent, child) {
var node = child.parentNode;
while (node !== null) {
if (node === parent) {
return true;
}
node = node.parentNode;
}
return false;
};
dom.getTextContent = function getTextContent(el){
return el.textContent || el.text;
};
dom.prependChild = function prependChild(parent, child) {
if(child.parentNode){
child.parentNode.removeChild(child);
}
return parent.insertBefore(child, parent.firstChild);
};
dom.remove = function removeNode(node){
if(node && node.parentNode){
node.parentNode.removeChild(node);
}
};
dom.isDomElement = function isDomElement(o) {
return o instanceof Element;
};
dom.click = function(el, handler) {
dom.addEventListener(el, 'click', handler);
};
dom.once = function(el, type, handler) {
function handlerWrap() {
handler.apply(null, arguments);
dom.removeEventListener(el, type, handlerWrap);
}
dom.addEventListener(el, type, handlerWrap);
};
//Note: there is no getBoundingClientRect on iPad so we need a fallback
dom.getDimension = function getDimension(element) {
var rect;
//On IE9 and below getBoundingClientRect does not work consistently
if(!utilities.isOldIE() && element.getBoundingClientRect) {
rect = element.getBoundingClientRect();
return {
width: rect.width,
height: rect.height
};
}
return {
width: element.offsetWidth,
height: element.offsetHeight
};
};
module.exports = dom;