From c28c478fe135ae91614edd3b674068b8846a7544 Mon Sep 17 00:00:00 2001 From: ogeid-dev <40458794+ogeid-dev@users.noreply.github.com> Date: Thu, 21 Jun 2018 11:53:14 +0200 Subject: [PATCH 1/2] Added indeterminate state support --- js/bootstrap-toggle.js | 79 ++++++++++++++++++++++++++++++++++++------ 1 file changed, 68 insertions(+), 11 deletions(-) diff --git a/js/bootstrap-toggle.js b/js/bootstrap-toggle.js index 533914e..d5d13a2 100644 --- a/js/bootstrap-toggle.js +++ b/js/bootstrap-toggle.js @@ -29,7 +29,8 @@ size: 'normal', style: '', width: null, - height: null + height: null, + indeterminate: false } Toggle.prototype.defaults = function() { @@ -41,7 +42,8 @@ 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 + height: this.$element.attr('data-height') || Toggle.DEFAULTS.height, + indeterminate: this.$element.data('indeterminate') || Toggle.DEFAULTS.indeterminate } } @@ -62,6 +64,7 @@ .append($toggleOn, $toggleOff, $toggleHandle) var $toggle = $('
') .addClass( this.$element.prop('checked') ? this._onstyle : this._offstyle+' off' ) + .addClass( this.$element.prop('indeterminate') ? 'indeterminate' : '' ) .addClass(size).addClass(this.options.style) this.$element.wrap($toggle) @@ -87,21 +90,57 @@ } Toggle.prototype.toggle = function () { - if (this.$element.prop('checked')) this.off() - else this.on() + if (this.options.indeterminate) + { + if (this.$element.prop('checked')) + { + if (this.$element.prop('indeterminate')) + { + this.on(); + } + else { + this.off(); + } + } + else{ + this.indeterminate(); + } + } + else + { + if (this.$element.prop('checked')) this.off() + else this.on() + } } Toggle.prototype.on = function (silent) { if (this.$element.prop('disabled')) return false - this.$toggle.removeClass(this._offstyle + ' off').addClass(this._onstyle) - this.$element.prop('checked', true) + this.$toggle.removeClass(this._offstyle + ' off') + .addClass(this._onstyle) + .removeClass('indeterminate'); + this.$element.prop('checked', true); + this.$element.prop('indeterminate', false); if (!silent) this.trigger() } Toggle.prototype.off = function (silent) { if (this.$element.prop('disabled')) return false - this.$toggle.removeClass(this._onstyle).addClass(this._offstyle + ' off') + this.$toggle.removeClass(this._onstyle) + .addClass(this._offstyle + ' off') + .removeClass('indeterminate'); this.$element.prop('checked', false) + this.$element.prop('indeterminate', false); + if (!silent) this.trigger() + } + + Toggle.prototype.indeterminate = function (silent) { + if (this.$element.prop('disabled')) return false + this.$toggle.addClass('indeterminate') + .removeClass('off') + .removeClass(this._onstyle) + .addClass(this._offstyle); + this.$element.prop('checked', true); + this.$element.prop('indeterminate', true); if (!silent) this.trigger() } @@ -116,10 +155,28 @@ } Toggle.prototype.update = function (silent) { - if (this.$element.prop('disabled')) this.disable() - else this.enable() - if (this.$element.prop('checked')) this.on(silent) - else this.off(silent) + if (this.options.indeterminate) + { + if (this.$element.prop('disabled')) this.disable() + else this.enable() + if (this.$element.prop('indeterminate')) + { + this.indeterminate(silent) + } + else + { + if (this.$element.prop('checked')) this.on(silent) + else this.off(silent) + } + + } + else + { + if (this.$element.prop('disabled')) this.disable() + else this.enable() + if (this.$element.prop('checked')) this.on(silent) + else this.off(silent) + } } Toggle.prototype.trigger = function (silent) { From a283b5f301c002b33697e3156ee60d70f7378df0 Mon Sep 17 00:00:00 2001 From: ogeid-dev <40458794+ogeid-dev@users.noreply.github.com> Date: Thu, 21 Jun 2018 11:53:42 +0200 Subject: [PATCH 2/2] Added indeterminate state support --- css/bootstrap-toggle.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/css/bootstrap-toggle.css b/css/bootstrap-toggle.css index 057d08b..cab7903 100644 --- a/css/bootstrap-toggle.css +++ b/css/bootstrap-toggle.css @@ -34,6 +34,9 @@ .toggle.off .toggle-group { left: -100%; } +.toggle.indeterminate .toggle-group { + left: -50%; +} .toggle-on { position: absolute; top: 0;