Refactor block highlight to be managed fully by highlight behavior

[MAILPOET-1819]

assets/css/src/components/newsletterEditor/contentBlocks/_base.scss

@@ -24,10 +24,6 @@ $block-text-line-height: $text-line-height;
     z-index: 1;
   }
 
-  &:hover > .mailpoet_block_highlight {
-    border: 2px solid $editor-content-color;
-  }
-
   &.mailpoet_highlight > .mailpoet_block_highlight {
     border: 2px solid $editor-content-color !important;
   }
@@ -39,10 +35,6 @@ $block-text-line-height: $text-line-height;
     left: -2px;
   }
 
-  &:hover > .mailpoet_container_horizontal ~ .mailpoet_block_highlight {
-    border: 2px solid $editor-column-color;
-  }
-
   &.mailpoet_highlight > .mailpoet_container_horizontal ~ .mailpoet_block_highlight {
     border: 2px solid $editor-column-color !important;
   }

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

@@ -1,30 +1,49 @@
 /**
  * Highlight Editing Behavior
  *
- * Highlights a block,column that is being edited
+ * Highlights a block,column that is being hovered by mouse or edited
  */
 import Marionette from 'backbone.marionette';
 import BL from 'newsletter_editor/behaviors/BehaviorsLookup';
 
 BL.HighlightEditingBehavior = Marionette.Behavior.extend({
   modelEvents: {
-    startEditing: 'enableHighlight',
-    stopEditing: 'disableHighlight',
+    startEditing: 'onStartEditing',
+    stopEditing: 'onStopEditing',
   },
-  enableHighlight: function enableHighlight() {
-    this.view._isBeingEdited = true;
-    this.view.showTools();
-    this.$el.addClass('mailpoet_highlight');
+  events: {
+    mouseenter: 'onMouseEnter',
+    mouseleave: 'onMouseLeave',
   },
-  disableHighlight: function disableHighlight() {
-    this.view._isBeingEdited = false;
-    this.view.hideTools();
-    this.$el.removeClass('mailpoet_highlight');
+  onMouseEnter: function onMouseEnter(mouseEvent) {
+    this.isFocusedByPointer = true;
+    // Ignore mouse events when dragging
+    if (mouseEvent && mouseEvent.buttons > 0) {
+      return;
+    }
+    this.view.addHighlight();
+  },
+  onMouseLeave: function onMouseLeave() {
+    this.isFocusedByPointer = false;
+    // Ignore mouse events when item is being edited
+    if (this.isBeingEdited) {
+      return;
+    }
+    this.view.removeHighlight();
+  },
+  onStartEditing: function onStartEditing() {
+    this.isBeingEdited = true;
+    this.view.addHighlight();
+  },
+  onStopEditing: function onStopEditing() {
+    this.isBeingEdited = false;
+    if (!this.isFocusedByPointer) {
+      this.view.removeHighlight();
+    }
   },
   onDomRefresh: function onDomRefresh() {
-    if (this.view._isBeingEdited) {
-      this.view.showTools();
-      this.$el.addClass('mailpoet_highlight');
+    if (this.isBeingEdited) {
+      this.view.addHighlight();
     }
   },
 });

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

@@ -59,10 +59,6 @@ Module.BlockView = AugmentedView.extend({
     delete: 'deleteBlock',
     duplicate: 'duplicateBlock',
   },
-  events: {
-    mouseenter: 'showTools',
-    mouseleave: 'hideTools',
-  },
   behaviors: {
     DraggableBehavior: {
       cloneOriginal: true,
@@ -105,20 +101,18 @@ Module.BlockView = AugmentedView.extend({
     this.on('dom:refresh', this.showBlock, this);
     this._isFirstRender = true;
   },
-  showTools: function showTools(mouseEvent) {
-    // Skip if user is dragging/resizing
-    if (mouseEvent && mouseEvent.buttons > 0) {
-      return;
-    }
+  addHighlight: function addHighlight() {
+    this.$el.addClass('mailpoet_highlight');
     if (!this.showingToolsDisabled) {
       this.$('> .mailpoet_tools').addClass('mailpoet_display_tools');
       this.toolsView.triggerMethod('showTools');
     }
   },
+  removeHighlight: function removeHighlight() {
+    this.$el.removeClass('mailpoet_highlight');
+    this.hideTools();
+  },
   hideTools: function hideTools() {
-    if (this._isBeingEdited) {
-      return;
-    }
     this.$('> .mailpoet_tools').removeClass('mailpoet_display_tools');
     this.toolsView.triggerMethod('hideTools');
   },

assets/js/src/newsletter_editor/blocks/container.js

@@ -190,22 +190,16 @@ Module.ContainerBlockView = base.BlockView.extend({
     this.$('> .mailpoet_container').attr('class',
       'mailpoet_container mailpoet_container_' + this.model.get('orientation') + ' ' + classIrregular);
   },
-  showTools: function (mouseEvent) {
-    // Skip if user is dragging/resizing
-    if (mouseEvent && mouseEvent.buttons > 0) {
+  addHighlight: function addHighlight() {
+    if (this.renderOptions.depth !== 1 || this.$el.hasClass('mailpoet_container_layer_active')) {
       return;
     }
-    if (this.renderOptions.depth === 1 && !this.$el.hasClass('mailpoet_container_layer_active')) {
-      this.$(this.ui.tools).addClass('mailpoet_display_tools');
-      this.$el.addClass('mailpoet_highlight');
-      this.toolsView.triggerMethod('showTools');
-    }
+    this.$(this.ui.tools).addClass('mailpoet_display_tools');
+    this.$el.addClass('mailpoet_highlight');
+    this.toolsView.triggerMethod('showTools');
   },
-  hideTools: function () {
-    if (this.renderOptions.depth !== 1
-      || this.$el.hasClass('mailpoet_container_layer_active')
-      || this._isBeingEdited
-    ) {
+  removeHighlight: function removeHighlight() {
+    if (this.renderOptions.depth !== 1 || this.$el.hasClass('mailpoet_container_layer_active')) {
       return;
     }
     this.$(this.ui.tools).removeClass('mailpoet_display_tools');

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

@@ -278,6 +278,10 @@ describe('Container', function () {
         var settingsView;
         var blockView = new (ContainerBlock.ContainerBlockView)({ model: model });
         blockView.render();
+        // Set proper depth since we want to highlight only top level containers
+        blockView.renderOptions = {
+          depth: 1,
+        };
         expect(blockView.$el.hasClass('mailpoet_highlight')).to.equal(false);
         settingsView = new (ContainerBlock.ContainerBlockSettingsView)({ model: model });
         settingsView.render();