diff --git a/src/core/mockup-parser.js b/src/core/mockup-parser.js index 7aeda3e99..3566144e4 100644 --- a/src/core/mockup-parser.js +++ b/src/core/mockup-parser.js @@ -1,6 +1,7 @@ +import utils from "./utils"; -var parser = { - getOptions($el, patternName, options) { +const parser = { + getOptions(el, pattern_name, options) { /* This is the Mockup parser. An alternative parser for Patternslib * patterns. * @@ -9,37 +10,42 @@ var parser = { * * It parses a DOM element for pattern configuration options. */ + + el = utils.jqToNode(el); options = options || {}; + if (!el) { + return options; + } + // get options from parent element first, stop if element tag name is 'body' - if ($el.length !== 0 && $el[0].nodeName !== "BODY") { - options = this.getOptions($el.parent(), patternName, options); + if (el.nodeName !== "BODY") { + options = this.getOptions(el.parentElement, pattern_name, options); } // collect all options from element - let elOptions = {}; - if ($el.length !== 0) { - elOptions = $el.data("pat-" + patternName); - if (elOptions) { - // parse options if string - if (typeof elOptions === "string") { - const tmpOptions = {}; - elOptions.split(";").forEach(item => { - item = item.split(":"); - item.reverse(); - let key = item.pop(); - key = key.replace(/^\s+|\s+$/g, ""); // trim - item.reverse(); - let value = item.join(":"); - value = value.replace(/^\s+|\s+$/g, ""); // trim - tmpOptions[key] = value; - }); - elOptions = tmpOptions; - } + let el_options = {}; + // Use `getAttribute` over `dataset` because dataset uses camelCasing of data attributes. + el_options = el.getAttribute(`data-pat-${pattern_name}`); + if (el_options) { + // parse options if string + if (typeof el_options === "string") { + const tmp_options = {}; + el_options.split(";").forEach((item) => { + item = item.split(":"); + item.reverse(); + let key = item.pop(); + key = key.replace(/^\s+|\s+$/g, ""); // trim + item.reverse(); + let value = item.join(":"); + value = value.replace(/^\s+|\s+$/g, ""); // trim + tmp_options[key] = value; + }); + el_options = tmp_options; } } return { ...options, - ...elOptions, - } + ...el_options, + }; }, }; diff --git a/src/core/mockup-parser.test.js b/src/core/mockup-parser.test.js index e6874af24..a9efa61a8 100644 --- a/src/core/mockup-parser.test.js +++ b/src/core/mockup-parser.test.js @@ -14,15 +14,15 @@ describe("The mockup-parser", function () { it("parses the data attribute of nested nodes", function () { const $el = $(`
- + nested mockup parser test
`); - const options = mockupParser.getOptions($el, "testpattern"); + const options = mockupParser.getOptions($(".pat-testpattern", $el), "testpattern"); expect(options.parentOption1).toBe("value1"); expect(options.parentOption2).toBe("value2"); - expect(options.option1).toBe(undefined); - expect(options.option2).toBe(undefined); + expect(options.option1).toBe("subvalue1"); + expect(options.option2).toBe("subvalue2"); }); it("parses the data attribute of a single node and preserves injected options", function () { const $el = $(` diff --git a/src/core/utils.js b/src/core/utils.js index 953d9d72f..a3de00864 100644 --- a/src/core/utils.js +++ b/src/core/utils.js @@ -618,7 +618,7 @@ const isIE = () => { const jqToNode = (el) => { // Return a DOM node if a jQuery node was passed. - if (el.jquery) { + if (el?.jquery) { el = el[0]; } return el; diff --git a/src/core/utils.test.js b/src/core/utils.test.js index 8bac9798c..c30909c7c 100644 --- a/src/core/utils.test.js +++ b/src/core/utils.test.js @@ -650,6 +650,13 @@ describe("core.utils tests", () => { done(); }); + + it("it returns the empty value, if no element was passed.", (done) => { + expect(utils.jqToNode(null)).toBe(null); + expect(utils.jqToNode(undefined)).toBe(undefined); + + done(); + }); }); describe("ensureArray tests", () => {