Merge pull request #9 from saicheck2233/issue#130_#144

Issue#130 and brutusin#144: Add collapsible form support
saicheck2233 · Jul 11, 2023 · a355633 · a355633
2 parents 0115dc3 + 9bff150
commit a355633
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 0 deletions.
diff --git a/src/css/brutusin-json-forms.css b/src/css/brutusin-json-forms.css
@@ -115,3 +115,55 @@ form.brutusin-form .error {
 form.brutusin-form .error-message {
     color: red;
 }
+
+.brutusin-card {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: border-box;
+    border: 1px solid rgba(0,0,0,.125);
+    border-radius: 0.25rem;
+}
+
+.brutusin-card-header {
+    padding: 0.5rem 1.25rem;
+    margin-bottom: 0;
+    background-color: rgba(0,0,0,.03);
+    border-bottom: 1px solid rgba(0,0,0,.125);
+}
+
+.brutusin-card-body {
+    -webkit-box-flex: 1;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    padding: 1.25rem;
+}
+
+.brutusin-card-header a[data-toggle="collapse"]:after {
+    font-family:'Bootstrap-icons';
+    display: inline-block;
+    content: "\F229";
+    transition: all linear 0.25s;
+    margin-left: 0.7rem;
+}
+
+.brutusin-card-header a[data-toggle="collapse"].collapsed:after {
+    transform: rotate(-180deg);
+}
+
+#expand-btn.btn-link:focus, #expand-btn.btn-link:hover {
+    text-decoration: unset;
+}
+
+#expand-btn {
+    display: flex;
+    padding: 6px 0;
+}
diff --git a/src/js/brutusin-json-forms-bootstrap.js b/src/js/brutusin-json-forms-bootstrap.js
@@ -50,6 +50,37 @@ if (("undefined" === typeof $ || "undefined" === typeof $.fn || "undefined" ===
             }
         }
     });
+
+    //Collapsible form
+    BrutusinForms.addDecorator(function (element, schema) {
+        if (schema !== undefined) {
+            if (schema.collapsible !== undefined && schema.collapsible === true) {
+                var parentElement = element.parentElement;
+                var tagName = parentElement.tagName.toLowerCase();
+                if (tagName === "form") {
+                    parentElement.className += " brutusin-card-body";
+                    var formParentElement = parentElement.parentElement;
+
+                    var divCard = document.createElement("div");
+                    divCard.className = "brutusin-card";
+                    divCard.innerHTML = "<div class='brutusin-card-header'><a id='expand-btn' class='btn btn-link' data-toggle='collapse' data-target='#brutusin-form-collapsible' aria-expanded='true' aria-controls='brutusin-form-collapsible'></a></div>";
+
+                    var divCardBody = document.createElement("div");
+                    divCardBody.className = "collapse in";
+                    divCardBody.id = "brutusin-form-collapsible";
+                    divCardBody.setAttribute("aria-expanded", "true");
+                    divCardBody.appendChild(parentElement);
+                    divCard.appendChild(divCardBody);
+
+                    formParentElement.appendChild(divCard);
+
+                    if (schema.title !== undefined) {
+                        document.getElementById("expand-btn").textContent = schema.title;
+                    }
+                }
+            } 
+        }
+    });
 
 
 // Description help icon