Replace Bootstrap switch with Bootstrap4 toggle to improve the performance. Fixes #3051

web/pgadmin/static/js/backform.pgadmin.js

@@ -10,7 +10,7 @@
 define([
   'sources/gettext', 'underscore', 'underscore.string', 'jquery',
   'backbone', 'backform', 'backgrid', 'codemirror', 'sources/sqleditor_utils',
-  'spectrum', 'pgadmin.backgrid', 'select2',
+  'spectrum', 'pgadmin.backgrid', 'select2', 'bootstrap.toggle',
 ], function(gettext, _, S, $, Backbone, Backform, Backgrid, CodeMirror, SqlEditorUtils) {
 
   var pgAdmin = (window.pgAdmin = window.pgAdmin || {}),
@@ -431,7 +431,9 @@ define([
         offText: gettext('No'),
         onColor: 'success',
         offColor: 'primary',
-        size: 'small',
+        size: 'mini',
+        width: null,
+        height: null,
       },
       controlLabelClassName: Backform.controlLabelClassName,
       controlsClassName: Backform.controlsClassName,
@@ -441,11 +443,11 @@ define([
     template: _.template([
       '<label class="<%=controlLabelClassName%>"><%=label%></label>',
       '<div class="<%=controlsClassName%>">',
-      '  <div class="checkbox">',
-      '    <label>',
-      '      <input type="checkbox" class="<%=extraClasses.join(\' \')%>" name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
-      '    </label>',
-      '  </div>',
+      '      <input tabindex="0" type="checkbox" data-style="quick" data-toggle="toggle"',
+      '      data-size="<%=options.size%>" data-height="<%=options.height%>"  ',
+      '      data-on="<%=options.onText%>" data-off="<%=options.offText%>" ',
+      '      data-onstyle="<%=options.onColor%>" data-offstyle="<%=options.offColor%>" data-width="<%=options.width%>" ',
+      '      name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
       '  <% if (helpMessage && helpMessage.length) { %>',
       '    <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
       '  <% } %>',
@@ -458,7 +460,14 @@ define([
       );
     },
     events: {
-      'switchChange.bootstrapSwitch': 'onChange',
+      'change input': 'onChange',
+      'keyup': 'toggleSwitch',
+    },
+    toggleSwitch: function(e) {
+      if (e.keyCode == 32) {
+        this.$el.find('input[type=checkbox]').bootstrapToggle('toggle');
+        e.preventDefault();
+      }
     },
     render: function() {
       var field = _.defaults(this.field.toJSON(), this.defaults),
@@ -467,23 +476,46 @@ define([
         name = attrArr.shift(),
         path = attrArr.join('.'),
         rawValue = this.keyPathAccessor(attributes[name], path),
+        data = _.extend(field, {
+          rawValue: rawValue,
+          value: this.formatter.fromRaw(rawValue, this.model),
+          attributes: attributes,
+          formatter: this.formatter,
+        }),
         evalF = function(f, d, m) {
           return (_.isFunction(f) ? !!f.apply(d, [m]) : !!f);
-        },
-        options = _.defaults({
-          disabled: evalF(field.disabled, field, this.model),
-        }, this.field.get('options'), this.defaults.options,
-          $.fn.bootstrapSwitch.defaults);
+        };
 
-      Backform.InputControl.prototype.render.apply(this, arguments);
+      // Evaluate the disabled, visible, and required option
+      _.extend(data, {
+        disabled: evalF(field.disabled, field, this.model),
+        visible:  evalF(data.visible, field, this.model),
+        required: evalF(data.required, field, this.model),
+      });
+
+      // Clean up first
+      this.$el.removeClass(Backform.hiddenClassName);
+
+      if (!data.visible)
+        this.$el.addClass(Backform.hiddenClassName);
+
+      if(Backform.requiredInputClassName) {
+        this.$el.removeClass(Backform.requiredInputClassName);
+      }
+
+      if (data.required) {
+        this.$el.addClass(Backform.requiredInputClassName);
+      }
+
+      data.options = _.defaults({
+        disabled: evalF(field.disabled, field, this.model),
+      }, this.field.get('options'), this.defaults.options,
+        $.fn.bootstrapToggle.defaults);
+
+      this.$el.html(this.template(data)).addClass(field.name);
       this.$input = this.$el.find('input[type=checkbox]').first();
-
-      //Check & set additional properties
-      this.$input.bootstrapSwitch(
-        _.extend(options, {
-          'state': rawValue,
-        })
-      );
+      this.$input.bootstrapToggle();
+      this.updateInvalid();
 
       return this;
     },

web/pgadmin/static/js/backgrid.pgadmin.js

@@ -9,7 +9,8 @@
 
 define([
   'sources/gettext', 'underscore', 'jquery', 'backbone', 'backform', 'backgrid', 'alertify',
-  'moment', 'bignumber', 'bootstrap.datetimepicker', 'bootstrap.switch', 'backgrid.filter',
+  'moment', 'bignumber', 'bootstrap.datetimepicker', 'backgrid.filter',
+  'bootstrap.toggle',
 ], function(
   gettext, _, $, Backbone, Backform, Backgrid, Alertify, moment, BigNumber
 ) {
@@ -451,18 +452,20 @@ define([
   /**
     SwitchCell renders a Bootstrap Switch in backgrid cell
   */
-  if (window.jQuery && window.jQuery.fn.bootstrapSwitch)
-    $.fn.bootstrapSwitch = window.jQuery.fn.bootstrapSwitch;
+  if (window.jQuery && window.jQuery.fn.bootstrapToggle)
+    $.fn.bootstrapToggle = window.jQuery.fn.bootstrapToggle;
 
   Backgrid.Extension.SwitchCell = Backgrid.BooleanCell.extend({
     defaults: {
       options: _.defaults({
-        onText: gettext('True'),
-        offText: gettext('False'),
+        onText: gettext('Yes'),
+        offText: gettext('No'),
         onColor: 'success',
-        offColor: 'default',
+        offColor: 'primary',
         size: 'mini',
-      }, $.fn.bootstrapSwitch.defaults),
+        width: null,
+        height: null,
+      }, $.fn.bootstrapToggle.defaults),
     },
 
     className: 'switch-cell',
@@ -474,7 +477,7 @@ define([
 
     enterEditMode: function() {
       this.$el.addClass('editor');
-      $(this.$el.find('input')).trigger('focus');
+      $(this.$el.find('input[type=checkbox]')).trigger('focus');
     },
 
     exitEditMode: function() {
@@ -482,7 +485,16 @@ define([
     },
 
     events: {
-      'switchChange.bootstrapSwitch': 'onChange',
+      'change input': 'onChange',
+      'keyup': 'toggleSwitch',
+      'blur input': 'exitEditMode',
+    },
+
+    toggleSwitch: function(e) {
+      if (e.keyCode == 32) {
+        this.$el.find('input[type=checkbox]').bootstrapToggle('toggle');
+        e.preventDefault();
+      }
     },
 
     onChange: function() {
@@ -503,7 +515,8 @@ define([
         rawValue = this.formatter.fromRaw(
           model.get(column.get('name')), model
         ),
-        editable = Backgrid.callByNeed(col.editable, column, model);
+        editable = Backgrid.callByNeed(col.editable, column, model),
+        options =  _.defaults({}, col.options, this.defaults.options);
 
       this.undelegateEvents();
 
@@ -513,17 +526,14 @@ define([
         $('<input>', {
           tabIndex: -1,
           type: 'checkbox',
-        }).prop('checked', rawValue).prop('disabled', !editable));
+        }).prop('checked', rawValue).prop('disabled', !editable).attr('data-toggle', 'toggle')
+        .attr('data-size', options.size).attr('data-on', options.onText).attr('data-off', options.offText)
+        .attr('data-onstyle', options.onColor).attr('data-offstyle', options.offColor));
+
       this.$input = this.$el.find('input[type=checkbox]').first();
 
-      // Override BooleanCell checkbox with Bootstrapswitch
-      this.$input.bootstrapSwitch(
-        _.defaults({
-          'state': rawValue,
-          'disabled': !editable,
-        }, col.options,
-          this.defaults.options
-        ));
+      // Override BooleanCell checkbox with Bootstraptoggle
+      this.$input.bootstrapToggle();
 
       // Listen for Tab key
       this.$el.on('keydown', function(e) {
@@ -546,6 +556,7 @@ define([
               });
               self.model.trigger('backgrid:edited', self.model,
                 self.column, command);
+              this.exitEditMode();
               gotoCell.trigger('focus');
             }
           }, 20);