From d69e0dea9eb23b5a7215a12f0e074fe769ed5e1a Mon Sep 17 00:00:00 2001 From: Rostislav Wolny Date: Wed, 27 Feb 2019 17:26:27 +0100 Subject: [PATCH] Refactor block highlight to be managed fully by highlight behavior [MAILPOET-1819] --- .../newsletterEditor/contentBlocks/_base.scss | 8 ---- .../behaviors/HighlightEditingBehavior.js | 47 +++++++++++++------ .../js/src/newsletter_editor/blocks/base.js | 18 +++---- .../src/newsletter_editor/blocks/container.js | 20 +++----- .../blocks/container.spec.js | 4 ++ 5 files changed, 50 insertions(+), 47 deletions(-) diff --git a/assets/css/src/components/newsletterEditor/contentBlocks/_base.scss b/assets/css/src/components/newsletterEditor/contentBlocks/_base.scss index 4ae6bf306f..638006faf5 100644 --- a/assets/css/src/components/newsletterEditor/contentBlocks/_base.scss +++ b/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; } diff --git a/assets/js/src/newsletter_editor/behaviors/HighlightEditingBehavior.js b/assets/js/src/newsletter_editor/behaviors/HighlightEditingBehavior.js index 7042117387..ab1bb17869 100644 --- a/assets/js/src/newsletter_editor/behaviors/HighlightEditingBehavior.js +++ b/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(); } }, }); diff --git a/assets/js/src/newsletter_editor/blocks/base.js b/assets/js/src/newsletter_editor/blocks/base.js index 50eafb4f80..07045c7c9e 100644 --- a/assets/js/src/newsletter_editor/blocks/base.js +++ b/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'); }, diff --git a/assets/js/src/newsletter_editor/blocks/container.js b/assets/js/src/newsletter_editor/blocks/container.js index bd8b255fad..5013704e5e 100644 --- a/assets/js/src/newsletter_editor/blocks/container.js +++ b/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'); diff --git a/tests/javascript/newsletter_editor/blocks/container.spec.js b/tests/javascript/newsletter_editor/blocks/container.spec.js index 136382e434..d7222bc901 100644 --- a/tests/javascript/newsletter_editor/blocks/container.spec.js +++ b/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();