@qualweb/qw-element
Version:
QualWeb element interface and utilities
599 lines • 22.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.QWElement = void 0;
class QWElement {
constructor(element, elementsCSSRules) {
this.selector = '';
this.element = element;
this.elementsCSSRules = elementsCSSRules;
const selector = element.getAttribute('qw-selector');
if (selector) {
this.selector = selector;
}
}
addCSSRulesPropertyToElement(element) {
var _a;
if (element && ((_a = this.elementsCSSRules) === null || _a === void 0 ? void 0 : _a.has(element))) {
element.setAttribute('qw-css-rules', 'true');
}
}
hasCSSRules() {
return this.element.getAttribute('qw-css-rules') === 'true';
}
getCSSRules() {
var _a;
return (_a = this.elementsCSSRules) === null || _a === void 0 ? void 0 : _a.get(this.element);
}
hasCSSProperty(property, pseudoStyle, media) {
var _a, _b;
if ((_a = this.elementsCSSRules) === null || _a === void 0 ? void 0 : _a.has(this.element)) {
const rules = (_b = this.elementsCSSRules) === null || _b === void 0 ? void 0 : _b.get(this.element);
if (rules) {
if (pseudoStyle && media) {
return (rules.media[media][pseudoStyle][property] !==
undefined);
}
else if (pseudoStyle) {
return rules[pseudoStyle][property] !== undefined;
}
else if (media) {
return rules.media[media][property] !== undefined;
}
}
return !rules || rules[property] !== undefined;
}
return false;
}
getCSSProperty(property, pseudoStyle, media) {
var _a, _b;
if ((_a = this.elementsCSSRules) === null || _a === void 0 ? void 0 : _a.has(this.element)) {
const rules = (_b = this.elementsCSSRules) === null || _b === void 0 ? void 0 : _b.get(this.element);
if (rules) {
if (pseudoStyle && media) {
return rules.media[media][pseudoStyle][property];
}
else if (pseudoStyle) {
return rules[pseudoStyle][property];
}
else if (media) {
return rules.media[media][property];
}
else {
return rules[property];
}
}
}
return undefined;
}
getCSSMediaRules() {
var _a, _b;
if ((_a = this.elementsCSSRules) === null || _a === void 0 ? void 0 : _a.has(this.element)) {
const rules = (_b = this.elementsCSSRules) === null || _b === void 0 ? void 0 : _b.get(this.element);
if (rules) {
return rules['media'];
}
}
return undefined;
}
getCSSPseudoSelectorRules(pseudoSelector) {
var _a, _b;
if ((_a = this.elementsCSSRules) === null || _a === void 0 ? void 0 : _a.has(this.element)) {
const rules = (_b = this.elementsCSSRules) === null || _b === void 0 ? void 0 : _b.get(this.element);
if (rules) {
return rules[pseudoSelector];
}
}
return undefined;
}
elementHasAttribute(attribute) {
return this.element.getAttributeNames().includes(attribute);
}
elementHasAttributes() {
return this.element.getAttributeNames().length > 0;
}
elementHasChild(childName) {
const children = this.element.children;
for (let i = 0; i < children.length; i++) {
const child = children.item(i);
if (child && child.tagName.toLowerCase() === childName.toLowerCase()) {
return true;
}
}
return false;
}
elementHasChildren() {
return this.element.children.length > 0;
}
elementHasParent(parent) {
const parentElement = this.element.parentElement;
return parentElement ? parentElement.tagName.toLowerCase() === parent.toLowerCase() : false;
}
hasTextNode() {
let hasText = false;
this.element.childNodes.forEach((child) => {
var _a;
if (child.nodeType === 3 && ((_a = child.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '') {
hasText = true;
}
});
return hasText;
}
getElementAttribute(attribute) {
return this.element.getAttribute(attribute);
}
getElementAttributes() {
var _a;
const attributes = {};
for (const attr of (_a = this.element.getAttributeNames()) !== null && _a !== void 0 ? _a : []) {
const value = this.element.getAttribute(attr);
if (value) {
attributes[attr] = value;
}
}
return attributes;
}
getElementAttributesName() {
return this.element.getAttributeNames();
}
getElementChildren() {
const qwList = new Array();
const children = this.element.children;
for (let i = 0; i < children.length; i++) {
const child = children.item(i);
if (child) {
this.addCSSRulesPropertyToElement(child);
qwList.push(new QWElement(child, this.elementsCSSRules));
}
}
return qwList;
}
getElementChildTextContent(childName) {
var _a;
const children = this.element.children;
for (let i = 0; i < children.length; i++) {
const child = children.item(i);
if (child && child.tagName.toLowerCase() === childName.toLowerCase()) {
return (_a = child.textContent) !== null && _a !== void 0 ? _a : undefined;
}
}
return undefined;
}
getElementHtmlCode(withText, fullElement) {
const cssRules = this.element.getAttribute('qw-css-rules');
const selector = this.element.getAttribute('qw-selector');
const documentSelector = this.element.getAttribute('_documentSelector');
this.element.removeAttribute('qw-css-rules');
this.element.removeAttribute('qw-selector');
this.element.removeAttribute('_documentSelector');
let result;
if (fullElement) {
const children = this.element.children;
const attributeArray = new Array();
for (let i = 0; i < children.length; i++) {
const child = children.item(i);
if (child) {
const cssRulesValue = child.getAttribute('qw-css-rules');
const selectorValue = child.getAttribute('qw-selector');
const documentSelectorValue = child.getAttribute('_documentSelector');
attributeArray.push({
cssRulesValue,
selectorValue,
documentSelectorValue
});
child.removeAttribute('qw-css-rules');
child.removeAttribute('qw-selector');
child.removeAttribute('_documentSelector');
}
}
result = this.element.outerHTML;
for (let i = 0; i < children.length; i++) {
const child = children.item(i);
if (child) {
const attributes = attributeArray[i];
if (attributes.cssRulesValue) {
child.setAttribute('qw-css-rules', attributes.cssRulesValue);
}
if (attributes.selectorValue) {
child.setAttribute('qw-selector', attributes.selectorValue);
}
if (attributes.documentSelectorValue) {
child.setAttribute('_documentSelector', attributes.documentSelectorValue);
}
}
}
}
else if (withText) {
const clonedElem = this.element.cloneNode(false);
const text = this.getElementText();
clonedElem.innerHTML = text !== undefined ? text : '';
result = clonedElem.outerHTML;
}
else {
const clonedElem = this.element.cloneNode(false);
clonedElem.innerHTML = '';
result = clonedElem.outerHTML;
}
if (cssRules) {
this.element.setAttribute('qw-css-rules', cssRules);
}
if (selector) {
this.element.setAttribute('qw-selector', selector);
}
if (documentSelector) {
this.element.setAttribute('_documentSelector', documentSelector);
}
return result;
}
getElement(selector) {
const element = this.element.querySelector(selector);
this.addCSSRulesPropertyToElement(element);
return this.convertElementToQWElement(element);
}
convertElementToQWElement(element) {
if (element) {
this.addCSSRulesPropertyToElement(element);
return new QWElement(element, this.elementsCSSRules);
}
else {
return null;
}
}
convertElementsToQWElement(elements) {
const qwList = new Array();
elements === null || elements === void 0 ? void 0 : elements.forEach((element) => {
this.addCSSRulesPropertyToElement(element);
qwList.push(new QWElement(element, this.elementsCSSRules));
});
return qwList;
}
getElements(selector) {
return this.convertElementsToQWElement(this.element.querySelectorAll(selector));
}
getElementNextSibling() {
return this.convertElementToQWElement(this.element.nextElementSibling);
}
getAllPreviousSiblings() {
const siblings = new Array();
let sibling = this.element.previousSibling;
while (sibling !== null) {
if (sibling.nodeType === 1) {
const qwSibling = this.convertElementToQWElement(sibling);
if (qwSibling) {
siblings.unshift(qwSibling);
}
}
else if (sibling.nodeType === 3 && sibling.textContent) {
siblings.unshift(sibling.textContent);
}
sibling = sibling.previousSibling;
}
return siblings;
}
getAllNextSiblings() {
const siblings = new Array();
let sibling = this.element.nextSibling;
while (sibling !== null) {
if (sibling.nodeType === 1) {
const qwSibling = this.convertElementToQWElement(sibling);
if (qwSibling) {
siblings.push(qwSibling);
}
}
else if (sibling.nodeType === 3 && sibling.textContent) {
siblings.push(sibling.textContent);
}
sibling = sibling.nextSibling;
}
return siblings;
}
getPreviousSibling() {
const sibling = this.element.previousSibling;
if (sibling) {
if (sibling.nodeType === 1) {
return this.convertElementToQWElement(sibling);
}
else if (sibling.nodeType === 3) {
return sibling.textContent;
}
else {
let siblingNode = sibling.previousSibling;
let previousSibling = null;
while (siblingNode !== null) {
if (siblingNode.nodeType === 1) {
previousSibling = this.convertElementToQWElement(siblingNode);
break;
}
else if (siblingNode.nodeType === 3) {
previousSibling = siblingNode.textContent;
}
siblingNode = siblingNode.previousSibling;
}
return previousSibling;
}
}
return null;
}
getNextSibling() {
const sibling = this.element.nextSibling;
if (sibling) {
if (sibling.nodeType === 1) {
return this.convertElementToQWElement(sibling);
}
else if (sibling.nodeType === 3) {
return sibling.textContent;
}
else {
let siblingNode = sibling.nextSibling;
let nextSibling = null;
while (siblingNode !== null) {
if (siblingNode.nodeType === 1) {
nextSibling = this.convertElementToQWElement(siblingNode);
break;
}
else if (siblingNode.nodeType === 3) {
nextSibling = siblingNode.textContent;
}
siblingNode = siblingNode.nextSibling;
}
return nextSibling;
}
}
return null;
}
getElementParent() {
return this.convertElementToQWElement(this.element.parentElement);
}
getParentAllContexts() {
let parent = this.element.parentElement;
if (!parent) {
const context = this.element.getAttribute('_documentSelector');
if (context) {
parent = document.querySelector(context);
}
}
return this.convertElementToQWElement(this.element.parentElement);
}
getElementPreviousSibling() {
return this.convertElementToQWElement(this.element.previousElementSibling);
}
getElementProperty(property) {
const propertyValue = this.element[property];
return propertyValue === null ? '' : propertyValue.toString();
}
getElementSelector() {
if (this.selector === '') {
if (this.element.tagName.toLowerCase() === 'html') {
return 'html';
}
else if (this.element.tagName.toLowerCase() === 'head') {
return 'html > head';
}
else if (this.element.tagName.toLowerCase() === 'body') {
return 'html > body';
}
let selector = '';
const parents = new Array();
let parent = this.element.parentElement;
while (parent) {
parents.unshift(this.getSelfLocationInParent(parent));
parent = parent['parentElement'];
}
if (parents.length > 0) {
selector += parents.join(' > ');
selector += ' > ' + this.getSelfLocationInParent(this.element);
}
else {
selector += this.getSelfLocationInParent(this.element);
}
const documentSelector = this.element.getAttribute('_documentSelector');
if (documentSelector) {
selector = documentSelector + selector;
}
this.selector = selector;
return selector;
}
else {
return this.selector;
}
}
getSelfLocationInParent(element) {
let selector = '';
if (element.tagName.toLowerCase() === 'body' || element.tagName.toLowerCase() === 'head') {
return element.tagName.toLowerCase();
}
let sameEleCount = 0;
let prev = element.previousElementSibling;
while (prev) {
if (prev.tagName.toLowerCase() === element.tagName.toLowerCase()) {
sameEleCount++;
}
prev = prev.previousElementSibling;
}
selector += `${element.tagName.toLowerCase()}:nth-of-type(${sameEleCount + 1})`;
return selector;
}
getElementStyleProperty(property, pseudoStyle) {
const styles = getComputedStyle(this.element, pseudoStyle);
return styles.getPropertyValue(property);
}
getElementTagName() {
return this.element.tagName.toLowerCase();
}
getElementText() {
var _a, _b;
if (this.element.shadowRoot) {
return (_a = this.element.shadowRoot.textContent) !== null && _a !== void 0 ? _a : '';
}
else {
return (_b = this.element.textContent) !== null && _b !== void 0 ? _b : '';
}
}
getElementOwnText() {
let children;
if (this.element.shadowRoot) {
children = this.element.shadowRoot.childNodes;
}
else {
children = this.element.childNodes;
}
let result = '';
let textContent;
children.forEach((child) => {
textContent = child.textContent;
if (child.nodeType === 3 && textContent && textContent.trim() !== '') {
result += textContent.trim();
}
});
return result;
}
getElementType() {
return this.element.nodeType === 1
? 'tag'
: this.element.nodeType === 2
? 'attribute'
: this.element.nodeType === 3
? 'text'
: 'comment';
}
getNumberOfSiblingsWithTheSameTag() {
let aCount = 1;
let nextSibling = this.element.nextElementSibling;
while (nextSibling) {
if (nextSibling.tagName.toLowerCase() === 'a') {
aCount++;
}
nextSibling = nextSibling.nextElementSibling;
}
return aCount;
}
setElementAttribute(attribute, value) {
this.element.setAttribute(attribute, value);
}
concatANames(aNames) {
const children = this.element.childNodes;
let result = '';
let textContent;
let i = 0;
let counter = 0;
children.forEach((child) => {
textContent = child.textContent;
if (child.nodeType === 3 && !!textContent && textContent.trim() !== '') {
result = result + (counter === 0 ? '' : ' ') + textContent.trim();
counter++;
}
else if (child.nodeType === 1) {
result = result + (counter > 0 && !!aNames[i] ? ' ' : '') + aNames[i];
i++;
}
});
if (!result) {
result = '';
}
return result;
}
isOffScreen() {
const scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight);
const scrollWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, document.documentElement.offsetWidth, document.body.clientWidth, document.documentElement.clientHeight);
const bounding = this.element.getBoundingClientRect();
const left = bounding.left;
const right = bounding.right;
const bottom = bounding.bottom;
const top = bounding.top;
const noParentScrollTop = this.noParentScrolled(bottom);
return (left > scrollWidth ||
right < 0 ||
(bottom < 0 && noParentScrollTop) ||
top > scrollHeight ||
(right === 0 && left === 0));
}
isElementHTMLElement() {
return this.element instanceof HTMLElement;
}
getContentFrame() {
let page = null;
if (this.getElementTagName() === 'iframe') {
const element = this.element;
const contentWindow = element.contentWindow;
if (contentWindow) {
page = contentWindow.document;
}
}
return page;
}
elementHasTextNode() {
let hasTextNode = false;
if (this.element.childNodes !== null) {
const children = this.element.childNodes;
children.forEach((child) => {
var _a;
if (child.nodeType === 3 && ((_a = child.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '') {
hasTextNode = true;
}
});
}
return hasTextNode;
}
noParentScrolled(offset) {
let element = this.element.parentElement;
while (element && element.nodeName.toLowerCase() !== 'html') {
if (element.scrollTop) {
offset += element.scrollTop;
if (offset >= 0) {
return false;
}
}
element = element.parentElement;
}
return true;
}
focusElement() {
const htmlElement = this.element;
htmlElement.focus();
}
dispatchEvent(event) {
const htmlElement = this.element;
htmlElement.dispatchEvent(event);
}
click() {
const htmlElement = this.element;
htmlElement.click();
}
getBoundingBox() {
return this.element.getBoundingClientRect();
}
getShadowElement(selector) {
const shadowRoot = this.element.shadowRoot;
let element = null;
if (shadowRoot) {
element = shadowRoot.querySelector(selector);
}
return this.convertElementToQWElement(element);
}
getShadowElements(selector) {
const shadowRoot = this.element.shadowRoot;
let elements = null;
if (shadowRoot) {
elements = shadowRoot.querySelectorAll(selector);
}
return this.convertElementsToQWElement(elements);
}
getSlotElements() {
const slot = this.element;
const slotElements = slot.assignedElements();
const qwList = new Array();
slotElements === null || slotElements === void 0 ? void 0 : slotElements.forEach((element) => {
this.addCSSRulesPropertyToElement(element);
qwList.push(new QWElement(element, this.elementsCSSRules));
});
return qwList;
}
getSlotNodes() {
const slot = this.element;
return slot.assignedNodes();
}
isShadowRoot() {
return !!this.element.shadowRoot;
}
}
exports.QWElement = QWElement;
//# sourceMappingURL=QWElement.object.js.map