Browse Source

feat: Working element density calculation.

master
Denis Thiessen 5 months ago
parent
commit
cd4cd82843
  1. 75
      src/components/DetailElement.jsx

75
src/components/DetailElement.jsx

@ -28,31 +28,71 @@ const getContainerNode = function (parent) {
return parent; return parent;
}; };
const getChildElementRoot = function (el) {
return el.childNodes.length === 1
? getChildElementRoot(el.childNodes.item(0))
: el;
};
const calculateDensities = function (el) { const calculateDensities = function (el) {
var textLength = 0; var textLength = 0;
var linkAmount = 0; var linkAmount = 0;
var listAmount = 0; var listAmount = 0;
var textDensity = 0;
var textDensity = 4;
var linkDensity = 0; var linkDensity = 0;
for (var n of el.childNodes) {
if (n.nodeType === 3) {
textLength += n.nodeValue.length;
}
const childElements = getChildElementRoot(el);
if (n.nodeName === "A") {
linkAmount += 1;
const getElementAmountsOfChildren = function (childMainElement) {
var amounts = { textLength: 0, linkAmount: 0, listAmount: 0 };
if (childMainElement instanceof Node && childMainElement.nodeType === 3) {
amounts.textLength = childMainElement.length;
return amounts;
} }
if (n.nodeName === "UL") {
listAmount += 1;
const childElements =
childMainElement instanceof NodeList
? childMainElement
: childMainElement.childNodes;
for (var n of childElements) {
if (n.childNodes.length > 0) {
const childAmounts = getElementAmountsOfChildren(n.childNodes);
amounts.textLength += childAmounts.textLength;
amounts.linkAmount += childAmounts.linkAmount;
amounts.listAmount += childAmounts.listAmount;
}
if (n.nodeName === "P") {
amounts.textLength += n.innerText.length;
}
if (n.nodeType === 3) {
amounts.textLength += n.nodeValue.length;
}
if (n.nodeName === "A" || n.nodeName === "BUTTON") {
amounts.linkAmount += 1;
}
if (n.nodeName === "LI") {
amounts.listAmount += 1;
}
} }
}
if (textLength < 200 && textLength > 100) {
return amounts;
};
const elementAmounts = getElementAmountsOfChildren(childElements);
textLength = elementAmounts.textLength;
linkAmount = elementAmounts.linkAmount;
listAmount = elementAmounts.listAmount;
if (textLength < 900 && textLength > 600) {
textDensity = 3; textDensity = 3;
} else if (textLength < 100) {
textDensity = 4;
} else if (textLength < 600 && textLength > 300) {
textDensity = 2;
} else if (textLength < 300 && textLength > 0) {
textDensity = 1;
} else if (textLength === 0) { } else if (textLength === 0) {
textDensity = 0; textDensity = 0;
} }
@ -73,6 +113,7 @@ const touchEvent = function (event) {
const parentCollapseElement = getParentCollapseElement(eventElement); const parentCollapseElement = getParentCollapseElement(eventElement);
const contentNode = getContainerNode(parentCollapseElement); const contentNode = getContainerNode(parentCollapseElement);
const densities = calculateDensities(contentNode); const densities = calculateDensities(contentNode);
console.log(densities);
if (type === "model") { if (type === "model") {
playDetailModelSonification(); playDetailModelSonification();
@ -85,11 +126,7 @@ function DetailElement({ sonificationType, children }) {
type = sonificationType; type = sonificationType;
return ( return (
<div
onClick={() => {}}
onTouchStart={touchEvent}
onTouchMove={touchEvent}
>
<div onClick={() => {}} onTouchStart={touchEvent} onTouchMove={touchEvent}>
<Collapse.Group id="collapseGroup">{children}</Collapse.Group> <Collapse.Group id="collapseGroup">{children}</Collapse.Group>
</div> </div>
); );

Loading…
Cancel
Save