From 62473fb29ff6b9fe63212c3bdb0d8f88fc6bebea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pablo=20Alcaraz=20Mart=C3=ADnez?= <pablo@alcarazm.es>
Date: Sun, 21 Apr 2024 21:01:44 +0200
Subject: [PATCH 1/2] feat: Add Rerender feature closes #140

refers: palcarazm/bootstrap5-toggle#140
---
 js/bootstrap5-toggle.ecmas.js  |  6 +++++
 js/bootstrap5-toggle.jquery.js |  5 ++++
 test/test-app.js               |  5 ++++
 test/test-loader.js            | 42 ++++++++++++++++++++++++++++++++++
 4 files changed, 58 insertions(+)

diff --git a/js/bootstrap5-toggle.ecmas.js b/js/bootstrap5-toggle.ecmas.js
index 9675e56..c403397 100644
--- a/js/bootstrap5-toggle.ecmas.js
+++ b/js/bootstrap5-toggle.ecmas.js
@@ -476,6 +476,11 @@ function sanitize(text) {
       delete this.element.bsToggle;
       delete this.ecmasToggle;
     }
+
+    rerender() {
+      this.destroy();
+      this.element.bootstrapToggle();
+    }
   }
 
   /**
@@ -498,6 +503,7 @@ function sanitize(text) {
       else if (options.toLowerCase() == "disable") _bsToggle.disable();
       else if (options.toLowerCase() == "readonly") _bsToggle.readonly();
       else if (options.toLowerCase() == "destroy") _bsToggle.destroy();
+      else if (options.toLowerCase() == "rerender") _bsToggle.rerender();
     }
   };
 
diff --git a/js/bootstrap5-toggle.jquery.js b/js/bootstrap5-toggle.jquery.js
index 0c8d4b8..e07e2c8 100644
--- a/js/bootstrap5-toggle.jquery.js
+++ b/js/bootstrap5-toggle.jquery.js
@@ -437,6 +437,11 @@ function sanitize(text) {
     this.$element.unwrap();
   };
 
+  Toggle.prototype.rerender = function () {
+    this.destroy();
+    this.$element.bootstrapToggle();
+  };
+
   // TOGGLE PLUGIN DEFINITION
   // ========================
 
diff --git a/test/test-app.js b/test/test-app.js
index 25f0f1b..3f0b346 100644
--- a/test/test-app.js
+++ b/test/test-app.js
@@ -13,6 +13,7 @@ const TESTCASES = [
   { name: "layout", code: "layout" },
   { name: "API contructor", code: "api-constructor" },
   { name: "API methods", code: "api-methods" },
+  { name: "API rerender", code: "api-rerender" },
 ];
 function appStartup(test) {
   ENV.html("");
@@ -69,6 +70,9 @@ function appStartup(test) {
     case "api-methods":
       initTestApiMethods();
       break;
+    case "api-rerender":
+      initTestApiRerender();
+      break;
 
     default:
       throw new DOMException("Unknown test case: " + test, "NotSupportedError");
@@ -126,6 +130,7 @@ function appStartup(test) {
         break;
       case "api-constructor":
       case "api-methods":
+      case "api-rerender":
       case "tristate":
         break;
 
diff --git a/test/test-loader.js b/test/test-loader.js
index f7bc195..9df2f13 100644
--- a/test/test-loader.js
+++ b/test/test-loader.js
@@ -734,3 +734,45 @@ function initTestApiMethods() {
   testDiv.append($('<div class="row mb-3">').append(toggleDiv, buttonDiv));
   MAIN.append(TEST_TITLE.clone().html("API all options"), testDiv);
 }
+
+/**
+ * Create the layout for testing render feature
+ */
+function initTestApiRerender() {
+  let toggleDiv, buttonDiv, testDiv;
+  DESCRIPTION.html("Check <code>bootstrap5-toggle</code> render");
+  toggleDiv = COL.clone().append(
+    $(
+      '<div id="fold" class="d-none"><input id="toggle" type="checkbox" data-toggle="toggle"></div>'
+    )
+  );
+  buttonDiv = COL.clone().append(
+    $("<div>")
+      .addClass("btn-group mb-2")
+      .attr("role", "group")
+      .append(
+        $(
+          '<button type="button" class="btn btn-outline-secondary" data-method="unfold">'
+        )
+          .html("unfold")
+          .on("click", () => {
+            $("#fold").removeClass("d-none");
+          }),
+        $(
+          '<button type="button" class="btn btn-outline-secondary" data-method="rerender">'
+        )
+          .html("rerender")
+          .on("click", () => {
+            if (INTERFACE == "JQUERY") $("#toggle").bootstrapToggle("rerender");
+            if (INTERFACE == "ECMAS")
+              document.querySelector("#toggle").bootstrapToggle("rerender");
+          })
+      )
+  );
+  testDiv = TEST_CONTAINER.clone().attr("id", "status-" + status.name);
+  testDiv.append($('<div class="row mb-3">').append(toggleDiv, buttonDiv));
+  testDiv.append(
+    $('<div class="row align-items-center">').append(COL.clone(), COL.clone())
+  );
+  MAIN.append(TEST_TITLE.clone().html("Rerender"), testDiv);
+}

From 927e63b36fc80eead63a262f3683b4c6e138984d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pablo=20Alcaraz=20Mart=C3=ADnez?= <pablo@alcarazm.es>
Date: Sun, 21 Apr 2024 21:03:54 +0200
Subject: [PATCH 2/2] docs: Add rerender feature docs

---
 README.md | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 75633f1..23fea15 100644
--- a/README.md
+++ b/README.md
@@ -183,18 +183,19 @@ Methods can be used to control toggles directly.
 </script>
 ```
 
-| Method        | Example                                       | Description                                       |
-| ------------- | --------------------------------------------- | ------------------------------------------------- |
-| initialize    | `toggleDemo.bootstrapToggle()`                | Initializes the toggle plugin with options        |
-| destroy       | `toggleDemo.bootstrapToggle('destroy')`       | Destroys the toggle                               |
-| on            | `toggleDemo.bootstrapToggle('on')`            | Sets the toggle to 'On' state                     |
-| off           | `toggleDemo.bootstrapToggle('off')`           | Sets the toggle to 'Off' state                    |
-| toggle        | `toggleDemo.bootstrapToggle('toggle')`        | Toggles the state of the toggle on/off            |
-| enable        | `toggleDemo.bootstrapToggle('enable')`        | Enables the toggle                                |
-| disable       | `toggleDemo.bootstrapToggle('disable')`       | Disables the toggle                               |
-| readonly      | `toggleDemo.bootstrapToggle('readonly')`      | Disables the toggle but preserve checkbox enabled |
-| indeterminate | `toggleDemo.bootstrapToggle('indeterminate')` | Sets the toggle to 'indeterminate' state          |
-| determinate   | `toggleDemo.bootstrapToggle('determinate')`   | Sets the toggle to 'determinate' state            |
+| Method        | Example                                       | Description                                                                           |
+| ------------- | --------------------------------------------- | ------------------------------------------------------------------------------------- |
+| initialize    | `toggleDemo.bootstrapToggle()`                | Initializes the toggle plugin with options                                            |
+| destroy       | `toggleDemo.bootstrapToggle('destroy')`       | Destroys the toggle                                                                   |
+| rerender      | `toggleDemo.bootstrapToggle('rerender')`      | Rerender toggle with the appropriated size. Useful when parent is collapsed at first. |
+| on            | `toggleDemo.bootstrapToggle('on')`            | Sets the toggle to 'On' state                                                         |
+| off           | `toggleDemo.bootstrapToggle('off')`           | Sets the toggle to 'Off' state                                                        |
+| toggle        | `toggleDemo.bootstrapToggle('toggle')`        | Toggles the state of the toggle on/off                                                |
+| enable        | `toggleDemo.bootstrapToggle('enable')`        | Enables the toggle                                                                    |
+| disable       | `toggleDemo.bootstrapToggle('disable')`       | Disables the toggle                                                                   |
+| readonly      | `toggleDemo.bootstrapToggle('readonly')`      | Disables the toggle but preserve checkbox enabled                                     |
+| indeterminate | `toggleDemo.bootstrapToggle('indeterminate')` | Sets the toggle to 'indeterminate' state                                              |
+| determinate   | `toggleDemo.bootstrapToggle('determinate')`   | Sets the toggle to 'determinate' state                                                |
 
 # Events