Merge pull request GrapesJS#479 from arthuralmeidap/disable-button-fe…

…ature

Disable button feature

src/editor/view/EditorView.js

@@ -9,6 +9,7 @@ module.exports = Backbone.View.extend({
     this.pn = model.get('Panels');
     model.on('loaded', () => {
       this.pn.active();
+      this.pn.disableButtons();
       model.runDefault();
       setTimeout(() => model.trigger('load'), 0);
     });

src/panels/index.js

@@ -200,6 +200,19 @@ module.exports = () => {
           });
         });
     },
+
+    /**
+     * Disable buttons flagged as disabled
+     * @private
+     */
+    disableButtons() {
+      this.getPanels().each(p => {
+          p.get('buttons').each(btn => {
+            if(btn.get('disable'))
+              btn.trigger('change:disable');
+          });
+        });
+    },
 
     Panel,
 

src/panels/model/Button.js

@@ -14,6 +14,7 @@ module.exports = Backbone.Model.extend({
     dragDrop: false,
     runDefaultCommand: true,
     stopDefaultCommand: false,
+    disable: false,
   },
 
   initialize(options) {

src/panels/model/Buttons.js

@@ -38,5 +38,39 @@ module.exports = Backbone.Collection.extend({
       }
     });
   },
+
+  /**
+   * Disables all buttons
+   * @param  {String}  ctx Context string
+   *
+   * @return  void
+   * */
+  disableAllButtons(ctx) {
+    var context = ctx || '';
+    this.forEach((model, index) => {
+      if( model.get('context') == context ){
+        model.set('disable', true);
+        if(model.get('buttons').length)
+          model.get('buttons').disableAllButtons(context);
+      }
+    });
+  },
+
+  /**
+   * Disables all buttons, except one passed
+   * @param  {Object}  except  Model to ignore
+   * @param  {Boolean}  r     Recursive flag
+   *
+   * @return  void
+   * */
+  disableAllButtonsExceptOne(except, r) {
+    this.forEach((model, index) => {
+      if(model !== except){
+        model.set('disable', true);
+        if(r && model.get('buttons').length)
+          model.get('buttons').disableAllButtonsExceptOne(except,r);
+      }
+    });
+  },
 
 });

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 + 'active';
     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/index.js

@@ -93,6 +93,15 @@ describe('Panels', () => {
       expect(spy.called).toEqual(true);
     });
 
+    it("Disable correctly buttons flagged as disabled", () => {
+      var spy = sinon.spy();
+      var panel = obj.addPanel({id: 'test'});
+      var btn = obj.addButton('test', {id:'btn', disable: true});
+      btn.on('change:disable', spy);
+      obj.disableButtons();
+      expect(spy.called).toEqual(true);
+    });
+
   });
 
   Models.run();

test/specs/panels/model/PanelModels.js

@@ -33,6 +33,10 @@ module.exports = {
         expect(obj.get('buttons').length).toEqual(1);
       });
 
+      it('Has a disable attribute with default value as false', () => {
+        expect(obj.get('disable')).toEqual(false);
+      });
+
     });
 
     describe('Buttons', () => {
@@ -69,6 +73,24 @@ module.exports = {
         obj.deactivateAllExceptOne(btn);
         expect(obj.at(0).get('active')).toEqual(true);
       });
+
+      it('Disable all buttons', () => {
+        obj.add({ disable: false });
+        obj.disableAllButtons();
+        expect(obj.at(0).get('disable')).toEqual(true);
+      });
+
+      it('Disables buttons with context', () => {
+        obj.add({ disable: false, context: 'someContext' });
+        obj.disableAllButtons('someContext');
+        expect(obj.at(0).get('disable')).toEqual(true);
+      });
+
+      it('Disables except one', () => {
+        var btn = obj.add({ disable: false });
+        obj.disableAllButtonsExceptOne(btn);
+        expect(obj.at(0).get('disable')).toEqual(false);
+      });
 
     });
 

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 + ' active');
+        });
+
+        it('Enable the disabled button', () => {
+          model.set('disable', true, {silent: true});
+          view.updateDisable();
+          expect(view.el.getAttribute('class')).toEqual(btnClass + ' active');
+          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();
         });