feat: Add rerender feature

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
 

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();
  }
  };
 

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
  // ========================
 

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;
 

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);
+}