Keep block highlighted and tools displayed when editing settings

[MAILPOET-1805]
This commit is contained in:
Rostislav Wolny
2019-02-25 17:13:05 +01:00
committed by M. Shull
parent 8f8eb24b67
commit 6662f4e4d2
4 changed files with 41 additions and 0 deletions

View File

@@ -0,0 +1,24 @@
/**
* Highlight Editing Behavior
*
* Highlights a block,column that is being edited
*/
import Marionette from 'backbone.marionette';
import BL from 'newsletter_editor/behaviors/BehaviorsLookup';
BL.HighlightEditingBehavior = Marionette.Behavior.extend({
modelEvents: {
startEditing: 'enableHighlight',
stopEditing: 'disableHighlight',
},
enableHighlight: function enableHighlight() {
this.view._isBeingEdited = true;
this.view.showTools();
this.$el.addClass('mailpoet_highlight');
},
disableHighlight: function disableHighlight() {
this.view._isBeingEdited = false;
this.view.hideTools();
this.$el.removeClass('mailpoet_highlight');
},
});

View File

@@ -88,6 +88,7 @@ Module.BlockView = AugmentedView.extend({
return undefined;
},
},
HighlightEditingBehavior: {},
},
templateContext: function templateContext() {
return {
@@ -115,6 +116,9 @@ Module.BlockView = AugmentedView.extend({
}
},
hideTools: function hideTools() {
if (this._isBeingEdited) {
return;
}
this.$('> .mailpoet_tools').removeClass('mailpoet_display_tools');
this.toolsView.triggerMethod('hideTools');
},

View File

@@ -26,6 +26,7 @@ import 'newsletter_editor/behaviors/BehaviorsLookup.js'; // side effect - assing
import 'newsletter_editor/behaviors/ColorPickerBehavior.js'; // side effect - assigns to BehaviorsLookup
import 'newsletter_editor/behaviors/ContainerDropZoneBehavior.js'; // side effect - assigns to BehaviorsLookup
import 'newsletter_editor/behaviors/DraggableBehavior.js'; // side effect - assigns to BehaviorsLookup
import 'newsletter_editor/behaviors/HighlightEditingBehavior.js'; // side effect - assigns to BehaviorsLookup
import 'newsletter_editor/behaviors/MediaManagerBehavior.js'; // side effect - assigns to BehaviorsLookup
import 'newsletter_editor/behaviors/ResizableBehavior.js'; // side effect - assigns to BehaviorsLookup
import 'newsletter_editor/behaviors/SortableBehavior.js'; // side effect - assigns to BehaviorsLookup

View File

@@ -497,6 +497,18 @@ describe('Button', function () {
expect(view.$('.mailpoet_field_button_replace_all_styles').length).to.equal(0);
});
it('displays/hides tools and highlight block when settings active/inactive', function () {
var settingsView;
var blockView = new (ButtonBlock.ButtonBlockView)({ model: model });
blockView.render();
expect(blockView.$el.hasClass('mailpoet_highlight')).to.equal(false);
settingsView = new (ButtonBlock.ButtonBlockSettingsView)({ model: model });
settingsView.render();
expect(blockView.$el.hasClass('mailpoet_highlight')).to.equal(true);
settingsView.destroy();
expect(blockView.$el.hasClass('mailpoet_highlight')).to.equal(false);
});
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;