diff --git a/cypress/e2e/extensions/auto-refresh/auto-refresh.cy.js b/cypress/e2e/extensions/auto-refresh/auto-refresh.cy.js new file mode 100644 index 0000000000..f25d1182e4 --- /dev/null +++ b/cypress/e2e/extensions/auto-refresh/auto-refresh.cy.js @@ -0,0 +1,9 @@ +describe('Auto Refresh', () => { + it('should toggle active state', () => { + cy.visit('cypress/e2e/extensions/auto-refresh/test.html') + cy.get('[name="autoRefresh"]').click() + cy.get('[name="autoRefresh"]').should('have.class', 'active') + cy.get('[name="autoRefresh"]').click() + cy.get('[name="autoRefresh"]').should('not.have.class', 'active') + }) +}) diff --git a/cypress/e2e/extensions/auto-refresh/test.html b/cypress/e2e/extensions/auto-refresh/test.html new file mode 100644 index 0000000000..fb149ed989 --- /dev/null +++ b/cypress/e2e/extensions/auto-refresh/test.html @@ -0,0 +1,43 @@ + + + + + + Auto Refresh Test + + + + + + +
+ + + + + + + + + + + + + + + + + + + + +
IDNamePrice
1Item 1$1
2Item 2$2
+
+ + + + + + + + diff --git a/src/extensions/auto-refresh/bootstrap-table-auto-refresh.js b/src/extensions/auto-refresh/bootstrap-table-auto-refresh.js index fc5858ce0f..75756f5b84 100644 --- a/src/extensions/auto-refresh/bootstrap-table-auto-refresh.js +++ b/src/extensions/auto-refresh/bootstrap-table-auto-refresh.js @@ -11,7 +11,7 @@ Object.assign($.fn.bootstrapTable.defaults, { showAutoRefresh: true, autoRefreshInterval: 60, autoRefreshSilent: true, - autoRefreshStatus: true, + autoRefreshStatus: false, autoRefreshFunction: null }) @@ -42,16 +42,22 @@ $.BootstrapTable = class extends $.BootstrapTable { initToolbar (...args) { if (this.options.autoRefresh) { - this.buttons = Object.assign(this.buttons, { + const attributes = { + 'aria-label': this.options.formatAutoRefresh(), + title: this.options.formatAutoRefresh() + } + + if (this.options.autoRefreshStatus) { + attributes.class = this.constants.classes.buttonActive || 'active' + } + + this.buttons = Object.assign(this.buttons || {}, { autoRefresh: { text: this.options.formatAutoRefresh(), icon: this.options.icons.autoRefresh, render: false, - event: this.toggleAutoRefresh, - attributes: { - 'aria-label': this.options.formatAutoRefresh(), - title: this.options.formatAutoRefresh() - } + event: this.toggleAutoRefresh.bind(this), + attributes } }) } @@ -63,11 +69,11 @@ $.BootstrapTable = class extends $.BootstrapTable { if (this.options.autoRefresh) { if (this.options.autoRefreshStatus) { clearInterval(this.options.autoRefreshFunction) - this.$toolbar.find('>.columns .auto-refresh') + this.$toolbar.find('>.columns [name="autoRefresh"]') .removeClass(this.constants.classes.buttonActive) } else { this.setupRefreshInterval() - this.$toolbar.find('>.columns .auto-refresh') + this.$toolbar.find('>.columns [name="autoRefresh"]') .addClass(this.constants.classes.buttonActive) } this.options.autoRefreshStatus = !this.options.autoRefreshStatus