Replaced obsolete component. long live bootstrap4-toggle!

2025-03-01 10:31:47 +00:00 · 2019-10-15 01:14:30 +01:00
parent 84d2f519d1
commit 5be23d9b33
6 changed files with 366 additions and 0 deletions
--- a/dist/bootstrap4-toggle/CHANGELOG.md
+++ b/dist/bootstrap4-toggle/CHANGELOG.md
@@ -0,0 +1,70 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## Unreleased
+
+## [3.5.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.5.0) 2019-07-02
+### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.4.0...v3.5.0)
+### Added
+- Added ARIA `role="button"` tag to toggle
+- Added `cursor: pointer;` style to toggle
+### Changed
+- Fixed: Touch not working on mobile [\#2](https://github.com/gitbrent/bootstrap4-toggle/issue/2) ([wilecoyte78](https://github.com/wilecoyte78))
+- Updated to Bootstrap version 4.3.1
+- Updated README with better Yarn instructions
+
+## [3.4.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.4.0) 2019-01-03
+### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.3.0...v3.4.0)
+### Added
+- Outline button styles are now available
+### Changed
+- Updated to Bootstrap version 4.2.1
+
+## [3.3.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.3.0) 2018-12-19
+### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.2.0...v3.3.0)
+### Added
+- New test created to compare core bootstrap sizes to bootstrap4-toggle
+### Changed
+- Introduced new `size` values that mirror bootstrap 4: (`lg`, `sm`, `xs`)
+- Converted all css units from `px` to `rem`
+- Properly added border on `light` button (moved from .toggle class)
+### Removed
+**DEPRECATED** Classic `size` values (`large`, `small`, `mini`)
+
+
+## [3.2.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.2.0) 2018-11-27
+### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.1.0...v3.2.0)
+### Added
+### Changed
+- Removed permanent `active` state from "Off" label so mouse-over highlighting works the same as "On"
+### Removed
+
+
+
+## [3.1.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.1.0) 2018-10-25
+### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.0.0...v3.1.0)
+### Added
+- `index.html` includes new section with dark mode colors
+### Changed
+- `index.html` now fully responsive, better menu, rearranged sections
+- Tweaked `border` property to work with all backgrounds and colors
+### Removed
+
+
+
+## [3.0.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.0.0) 2018-10-21
+### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v2.2.2...v3.0.0)
+### Added
+- Touch support
+### Changed
+- Implements Bootstrap 4 colors/styles
+### Removed
+- Old Bootstrap 2 files
+
+[Unreleased]: https://github.com/gitbrent/bootstrap4-toggle/compare/v1.9.0...HEAD
+[3.2.0]: https://github.com/gitbrent/bootstrap4-toggle/compare/v3.1.0...v3.2.0
+[3.1.0]: https://github.com/gitbrent/bootstrap4-toggle/compare/v3.0.0...v3.1.0
+[3.0.0]: https://github.com/gitbrent/bootstrap4-toggle/compare/v2.2.2...v3.0.0
--- a/dist/bootstrap4-toggle/LICENSE
+++ b/dist/bootstrap4-toggle/LICENSE
@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2011-2014 Min Hur, The New York Times Company
+Copyright (c) 2018 Brent Ely
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
--- a/dist/bootstrap4-toggle/README.md
+++ b/dist/bootstrap4-toggle/README.md
@@ -0,0 +1,176 @@
+[![MIT Licence](https://img.shields.io/github/license/gitbrent/bootstrap4-toggle.svg)](https://opensource.org/licenses/mit-license.php)   [![Bootstrap 4.2.1](https://img.shields.io/badge/bootstrap-4.3.1-green.svg?style=flat-square)](https://getbootstrap.com/docs/4.1)  [![Known Vulnerabilities](https://snyk.io/test/npm/bootstrap4-toggle/badge.svg)](https://snyk.io/test/npm/bootstrap4-toggle)  [![npm downloads](https://img.shields.io/npm/dm/bootstrap4-toggle.svg)](https://www.npmjs.com/package/bootstrap4-toggle)  [![JSDelivr Badge](https://data.jsdelivr.com/v1/package/gh/gitbrent/bootstrap4-toggle/badge)](https://www.jsdelivr.com/package/gh/gitbrent/bootstrap4-toggle)
+
+# Bootstrap 4 Toggle
+
+**Bootstrap 4 Toggle** is a bootstrap plugin/widget that converts checkboxes into toggles.
+
+**************************************************************************************************
+
+#### Library Distributions
+Project                                                                                    |Description
+-------------------------------------------------------------------------------------------|-------------------------------------------------------
+[bootstrap4-toggle](https://github.com/gitbrent/bootstrap4-toggle)                         | Supports bootstrap4 (requires jQuery)
+[bootstrap-switch-button](https://github.com/gitbrent/bootstrap-switch-button)             | Supports bootstrap4+ (ES6 class, no dependencies)
+[bootstrap-switch-button-react](https://github.com/gitbrent/bootstrap-switch-button-react) | Supports bootstrap4+ (React component, no dependencies)
+
+# Demos
+**Demos and API Docs:** https://gitbrent.github.io/bootstrap4-toggle/  
+
+![Demo GIF](https://github.com/gitbrent/bootstrap4-toggle/blob/master/doc/bootstrap4-toggle-demo.gif?raw=true)
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [Installation](#installation)
+  - [CDN](#cdn)
+  - [Download](#download)
+  - [NPM](#npm)
+  - [Yarn](#yarn)
+- [Usage](#usage)
+  - [Initialize With HTML](#initialize-with-html)
+  - [Initialize With Code](#initialize-with-code)
+- [API](#api)
+  - [Options](#options)
+  - [Methods](#methods)
+- [Events](#events)
+  - [Event Propagation](#event-propagation)
+  - [API vs Input](#api-vs-input)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+**************************************************************************************************
+
+# Installation
+
+## CDN
+```html
+<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.5.0/css/bootstrap4-toggle.min.css" rel="stylesheet">  
+<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.5.0/js/bootstrap4-toggle.min.js"></script>
+```
+
+## Download
+[Latest GitHub Release](https://github.com/gitbrent/bootstrap4-toggle/releases/latest)
+
+## NPM
+```ksh
+npm install bootstrap4-toggle
+```
+
+## Yarn
+```ksh
+yarn add bootstrap4-toggle
+```
+
+# Usage
+
+## Initialize With HTML
+Simply add `data-toggle="toggle"` to automatically convert a plain checkbox into a bootstrap 4 toggle.
+
+```html
+<input id="chkToggle" type="checkbox" data-toggle="toggle">
+```
+
+## Initialize With Code
+Toggles can also be initialized via JavaScript code.  
+
+EX: Initialize id `chkToggle` with a single line of JavaScript.
+```html
+<input id="chkToggle" type="checkbox" checked>
+<script>
+  $(function(){
+    $('#chkToggle').bootstrapToggle();
+  });
+</script>
+```
+
+# API
+
+## Options
+* Options can be passed via data attributes or JavaScript
+* For data attributes, append the option name to `data-` (ex: `data-on="Enabled"`)
+
+```html
+<input type="checkbox" data-toggle="toggle" data-on="Enabled" data-off="Disabled">
+<input type="checkbox" id="toggle-two">
+<script>
+  $(function() {
+    $('#toggle-two').bootstrapToggle({
+      on: 'Enabled',
+      off: 'Disabled'
+    });
+  })
+</script>
+```
+
+Name      |Type       |Default    |Description                 |
+----------|-----------|----------|----------------------------|
+`on`      |string/html|"On"      |Text of the on toggle
+`off`     |string/html|"Off"     |Text of the off toggle
+`size`    |string     |"normal"  |Size of the toggle. Possible values are: `large`, `normal`, `small`, `mini`.
+`onstyle` |string     |"primary" |Style of the on toggle. Possible values are: `primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark`
+`offstyle`|string     |"light"   |Style of the off toggle. Possible values are: `primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark`
+`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.
+`width`   |integer    |*null*     |Sets the width of the toggle. if set to *null*, width will be auto-calculated.
+`height`  |integer    |*null*     |Sets the height of the toggle. if set to *null*, height will be auto-calculated.
+
+## Methods
+Methods can be used to control toggles directly.
+
+```html
+<input id="toggle-demo" type="checkbox" data-toggle="toggle">
+```
+
+Method     |Example                                         |Description
+-----------|------------------------------------------------|------------------------------------------
+initialize | `$('#toggle-demo').bootstrapToggle()`          |Initializes the toggle plugin with options
+destroy    | `$('#toggle-demo').bootstrapToggle('destroy')` |Destroys the toggle
+on         | `$('#toggle-demo').bootstrapToggle('on')`      |Sets the toggle to 'On' state
+off        | `$('#toggle-demo').bootstrapToggle('off')`     |Sets the toggle to 'Off' state
+toggle     | `$('#toggle-demo').bootstrapToggle('toggle')`  |Toggles the state of the toggle on/off
+enable     | `$('#toggle-demo').bootstrapToggle('enable')`  |Enables the toggle
+disable    | `$('#toggle-demo').bootstrapToggle('disable')` |Disables the toggle
+
+# Events
+
+## Event Propagation
+Note All events are propagated to and from input element to the toggle.
+
+You should listen to events from the `<input type="checkbox">` directly rather than look for custom events.
+
+```html
+<input id="toggle-event" type="checkbox" data-toggle="toggle">
+<div id="console-event"></div>
+<script>
+  $(function() {
+    $('#toggle-event').change(function() {
+      $('#console-event').html('Toggle: ' + $(this).prop('checked'))
+    })
+  })
+</script>
+```
+
+## API vs Input
+This also means that using the API or Input to trigger events will work both ways.
+
+```html
+<input id="toggle-trigger" type="checkbox" data-toggle="toggle">
+<button class="btn btn-success" onclick="toggleApiOn()" >On by API</button>
+<button class="btn btn-danger"  onclick="toggleApiOff()">Off by API</button>
+<button class="btn btn-success" onclick="toggleInpOn()" >On by Input</button>
+<button class="btn btn-danger"  onclick="toggleInpOff()">Off by Input</button>
+<script>
+  function toggleApiOn() {
+    $('#toggle-trigger').bootstrapToggle('on')
+  }
+  function toggleApiOff() {
+    $('#toggle-trigger').bootstrapToggle('off')  
+  }
+  function toggleInpOn() {
+    $('#toggle-trigger').prop('checked', true).change()
+  }
+  function toggleInpOff() {
+    $('#toggle-trigger').prop('checked', false).change()
+  }
+</script>
+```
--- a/dist/bootstrap4-toggle/css/bootstrap4-toggle.min.css
+++ b/dist/bootstrap4-toggle/css/bootstrap4-toggle.min.css
@@ -0,0 +1,42 @@
+/*\
+|*| ========================================================================
+|*| Bootstrap Toggle: bootstrap4-toggle.css v3.5.0
+|*| https://gitbrent.github.io/bootstrap-toggle/
+|*| ========================================================================
+|*| Copyright 2018-2019 Brent Ely
+|*| Licensed under MIT
+|*| ========================================================================
+\*/
+.btn-group-xs>.btn,.btn-xs{padding:.35rem .4rem .25rem;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;-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(--primary);border-color:var(--primary)}
+.toggle.btn-outline-secondary .toggle-handle{background-color:var(--secondary);border-color:var(--secondary)}
+.toggle.btn-outline-success .toggle-handle{background-color:var(--success);border-color:var(--success)}
+.toggle.btn-outline-danger .toggle-handle{background-color:var(--danger);border-color:var(--danger)}
+.toggle.btn-outline-warning .toggle-handle{background-color:var(--warning);border-color:var(--warning)}
+.toggle.btn-outline-info .toggle-handle{background-color:var(--info);border-color:var(--info)}
+.toggle.btn-outline-light .toggle-handle{background-color:var(--light);border-color:var(--light)}
+.toggle.btn-outline-dark .toggle-handle{background-color:var(--dark);border-color:var(--dark)}
+.toggle[class*=btn-outline]:hover .toggle-handle{background-color:var(--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}
--- a/dist/bootstrap4-toggle/js/bootstrap4-toggle.min.js
+++ b/dist/bootstrap4-toggle/js/bootstrap4-toggle.min.js
@@ -0,0 +1,11 @@
+/*\
+|*| ========================================================================
+|*| Bootstrap Toggle: bootstrap4-toggle.js v3.5.0
+|*| https://gitbrent.github.io/bootstrap-toggle/
+|*| ========================================================================
+|*| Copyright 2018-2019 Brent Ely
+|*| Licensed under MIT
+|*| ========================================================================
+\*/
+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.toggle"),f="object"==typeof b&&b;e||d.data("bs.toggle",e=new c(this,f)),"string"==typeof b&&e[b]&&e[b]()})}var c=function(b,c){this.$element=a(b),this.options=a.extend({},this.defaults(),c),this.render()};c.VERSION="3.5.0",c.DEFAULTS={on:"On",off:"Off",onstyle:"primary",offstyle:"light",size:"normal",style:"",width:null,height:null},c.prototype.defaults=function(){return{on:this.$element.attr("data-on")||c.DEFAULTS.on,off:this.$element.attr("data-off")||c.DEFAULTS.off,onstyle:this.$element.attr("data-onstyle")||c.DEFAULTS.onstyle,offstyle:this.$element.attr("data-offstyle")||c.DEFAULTS.offstyle,size:this.$element.attr("data-size")||c.DEFAULTS.size,style:this.$element.attr("data-style")||c.DEFAULTS.style,width:this.$element.attr("data-width")||c.DEFAULTS.width,height:this.$element.attr("data-height")||c.DEFAULTS.height}},c.prototype.render=function(){this._onstyle="btn-"+this.options.onstyle,this._offstyle="btn-"+this.options.offstyle;var b="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":"",c=a('<label class="btn">').html(this.options.on).addClass(this._onstyle+" "+b),d=a('<label class="btn">').html(this.options.off).addClass(this._offstyle+" "+b),e=a('<span class="toggle-handle btn btn-light">').addClass(b),f=a('<div class="toggle-group">').append(c,d,e),g=a('<div class="toggle btn" data-toggle="toggle" role="button">').addClass(this.$element.prop("checked")?this._onstyle:this._offstyle+" off").addClass(b).addClass(this.options.style);this.$element.wrap(g),a.extend(this,{$toggle:this.$element.parent(),$toggleOn:c,$toggleOff:d,$toggleGroup:f}),this.$toggle.append(f);var h=this.options.width||Math.max(c.outerWidth(),d.outerWidth())+e.outerWidth()/2,i=this.options.height||Math.max(c.outerHeight(),d.outerHeight());c.addClass("toggle-on"),d.addClass("toggle-off"),this.$toggle.css({width:h,height:i}),this.options.height&&(c.css("line-height",c.height()+"px"),d.css("line-height",d.height()+"px")),this.update(!0),this.trigger(!0)},c.prototype.toggle=function(){this.$element.prop("checked")?this.off():this.on()},c.prototype.on=function(a){if(this.$element.prop("disabled"))return!1;this.$toggle.removeClass(this._offstyle+" off").addClass(this._onstyle),this.$element.prop("checked",!0),a||this.trigger()},c.prototype.off=function(a){if(this.$element.prop("disabled"))return!1;this.$toggle.removeClass(this._onstyle).addClass(this._offstyle+" off"),this.$element.prop("checked",!1),a||this.trigger()},c.prototype.enable=function(){this.$toggle.removeAttr("disabled"),this.$element.prop("disabled",!1)},c.prototype.disable=function(){this.$toggle.attr("disabled","disabled"),this.$element.prop("disabled",!0)},c.prototype.update=function(a){this.$element.prop("disabled")?this.disable():this.enable(),this.$element.prop("checked")?this.on(a):this.off(a)},c.prototype.trigger=function(b){this.$element.off("change.bs.toggle"),b||this.$element.change(),this.$element.on("change.bs.toggle",a.proxy(function(){this.update()},this))},c.prototype.destroy=function(){this.$element.off("change.bs.toggle"),this.$toggleGroup.remove(),this.$element.removeData("bs.toggle"),this.$element.unwrap()};var d=a.fn.bootstrapToggle;a.fn.bootstrapToggle=b,a.fn.bootstrapToggle.Constructor=c,a.fn.toggle.noConflict=function(){return a.fn.bootstrapToggle=d,this},a(function(){a("input[type=checkbox][data-toggle^=toggle]").bootstrapToggle()}),a(document).on("click.bs.toggle","div[data-toggle^=toggle]",function(b){a(this).find("input[type=checkbox]").bootstrapToggle("toggle"),b.preventDefault()})}(jQuery);
+//# sourceMappingURL=bootstrap4-toggle.min.js.map
--- a/dist/bootstrap4-toggle/package.json
+++ b/dist/bootstrap4-toggle/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "bootstrap4-toggle",
+  "version": "3.5.0",
+  "author": {
+    "name": "Brent Ely",
+    "url": "https://github.com/gitbrent/"
+  },
+  "description": "Bootstrap 4 Toggle is a bootstrap 4 plugin that converts checkboxes into toggles.",
+  "homepage": "https://gitbrent.github.io/bootstrap4-toggle/",
+  "license": "MIT",
+  "main": "js/bootstrap4-toggle.min.js",
+  "files": [
+    "css/bootstrap4-toggle.min.css",
+    "js/bootstrap4-toggle.min.js"
+  ],
+  "scripts": {
+    "build": "grunt"
+  },
+  "keywords": [
+    "bootstrap",
+    "bootstrap4",
+    "bootstrap-4",
+    "bootstrap 4",
+    "bootstrap 4 checkbox",
+    "bootstrap 4 switch",
+    "bootstrap 4 toggle",
+    "bootstrap-checkbox",
+    "bootstrap-switch",
+    "bootstrap-switch-button",
+    "bootstrap-toggle"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gitbrent/bootstrap4-toggle.git"
+  },
+  "bugs": {
+    "url": "https://github.com/gitbrent/bootstrap4-toggle/issues"
+  },
+  "devDependencies": {
+    "grunt": "^1.0.4",
+    "grunt-contrib-clean": "^0.6.0",
+    "grunt-contrib-cssmin": "^0.10.0",
+    "grunt-contrib-uglify": "^0.6.0"
+  }
+}