From e3872ad844037ec1198ebbae83e92d7c378eb55a Mon Sep 17 00:00:00 2001
From: Arthur Almeida <arthur.almeidapereira@gmail.com>
Date: Sat, 24 Nov 2018 20:10:53 -0200
Subject: [PATCH] add the ability to hide/show a panel by the  panel's visible
 property

---
 src/panels/view/PanelView.js        |  9 +++++++++
 test/specs/panels/view/PanelView.js | 13 +++++++++++++
 2 files changed, 22 insertions(+)

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({