diff --git a/README.md b/README.md index 301ff03..61855cc 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,8 @@ Visit http://www.bootstraptoggle.com for demos. ### Installation You can [download](https://github.com/minhur/bootstrap-toggle/archive/master.zip) the latest version of Bootstrap Toggle or use CDN to load the library. +`Warning` If you are using Bootstrap v4.*, use `bootstrap4-toggle.min.js` and `bootstrap4-toggle.css` (already minified) instead. + `Warning` If you are using Bootstrap v2.3.2, use `bootstrap2-toggle.min.js` and `bootstrap2-toggle.min.css` instead. ```html diff --git a/css/bootstrap4-toggle.css b/css/bootstrap4-toggle.css new file mode 100644 index 0000000..be27a8b --- /dev/null +++ b/css/bootstrap4-toggle.css @@ -0,0 +1,8 @@ +/*! ======================================================================== + * Bootstrap Toggle: bootstrap-toggle.css v2.2.0 + * http://www.bootstraptoggle.com + * ======================================================================== + * Copyright 2014 Min Hur, The New York Times Company + * Licensed under MIT + * ======================================================================== */ +.checkbox label .toggle,.checkbox-inline .toggle{margin-left:-20px;margin-right:5px}.toggle{position:relative;overflow:hidden}.toggle input[type=checkbox]{display:none}.toggle-group,.toggle-off,.toggle-on{position:absolute;top:0;bottom:0;left:0}.toggle-group{width:200%;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none}.toggle.off .toggle-group{left:-100%}.toggle-off,.toggle-on{right:50%;margin:0;border:0;border-radius:0}.toggle-off{left:50%;right:0}.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px}.toggle.btn{min-width:59px;min-height:34px}.toggle-on.btn{padding-right:24px}.toggle-off.btn{padding-left:24px}.toggle.btn-lg{min-width:79px;min-height:45px}.toggle-on.btn-lg{padding-right:31px}.toggle-off.btn-lg{padding-left:31px}.toggle-handle.btn-lg{width:40px}.toggle.btn-sm{min-width:50px;min-height:30px}.toggle-on.btn-sm{padding-right:20px}.toggle-off.btn-sm{padding-left:20px}.toggle.btn-xs{min-width:35px;min-height:22px}.toggle-on.btn-xs{padding-right:12px}.toggle-off.btn-xs{padding-left:12px} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..2ffdee0 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,31 @@ +const { src, dest, watch, parallel } = require('gulp'); +const sass = require('gulp-sass'); +const minifyCSS = require('gulp-csso'); +const concat = require('gulp-concat'); +const uglifyes = require('uglify-es'); +const composer = require('gulp-uglify/composer'); +const uglify = composer(uglifyes, console); + +function css_minify() { + return src('./scss/*.scss') + .pipe(sass()) + .pipe(minifyCSS()) + .pipe(dest('./css/')); +} + +function js() { + return src(['./js/bootstrap4-toggle.js'], { sourcemaps: true }) + .pipe(uglify()) + .pipe(concat('bootstrap4-toggle.min.js')) + .pipe(dest('./js/', { sourcemaps: true })); +} + +function watchFiles() { + watch("./scss/**/*", css_minify); + watch("./js/bootstrap4-toggle.js", js); +} + +exports.js = js; +exports.css_minify = css_minify; +exports.watch = watch; +exports.default = parallel(css_minify, js, watchFiles); \ No newline at end of file diff --git a/js/bootstrap4-toggle.js b/js/bootstrap4-toggle.js new file mode 100644 index 0000000..d6d8c86 --- /dev/null +++ b/js/bootstrap4-toggle.js @@ -0,0 +1,180 @@ +/*! ======================================================================== + * Bootstrap Toggle: bootstrap-toggle.js v2.2.0 + * http://www.bootstraptoggle.com + * ======================================================================== + * Copyright 2014-2020 Min Hur, The New York Times Company & Hassadee Pimsuwan, Treebuild Company Limited + * Licensed under MIT + * ======================================================================== */ + + + +function ($) { + 'use strict'; + + // TOGGLE PUBLIC CLASS DEFINITION + // ============================== + + var Toggle = function (element, options) { + this.$element = $(element) + this.options = $.extend({}, this.defaults(), options) + this.render() + } + + Toggle.VERSION = '2.2.0' + + Toggle.DEFAULTS = { + on: 'On', + off: 'Off', + onstyle: 'primary', + offstyle: 'secondary', + size: 'normal', + style: '', + width: null, + height: null + } + + Toggle.prototype.defaults = function() { + return { + on: this.$element.attr('data-on') || Toggle.DEFAULTS.on, + off: this.$element.attr('data-off') || Toggle.DEFAULTS.off, + onstyle: this.$element.attr('data-onstyle') || Toggle.DEFAULTS.onstyle, + offstyle: this.$element.attr('data-offstyle') || Toggle.DEFAULTS.offstyle, + size: this.$element.attr('data-size') || Toggle.DEFAULTS.size, + style: this.$element.attr('data-style') || Toggle.DEFAULTS.style, + width: this.$element.attr('data-width') || Toggle.DEFAULTS.width, + height: this.$element.attr('data-height') || Toggle.DEFAULTS.height + } + } + + Toggle.prototype.render = function () { + this._onstyle = 'btn-' + this.options.onstyle + this._offstyle = 'btn-' + this.options.offstyle + var size = this.options.size === 'large' ? 'btn-lg' + : this.options.size === 'small' ? 'btn-sm' + : this.options.size === 'mini' ? 'btn-xs' + : '' + var $toggleOn = $('