Improved auto-refresh to support all themes

src/bootstrap-table.js

@@ -37,6 +37,7 @@ class BootstrapTable {
   initConstants () {
     const o = this.options
     this.constants = Constants.CONSTANTS
+    this.constants.theme = $.fn.bootstrapTable.theme
 
     const buttonsPrefix = o.buttonsPrefix ? `${o.buttonsPrefix}-` : ''
     this.constants.buttonsClass = [
@@ -2776,6 +2777,7 @@ $.fn.bootstrapTable = function (option, ...args) {
 }
 
 $.fn.bootstrapTable.Constructor = BootstrapTable
+$.fn.bootstrapTable.theme = Constants.THEME
 $.fn.bootstrapTable.defaults = BootstrapTable.DEFAULTS
 $.fn.bootstrapTable.columnDefaults = BootstrapTable.COLUMN_DEFAULTS
 $.fn.bootstrapTable.locales = BootstrapTable.LOCALES

src/constants/index.js

@@ -13,7 +13,6 @@ try {
 
 const CONSTANTS = {
   3: {
-    theme: 'bootstrap3',
     iconsPrefix: 'glyphicon',
     icons: {
       paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',
@@ -37,7 +36,8 @@ const CONSTANTS = {
       paginationDropdown: 'btn-group dropdown',
       dropup: 'dropup',
       dropdownActive: 'active',
-      paginationActive: 'active'
+      paginationActive: 'active',
+      buttonActive: 'active'
     },
     html: {
       toobarDropdow: ['<ul class="dropdown-menu" role="menu">', '</ul>'],
@@ -51,7 +51,6 @@ const CONSTANTS = {
     }
   },
   4: {
-    theme: 'bootstrap4',
     iconsPrefix: 'fa',
     icons: {
       paginationSwitchDown: 'fa-caret-square-down',
@@ -75,7 +74,8 @@ const CONSTANTS = {
       paginationDropdown: 'btn-group dropdown',
       dropup: 'dropup',
       dropdownActive: 'active',
-      paginationActive: 'active'
+      paginationActive: 'active',
+      buttonActive: 'active'
     },
     html: {
       toobarDropdow: ['<div class="dropdown-menu dropdown-menu-right">', '</div>'],
@@ -401,6 +401,8 @@ const EVENTS = {
 Object.assign(DEFAULTS, EN)
 
 export default {
+  THEME: `bootstrap${bootstrapVersion}`,
+
   CONSTANTS,
 
   DEFAULTS,

src/extensions/auto-refresh/bootstrap-table-auto-refresh.js

@@ -15,7 +15,10 @@ $.extend($.fn.bootstrapTable.defaults, {
 })
 
 $.extend($.fn.bootstrapTable.defaults.icons, {
-  autoRefresh: Utils.bootstrapVersion === 4 ? 'fa-clock' : 'glyphicon-time icon-time'
+  autoRefresh: {
+    bootstrap3: 'glyphicon-time icon-time',
+    materialize: 'access_time'
+  }[$.fn.bootstrapTable.theme] || 'fa-clock'
 })
 
 $.extend($.fn.bootstrapTable.locales, {
@@ -41,16 +44,15 @@ $.BootstrapTable = class extends $.BootstrapTable {
     super.initToolbar(...args)
 
     if (this.options.autoRefresh) {
-      const $btnGroup = this.$toolbar.find('>.btn-group')
+      const $btnGroup = this.$toolbar.find('>.columns')
       let $btnAutoRefresh = $btnGroup.find('.auto-refresh')
 
       if (!$btnAutoRefresh.length) {
         $btnAutoRefresh = $(`
-          <button class="auto-refresh btn${Utils.sprintf(' btn-%s', this.options.buttonsClass)}
-          ${Utils.sprintf(' btn-%s', this.options.iconSize)}
-          ${this.options.autoRefreshStatus ? 'active' : ''}"
+          <button class="auto-refresh ${this.constants.buttonsClass}
+          ${this.options.autoRefreshStatus ? ` ${this.constants.classes.buttonActive}` : ''}"
           type="button" title="${this.options.formatAutoRefresh()}">
-          <i class="${this.options.iconsPrefix} ${this.options.icons.autoRefresh}"></i>
+          ${Utils.sprintf(this.constants.html.icon, this.options.iconsPrefix, this.options.icons.autoRefresh)}
           </button>
         `).appendTo($btnGroup)
 
@@ -63,12 +65,14 @@ $.BootstrapTable = class extends $.BootstrapTable {
     if (this.options.autoRefresh) {
       if (this.options.autoRefreshStatus) {
         clearInterval(this.options.autoRefreshFunction)
-        this.$toolbar.find('>.btn-group').find('.auto-refresh').removeClass('active')
+        this.$toolbar.find('>.columns').find('.auto-refresh')
+          .removeClass(this.constants.classes.buttonActive)
       } else {
         this.options.autoRefreshFunction = setInterval(() => {
           this.refresh({silent: this.options.autoRefreshSilent})
         }, this.options.autoRefreshInterval * 1000)
-        this.$toolbar.find('>.btn-group').find('.auto-refresh').addClass('active')
+        this.$toolbar.find('>.columns').find('.auto-refresh')
+          .addClass(this.constants.classes.buttonActive)
       }
       this.options.autoRefreshStatus = !this.options.autoRefreshStatus
     }

src/themes/bulma/bootstrap-table-bulma.js

@@ -10,12 +10,12 @@ $.extend($.fn.bootstrapTable.defaults, {
   buttonsClass: 'button'
 })
 
+$.fn.bootstrapTable.theme = 'bulma'
+
 $.BootstrapTable = class extends $.BootstrapTable {
   initConstants () {
     super.initConstants()
 
-    this.constants.theme = 'bulma'
-
     this.constants.classes.buttonsGroup = 'buttons has-addons'
     this.constants.classes.buttonsDropdown = 'button dropdown is-right'
     this.constants.classes.input = 'input'
@@ -23,6 +23,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.constants.classes.dropup = 'is-up'
     this.constants.classes.dropdownActive = 'is-active'
     this.constants.classes.paginationActive = 'is-current'
+    this.constants.classes.buttonActive = 'is-active'
 
     this.constants.html.toobarDropdow = ['<div class="dropdown-menu"><div class="dropdown-content">', '</div></div>']
     this.constants.html.toobarDropdowItem = '<label class="dropdown-item">%s</label>'

src/themes/foundation/bootstrap-table-foundation.js

@@ -10,17 +10,18 @@ $.extend($.fn.bootstrapTable.defaults, {
   buttonsClass: 'button'
 })
 
+$.fn.bootstrapTable.theme = 'foundation'
+
 $.BootstrapTable = class extends $.BootstrapTable {
   initConstants () {
     super.initConstants()
 
-    this.constants.theme = 'foundation'
-
     this.constants.classes.buttonsGroup = 'button-group'
     this.constants.classes.buttonsDropdown = 'dropdown-container'
     this.constants.classes.paginationDropdown = ''
     this.constants.classes.dropdownActive = 'is-active'
     this.constants.classes.paginationActive = 'current'
+    this.constants.classes.buttonActive = 'success'
 
     this.constants.html.toobarDropdow = ['<ul class="dropdown-pane" id="toolbar-dropdown" data-dropdown><ul class="vertical menu">', '</ul></div>']
     this.constants.html.toobarDropdowItem = '<li><label class="dropdown-item">%s</label></li>'

src/themes/materialize/bootstrap-table-materialize.js

@@ -22,17 +22,18 @@ $.extend($.fn.bootstrapTable.defaults, {
   }
 })
 
+$.fn.bootstrapTable.theme = 'materialize'
+
 $.BootstrapTable = class extends $.BootstrapTable {
   initConstants () {
     super.initConstants()
 
-    this.constants.theme = 'materialize'
-
     this.constants.classes.buttonsGroup = ''
     this.constants.classes.buttonsDropdown = ''
     this.constants.classes.input = 'input-field'
     this.constants.classes.input = ''
     this.constants.classes.paginationDropdown = ''
+    this.constants.classes.buttonActive = 'green'
 
     this.constants.html.toobarDropdow = ['<ul id="toolbar-dropdown" class="dropdown-content">', '</ul>']
     this.constants.html.toobarDropdowItem = '<li><label>%s</label></li>'

src/themes/semantic/bootstrap-table-semantic.js

@@ -10,12 +10,12 @@ $.extend($.fn.bootstrapTable.defaults, {
   buttonsClass: 'ui button'
 })
 
+$.fn.bootstrapTable.theme = 'semantic'
+
 $.BootstrapTable = class extends $.BootstrapTable {
   initConstants () {
     super.initConstants()
 
-    this.constants.theme = 'semantic'
-
     this.constants.classes.buttonsGroup = 'ui buttons'
     this.constants.classes.buttonsDropdown = 'ui button dropdown'
     this.constants.classes.inputGroup = 'ui input'