Repository: airavata-php-gateway Updated Branches: refs/heads/master e97273be9 -> 9663813fd
switch default toggle buttons to bootstrap toggle buttons Project: http://git-wip-us.apache.org/repos/asf/airavata-php-gateway/repo Commit: http://git-wip-us.apache.org/repos/asf/airavata-php-gateway/commit/4cf7077c Tree: http://git-wip-us.apache.org/repos/asf/airavata-php-gateway/tree/4cf7077c Diff: http://git-wip-us.apache.org/repos/asf/airavata-php-gateway/diff/4cf7077c Branch: refs/heads/master Commit: 4cf7077cba14cc3ee69cdff3f6ed2333f094497f Parents: d85fecd Author: Doug <[email protected]> Authored: Tue Jul 14 16:08:54 2015 -0400 Committer: Doug <[email protected]> Committed: Tue Jul 14 16:27:48 2015 -0400 ---------------------------------------------------------------------- app/views/admin/manage-resources.blade.php | 26 ++-- public/css/bootstrap-toggle.css | 28 ++++ public/js/bootstrap-toggle.js | 180 ++++++++++++++++++++++++ 3 files changed, 225 insertions(+), 9 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/airavata-php-gateway/blob/4cf7077c/app/views/admin/manage-resources.blade.php ---------------------------------------------------------------------- diff --git a/app/views/admin/manage-resources.blade.php b/app/views/admin/manage-resources.blade.php index 8316ce7..5218483 100644 --- a/app/views/admin/manage-resources.blade.php +++ b/app/views/admin/manage-resources.blade.php @@ -2,6 +2,7 @@ @section('page-header') @parent +{{ HTML::style('css/bootstrap-toggle.css')}} {{ HTML::style('css/admin.css')}} @stop @@ -49,13 +50,9 @@ <td>{{ $resourceName }}</td> <td> @if(!$enabled) - <div class="checkbox"> - <input class="resource-status" resourceId="{{$resourceId}}" type="checkbox"> - </div> + <input unchecked class="resource-status" resourceId="{{$resourceId}}" type="checkbox" data-toggle="toggle" data-on="Enabled" data-off="Disabled" data-onstyle="success" data-offstyle="danger"> @else - <div class="checkbox"> - <input class="resource-status" type="checkbox" resourceId="{{$resourceId}}" checked> - </div> + <input checked class="resource-status" resourceId="{{$resourceId}}" type="checkbox" data-toggle="toggle" data-on="Enabled" data-off="Disabled" data-onstyle="success" data-offstyle="danger"> @endif </td> </tr> @@ -70,10 +67,21 @@ @section('scripts') @parent +{{ HTML::script('js/bootstrap-toggle.js')}} <script> - $('.resource-status').click(function() { - var $this = $(this); - if ($this.is(':checked')) { + // instantiate bootstrap toggle button + $(".resource-status").bootstrapToggle(); + + // bootstrap toggle button wraps checkbox in its own div named toggle + $('.toggle').click(function() { + var $this = $(this).find(".resource-status"); + + /* + * conditional needs to be flipped because of the way the toggle checkbox UI works. + * the state of checkbox AT clicktime is reported, but the intention is + * to get the state that the checkbox switches to. + */ + if (!($this.is(':checked'))) { //enable compute resource $resourceId = $this.attr("resourceId"); $.ajax({ http://git-wip-us.apache.org/repos/asf/airavata-php-gateway/blob/4cf7077c/public/css/bootstrap-toggle.css ---------------------------------------------------------------------- diff --git a/public/css/bootstrap-toggle.css b/public/css/bootstrap-toggle.css new file mode 100644 index 0000000..d58a7b2 --- /dev/null +++ b/public/css/bootstrap-toggle.css @@ -0,0 +1,28 @@ +/*! ======================================================================== + * * * 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{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.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} +.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} http://git-wip-us.apache.org/repos/asf/airavata-php-gateway/blob/4cf7077c/public/js/bootstrap-toggle.js ---------------------------------------------------------------------- diff --git a/public/js/bootstrap-toggle.js b/public/js/bootstrap-toggle.js new file mode 100644 index 0000000..c5fb1ff --- /dev/null +++ b/public/js/bootstrap-toggle.js @@ -0,0 +1,180 @@ +/*! ======================================================================== + * Bootstrap Toggle: bootstrap-toggle.js v2.2.0 + * http://www.bootstraptoggle.com + * ======================================================================== + * Copyright 2014 Min Hur, The New York Times Company + * 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: 'default', + 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 = $('<label class="btn">').html(this.options.on) + .addClass(this._onstyle + ' ' + size) + var $toggleOff = $('<label class="btn">').html(this.options.off) + .addClass(this._offstyle + ' ' + size + ' active') + var $toggleHandle = $('<span class="toggle-handle btn btn-default">') + .addClass(size) + var $toggleGroup = $('<div class="toggle-group">') + .append($toggleOn, $toggleOff, $toggleHandle) + var $toggle = $('<div class="toggle btn" data-toggle="toggle">') + .addClass( this.$element.prop('checked') ? this._onstyle : this._offstyle+' off' ) + .addClass(size).addClass(this.options.style) + + this.$element.wrap($toggle) + $.extend(this, { + $toggle: this.$element.parent(), + $toggleOn: $toggleOn, + $toggleOff: $toggleOff, + $toggleGroup: $toggleGroup + }) + this.$toggle.append($toggleGroup) + + var width = this.options.width || Math.max($toggleOn.outerWidth(), $toggleOff.outerWidth())+($toggleHandle.outerWidth()/2) + var height = this.options.height || Math.max($toggleOn.outerHeight(), $toggleOff.outerHeight()) + $toggleOn.addClass('toggle-on') + $toggleOff.addClass('toggle-off') + this.$toggle.css({ width: width, height: height }) + if (this.options.height) { + $toggleOn.css('line-height', $toggleOn.height() + 'px') + $toggleOff.css('line-height', $toggleOff.height() + 'px') + } + this.update(true) + this.trigger(true) + } + + Toggle.prototype.toggle = function () { + 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) + 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.$element.prop('checked', false) + if (!silent) this.trigger() + } + + Toggle.prototype.enable = function () { + this.$toggle.removeAttr('disabled') + this.$element.prop('disabled', false) + } + + Toggle.prototype.disable = function () { + this.$toggle.attr('disabled', 'disabled') + this.$element.prop('disabled', true) + } + + 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) + } + + Toggle.prototype.trigger = function (silent) { + this.$element.off('change.bs.toggle') + if (!silent) this.$element.change() + this.$element.on('change.bs.toggle', $.proxy(function() { + this.update() + }, this)) + } + + Toggle.prototype.destroy = function() { + this.$element.off('change.bs.toggle') + this.$toggleGroup.remove() + this.$element.removeData('bs.toggle') + this.$element.unwrap() + } + + // TOGGLE PLUGIN DEFINITION + // ======================== + + function Plugin(option) { + return this.each(function () { + var $this = $(this) + var data = $this.data('bs.toggle') + var options = typeof option == 'object' && option + + if (!data) $this.data('bs.toggle', (data = new Toggle(this, options))) + if (typeof option == 'string' && data[option]) data[option]() + }) + } + + var old = $.fn.bootstrapToggle + + $.fn.bootstrapToggle = Plugin + $.fn.bootstrapToggle.Constructor = Toggle + + // TOGGLE NO CONFLICT + // ================== + + $.fn.toggle.noConflict = function () { + $.fn.bootstrapToggle = old + return this + } + + // TOGGLE DATA-API + // =============== + + $(function() { + $('input[type=checkbox][data-toggle^=toggle]').bootstrapToggle() + }) + + $(document).on('click.bs.toggle', 'div[data-toggle^=toggle]', function(e) { + var $checkbox = $(this).find('input[type=checkbox]') + $checkbox.bootstrapToggle('toggle') + e.preventDefault() + }) + +}(jQuery);
