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. ``` -| 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 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($('
').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 bootstrap5-toggle render"); + toggleDiv = COL.clone().append( + $( + '
' + ) + ); + buttonDiv = COL.clone().append( + $("
") + .addClass("btn-group mb-2") + .attr("role", "group") + .append( + $( + '