import { isIE8, isIE9, isSafari } from '../browser';
import { hasCaptionProblem } from '../feature';
/**
* Get the parent of the specified node in the DOM tree.
*
* @param {HTMLElement} element Element from which traversing is started.
* @param {Number} [level=0] Traversing deep level.
* @return {HTMLElement|null}
*/
export function getParent(element) {
var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var iteration = -1;
var parent = null;
while (element != null) {
if (iteration === level) {
parent = element;
break;
}
if (element.host && element.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
element = element.host;
} else {
iteration++;
element = element.parentNode;
}
}
return parent;
}
/**
* Goes up the DOM tree (including given element) until it finds an element that matches the nodes or nodes name.
* This method goes up through web components.
*
* @param {HTMLElement} element Element from which traversing is started
* @param {Array} nodes Array of elements or Array of elements name
* @param {HTMLElement} [until]
* @returns {HTMLElement|null}
*/
export function closest(element, nodes, until) {
while (element != null && element !== until) {
if (element.nodeType === Node.ELEMENT_NODE && (nodes.indexOf(element.nodeName) > -1 || nodes.indexOf(element) > -1)) {
return element;
}
if (element.host && element.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
element = element.host;
} else {
element = element.parentNode;
}
}
return null;
}
/**
* Goes "down" the DOM tree (including given element) until it finds an element that matches the nodes or nodes name.
*
* @param {HTMLElement} element Element from which traversing is started
* @param {Array} nodes Array of elements or Array of elements name
* @param {HTMLElement} [until]
* @returns {HTMLElement|null}
*/
export function closestDown(element, nodes, until) {
var matched = [];
while (element) {
element = closest(element, nodes, until);
if (!element || until && !until.contains(element)) {
break;
}
matched.push(element);
if (element.host && element.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
element = element.host;
} else {
element = element.parentNode;
}
}
var length = matched.length;
return length ? matched[length - 1] : null;
}
/**
* Goes up the DOM tree and checks if element is child of another element.
*
* @param child Child element
* @param {Object|String} parent Parent element OR selector of the parent element.
* If string provided, function returns `true` for the first occurrence of element with that class.
* @returns {Boolean}
*/
export function isChildOf(child, parent) {
var node = child.parentNode;
var queriedParents = [];
if (typeof parent === 'string') {
queriedParents = Array.prototype.slice.call(document.querySelectorAll(parent), 0);
} else {
queriedParents.push(parent);
}
while (node != null) {
if (queriedParents.indexOf(node) > -1) {
return true;
}
node = node.parentNode;
}
return false;
}
/**
* Check if an element is part of `hot-table` web component.
*
* @param {Element} element
* @returns {Boolean}
*/
export function isChildOfWebComponentTable(element) {
var hotTableName = 'hot-table',
result = false,
parentNode;
parentNode = polymerWrap(element);
function isHotTable(element) {
return element.nodeType === Node.ELEMENT_NODE && element.nodeName === hotTableName.toUpperCase();
}
while (parentNode != null) {
if (isHotTable(parentNode)) {
result = true;
break;
} else if (parentNode.host && parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
result = isHotTable(parentNode.host);
if (result) {
break;
}
parentNode = parentNode.host;
}
parentNode = parentNode.parentNode;
}
return result;
}
/**
* Wrap element into polymer/webcomponent container if exists
*
* @param element
* @returns {*}
*/
export function polymerWrap(element) {
/* global Polymer */
return typeof Polymer !== 'undefined' && typeof wrap === 'function' ? wrap(element) : element;
}
/**
* Unwrap element from polymer/webcomponent container if exists
*
* @param element
* @returns {*}
*/
export function polymerUnwrap(element) {
/* global Polymer */
return typeof Polymer !== 'undefined' && typeof unwrap === 'function' ? unwrap(element) : element;
}
/**
* Counts index of element within its parent
* WARNING: for performance reasons, assumes there are only element nodes (no text nodes). This is true for Walkotnable
* Otherwise would need to check for nodeType or use previousElementSibling
*
* @see http://jsperf.com/sibling-index/10
* @param {Element} element
* @return {Number}
*/
export function index(element) {
var i = 0;
if (element.previousSibling) {
/* eslint-disable no-cond-assign */
while (element = element.previousSibling) {
++i;
}
}
return i;
}
/**
* Check if the provided overlay contains the provided element
*
* @param {String} overlay
* @param {HTMLElement} element
* @returns {boolean}
*/
export function overlayContainsElement(overlayType, element) {
var overlayElement = document.querySelector('.ht_clone_' + overlayType);
return overlayElement ? overlayElement.contains(element) : null;
}
var classListSupport = !!document.documentElement.classList;
var _hasClass, _addClass, _removeClass;
function filterEmptyClassNames(classNames) {
var len = 0,
result = [];
if (!classNames || !classNames.length) {
return result;
}
while (classNames[len]) {
result.push(classNames[len]);
len++;
}
return result;
}
if (classListSupport) {
var isSupportMultipleClassesArg = function () {
var element = document.createElement('div');
element.classList.add('test', 'test2');
return element.classList.contains('test2');
}();
_hasClass = function _hasClass(element, className) {
if (className === '') {
return false;
}
return element.classList.contains(className);
};
_addClass = function _addClass(element, className) {
var len = 0;
if (typeof className === 'string') {
className = className.split(' ');
}
className = filterEmptyClassNames(className);
if (isSupportMultipleClassesArg) {
element.classList.add.apply(element.classList, className);
} else {
while (className && className[len]) {
element.classList.add(className[len]);
len++;
}
}
};
_removeClass = function _removeClass(element, className) {
var len = 0;
if (typeof className === 'string') {
className = className.split(' ');
}
className = filterEmptyClassNames(className);
if (isSupportMultipleClassesArg) {
element.classList.remove.apply(element.classList, className);
} else {
while (className && className[len]) {
element.classList.remove(className[len]);
len++;
}
}
};
} else {
var createClassNameRegExp = function createClassNameRegExp(className) {
return new RegExp('(\\s|^)' + className + '(\\s|$)');
};
_hasClass = function _hasClass(element, className) {
// http://snipplr.com/view/3561/addclass-removeclass-hasclass/
return !!element.className.match(createClassNameRegExp(className));
};
_addClass = function _addClass(element, className) {
var len = 0,
_className = element.className;
if (typeof className === 'string') {
className = className.split(' ');
}
if (_className === '') {
_className = className.join(' ');
} else {
while (className && className[len]) {
if (!createClassNameRegExp(className[len]).test(_className)) {
_className += ' ' + className[len];
}
len++;
}
}
element.className = _className;
};
_removeClass = function _removeClass(element, className) {
var len = 0,
_className = element.className;
if (typeof className === 'string') {
className = className.split(' ');
}
while (className && className[len]) {
// String.prototype.trim is defined in polyfill.js
_className = _className.replace(createClassNameRegExp(className[len]), ' ').trim();
len++;
}
if (element.className !== _className) {
element.className = _className;
}
};
}
/**
* Checks if element has class name
*
* @param {HTMLElement} element
* @param {String} className Class name to check
* @returns {Boolean}
*/
export function hasClass(element, className) {
return _hasClass(element, className);
}
/**
* Add class name to an element
*
* @param {HTMLElement} element
* @param {String|Array} className Class name as string or array of strings
*/
export function addClass(element, className) {
return _addClass(element, className);
}
/**
* Remove class name from an element
*
* @param {HTMLElement} element
* @param {String|Array} className Class name as string or array of strings
*/
export function removeClass(element, className) {
return _removeClass(element, className);
}
export function removeTextNodes(element, parent) {
if (element.nodeType === 3) {
parent.removeChild(element); // bye text nodes!
} else if (['TABLE', 'THEAD', 'TBODY', 'TFOOT', 'TR'].indexOf(element.nodeName) > -1) {
var childs = element.childNodes;
for (var i = childs.length - 1; i >= 0; i--) {
removeTextNodes(childs[i], element);
}
}
}
/**
* Remove childs function
* WARNING - this doesn't unload events and data attached by jQuery
* http://jsperf.com/jquery-html-vs-empty-vs-innerhtml/9
* http://jsperf.com/jquery-html-vs-empty-vs-innerhtml/11 - no siginificant improvement with Chrome remove() method
*
* @param element
* @returns {void}
*/
//
export function empty(element) {
var child;
/* eslint-disable no-cond-assign */
while (child = element.lastChild) {
element.removeChild(child);
}
}
export var HTML_CHARACTERS = /(<(.*)>|&(.*);)/;
/**
* Insert content into element trying avoid innerHTML method.
* @return {void}
*/
export function fastInnerHTML(element, content) {
if (HTML_CHARACTERS.test(content)) {
element.innerHTML = content;
} else {
fastInnerText(element, content);
}
}
/**
* Insert text content into element
* @return {void}
*/
var textContextSupport = !!document.createTextNode('test').textContent;
export function fastInnerText(element, content) {
var child = element.firstChild;
if (child && child.nodeType === 3 && child.nextSibling === null) {
// fast lane - replace existing text node
if (textContextSupport) {
// http://jsperf.com/replace-text-vs-reuse
child.textContent = content;
} else {
// http://jsperf.com/replace-text-vs-reuse
child.data = content;
}
} else {
// slow lane - empty element and insert a text node
empty(element);
element.appendChild(document.createTextNode(content));
}
}
/**
* Returns true if element is attached to the DOM and visible, false otherwise
* @param elem
* @returns {boolean}
*/
export function isVisible(elem) {
var next = elem;
while (polymerUnwrap(next) !== document.documentElement) {
// until reached
if (next === null) {
// parent detached from DOM
return false;
} else if (next.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
if (next.host) {
// this is Web Components Shadow DOM
// see: http://w3c.github.io/webcomponents/spec/shadow/#encapsulation
// according to spec, should be if (next.ownerDocument !== window.document), but that doesn't work yet
if (next.host.impl) {
// Chrome 33.0.1723.0 canary (2013-11-29) Web Platform features disabled
return isVisible(next.host.impl);
} else if (next.host) {
// Chrome 33.0.1723.0 canary (2013-11-29) Web Platform features enabled
return isVisible(next.host);
}
throw new Error('Lost in Web Components world');
} else {
return false; // this is a node detached from document in IE8
}
} else if (next.style.display === 'none') {
return false;
}
next = next.parentNode;
}
return true;
}
/**
* Returns elements top and left offset relative to the document. Function is not compatible with jQuery offset.
*
* @param {HTMLElement} elem
* @return {Object} Returns object with `top` and `left` props
*/
export function offset(elem) {
var offsetLeft, offsetTop, lastElem, docElem, box;
docElem = document.documentElement;
if (hasCaptionProblem() && elem.firstChild && elem.firstChild.nodeName === 'CAPTION') {
// fixes problem with Firefox ignoring
in TABLE offset (see also export outerHeight)
// http://jsperf.com/offset-vs-getboundingclientrect/8
box = elem.getBoundingClientRect();
return {
top: box.top + (window.pageYOffset || docElem.scrollTop) - (docElem.clientTop || 0),
left: box.left + (window.pageXOffset || docElem.scrollLeft) - (docElem.clientLeft || 0)
};
}
offsetLeft = elem.offsetLeft;
offsetTop = elem.offsetTop;
lastElem = elem;
/* eslint-disable no-cond-assign */
while (elem = elem.offsetParent) {
// from my observation, document.body always has scrollLeft/scrollTop == 0
if (elem === document.body) {
break;
}
offsetLeft += elem.offsetLeft;
offsetTop += elem.offsetTop;
lastElem = elem;
}
// slow - http://jsperf.com/offset-vs-getboundingclientrect/6
if (lastElem && lastElem.style.position === 'fixed') {
// if(lastElem !== document.body) { //faster but does gives false positive in Firefox
offsetLeft += window.pageXOffset || docElem.scrollLeft;
offsetTop += window.pageYOffset || docElem.scrollTop;
}
return {
left: offsetLeft,
top: offsetTop
};
}
/**
* Returns the document's scrollTop property.
*
* @returns {Number}
*/
export function getWindowScrollTop() {
var res = window.scrollY;
if (res === void 0) {
// IE8-11
res = document.documentElement.scrollTop;
}
return res;
}
/**
* Returns the document's scrollLeft property.
*
* @returns {Number}
*/
export function getWindowScrollLeft() {
var res = window.scrollX;
if (res === void 0) {
// IE8-11
res = document.documentElement.scrollLeft;
}
return res;
}
/**
* Returns the provided element's scrollTop property.
*
* @param element
* @returns {Number}
*/
export function getScrollTop(element) {
if (element === window) {
return getWindowScrollTop();
}
return element.scrollTop;
}
/**
* Returns the provided element's scrollLeft property.
*
* @param element
* @returns {Number}
*/
export function getScrollLeft(element) {
if (element === window) {
return getWindowScrollLeft();
}
return element.scrollLeft;
}
/**
* Returns a DOM element responsible for scrolling of the provided element.
*
* @param {HTMLElement} element
* @returns {HTMLElement} Element's scrollable parent
*/
export function getScrollableElement(element) {
var el = element.parentNode,
props = ['auto', 'scroll'],
overflow,
overflowX,
overflowY,
computedStyle = '',
computedOverflow = '',
computedOverflowY = '',
computedOverflowX = '';
while (el && el.style && document.body !== el) {
overflow = el.style.overflow;
overflowX = el.style.overflowX;
overflowY = el.style.overflowY;
if (overflow == 'scroll' || overflowX == 'scroll' || overflowY == 'scroll') {
return el;
} else if (window.getComputedStyle) {
computedStyle = window.getComputedStyle(el);
computedOverflow = computedStyle.getPropertyValue('overflow');
computedOverflowY = computedStyle.getPropertyValue('overflow-y');
computedOverflowX = computedStyle.getPropertyValue('overflow-x');
if (computedOverflow === 'scroll' || computedOverflowX === 'scroll' || computedOverflowY === 'scroll') {
return el;
}
}
if (el.clientHeight <= el.scrollHeight && (props.indexOf(overflowY) !== -1 || props.indexOf(overflow) !== -1 || props.indexOf(computedOverflow) !== -1 || props.indexOf(computedOverflowY) !== -1)) {
return el;
}
if (el.clientWidth <= el.scrollWidth && (props.indexOf(overflowX) !== -1 || props.indexOf(overflow) !== -1 || props.indexOf(computedOverflow) !== -1 || props.indexOf(computedOverflowX) !== -1)) {
return el;
}
el = el.parentNode;
}
return window;
}
/**
* Returns a DOM element responsible for trimming the provided element.
*
* @param {HTMLElement} base Base element
* @returns {HTMLElement} Base element's trimming parent
*/
export function getTrimmingContainer(base) {
var el = base.parentNode;
while (el && el.style && document.body !== el) {
if (el.style.overflow !== 'visible' && el.style.overflow !== '') {
return el;
} else if (window.getComputedStyle) {
var computedStyle = window.getComputedStyle(el);
if (computedStyle.getPropertyValue('overflow') !== 'visible' && computedStyle.getPropertyValue('overflow') !== '') {
return el;
}
}
el = el.parentNode;
}
return window;
}
/**
* Returns a style property for the provided element. (Be it an inline or external style).
*
* @param {HTMLElement} element
* @param {String} prop Wanted property
* @returns {String|undefined} Element's style property
*/
export function getStyle(element, prop) {
/* eslint-disable */
if (!element) {
return;
} else if (element === window) {
if (prop === 'width') {
return window.innerWidth + 'px';
} else if (prop === 'height') {
return window.innerHeight + 'px';
}
return;
}
var styleProp = element.style[prop],
computedStyle;
if (styleProp !== '' && styleProp !== void 0) {
return styleProp;
} else {
computedStyle = getComputedStyle(element);
if (computedStyle[prop] !== '' && computedStyle[prop] !== void 0) {
return computedStyle[prop];
}
}
}
/**
* Returns a computed style object for the provided element. (Needed if style is declared in external stylesheet).
*
* @param element
* @returns {IEElementStyle|CssStyle} Elements computed style object
*/
export function getComputedStyle(element) {
return element.currentStyle || document.defaultView.getComputedStyle(element);
}
/**
* Returns the element's outer width.
*
* @param element
* @returns {number} Element's outer width
*/
export function outerWidth(element) {
return element.offsetWidth;
}
/**
* Returns the element's outer height
*
* @param elem
* @returns {number} Element's outer height
*/
export function outerHeight(elem) {
if (hasCaptionProblem() && elem.firstChild && elem.firstChild.nodeName === 'CAPTION') {
// fixes problem with Firefox ignoring in TABLE.offsetHeight
// jQuery (1.10.1) still has this unsolved
// may be better to just switch to getBoundingClientRect
// http://bililite.com/blog/2009/03/27/finding-the-size-of-a-table/
// http://lists.w3.org/Archives/Public/www-style/2009Oct/0089.html
// http://bugs.jquery.com/ticket/2196
// http://lists.w3.org/Archives/Public/www-style/2009Oct/0140.html#start140
return elem.offsetHeight + elem.firstChild.offsetHeight;
}
return elem.offsetHeight;
}
/**
* Returns the element's inner height.
*
* @param element
* @returns {number} Element's inner height
*/
export function innerHeight(element) {
return element.clientHeight || element.innerHeight;
}
/**
* Returns the element's inner width.
*
* @param element
* @returns {number} Element's inner width
*/
export function innerWidth(element) {
return element.clientWidth || element.innerWidth;
}
export function addEvent(element, event, callback) {
if (window.addEventListener) {
element.addEventListener(event, callback, false);
} else {
element.attachEvent('on' + event, callback);
}
}
export function removeEvent(element, event, callback) {
if (window.removeEventListener) {
element.removeEventListener(event, callback, false);
} else {
element.detachEvent('on' + event, callback);
}
}
/**
* Returns caret position in text input
*
* @author http://stackoverflow.com/questions/263743/how-to-get-caret-position-in-textarea
* @return {Number}
*/
export function getCaretPosition(el) {
if (el.selectionStart) {
return el.selectionStart;
} else if (document.selection) {
// IE8
el.focus();
var r = document.selection.createRange();
if (r == null) {
return 0;
}
var re = el.createTextRange();
var rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
return rc.text.length;
}
return 0;
}
/**
* Returns end of the selection in text input
*
* @return {Number}
*/
export function getSelectionEndPosition(el) {
if (el.selectionEnd) {
return el.selectionEnd;
} else if (document.selection) {
// IE8
var r = document.selection.createRange();
if (r == null) {
return 0;
}
var re = el.createTextRange();
return re.text.indexOf(r.text) + r.text.length;
}
return 0;
}
/**
* Returns text under selection.
*
* @returns {String}
*/
export function getSelectionText() {
var text = '';
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type !== 'Control') {
text = document.selection.createRange().text;
}
return text;
}
/**
* Sets caret position in text input.
*
* @author http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/
* @param {Element} element
* @param {Number} pos
* @param {Number} endPos
*/
export function setCaretPosition(element, pos, endPos) {
if (endPos === void 0) {
endPos = pos;
}
if (element.setSelectionRange) {
element.focus();
try {
element.setSelectionRange(pos, endPos);
} catch (err) {
var elementParent = element.parentNode;
var parentDisplayValue = elementParent.style.display;
elementParent.style.display = 'block';
element.setSelectionRange(pos, endPos);
elementParent.style.display = parentDisplayValue;
}
} else if (element.createTextRange) {
// IE8
var range = element.createTextRange();
range.collapse(true);
range.moveEnd('character', endPos);
range.moveStart('character', pos);
range.select();
}
}
var cachedScrollbarWidth;
// http://stackoverflow.com/questions/986937/how-can-i-get-the-browsers-scrollbar-sizes
function walkontableCalculateScrollbarWidth() {
var inner = document.createElement('div');
inner.style.height = '200px';
inner.style.width = '100%';
var outer = document.createElement('div');
outer.style.boxSizing = 'content-box';
outer.style.height = '150px';
outer.style.left = '0px';
outer.style.overflow = 'hidden';
outer.style.position = 'absolute';
outer.style.top = '0px';
outer.style.width = '200px';
outer.style.visibility = 'hidden';
outer.appendChild(inner);
(document.body || document.documentElement).appendChild(outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) {
w2 = outer.clientWidth;
}
(document.body || document.documentElement).removeChild(outer);
return w1 - w2;
}
/**
* Returns the computed width of the native browser scroll bar.
*
* @return {Number} width
*/
export function getScrollbarWidth() {
if (cachedScrollbarWidth === void 0) {
cachedScrollbarWidth = walkontableCalculateScrollbarWidth();
}
return cachedScrollbarWidth;
}
/**
* Checks if the provided element has a vertical scrollbar.
*
* @param {HTMLElement} element
* @returns {Boolean}
*/
export function hasVerticalScrollbar(element) {
return element.offsetWidth !== element.clientWidth;
}
/**
* Checks if the provided element has a vertical scrollbar.
*
* @param {HTMLElement} element
* @returns {Boolean}
*/
export function hasHorizontalScrollbar(element) {
return element.offsetHeight !== element.clientHeight;
}
/**
* Sets overlay position depending on it's type and used browser
*/
export function setOverlayPosition(overlayElem, left, top) {
if (isIE8() || isIE9()) {
overlayElem.style.top = top;
overlayElem.style.left = left;
} else if (isSafari()) {
overlayElem.style['-webkit-transform'] = 'translate3d(' + left + ',' + top + ',0)';
} else {
overlayElem.style.transform = 'translate3d(' + left + ',' + top + ',0)';
}
}
export function getCssTransform(element) {
var transform;
if (element.style.transform && (transform = element.style.transform) !== '') {
return ['transform', transform];
} else if (element.style['-webkit-transform'] && (transform = element.style['-webkit-transform']) !== '') {
return ['-webkit-transform', transform];
}
return -1;
}
export function resetCssTransform(element) {
if (element.style.transform && element.style.transform !== '') {
element.style.transform = '';
} else if (element.style['-webkit-transform'] && element.style['-webkit-transform'] !== '') {
element.style['-webkit-transform'] = '';
}
}
/**
* Determines if the given DOM element is an input field.
* Notice: By 'input' we mean input, textarea and select nodes
*
* @param {HTMLElement} element - DOM element
* @returns {Boolean}
*/
export function isInput(element) {
var inputs = ['INPUT', 'SELECT', 'TEXTAREA'];
return element && (inputs.indexOf(element.nodeName) > -1 || element.contentEditable === 'true');
}
/**
* Determines if the given DOM element is an input field placed OUTSIDE of HOT.
* Notice: By 'input' we mean input, textarea and select nodes
*
* @param {HTMLElement} element - DOM element
* @returns {Boolean}
*/
export function isOutsideInput(element) {
return isInput(element) && element.className.indexOf('handsontableInput') == -1 && element.className.indexOf('copyPaste') == -1;
}