feat(core dom): Add acquire_attribute to get the value of the first occurence of a defined attribute up the DOM tree.

Author: thet

src/core/dom.js

@@ -89,6 +89,26 @@ const get_parents = (el) => {
     return parents;
 };
 
+/**
+ * Return the value of the first attribute found in the list of parents.
+ *
+ * @param {DOM element} el - The DOM element to start the acquisition search for the given attribute.
+ * @param {string} attribute - Name of the attribute to search for.
+ * @param {Boolean} include_empty - Also return empty values.
+ *
+ * @returns {*} - Returns the value of the searched attribute.
+ */
+const acquire_attribute = (el, attribute, include_empty = false) => {
+    let _el = el;
+    while (_el) {
+        const val = _el.getAttribute(attribute);
+        if (val || (include_empty && val === "")) {
+            return val;
+        }
+        _el = _el.parentElement;
+    }
+};
+
 const is_visible = (el) => {
     // Check, if element is visible in DOM.
     // https://stackoverflow.com/a/19808107/1337474
@@ -169,6 +189,7 @@ const dom = {
     find_parents: find_parents,
     find_scoped: find_scoped,
     get_parents: get_parents,
+    acquire_attribute: acquire_attribute,
     is_visible: is_visible,
     create_from_string: create_from_string,
     add_event_listener: add_event_listener,

src/core/dom.test.js

@@ -269,6 +269,81 @@ describe("core.dom tests", () => {
         });
     });
 
+    describe("acquire_attribute", () => {
+        it("finds the first occurrence of an non-empty attribute in all parents.", (done) => {
+            document.body.innerHTML = `
+                <div lang="en">
+                    <div id="start" lang="">
+                    </div>
+                </div>
+            `;
+            const el = document.querySelector("#start");
+            const res = dom.acquire_attribute(el, "lang");
+            expect(res).toBe("en");
+
+            done();
+        });
+        it("finds the first occurrence of an attribute in all parents, even if empty.", (done) => {
+            document.body.innerHTML = `
+                <div lang="en">
+                    <div lang="">
+                        <div id="start">
+                        </div>
+                    </div>
+                </div>
+            `;
+            const el = document.querySelector("#start");
+            const res = dom.acquire_attribute(el, "lang", true);
+            expect(res).toBe("");
+
+            done();
+        });
+        it("traverses up a long way to find an attribute.", (done) => {
+            document.body.innerHTML = `
+                <div lang="en">
+                    <div>
+                        <div lang="">
+                            <div>
+                                <div lang="">
+                                    <div>
+                                        <div lang="">
+                                            <div>
+                                                <div lang="">
+                                                    <div>
+                                                        <div id="start" lang="">
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+            const el = document.querySelector("#start");
+            const res = dom.acquire_attribute(el, "lang");
+            expect(res).toBe("en");
+
+            done();
+        });
+        it("just returns if it finds nothing.", (done) => {
+            document.body.innerHTML = `
+                <div>
+                    <div id="start">
+                    </div>
+                </div>
+            `;
+            const el = document.querySelector("#start");
+            const res = dom.acquire_attribute(el, "lang");
+            expect(res).toBe(undefined);
+
+            done();
+        });
+    });
+
     describe("is_visible", () => {
         it.skip("checks, if an element is visible or not.", (done) => {
             const div1 = document.createElement("div");