diff --git a/src/panels/view/PanelView.js b/src/panels/view/PanelView.js index f6e9f14dd..a98222168 100644 --- a/src/panels/view/PanelView.js +++ b/src/panels/view/PanelView.js @@ -13,6 +13,7 @@ module.exports = Backbone.View.extend({ this.id = this.pfx + model.get('id'); this.listenTo(model, 'change:appendContent', this.appendContent); this.listenTo(model, 'change:content', this.updateContent); + this.listenTo(model, 'change:visible', this.toggleVisible); model.view = this; }, @@ -30,6 +31,14 @@ module.exports = Backbone.View.extend({ this.$el.html(this.model.get('content')); }, + toggleVisible() { + if (!this.model.get('visible')) { + this.$el.addClass(`${this.ppfx}hidden`); + return; + } + this.$el.removeClass(`${this.ppfx}hidden`); + }, + attributes() { return this.model.get('attributes'); }, diff --git a/test/specs/panels/view/PanelView.js b/test/specs/panels/view/PanelView.js index 544d45022..cbd15dfa1 100644 --- a/test/specs/panels/view/PanelView.js +++ b/test/specs/panels/view/PanelView.js @@ -39,6 +39,19 @@ module.exports = { expect(view.$el.html()).toEqual('test2'); }); + test('Hide panel', () => { + expect(view.$el.hasClass('hidden')).toBeFalsy(); + model.set('visible', false); + expect(view.$el.hasClass('hidden')).toBeTruthy(); + }); + + test('Show panel', () => { + model.set('visible', false); + expect(view.$el.hasClass('hidden')).toBeTruthy(); + model.set('visible', true); + expect(view.$el.hasClass('hidden')).toBeFalsy(); + }); + describe('Init with options', () => { beforeEach(() => { model = new Panel({