docs: Tristate toggle

Refs: #40
palcarazm · Jul 21, 2022 · 758418e · 758418e
1 parent 29ddc83
commit 758418e
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 8 deletions.
diff --git a/doc/api.html b/doc/api.html
@@ -173,14 +173,25 @@ <h3 class="text-secondary">Options</h3>
                     </span>
                 </td>
             </tr>
+            <tr>
+                <td><code>tristate</code></td>
+                <td>boolean</td>
+                <td><code>false</code></td>
+                <td class="position-relative">Sets tristate support.
+                    <span class="position-absolute top-50 end-0 translate-middle-y badge rounded-pill bg-danger">
+                        NEW
+                        <span class="visually-hidden">v4.3.0</span>
+                    </span>
+                </td>
+            </tr>
         </tbody>
     </table>
 </div>
 
 <h3 class="text-secondary">Methods</h3>
 <p>Methods can be used to control toggles directly.</p>
 <div class="example" code-lang="html">
-    <input id="toggle-demo" type="checkbox" data-toggle="toggle">
+    <input id="toggle-demo" type="checkbox" data-toggle="toggle" tristate>
 </div>
 <div class="table-responsive">
     <table class="table table-striped table-condensed">
@@ -244,14 +255,38 @@ <h3 class="text-secondary">Methods</h3>
             <tr>
                 <td>readonly</td>
                 <td><code>$('#toggle-demo').bootstrapToggle('readonly')</code></td>
-                <td class="position-relative">
+                <td>
                     Disables the toggle but the checkbox stay enabled
-                    <span class="position-absolute top-50 end-0 translate-middle-y badge rounded-pill bg-danger">
+                    <span class="badge rounded-pill bg-danger">
+                        NEW
+                        <span class="visually-hidden">v4.3.0</span>
+                    </span>
+                </td>
+                <td><button class="btn btn-outline-dark btn-sm w-100" onclick="demo.readonly('#toggle-demo')">Readonly</button></td>
+            </tr>
+            <tr>
+                <td>indeterminate</td>
+                <td><code>$('#toggle-demo').bootstrapToggle('indeterminate')</code></td>
+                <td>
+                    Sets the toggle to 'indeterminate' state
+                    <span class="badge rounded-pill bg-danger">
+                        NEW
+                        <span class="visually-hidden">v4.3.0</span>
+                    </span>
+                </td>
+                <td><button class="btn btn-outline-dark btn-sm w-100" onclick="demo.indeterminate('#toggle-demo')">Indeterminate</button></td>
+            </tr>
+            <tr>
+                <td>determinate</td>
+                <td><code>$('#toggle-demo').bootstrapToggle('determinate')</code></td>
+                <td>
+                    Sets the toggle to 'determinate' state
+                    <span class="badge rounded-pill bg-danger">
                         NEW
                         <span class="visually-hidden">v4.3.0</span>
                     </span>
                 </td>
-                <td><button class="btn btn-outline-dark btn-sm w-100" onclick="demo.disable('#toggle-demo')">Readonly</button></td>
+                <td><button class="btn btn-outline-dark btn-sm w-100" onclick="demo.determinate('#toggle-demo')">Determinate</button></td>
             </tr>
         </tbody>
     </table>

diff --git a/doc/event.html b/doc/event.html
@@ -25,7 +25,7 @@ <h3 class="text-secondary">Event Propagation</h3>
 &lt;/script&gt;</code></pre>
 
 <h3 class="text-secondary">Stopping Event Propagation</h3>
-<p>Passing <code>true</code> to the on, off and toogle methods will enable the silent option to prevent the control from propagating the change event in cases where you want to update the controls on/off state, but do not want to fire the onChange event.</p>
+<p>Passing <code>true</code> to the on, off, toggle, determinate and indeterminate methods will enable the silent option to prevent the control from propagating the change event in cases where you want to update the controls on/off state, but do not want to fire the onChange event.</p>
 <div class="example skip">
     <input id="toggle-silent" type="checkbox" data-toggle="toggle"
         onchange="$('#chgConsole').html($('#chgConsole').html()+new Date().toISOString()+' ... change event fired!<br>> ')"><br>

diff --git a/doc/features.html b/doc/features.html
@@ -18,6 +18,18 @@ <h3 class="text-secondary">Custom Sizes</h3>
     <input type="checkbox" checked data-toggle="toggle" data-width="100">
 </div>
 
+<h3 class="text-secondary">Tristate Toggle</h3>
+<p>
+    Simply add <code>tristate</code> to enable a three state toggle.
+    <span class="badge rounded-pill bg-danger">
+        NEW
+        <span class="visually-hidden">v4.3.0</span>
+    </span>
+</p>
+<div class="example" code-lang="html">
+    <input type="checkbox" checked data-toggle="toggle" tristate>
+</div>
+
 <h3 class="text-secondary">Colors</h3>
 <p>Bootstrap Toggle implements all standard bootstrap 5 button colors.</p>
 <div class="example" code-lang="html">

diff --git a/doc/notice.html b/doc/notice.html
@@ -25,7 +25,7 @@ <h1 class="alert-heading fs-2">Made for Bootstrap 5!</h1>
                         style="font-size:24px"></i>
                 </div>
                 <div class="col-10">
-                    Supports outline colors
+                    Includes a mini (-xs) size
                 </div>
             </div>
         </div>
@@ -38,7 +38,11 @@ <h1 class="alert-heading fs-2">Made for Bootstrap 5!</h1>
                         style="font-size:24px"></i>
                 </div>
                 <div class="col-10">
-                    Includes a mini (-xs) size
+                    With jQuery and vanilla JavaScript (ECMAS) interfaces
+                    <span class="badge rounded-pill bg-danger">
+                        NEW
+                        <span class="visually-hidden">v4.3.0</span>
+                    </span>
                 </div>
             </div>
         </div>
@@ -51,7 +55,7 @@ <h1 class="alert-heading fs-2">Made for Bootstrap 5!</h1>
                         style="font-size:24px"></i>
                 </div>
                 <div class="col-10">
-                    With jQuery and vanilla JavaScript (ECMAS) interfaces
+                    Supports three states toggle
                     <span class="badge rounded-pill bg-danger">
                         NEW
                         <span class="visually-hidden">v4.3.0</span>

diff --git a/src/script.js b/src/script.js
@@ -94,5 +94,14 @@ Demo.prototype.enable = function (selector) {
 Demo.prototype.disable = function (selector) {
   $(selector).bootstrapToggle("disable");
 };
+Demo.prototype.readonly = function (selector) {
+  $(selector).bootstrapToggle("readonly");
+};
+Demo.prototype.indeterminate = function (selector) {
+  $(selector).bootstrapToggle("indeterminate");
+};
+Demo.prototype.determinate = function (selector) {
+  $(selector).bootstrapToggle("determinate");
+};
 
 demo = new Demo();