Added support for silent toggle (Issue #7)

Author: gitbrent

CHANGELOG.md

@@ -6,9 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
-## [3.6.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.6.0) 2019-??-??
+## [3.6.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.6.0) 2019-10-17
 ### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.5.0...v3.6.0)
 ### Added
+- Added option to change toggle without triggering onChange event (silent toggle) [\#7](https://github.com/gitbrent/bootstrap4-toggle/issue/7) ([aswin1980](https://github.com/aswin1980))
 - Added accessibility properties to labels [\#11](https://github.com/gitbrent/bootstrap4-toggle/issue/11) ([aproquot](https://github.com/aproquot))
 ### Changed
 - Fixed URLs in js and css file top comment [\#5](https://github.com/gitbrent/bootstrap4-toggle/issue/5) ([wilecoyte78](https://github.com/wilecoyte78))

index.html

@@ -6,7 +6,7 @@
 	<meta name="description" content="Bootstrap 4 Toggle is a bootstrap plugin that converts checkboxes into responsive toggles.">
 	<meta name="keywords" content="bootstrap, toggle, switch, bootstrap-toggle, bootstrap-switch, bootstrap-checkbox">
 	<meta name="author" content="https://github.com/gitbrent">
-	<meta name="version" content="v3.5.0">
+	<meta name="version" content="v3.6.0">
 	<meta name="robots" content="index, follow">
 	<meta name="revisit-after" content="1 month">
 	<title>Bootstrap 4 Toggle Switch Button Checkbox</title>
@@ -452,8 +452,11 @@ <h2>Events</h2>
 			<hr>
 
 			<h3 class="text-secondary mt-4">Event Propagation</h3>
-			<p><span class="label label-primary">Note</span> All events are propagated to and from input element to the toggle. </p>
-			<p>You should listen to events from the <code>&lt;input type="checkbox"></code> directly rather than look for custom events.</p>
+			<p>
+				<div class="label label-primary">Notes</div>
+				&bull;&nbsp;All events are propagated to and from input element to the toggle.<br>
+				&bull;&nbsp;Listen for events on the <code>&lt;input type="checkbox"></code> directly as the toggle stays synced with the input.
+			</p>
 			<div class="example">
 				<input id="toggle-event" type="checkbox" data-toggle="toggle">
 				<div id="console-event"></div>
@@ -465,6 +468,33 @@ <h3 class="text-secondary mt-4">Event Propagation</h3>
 					})
 				</script>
 			</div>
+			<h3 class="text-secondary mt-4">Stopping Event Propagation</h3>
+			<p>
+				Passing <code>true</code> to the on/off 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">
+				<input id="toggle-silent" type="checkbox" data-toggle="toggle" onchange="$('#chgConsole').text(new Date().toISOString()+' ... change event fired!')">
+				<button class="btn btn-success" onclick="toggleApiOnSilent()" >On by API (silent)</button>
+				<button class="btn btn-success"  onclick="toggleApiOffSilent()">Off by API (silent)</button>
+				<button class="btn btn-warning" onclick="toggleApiOnNotSilent()">On by API (not silent)</button>
+				<button class="btn btn-warning" onclick="toggleApiOffNotSilent()">On by API (not silent)</button>
+				<script>
+					function toggleApiOnSilent() {
+						$('#toggle-silent').bootstrapToggle('on', true);
+					}
+					function toggleApiOffSilent() {
+						$('#toggle-silent').bootstrapToggle('off', true);
+					}
+					function toggleApiOnNotSilent() {
+						$('#toggle-silent').bootstrapToggle('on');
+					}
+					function toggleApiOffNotSilent() {
+						$('#toggle-silent').bootstrapToggle('off');
+					}
+				</script>
+				<pre class="mb-0"><code id="chgConsole" class="text-info"></code></pre>
+			</div>
 
 			<h3 class="text-secondary mt-4">API vs Input</h3>
 			<p>This also means that using the API or Input to trigger events will work both ways.</p>

js/bootstrap4-toggle.js

@@ -145,13 +145,17 @@
 	// ========================
 
 	function Plugin(option) {
+		var optArg = Array.prototype.slice.call( arguments, 1 )[0]
+
 		return this.each(function () {
 			var $this   = $(this)
 			var data    = $this.data('bs.toggle')
 			var options = typeof option == 'object' && option
 
 			if (!data) $this.data('bs.toggle', (data = new Toggle(this, options)))
-			if (typeof option == 'string' && data[option]) data[option]()
+			if (typeof option === 'string' && data[option] && typeof optArg === 'boolean') data[option](optArg)
+			else if (typeof option === 'string' && data[option]) data[option]()
+			//else if (option && !data[option]) console.log('bootstrap-toggle: error: method `'+ option +'` does not exist!');
 		})
 	}