Merge pull request #129 from PublicisSapient/add-image-to-heading

feat: Adding icons next to headings to have summarized info

css/site.css

@@ -249,6 +249,9 @@
   margin: 0px 15px 5px 0px;
   display: inline-block;
 }
+.enable-stats__heading-icon {
+  margin: 0 0.9375rem 0 0;
+}
 .enable-stats__label {
   display: inline-block;
   text-align: left;

js/global.js

@@ -62,6 +62,35 @@ function buildFlyoutMenuHTML() {
     // Initialize the hamburger menu.
     EnableFlyout.init();
 }
+function findImagesNextToHeading(headingId, className) {
+    const heading = document.getElementById(headingId);
+    let images = '';
+
+    if (heading) {
+        let nextElement = heading.nextElementSibling;
+
+        // Iterate over siblings with the specified class name
+        while (nextElement && nextElement.classList.contains(className)) {
+            const imgElements = nextElement.querySelectorAll('img');
+
+            // Append attributes of img elements to the images string
+            imgElements.forEach((img) => {
+                const attributes = Array.from(img.attributes)
+                    .map((attr) => {
+                        return attr.name !== 'class'
+                            ? `${attr.name}="${attr.value}"`
+                            : ((attr.value += ' enable-stats__heading-icon'),
+                              `${attr.name}="${attr.value}"`);
+                    })
+                    .join(' ');
+                images += `<img ${attributes}>`;
+            });
+            // Move to the next sibling
+            nextElement = nextElement.nextElementSibling;
+        }
+    }
+    return images;
+}
 
 function initEnable() {
     offscreenObserver.init(document.querySelector('[role="banner"]'));
@@ -126,6 +155,18 @@ function initEnable() {
                         el.getAttribute('role') !== 'heading'
                     ) {
                         el.innerHTML = `<a class="heading__deeplink" href="#${el.id}" title="Permalink to ${el.innerText}" aria-label="Permalink to ${el.innerText}">${el.innerHTML}</a>`;
+                        // add icons next to the heading if the content below the heading has any images
+                        if (
+                            el.nextElementSibling.classList.contains(
+                                'enable-stats',
+                            )
+                        ) {
+                            const images = findImagesNextToHeading(
+                                el.id,
+                                'enable-stats',
+                            );
+                            el.innerHTML = images + el.innerHTML;
+                        }
                     }
                 }
             });

js/test/page-setup.test.js

@@ -28,6 +28,7 @@ describe('Test all pages on Enable to Ensure the information is written correctl
           
         stack trace: ${JSON.stringify(e.stackTrace())}`;
             } else if (type === 'log' || type === 'debug') {
+                // This check is required to confirm the absence of console.log and debug statements in the code.
                 const location = e.location();
                 throw `Console log: ${e.text()}
         type: ${type}, file: ${location.url}, line: ${location.lineNumber}`;

less/site.less

@@ -300,6 +300,9 @@
         margin: 0px 15px 5px 0px;
         display: inline-block;
     }
+    &__heading-icon {
+        margin: 0 (15 / @px) 0 0;
+    }
 
     &__label {
         display: inline-block;