Closest ancestor as target element.

README.md

@@ -22,8 +22,12 @@ Place the widget inside your app and provide the following settings:
 - `Microflow`: A microflow that has no parameters and returns a string with CSS classes that should be added to target elements. Multiple classes can be seperated with a space.
 - `Nanoflow`: Alternatively, you can use a nanoflow instead of microflow - as above.
 - `Target element selector`: Optional CSS selector of target elements to add the classes to. If empty, the parent element of the widget will be used.
+- `Target element selector lookup method`: Determines whether the DOM will be searched for _all_ elements matching the target element selector or the ancestor element closest to the widget.
 - `CSS classes to remove`: Optional CSS classes to be removed from the target elements. Multiple classes can be seperated with a space.
 
+## Limitations
+- Internet Explorer is not compatible with the lookup method `Closest ancestor`.
+
 ## Inspired by / thanks to
 - [Dynamic Classes widget](https://appstore.home.mendix.com/link/app/108838/)
 - [StyleSheetSwitcher widget](https://appstore.home.mendix.com/link/app/106033/).

src/CssClassSwitcher/CssClassSwitcher.xml

@@ -20,11 +20,20 @@
             <description>Alternatively, you can use a nanoflow instead of microflow - as above.</description>
             <returnType type="String" />
         </property>
-        <property key="elementSelector" type="string" required="false" defaultValue="">
+        <property key="elementSelector" type="string" required="false">
             <caption>Target element selector</caption>
             <category>Behavior</category>
             <description>Optional CSS selector of target elements to add the classes to. If empty, the parent element of the widget will be used.</description>
         </property>
+        <property key="lookupMethod" type="enumeration" defaultValue="all">
+            <caption>Target element selector lookup method</caption>
+            <category>Behavior</category>
+            <description>Determines in what way the target element should be selected. 'Closest ancestor' is not supported in IE.</description>
+            <enumerationValues>
+                <enumerationValue key="all">All matching elements</enumerationValue>
+                <enumerationValue key="closest">Closest ancestor</enumerationValue>
+            </enumerationValues>
+        </property>
         <property key="classesToRemove" type="string" required="false" defaultValue="">
             <caption>CSS classes to remove</caption>
             <category>Behavior</category>

src/CssClassSwitcher/widget/CssClassSwitcher.js

@@ -13,15 +13,23 @@ define([
         classGetterNanoflow: "",
         elementSelector: "",
         classesToRemove: "",
+        lookupMethod: "all",
 
         // internals
         _elementsToApplyTo: null,
 
         postCreate: function () {
           this.domNode.style.display = "none";
-          this._elementsToApplyTo = this.elementSelector
-            ? Array.prototype.slice.call(document.querySelectorAll(this.elementSelector)) // NodeList to Array, cross-browser safe
-            : [this.domNode.parentNode];
+
+          if(this.lookupMethod === "all") {
+            this._elementsToApplyTo = this.elementSelector
+              ? Array.prototype.slice.call(document.querySelectorAll(this.elementSelector)) // NodeList to Array, cross-browser safe
+              : [this.domNode.parentNode];
+          }
+          else {
+            this._elementsToApplyTo = this.elementSelector
+              ? [this.domNode.closest(this.elementSelector)]: [this.domNode.parentNode];
+          }
         },
 
         update: function (obj, callback) {

src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="CssClassSwitcher" version="1.1.3" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="CssClassSwitcher" version="1.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="CssClassSwitcher/CssClassSwitcher.xml" />
         </widgetFiles>