bootstrap5-toggle 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE ADDED
@@ -0,0 +1,23 @@
1
+ The MIT License (MIT)
2
+
3
+ - Copyright (c) 2011-2014 Min Hur, The New York Times Company
4
+ - Copyright (c) 2018-2019 Brent Ely
5
+ - Copyright (c) 2022 Pablo Alcaraz Martínez
6
+
7
+ Permission is hereby granted, free of charge, to any person obtaining a copy
8
+ of this software and associated documentation files (the "Software"), to deal
9
+ in the Software without restriction, including without limitation the rights
10
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11
+ copies of the Software, and to permit persons to whom the Software is
12
+ furnished to do so, subject to the following conditions:
13
+
14
+ The above copyright notice and this permission notice shall be included in
15
+ all copies or substantial portions of the Software.
16
+
17
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
23
+ THE SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,200 @@
1
+ [![Latest release](https://img.shields.io/github/v/release/palcarazm/bootstrap5-toggle.svg?display_name=tag&include_prereleases&sort=semver)](https://github.com/palcarazm/bootstrap5-toggle/releases/latest)
2
+ [![GitHub license](https://img.shields.io/github/license/palcarazm/bootstrap5-toggle.svg)](https://github.com/palcarazm/bootstrap5-toggle/blob/master/LICENSE)
3
+ [![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/palcarazm/bootstrap5-toggle/graphs/contributors)
4
+ [![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)]()
5
+ [![Bootstrap 5.1.3](https://img.shields.io/badge/bootstrap-5.1.3-green.svg?style=flat-square)](https://getbootstrap.com/docs/5.1)
6
+ [![JSDelivr Badge](https://data.jsdelivr.com/v1/package/gh/palcarazm/bootstrap5-toggle/badge)](https://www.jsdelivr.com/package/gh/palcarazm/bootstrap5-toggle)
7
+
8
+ # Bootstrap 5 Toggle
9
+
10
+ **Bootstrap 5 Toggle** is a bootstrap plugin/widget that converts checkboxes into toggles.
11
+
12
+ ***
13
+
14
+ #### Library Distributions
15
+ Project |Description
16
+ ---|---
17
+ [bootstrap5-toggle](https://github.com/palcarazm/bootstrap5-toggle) | Supports bootstrap5 (requires jQuery)
18
+ [bootstrap4-toggle](https://github.com/gitbrent/bootstrap4-toggle) | Supports bootstrap4 (requires jQuery)
19
+ [bootstrap-switch-button](https://github.com/gitbrent/bootstrap-switch-button) | Supports bootstrap4+ (ES6 class, no dependencies)
20
+ [bootstrap-switch-button-react](https://github.com/gitbrent/bootstrap-switch-button-react) | Supports bootstrap4+ (React component, no dependencies)
21
+
22
+ # Demos
23
+ **Demos and API Docs:** https://palcarazm.github.io/bootstrap5-toggle/
24
+
25
+ ![Demo GIF](img/bootstrap5-toggle-demo.gif)
26
+
27
+ <!-- START doctoc generated TOC please keep comment here to allow auto update -->
28
+ <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
29
+ **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)*
30
+
31
+ - [Bootstrap 5 Toggle](#bootstrap-5-toggle)
32
+ - [Library Distributions](#library-distributions)
33
+ - [Demos](#demos)
34
+ - [Installation](#installation)
35
+ - [CDN](#cdn)
36
+ - [Download](#download)
37
+ - [Usage](#usage)
38
+ - [Initialize With HTML](#initialize-with-html)
39
+ - [Initialize With Code](#initialize-with-code)
40
+ - [API](#api)
41
+ - [Options](#options)
42
+ - [Methods](#methods)
43
+ - [Events](#events)
44
+ - [Event Propagation](#event-propagation)
45
+ - [Stopping Event Propagation](#stopping-event-propagation)
46
+ - [API vs Input](#api-vs-input)
47
+
48
+ <!-- END doctoc generated TOC please keep comment here to allow auto update -->
49
+
50
+ **************************************************************************************************
51
+
52
+ # Installation
53
+
54
+ ## CDN
55
+ ```html
56
+ <link href="https://cdn.jsdelivr.net/gh/palcarazm/bootstrap5-toggle@4.0.0/css/bootstrap5-toggle.min.css" rel="stylesheet">
57
+ <script src="https://cdn.jsdelivr.net/gh/palcarazm/bootstrap5-toggle@4.0.0/js/bootstrap5-toggle.min.js"></script>
58
+ ```
59
+
60
+ ## Download
61
+ [Latest GitHub Release](https://github.com/palcarazm/bootstrap5-toggle/releases/latest)
62
+
63
+ # Usage
64
+
65
+ ## Initialize With HTML
66
+ Simply add `data-toggle="toggle"` to automatically convert a plain checkbox into a bootstrap 4 toggle.
67
+
68
+ ```html
69
+ <input id="chkToggle" type="checkbox" data-toggle="toggle">
70
+ ```
71
+
72
+ ## Initialize With Code
73
+ Toggles can also be initialized via JavaScript code.
74
+
75
+ EX: Initialize id `chkToggle` with a single line of JavaScript.
76
+ ```html
77
+ <input id="chkToggle" type="checkbox" checked>
78
+ <script>
79
+ $(function(){
80
+ $('#chkToggle').bootstrapToggle();
81
+ });
82
+ </script>
83
+ ```
84
+
85
+ # API
86
+
87
+ ## Options
88
+ * Options can be passed via data attributes or JavaScript
89
+ * For data attributes, append the option name to `data-` (ex: `data-on="Enabled"`)
90
+
91
+ ```html
92
+ <input type="checkbox" data-toggle="toggle" data-on="Enabled" data-off="Disabled">
93
+ <input type="checkbox" id="toggle-two">
94
+ <script>
95
+ $(function() {
96
+ $('#toggle-two').bootstrapToggle({
97
+ on: 'Enabled',
98
+ off: 'Disabled'
99
+ });
100
+ })
101
+ </script>
102
+ ```
103
+
104
+ Name |Type |Default |Description |
105
+ ----------|-----------|----------|----------------------------|
106
+ `on` |string/html|"On" |Text of the on toggle
107
+ `off` |string/html|"Off" |Text of the off toggle
108
+ `size` |string |"normal" |Size of the toggle. Possible values are: `large`, `normal`, `small`, `mini`.
109
+ `onstyle` |string |"primary" |Style of the on toggle. Possible values are: `primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark`
110
+ `offstyle`|string |"light" |Style of the off toggle. Possible values are: `primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark`
111
+ `style` |string | |Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference.
112
+ `width` |integer |*null* |Sets the width of the toggle. if set to *null*, width will be auto-calculated.
113
+ `height` |integer |*null* |Sets the height of the toggle. if set to *null*, height will be auto-calculated.
114
+
115
+ ## Methods
116
+ Methods can be used to control toggles directly.
117
+
118
+ ```html
119
+ <input id="toggle-demo" type="checkbox" data-toggle="toggle">
120
+ ```
121
+
122
+ Method |Example |Description
123
+ -----------|------------------------------------------------|------------------------------------------
124
+ initialize | `$('#toggle-demo').bootstrapToggle()` |Initializes the toggle plugin with options
125
+ destroy | `$('#toggle-demo').bootstrapToggle('destroy')` |Destroys the toggle
126
+ on | `$('#toggle-demo').bootstrapToggle('on')` |Sets the toggle to 'On' state
127
+ off | `$('#toggle-demo').bootstrapToggle('off')` |Sets the toggle to 'Off' state
128
+ toggle | `$('#toggle-demo').bootstrapToggle('toggle')` |Toggles the state of the toggle on/off
129
+ enable | `$('#toggle-demo').bootstrapToggle('enable')` |Enables the toggle
130
+ disable | `$('#toggle-demo').bootstrapToggle('disable')` |Disables the toggle
131
+
132
+ # Events
133
+
134
+ ## Event Propagation
135
+ Note All events are propagated to and from input element to the toggle.
136
+
137
+ You should listen to events from the `<input type="checkbox">` directly rather than look for custom events.
138
+
139
+ ```html
140
+ <input id="toggle-event" type="checkbox" data-toggle="toggle">
141
+ <div id="console-event"></div>
142
+ <script>
143
+ $(function() {
144
+ $('#toggle-event').change(function() {
145
+ $('#console-event').html('Toggle: ' + $(this).prop('checked'))
146
+ })
147
+ })
148
+ </script>
149
+ ```
150
+
151
+ ## Stopping Event Propagation
152
+ Passing `true` to the on/off methods will enable the silent option to prevent the control from propagating the change event in
153
+ cases where you want to update the controls on/off state, but do not want to fire the onChange event.
154
+
155
+ ```html
156
+ <input id="toggle-silent" type="checkbox" data-toggle="toggle">
157
+ <button class="btn btn-success" onclick="toggleApiOnSilent()" >On by API (silent)</button>
158
+ <button class="btn btn-success" onclick="toggleApiOffSilent()">Off by API (silent)</button>
159
+ <button class="btn btn-warning" onclick="toggleApiOnNotSilent()">On by API (not silent)</button>
160
+ <button class="btn btn-warning" onclick="toggleApiOffNotSilent()">On by API (not silent)</button>
161
+ <script>
162
+ function toggleApiOnSilent() {
163
+ $('#toggle-silent').bootstrapToggle('on', true);
164
+ }
165
+ function toggleApiOffSilent() {
166
+ $('#toggle-silent').bootstrapToggle('off', true);
167
+ }
168
+ function toggleApiOnNotSilent() {
169
+ $('#toggle-silent').bootstrapToggle('on');
170
+ }
171
+ function toggleApiOffNotSilent() {
172
+ $('#toggle-silent').bootstrapToggle('off');
173
+ }
174
+ </script>
175
+ ```
176
+
177
+ ## API vs Input
178
+ This also means that using the API or Input to trigger events will work both ways.
179
+
180
+ ```html
181
+ <input id="toggle-trigger" type="checkbox" data-toggle="toggle">
182
+ <button class="btn btn-success" onclick="toggleApiOn()" >On by API</button>
183
+ <button class="btn btn-danger" onclick="toggleApiOff()">Off by API</button>
184
+ <button class="btn btn-success" onclick="toggleInpOn()" >On by Input</button>
185
+ <button class="btn btn-danger" onclick="toggleInpOff()">Off by Input</button>
186
+ <script>
187
+ function toggleApiOn() {
188
+ $('#toggle-trigger').bootstrapToggle('on')
189
+ }
190
+ function toggleApiOff() {
191
+ $('#toggle-trigger').bootstrapToggle('off')
192
+ }
193
+ function toggleInpOn() {
194
+ $('#toggle-trigger').prop('checked', true).change()
195
+ }
196
+ function toggleInpOff() {
197
+ $('#toggle-trigger').prop('checked', false).change()
198
+ }
199
+ </script>
200
+ ```
@@ -0,0 +1,11 @@
1
+ /*!
2
+ * Bootstrap Toggle: bootstrap5-toggle.css v4.0.0
3
+ * https://palcarazm.github.io/bootstrap5-toggle/
4
+ *
5
+ * @author 2011-2014 Min Hur (https://github.com/minhur)
6
+ * @author 2018-2019 Brent Ely (https://github.com/gitbrent)
7
+ * @author 2022 Pablo Alcaraz Martínez (https://github.com/palcarazm)
8
+ * @lisense MIT License
9
+ * @see https://github.com/palcarazm/bootstrap5-toggle/blob/master/LICENSE
10
+ * @preserve
11
+ */.btn-group-xs>.btn,.btn-xs{padding:.35rem .4rem .25rem .4rem;font-size:.875rem;line-height:.5;border-radius:.2rem}.checkbox label .toggle,.checkbox-inline .toggle{margin-left:-1.25rem;margin-right:.35rem}.toggle{position:relative;overflow:hidden}.toggle.btn.btn-light,.toggle.btn.btn-outline-light{border-color:rgba(0,0,0,.15)}.toggle input[type=checkbox]{display:none}.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;user-select:none;-moz-user-select:none;-webkit-user-select:none}.toggle-group label,.toggle-group span{cursor:pointer}.toggle.off .toggle-group{left:-100%}.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0}.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0;box-shadow:none}.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px;background-color:#fff}.toggle.btn-outline-primary .toggle-handle{background-color:var(--bs-primary);border-color:var(--bs-primary)}.toggle.btn-outline-secondary .toggle-handle{background-color:var(--bs-secondary);border-color:var(--bs-secondary)}.toggle.btn-outline-success .toggle-handle{background-color:var(--bs-success);border-color:var(--bs-success)}.toggle.btn-outline-danger .toggle-handle{background-color:var(--bs-danger);border-color:var(--bs-danger)}.toggle.btn-outline-warning .toggle-handle{background-color:var(--bs-warning);border-color:var(--bs-warning)}.toggle.btn-outline-info .toggle-handle{background-color:var(--bs-info);border-color:var(--bs-info)}.toggle.btn-outline-light .toggle-handle{background-color:var(--bs-light);border-color:var(--bs-light)}.toggle.btn-outline-dark .toggle-handle{background-color:var(--bs-dark);border-color:var(--bs-dark)}.toggle[class*=btn-outline]:hover .toggle-handle{background-color:var(--bs-light);opacity:.5}.toggle.btn{min-width:3.7rem;min-height:2.15rem}.toggle-on.btn{padding-right:1.5rem}.toggle-off.btn{padding-left:1.5rem}.toggle.btn-lg{min-width:5rem;min-height:2.815rem}.toggle-on.btn-lg{padding-right:2rem}.toggle-off.btn-lg{padding-left:2rem}.toggle-handle.btn-lg{width:2.5rem}.toggle.btn-sm{min-width:3.125rem;min-height:1.938rem}.toggle-on.btn-sm{padding-right:1rem}.toggle-off.btn-sm{padding-left:1rem}.toggle.btn-xs{min-width:2.19rem;min-height:1.375rem}.toggle-on.btn-xs{padding-right:.8rem}.toggle-off.btn-xs{padding-left:.8rem}
@@ -0,0 +1,13 @@
1
+ /*!
2
+ * Bootstrap Toggle: bootstrap5-toggle.css v4.0.0
3
+ * https://palcarazm.github.io/bootstrap5-toggle/
4
+ *
5
+ * @author 2011-2014 Min Hur (https://github.com/minhur)
6
+ * @author 2018-2019 Brent Ely (https://github.com/gitbrent)
7
+ * @author 2022 Pablo Alcaraz Martínez (https://github.com/palcarazm)
8
+ * @lisense MIT License
9
+ * @see https://github.com/palcarazm/bootstrap5-toggle/blob/master/LICENSE
10
+ * @preserve
11
+ */
12
+ !function(l){"use strict";function i(t,e){this.$element=l(t),this.options=l.extend({},this.defaults(),e),this.render()}i.VERSION="3.7.0-beta",i.DEFAULTS={on:"On",off:"Off",onstyle:"primary",offstyle:"light",size:"normal",style:"",width:null,height:null},i.prototype.defaults=function(){return{on:this.$element.attr("data-on")||i.DEFAULTS.on,off:this.$element.attr("data-off")||i.DEFAULTS.off,onstyle:this.$element.attr("data-onstyle")||i.DEFAULTS.onstyle,offstyle:this.$element.attr("data-offstyle")||i.DEFAULTS.offstyle,size:this.$element.attr("data-size")||i.DEFAULTS.size,style:this.$element.attr("data-style")||i.DEFAULTS.style,width:this.$element.attr("data-width")||i.DEFAULTS.width,height:this.$element.attr("data-height")||i.DEFAULTS.height}},i.prototype.render=function(){this._onstyle="btn-"+this.options.onstyle,this._offstyle="btn-"+this.options.offstyle;var t="large"===this.options.size||"lg"===this.options.size?"btn-lg":"small"===this.options.size||"sm"===this.options.size?"btn-sm":"mini"===this.options.size||"xs"===this.options.size?"btn-xs":"",e=l('<label for="'+this.$element.prop("id")+'" class="btn">').html(this.options.on).addClass(this._onstyle+" "+t),s=l('<label for="'+this.$element.prop("id")+'" class="btn">').html(this.options.off).addClass(this._offstyle+" "+t),o=l('<span class="toggle-handle btn btn-light">').addClass(t),i=l('<div class="toggle-group">').append(e,s,o),t=l('<div class="toggle btn" data-toggle="toggle" role="button">').addClass(this.$element.prop("checked")?this._onstyle:this._offstyle+" off").addClass(t).addClass(this.options.style),t=(this.$element.wrap(t),l.extend(this,{$toggle:this.$element.parent(),$toggleOn:e,$toggleOff:s,$toggleGroup:i}),this.$toggle.append(i),this.options.width||Math.max(e.outerWidth(),s.outerWidth())+o.outerWidth()/2),i=this.options.height||Math.max(e.outerHeight(),s.outerHeight());e.addClass("toggle-on"),s.addClass("toggle-off"),this.$toggle.css({width:t,height:i}),this.options.height&&(e.css("line-height",e.height()+"px"),s.css("line-height",s.height()+"px")),this.update(!0),this.trigger(!0)},i.prototype.toggle=function(){this.$element.prop("checked")?this.off():this.on()},i.prototype.on=function(t){if(this.$element.prop("disabled"))return!1;this.$toggle.removeClass(this._offstyle+" off").addClass(this._onstyle),this.$element.prop("checked",!0),t||this.trigger()},i.prototype.off=function(t){if(this.$element.prop("disabled"))return!1;this.$toggle.removeClass(this._onstyle).addClass(this._offstyle+" off"),this.$element.prop("checked",!1),t||this.trigger()},i.prototype.enable=function(){this.$toggle.removeClass("disabled"),this.$toggle.removeAttr("disabled"),this.$element.prop("disabled",!1)},i.prototype.disable=function(){this.$toggle.addClass("disabled"),this.$toggle.attr("disabled","disabled"),this.$element.prop("disabled",!0)},i.prototype.update=function(t){this.$element.prop("disabled")?this.disable():this.enable(),this.$element.prop("checked")?this.on(t):this.off(t)},i.prototype.trigger=function(t){this.$element.off("change.bs.toggle"),t||this.$element.change(),this.$element.on("change.bs.toggle",l.proxy(function(){this.update()},this))},i.prototype.destroy=function(){this.$element.off("change.bs.toggle"),this.$toggleGroup.remove(),this.$element.removeData("bs.toggle"),this.$element.unwrap()};var t=l.fn.bootstrapToggle;l.fn.bootstrapToggle=function(s){var o=Array.prototype.slice.call(arguments,1)[0];return this.each(function(){var t=l(this),e=t.data("bs.toggle");e||t.data("bs.toggle",e=new i(this,"object"==typeof s&&s)),"string"==typeof s&&e[s]&&"boolean"==typeof o?e[s](o):"string"==typeof s&&e[s]&&e[s]()})},l.fn.bootstrapToggle.Constructor=i,l.fn.toggle.noConflict=function(){return l.fn.bootstrapToggle=t,this},l(function(){l("input[type=checkbox][data-toggle^=toggle]").bootstrapToggle()}),l(document).on("click.bs.toggle","div[data-toggle^=toggle]",function(t){l(this).find("input[type=checkbox]").bootstrapToggle("toggle"),t.preventDefault()})}(jQuery);
13
+ //# sourceMappingURL=bootstrap5-toggle.min.js.map
package/package.json ADDED
@@ -0,0 +1,46 @@
1
+ {
2
+ "name": "bootstrap5-toggle",
3
+ "version": "4.0.0",
4
+ "author": {
5
+ "name": "Pablo Alcaraz Martínez",
6
+ "url": "https://github.com/palcarazm/"
7
+ },
8
+ "description": "Bootstrap 5 Toggle is a bootstrap 5 plugin that converts checkboxes into toggles.",
9
+ "homepage": "https://palcarazm.github.io/bootstrap5-toggle/",
10
+ "license": "MIT",
11
+ "main": "js/bootstrap5-toggle.min.js",
12
+ "files": [
13
+ "css/bootstrap5-toggle.min.css",
14
+ "js/bootstrap5-toggle.min.js"
15
+ ],
16
+ "scripts": {
17
+ "build": "grunt"
18
+ },
19
+ "keywords": [
20
+ "bootstrap",
21
+ "bootstrap5",
22
+ "bootstrap-5",
23
+ "bootstrap 5",
24
+ "bootstrap 5 checkbox",
25
+ "bootstrap 5 switch",
26
+ "bootstrap 5 toggle",
27
+ "bootstrap-checkbox",
28
+ "bootstrap-switch",
29
+ "bootstrap-switch-button",
30
+ "bootstrap-toggle"
31
+ ],
32
+ "repository": {
33
+ "type": "git",
34
+ "url": "https://github.com/palcarazm/bootstrap5-toggle.git"
35
+ },
36
+ "bugs": {
37
+ "url": "https://github.com/palcarazm/bootstrap5-toggle/issues"
38
+ },
39
+ "devDependencies": {
40
+ "doctoc": "^2.2.0",
41
+ "grunt": "^1.5.3",
42
+ "grunt-contrib-clean": "^2.0.1",
43
+ "grunt-contrib-cssmin": "^4.0.0",
44
+ "grunt-contrib-uglify": "^5.2.1"
45
+ }
46
+ }