From a9e00494d99fed07dfeb94ace080afdc6b6383e9 Mon Sep 17 00:00:00 2001 From: Hassadee Pimsuwan Date: Tue, 28 Jan 2020 12:28:47 +0700 Subject: [PATCH 1/2] Added support for Bootstrap 4 Updated class name to match with Bootstrap 4 styles; --- css/bootstrap4-toggle.css | 34 + gulpfile.js | 39 + js/bootstrap4-toggle.js | 180 ++ js/bootstrap4-toggle.min.js | 2 + package-lock.json | 4134 +++++++++++++++++++++++++++++++++++ package.json | 8 + scss/bootstrap4-toggle.scss | 83 + 7 files changed, 4480 insertions(+) create mode 100644 css/bootstrap4-toggle.css create mode 100644 gulpfile.js create mode 100644 js/bootstrap4-toggle.js create mode 100644 js/bootstrap4-toggle.min.js create mode 100644 package-lock.json create mode 100644 scss/bootstrap4-toggle.scss diff --git a/css/bootstrap4-toggle.css b/css/bootstrap4-toggle.css new file mode 100644 index 0000000..535b081 --- /dev/null +++ b/css/bootstrap4-toggle.css @@ -0,0 +1,34 @@ +/*! ======================================================================== + * 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} } + +.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; } diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..0b33275 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,39 @@ +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() { + return src('./scss/*.scss') + .pipe(sass()) + .pipe(dest('./css/')); +} + +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("./scss/**/*", css); + watch("./js/bootstrap4-toggle.js", js); +} + +exports.js = js; +exports.css = css; +exports.css_minify = css_minify; +exports.watch = watch; +exports.default = parallel(css, 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 = $('