add extra visibility conditions logic. Allow value * which accepts all non empty values. Add option for unequals check.

Author: Erik2609

layouts/shortcodes/dynamic_form_engine.html

@@ -28,8 +28,12 @@ <h3>{{.title}}</h3>
       {{ $visibilityCondition := "" }}
       {{ range .visible_when_or }}
       {{ range .visible_when_and }}
+      {{ $compareSign := "==" }}
+      {{ if .compareSign }}
+      {{ $compareSign = .compareSign }}
+      {{ end }}
       {{ $visibilityCondition = printf "%s" $visibilityCondition | printf "%s%s" .value | printf "%s" }}
-      {{ $visibilityCondition = printf "%s" $visibilityCondition | printf "%s%s" "=" | printf "%s" }}
+      {{ $visibilityCondition = printf "%s" $visibilityCondition | printf "%s%s" $compareSign | printf "%s" }}
       {{ $visibilityCondition = printf "%s" $visibilityCondition | printf "%s%s" .identifier | printf "%s" }}
       {{ $visibilityCondition = printf "%s" $visibilityCondition | printf "%s%s" "&&" | printf "%s" }}
       {{ end }}
@@ -166,8 +170,12 @@ <h6 class="d-inline ml-1" >{{.title}}</h6>
 <script>
   document.addEventListener("DOMContentLoaded", function (event) {
 
+    var valuesAreEqual = function (inputValue, value) {
+      return inputValue === value || (value === '*' && inputValue);
+    }
+
     var calculateVisibleFields = function () {
-      // this is what the data attribute looks like: data-show-when="||&&data1=medium&&data2=medium||&&data1=low"
+      // this is what the data attribute looks like: data-show-when=="||&&data1==medium&&data2=medium||&&data1==low"
       // This field should be hidden when no input is selected, and shown if either data 1 and data 2 are medium or data 1 is low.
       $('.score-card__question').each(function () {
         const showWhen = $(this).attr('data-show-when');
@@ -183,14 +191,26 @@ <h6 class="d-inline ml-1" >{{.title}}</h6>
               if (andCondition.indexOf('=') === -1) {
                 return;
               }
-              const [name, value] = andCondition.split('=');
+              // And condition can be either a==b or a!=b
+              const andCondSplitted = andCondition.split('=');
+              let name = andCondSplitted[0];
+              let value = andCondSplitted[andCondSplitted.length - 1];
+              const checkForEquals = andCondSplitted.length > 2;
+              const checkForUnequal = !checkForEquals;
+              if (!checkForEquals) {
+                // clean up name when name is a!
+                name = name.substring(0, name.length - 1);
+              }
+
               // Check for radio button
               let input = document.querySelector(`.score-card__question:not(.d-none) input[name=${name}]:checked`);
               // Check for checkbox
               if (!input) {
                 input = document.querySelector(`.score-card__question:not(.d-none) input[id=${name}]:checked`);
               }
-              if (!input || input.value !== value) {
+              if (!input 
+              || (checkForEquals && !valuesAreEqual(input.value, value))
+              || (checkForUnequal && valuesAreEqual(input.value, value))) {
                 andShow = false;
               }
             });

tina/collections/shared/page/building_blocks.ts

@@ -355,6 +355,25 @@ const building_blocks: TinaField[] = [
                         name: "value",
                         label: "Value",
                         required: true,
+                        description:
+                          "The value of the option, or * when all values are allowed",
+                      },
+                      {
+                        type: "string",
+                        name: "compareSign",
+                        label: "Should be",
+                        options: [
+                          {
+                            value: "==",
+                            label: "Equal to",
+                          },
+                          {
+                            value: "!=",
+                            label: "Unequal to",
+                          },
+                        ],
+                        description:
+                          "Allows equal or unequal comparison, empty or default is equal",
                       },
                     ],
                   },