Keep block highlighted and tools displayed when editing settings

[MAILPOET-1805]

assets/js/src/newsletter_editor/behaviors/HighlightEditingBehavior.js

@@ -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');
+  },
+});

assets/js/src/newsletter_editor/blocks/base.js

@@ -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');
   },

assets/js/src/newsletter_editor/webpack_index.jsx

@@ -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

tests/javascript/newsletter_editor/blocks/button.spec.js

@@ -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;