From 5be23d9b3348b475e940de990cf87120dac155e0 Mon Sep 17 00:00:00 2001 From: billz Date: Tue, 15 Oct 2019 01:14:30 +0100 Subject: [PATCH] Replaced obsolete component. long live bootstrap4-toggle! --- dist/bootstrap4-toggle/CHANGELOG.md | 70 +++++++ dist/bootstrap4-toggle/LICENSE | 22 +++ dist/bootstrap4-toggle/README.md | 176 ++++++++++++++++++ .../css/bootstrap4-toggle.min.css | 42 +++++ .../js/bootstrap4-toggle.min.js | 11 ++ dist/bootstrap4-toggle/package.json | 45 +++++ 6 files changed, 366 insertions(+) create mode 100644 dist/bootstrap4-toggle/CHANGELOG.md create mode 100644 dist/bootstrap4-toggle/LICENSE create mode 100644 dist/bootstrap4-toggle/README.md create mode 100644 dist/bootstrap4-toggle/css/bootstrap4-toggle.min.css create mode 100644 dist/bootstrap4-toggle/js/bootstrap4-toggle.min.js create mode 100644 dist/bootstrap4-toggle/package.json diff --git a/dist/bootstrap4-toggle/CHANGELOG.md b/dist/bootstrap4-toggle/CHANGELOG.md new file mode 100644 index 00000000..6969925e --- /dev/null +++ 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 diff --git a/dist/bootstrap4-toggle/LICENSE b/dist/bootstrap4-toggle/LICENSE new file mode 100644 index 00000000..9da406a3 --- /dev/null +++ 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. diff --git a/dist/bootstrap4-toggle/README.md b/dist/bootstrap4-toggle/README.md new file mode 100644 index 00000000..b7aac1f9 --- /dev/null +++ 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) + + + +**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) + + + +************************************************************************************************** + +# Installation + +## CDN +```html + + +``` + +## 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 + +``` + +## Initialize With Code +Toggles can also be initialized via JavaScript code. + +EX: Initialize id `chkToggle` with a single line of JavaScript. +```html + + +``` + +# 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 + + + +``` + +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 + +``` + +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 `` directly rather than look for custom events. + +```html + +
+ +``` + +## API vs Input +This also means that using the API or Input to trigger events will work both ways. + +```html + + + + + + +``` diff --git a/dist/bootstrap4-toggle/css/bootstrap4-toggle.min.css b/dist/bootstrap4-toggle/css/bootstrap4-toggle.min.css new file mode 100644 index 00000000..dc10fe12 --- /dev/null +++ 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} diff --git a/dist/bootstrap4-toggle/js/bootstrap4-toggle.min.js b/dist/bootstrap4-toggle/js/bootstrap4-toggle.min.js new file mode 100644 index 00000000..7c982e9a --- /dev/null +++ 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('