From dc6692038ef29707e2a697ab65de5e8a8f6b0f37 Mon Sep 17 00:00:00 2001 From: Arthur Almeida Date: Thu, 2 Nov 2017 12:08:16 -0200 Subject: [PATCH 1/6] added disable property to Button --- src/panels/model/Button.js | 1 + test/specs/panels/model/PanelModels.js | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/src/panels/model/Button.js b/src/panels/model/Button.js index e66951678..559fcd55d 100644 --- a/src/panels/model/Button.js +++ b/src/panels/model/Button.js @@ -14,6 +14,7 @@ module.exports = Backbone.Model.extend({ dragDrop: false, runDefaultCommand: true, stopDefaultCommand: false, + disable: false, }, initialize(options) { diff --git a/test/specs/panels/model/PanelModels.js b/test/specs/panels/model/PanelModels.js index c4f4f3099..923092712 100644 --- a/test/specs/panels/model/PanelModels.js +++ b/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', () => { From 6ecbc229fcc8792d47f6657a28bb115c6271ae39 Mon Sep 17 00:00:00 2001 From: Arthur Almeida Date: Thu, 2 Nov 2017 17:44:03 -0200 Subject: [PATCH 2/6] added method to disable/enable the button, using specific class for disabled buttons, extracted toogleActive method to improve testability --- src/panels/view/ButtonView.js | 20 ++++++++++++++++++ test/specs/panels/view/ButtonView.js | 31 +++++++++++++++++++++++++++- 2 files changed, 50 insertions(+), 1 deletion(-) diff --git a/src/panels/view/ButtonView.js b/src/panels/view/ButtonView.js index f61f4f390..8d21f1aa7 100644 --- a/src/panels/view/ButtonView.js +++ b/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); diff --git a/test/specs/panels/view/ButtonView.js b/test/specs/panels/view/ButtonView.js index f988181e5..92d63093d 100644 --- a/test/specs/panels/view/ButtonView.js +++ b/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 = '
'; 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(); }); From 41bd06c39726326006716a6ecb0f0221849f5ca9 Mon Sep 17 00:00:00 2001 From: Arthur Almeida Date: Thu, 2 Nov 2017 17:47:36 -0200 Subject: [PATCH 3/6] disabling buttons flagged as disabled --- src/panels/index.js | 13 +++++++++++++ test/specs/panels/index.js | 9 +++++++++ 2 files changed, 22 insertions(+) diff --git a/src/panels/index.js b/src/panels/index.js index 2fed77a45..74400356b 100644 --- a/src/panels/index.js +++ b/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, diff --git a/test/specs/panels/index.js b/test/specs/panels/index.js index 5a6c79bd1..96d24eaf6 100644 --- a/test/specs/panels/index.js +++ b/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(); From 8a825f720b659cb41c7aa3d20b5dfce335fc62d6 Mon Sep 17 00:00:00 2001 From: Arthur Almeida Date: Thu, 2 Nov 2017 18:04:42 -0200 Subject: [PATCH 4/6] disabling the buttons when the editor view is loaded --- src/editor/view/EditorView.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/editor/view/EditorView.js b/src/editor/view/EditorView.js index 9b23c353c..1076198dd 100644 --- a/src/editor/view/EditorView.js +++ b/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); }); From 158868038bd1180d9d72c5605e8202e4fc7a8183 Mon Sep 17 00:00:00 2001 From: Arthur Almeida Date: Thu, 2 Nov 2017 18:21:41 -0200 Subject: [PATCH 5/6] added methods for disable all buttons and disable except one for buttons collections --- src/panels/model/Buttons.js | 34 ++++++++++++++++++++++++++ test/specs/panels/model/PanelModels.js | 18 ++++++++++++++ 2 files changed, 52 insertions(+) diff --git a/src/panels/model/Buttons.js b/src/panels/model/Buttons.js index cf09589f1..74901156b 100644 --- a/src/panels/model/Buttons.js +++ b/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); + } + }); + }, }); diff --git a/test/specs/panels/model/PanelModels.js b/test/specs/panels/model/PanelModels.js index 923092712..5bf63722c 100644 --- a/test/specs/panels/model/PanelModels.js +++ b/test/specs/panels/model/PanelModels.js @@ -73,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); + }); }); From 61f624fd8c1fcc914a0330d03e3315f9c4e0c15b Mon Sep 17 00:00:00 2001 From: Arthur Almeida Date: Fri, 3 Nov 2017 10:36:47 -0200 Subject: [PATCH 6/6] using the active class when the button is disabeld --- src/panels/view/ButtonView.js | 2 +- test/specs/panels/view/ButtonView.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/panels/view/ButtonView.js b/src/panels/view/ButtonView.js index 8d21f1aa7..abfc322d2 100644 --- a/src/panels/view/ButtonView.js +++ b/src/panels/view/ButtonView.js @@ -13,7 +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.disableCls = this.pfx + 'active'; this.btnsVisCls = this.pfx + 'visible'; this.parentM = o.parentM || null; this.className = this.pfx + 'btn' + (cls ? ' ' + cls : ''); diff --git a/test/specs/panels/view/ButtonView.js b/test/specs/panels/view/ButtonView.js index 92d63093d..dbdb5020c 100644 --- a/test/specs/panels/view/ButtonView.js +++ b/test/specs/panels/view/ButtonView.js @@ -58,13 +58,13 @@ module.exports = { it('Disable the button', () => { model.set('disable', true, {silent: true}); view.updateDisable(); - expect(view.el.getAttribute('class')).toEqual(btnClass + ' disable'); + 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 + ' disable'); + expect(view.el.getAttribute('class')).toEqual(btnClass + ' active'); model.set('disable', false, {silent: true}); view.updateDisable(); expect(view.el.getAttribute('class')).toEqual(btnClass);