diff --git a/assets/js/src/newsletter_editor/behaviors/HighlightEditingBehavior.js b/assets/js/src/newsletter_editor/behaviors/HighlightEditingBehavior.js index ab1bb17869..634fb9eddd 100644 --- a/assets/js/src/newsletter_editor/behaviors/HighlightEditingBehavior.js +++ b/assets/js/src/newsletter_editor/behaviors/HighlightEditingBehavior.js @@ -10,11 +10,28 @@ BL.HighlightEditingBehavior = Marionette.Behavior.extend({ modelEvents: { startEditing: 'onStartEditing', stopEditing: 'onStopEditing', + resizeMove: 'onResizeMove', }, events: { mouseenter: 'onMouseEnter', mouseleave: 'onMouseLeave', }, + // mouseleave event is not always triggered during resizing + // so we have to check if the pointer is still inside using resize event coordinates + onResizeMove: function onResizeMove(event) { + var offset = this.view.$el.offset(); + var height = this.view.$el.height(); + var width = this.view.$el.width(); + if (event.pageX < offset.left + || event.pageX > offset.left + width + || event.pageY < offset.top + || event.pageY > offset.top + height + ) { + this.isFocusedByPointer = false; + } else { + this.isFocusedByPointer = true; + } + }, onMouseEnter: function onMouseEnter(mouseEvent) { this.isFocusedByPointer = true; // Ignore mouse events when dragging diff --git a/assets/js/src/newsletter_editor/behaviors/ResizableBehavior.js b/assets/js/src/newsletter_editor/behaviors/ResizableBehavior.js index fd74e90b9b..391d419001 100644 --- a/assets/js/src/newsletter_editor/behaviors/ResizableBehavior.js +++ b/assets/js/src/newsletter_editor/behaviors/ResizableBehavior.js @@ -59,6 +59,7 @@ BL.ResizableBehavior = Marionette.Behavior.extend({ that.$el.addClass('mailpoet_resize_active'); }).on('resizemove', function resizemove(event) { var onResize = that.options.onResize.bind(that); + that.view.model.trigger('resizeMove', event); return onResize(event); }) .on('resizeend', function resizeend() {