feat: Working element density calculation.

src/components/DetailElement.jsx

@@ -28,31 +28,71 @@ const getContainerNode = function (parent) {
   return parent;
 };
 
+const getChildElementRoot = function (el) {
+  return el.childNodes.length === 1
+    ? getChildElementRoot(el.childNodes.item(0))
+    : el;
+};
+
 const calculateDensities = function (el) {
   var textLength = 0;
   var linkAmount = 0;
   var listAmount = 0;
-  var textDensity = 0;
+  var textDensity = 4;
   var linkDensity = 0;
 
-  for (var n of el.childNodes) {
+  const childElements = getChildElementRoot(el);
+
+  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;
+    }
+    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) {
-      textLength += n.nodeValue.length;
+        amounts.textLength += n.nodeValue.length;
       }
 
-    if (n.nodeName === "A") {
-      linkAmount += 1;
+      if (n.nodeName === "A" || n.nodeName === "BUTTON") {
+        amounts.linkAmount += 1;
       }
 
-    if (n.nodeName === "UL") {
-      listAmount += 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;
-  } 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) {
     textDensity = 0;
   }
@@ -73,6 +113,7 @@ const touchEvent = function (event) {
   const parentCollapseElement = getParentCollapseElement(eventElement);
   const contentNode = getContainerNode(parentCollapseElement);
   const densities = calculateDensities(contentNode);
+  console.log(densities);
 
   if (type === "model") {
     playDetailModelSonification();
@@ -85,11 +126,7 @@ function DetailElement({ sonificationType, children }) {
   type = sonificationType;
 
   return (
-    <div
-      onClick={() => {}}
-      onTouchStart={touchEvent}
-      onTouchMove={touchEvent}
-    >
+    <div onClick={() => {}} onTouchStart={touchEvent} onTouchMove={touchEvent}>
       <Collapse.Group id="collapseGroup">{children}</Collapse.Group>
     </div>
   );