diff --git a/application/source/dom/util/init-options-from-attributes.mjs b/application/source/dom/util/init-options-from-attributes.mjs index 57fdc0c8f97b53fb1b87c88e8d99967b6fd1fab2..85664dee76277157bf71551935960d35a3ffb7b1 100644 --- a/application/source/dom/util/init-options-from-attributes.mjs +++ b/application/source/dom/util/init-options-from-attributes.mjs @@ -7,6 +7,7 @@ import {Pathfinder} from '../../data/pathfinder.mjs'; import {isFunction} from '../../types/is.mjs'; +import {attributeObserverSymbol} from "../customelement.mjs"; export {initOptionsFromAttributes}; @@ -74,6 +75,30 @@ function initOptionsFromAttributes(element, options, mapping = {}, prefix = 'dat } finder.setVia(optionName, value); + + // if element has an attribute observer, then register the attribute observer + if (element?.[attributeObserverSymbol]) { + element[attributeObserverSymbol][name] = (newValue, oldValue) => { + + if (newValue === oldValue) return; + + let changedValue = newValue; + + if (typeOfOptionValue === 'boolean') { + changedValue = changedValue === 'true'; + } else if (typeOfOptionValue === 'number') { + changedValue = Number(changedValue); + } else if (typeOfOptionValue === 'string') { + changedValue = String(changedValue); + } else if (typeOfOptionValue === 'object') { + changedValue = JSON.parse(changedValue); + } + + finder.setVia(optionName, changedValue); + } + } + + } }) diff --git a/development/test/cases/dom/util/init-options-from-attributes.mjs b/development/test/cases/dom/util/init-options-from-attributes.mjs index 40af26b2bec21743b05235d87e8d7480912de582..7139f8dcc5e2acb9740285d098f0a699b8d8d579 100644 --- a/development/test/cases/dom/util/init-options-from-attributes.mjs +++ b/development/test/cases/dom/util/init-options-from-attributes.mjs @@ -1,18 +1,23 @@ import {expect} from "chai" -import {initOptionsFromAttributes} from "../../../../..//application/source/dom/util/init-options-from-attributes.mjs"; import {initJSDOM} from "../../../util/jsdom.mjs"; describe('initOptionsFromAttributes', () => { let element; let options; - - before(async function () { - await initJSDOM(); - }) + let initOptionsFromAttributes; + + before( function (done) { + initJSDOM().then(() => { + import("../../../../..//application/source/dom/util/init-options-from-attributes.mjs").then((m) => { + initOptionsFromAttributes = m['initOptionsFromAttributes']; + done(); + }) + }) + }); beforeEach(() => { - options = { url: "", key: { subkey: "", caseSensitive: true } }; + options = {url: "", key: {subkey: "", caseSensitive: true}}; element = document.createElement('div'); }); @@ -150,13 +155,13 @@ describe('initOptionsFromAttributes', () => { const result = initOptionsFromAttributes(element, options, mapping); expect(result.url).to.equal(''); - }); - + }); + it('should apply case sensitive mapping', () => { element.setAttribute('data-monster-option-key-caseSensitive', 'false'); const result = initOptionsFromAttributes(element, options); expect(result.key.caseSensitive).to.equal(false); - }); - + }); + });