added method to disable/enable the button, using specific class for disabled buttons, extracted toogleActive method to improve testability

src/panels/view/ButtonView.js

@@ -13,6 +13,7 @@ module.exports = Backbone.View.extend({
     this.ppfx = this.config.pStylePrefix || '';
     this.id = this.pfx + this.model.get('id');
     this.activeCls = this.pfx + 'active';
+    this.disableCls = this.pfx + 'disable';
     this.btnsVisCls = this.pfx + 'visible';
     this.parentM = o.parentM || null;
     this.className = this.pfx + 'btn' + (cls ? ' ' + cls : '');
@@ -21,6 +22,7 @@ module.exports = Backbone.View.extend({
     this.listenTo(this.model, 'change:bntsVis', this.updateBtnsVis);
     this.listenTo(this.model, 'change:attributes', this.updateAttributes);
     this.listenTo(this.model, 'change:className', this.updateClassName);
+    this.listenTo(this.model, 'change:disable', this.updateDisable);
 
     if(this.model.get('buttons').length){
       this.$el.on('mousedown', this.startTimer);
@@ -234,6 +236,15 @@ module.exports = Backbone.View.extend({
     }
   },
 
+  updateDisable() {
+    if(this.model.get('disable')) {
+      this.$el.addClass(this.disableCls);
+    } else {
+      this.$el.removeClass(this.disableCls);
+    }
+  
+  },
+
   /**
    * Update active style status
    *
@@ -255,9 +266,18 @@ module.exports = Backbone.View.extend({
   clicked(e) {
     if(this.model.get('bntsVis') )
       return;
+    
+    if(this.model.get('disable') )
+    return;
+
+    this.toogleActive();
+  },
+
+  toogleActive() {
 
     if(this.parentM)
       this.swapParent();
+
     var active = this.model.get('active');
     this.model.set('active', !active);
 

test/specs/panels/view/ButtonView.js

@@ -14,7 +14,7 @@ module.exports = {
         beforeEach(() => {
           model = new Button();
           view = new ButtonView({
-            model
+            model: model
           });
           document.body.innerHTML = '<div id="fixtures"></div>';
           fixtures = document.body.querySelector('#fixtures');
@@ -55,6 +55,35 @@ module.exports = {
           expect(view.el.getAttribute('class')).toEqual(btnClass);
         });
 
+        it('Disable the button', () => {
+          model.set('disable', true, {silent: true});
+          view.updateDisable();
+          expect(view.el.getAttribute('class')).toEqual(btnClass + ' disable');
+        });
+        
+        it('Enable the disabled button', () => {
+          model.set('disable', true, {silent: true});
+          view.updateDisable();
+          expect(view.el.getAttribute('class')).toEqual(btnClass + ' disable');
+          model.set('disable', false, {silent: true});
+          view.updateDisable();
+          expect(view.el.getAttribute('class')).toEqual(btnClass);
+        });
+
+        it('Cancels the click action when button is disabled', () => {
+          const stub = sinon.stub(view, 'toogleActive');
+          model.set('disable', true, {silent: true});
+          view.clicked();
+          expect(stub.called).toEqual(false);
+        });
+
+        it('Enable the click action when button is enable', () => {
+          const stub = sinon.stub(view, 'toogleActive');
+          model.set('disable', false, {silent: true});
+          view.clicked();
+          expect(stub.called).toEqual(true);
+        });
+
         it('Renders correctly', () => {
           expect(view.render()).toExist();
         });