Skip to content

Commit 142b3cb

Browse files
anthoulaanthoula
committed
Merge branch 'MC-4156-slider-fade-cannot-be-inline-edited' of github.com:magento-obsessive-owls/magento2-page-builder into cms-team-1-delivery
2 parents b36748f + e906864 commit 142b3cb

File tree

8 files changed

+184
-46
lines changed

8 files changed

+184
-46
lines changed

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderImageSection.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
<element name="backgroundImageSource" type="text" selector="//div[contains(@style,'{{var1}}')]" parameterized="true"/>
4343
<element name="imageDisplay" type="button" selector="figure[data-role='image']"/>
4444
<element name="imageElement" type="button" selector="figure[data-role='image'] img:nth-child({{arg1}})" parameterized="true"/>
45-
<element name="imageElementCSS" type="text" selector="figure[data-role=image] img" parameterized="true"/>
45+
<element name="imageElementCSS" type="text" selector="figure[data-role=image] img"/>
4646
<element name="imageHasAltText" type="button" selector="img.pagebuilder-mobile-hidden[alt='{{arg1}}']" parameterized="true"/>
4747
<element name="imageHasCaption" type="button" selector="figcaption"/>
4848
<element name="imageHasTitleTag" type="button" selector="img.pagebuilder-mobile-hidden[title='{{arg1}}']" parameterized="true"/>

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderSliderCommonTests.xml

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1643,4 +1643,84 @@
16431643
<seeElement selector="{{SlideOnFrontend.messageContentTextAreaTextWidget('1', _ENV.MAGENTO_BASE_URL, $$createCMSPageB.identifier$$)}}" stepKey="seeWidgetStorefront"/>
16441644
<click selector="{{SlideOnFrontend.messageContentTextAreaTextWidget('1', _ENV.MAGENTO_BASE_URL, $$createCMSPageB.identifier$$)}}" stepKey="clickWidgetStorefront"/>
16451645
</test>
1646+
<test name="SliderFadeCanBeInlineEdited">
1647+
<annotations>
1648+
<features value="PageBuilder"/>
1649+
<stories value="Slider"/>
1650+
<title value="Slider - Slide Items Can Be Inline Edited When Slider Has Fade Enabled"/>
1651+
<description value="A user should be able to inline edit a slide when the slider has fade enabled"/>
1652+
<severity value="MAJOR"/>
1653+
<useCaseId value="MC-4156"/>
1654+
<testCaseId value="MC-5058"/>
1655+
<group value="pagebuilder"/>
1656+
<group value="pagebuilder-slide"/>
1657+
<group value="pagebuilder-sliderCommon"/>
1658+
</annotations>
1659+
<before>
1660+
<actionGroup ref="LoginAsAdmin" stepKey="loginAsAdmin"/>
1661+
<actionGroup ref="navigateToAPageWithPageBuilder" stepKey="navigateToAPageWithPageBuilder"/>
1662+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
1663+
</before>
1664+
<after>
1665+
<actionGroup ref="logout" stepKey="logout"/>
1666+
</after>
1667+
<actionGroup ref="addPageBuilderPageTitle" stepKey="enterPageTitle">
1668+
<argument name="contentType" value="PageBuilderSliderContentType"/>
1669+
</actionGroup>
1670+
<actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandPageBuilderPanelGroup">
1671+
<argument name="group" value="PageBuilderSliderContentType"/>
1672+
</actionGroup>
1673+
<actionGroup ref="dragContentTypeToStage" stepKey="dragSliderOntoStage">
1674+
<argument name="contentType" value="PageBuilderSliderContentType"/>
1675+
</actionGroup>
1676+
<!-- Open Slider settings -->
1677+
<comment userInput="Open Slider settings" stepKey="EditSlider"/>
1678+
<click selector="{{PageBuilderPanel.searchPanel}}" stepKey="unFocusSlide"/>
1679+
<actionGroup ref="openPageBuilderEditPanelByIndex" stepKey="openSliderEditPanel">
1680+
<argument name="contentType" value="PageBuilderSliderContentType"/>
1681+
<argument name="contentTypeIndex" value="1"/>
1682+
</actionGroup>
1683+
<actionGroup ref="conditionalClickSlideOutPanelFieldGeneral" stepKey="enterFade">
1684+
<argument name="property" value="PageBuilderSliderFade_Enabled"/>
1685+
</actionGroup>
1686+
<actionGroup ref="conditionalClickSlideOutPanelFieldGeneral" stepKey="enterShowDots">
1687+
<argument name="property" value="PageBuilderSliderShowDots_Enabled"/>
1688+
</actionGroup>
1689+
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings1"/>
1690+
<!-- Add second slide -->
1691+
<comment userInput="Add second slide" stepKey="addSecondSlide"/>
1692+
<actionGroup ref="addSlide" stepKey="addSlide"/>
1693+
<!-- Switch to Slide 2 -->
1694+
<comment userInput="Switch to Slide 2" stepKey="commentSwitchToSlide2Stage"/>
1695+
<click selector="{{SliderOnStage.slideNavigationDot('1', '2')}}" stepKey="clickSlide2Stage"/>
1696+
<waitForPageLoad stepKey="waitForSlideAnimation"/>
1697+
<click selector="{{PageBuilderStage.inlineWYSIWYGEditor(PageBuilderSlideContentType.role, '2')}}" stepKey="focusOnEditorArea"/>
1698+
<waitForPageLoad stepKey="waitForWysiwyg"/>
1699+
<executeJS function="return document.querySelectorAll('[data-role=slide]')[1].getBoundingClientRect().left" stepKey="slideLeftPosition"/>
1700+
<executeJS function="return document.querySelectorAll('[data-role=slide]')[1].getBoundingClientRect().right" stepKey="slideRightPosition"/>
1701+
<executeJS function="return document.querySelectorAll('.slider-container.content-type-container')[0].getBoundingClientRect().left" stepKey="sliderLeftPosition"/>
1702+
<executeJS function="return document.querySelectorAll('.slider-container.content-type-container')[0].getBoundingClientRect().right" stepKey="sliderRightPosition"/>
1703+
<assertLessThan stepKey="assertSlideRightSideIsLessThanSliderRightSide">
1704+
<expectedResult type="variable">sliderRightPosition</expectedResult>
1705+
<actualResult type="variable">slideRightPosition</actualResult>
1706+
</assertLessThan>
1707+
<assertGreaterThan stepKey="assertSlideLeftSideIsGreaterThanSliderLeftSide">
1708+
<expectedResult type="variable">sliderLeftPosition</expectedResult>
1709+
<actualResult type="variable">slideLeftPosition</actualResult>
1710+
</assertGreaterThan>
1711+
<!-- Add Content To Slide 2 -->
1712+
<comment userInput="Add Content To Slide 2" stepKey="commentAddContentToSlide2"/>
1713+
<actionGroup ref="inlineEditWYSIWYGFromStage" stepKey="inlineEdit">
1714+
<argument name="contentType" value="PageBuilderSlideContentType"/>
1715+
<argument name="content" value="{{PageBuilderSlideItemContent_Slide1.value}}"/>
1716+
<argument name="index" value="2"/>
1717+
</actionGroup>
1718+
<actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
1719+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
1720+
<!-- Validate Stage After Save -->
1721+
<comment userInput="Validate Stage After Save" stepKey="commentValidateStage"/>
1722+
<click selector="{{SliderOnStage.slideNavigationDot('1', '2')}}" stepKey="clickSlide2StageAfterSave"/>
1723+
<waitForPageLoad stepKey="waitForSlideFadeAnimationAfterSave"/>
1724+
<seeElement selector="{{SlideOnBackend.messageContent('2', PageBuilderSlideItemContent_Slide1.value)}}" stepKey="seeMessageContentStage"/>
1725+
</test>
16461726
</tests>

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slide/preview.js

Lines changed: 6 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slide/wysiwyg/tinymce4/component-initializer.js

Lines changed: 40 additions & 24 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slider/preview.js

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/slide/preview.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -159,15 +159,19 @@ export default class Preview extends BasePreview {
159159
element.focus();
160160
};
161161

162+
if (!this.slideChanged) {
163+
event.preventDefault();
164+
return false;
165+
}
166+
162167
if (this.element && !this.wysiwyg) {
163-
const selection = this.saveSelection();
164168
this.element.removeAttribute("contenteditable");
165169
_.defer(() => {
166170
this.initWysiwyg(true)
167171
.then(() => delayUntil(
168172
() => {
169173
activate();
170-
this.restoreSelection(this.element, selection);
174+
this.restoreSelection(this.element, this.saveSelection());
171175
},
172176
() => this.element.classList.contains("mce-edit-focus"),
173177
10,

‎app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/slide/wysiwyg/tinymce4/component-initializer.ts

Lines changed: 45 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
import $ from "jquery";
77
import WysiwygEvents from "mage/adminhtml/wysiwyg/events";
88
import {AdditionalDataConfigInterface} from "../../../../content-type-config";
9+
import delayUntil from "../../../../utils/delay-until";
910
import WysiwygComponentInitializerInterface from "../../../../wysiwyg/component-initializer-interface";
1011
import WysiwygInterface from "../../../../wysiwyg/wysiwyg-interface";
1112

@@ -50,6 +51,16 @@ export default class ComponentInitializer implements WysiwygComponentInitializer
5051
*/
5152
private autoplay: boolean;
5253

54+
/**
55+
* Slider fade
56+
*/
57+
private fade: boolean;
58+
59+
/**
60+
* Slider changing flag
61+
*/
62+
private slideChanging: boolean = false;
63+
5364
/**
5465
* Initialize the instance
5566
*
@@ -62,6 +73,15 @@ export default class ComponentInitializer implements WysiwygComponentInitializer
6273

6374
tinymce.eventBus.attachEventHandler(WysiwygEvents.afterFocus, this.onFocus.bind(this));
6475
tinymce.eventBus.attachEventHandler(WysiwygEvents.afterBlur, this.onBlur.bind(this));
76+
// Update our KO pointer to the active slide on change
77+
$(this.$element.parents(this.sliderSelector)).parent().on(
78+
"beforeChange",
79+
() => {
80+
this.slideChanging = true;
81+
},
82+
).on("afterChange", () => {
83+
this.slideChanging = false;
84+
});
6585
}
6686

6787
/**
@@ -74,21 +94,29 @@ export default class ComponentInitializer implements WysiwygComponentInitializer
7494
const sliderContent = this.$element.parents(this.sliderContentSelector)[0];
7595
const $notActiveSlides = $slider.find(this.slideSelector).not(this.activeSlideSelector);
7696

77-
$.each(this.config.adapter_config.parentSelectorsToUnderlay, (i, selector) => {
78-
this.$element.closest(selector as string).css("z-index", 100);
79-
});
80-
81-
// Disable slider keyboard events and fix problem with overflow hidden issue
82-
$($slider.parent()).slick("slickSetOption", "accessibility", false);
83-
this.autoplay = $($slider.parent()).slick("slickGetOption", "autoplay") as boolean;
84-
85-
if (this.autoplay) {
86-
$($slider.parent()).slick("slickPause");
87-
}
88-
$notActiveSlides.css("display", "none");
89-
this.sliderTransform = sliderContent.style.transform;
90-
sliderContent.style.transform = "";
91-
$slider.css("overflow", "visible");
97+
delayUntil(
98+
() => {
99+
$.each(this.config.adapter_config.parentSelectorsToUnderlay, (i, selector) => {
100+
this.$element.closest(selector as string).css("z-index", 100);
101+
});
102+
103+
// Disable slider keyboard events and fix problem with overflow hidden issue
104+
$slider.parent().slick("slickSetOption", "accessibility", false);
105+
this.autoplay = $slider.parent().slick("slickGetOption", "autoplay") as boolean;
106+
this.fade = $slider.parent().slick("slickGetOption", "fade") as boolean;
107+
if (this.autoplay) {
108+
$slider.parent().slick("slickPause");
109+
}
110+
if (!this.fade) {
111+
$notActiveSlides.css("display", "none");
112+
}
113+
this.sliderTransform = sliderContent.style.transform;
114+
sliderContent.style.transform = "";
115+
$slider.css("overflow", "visible");
116+
},
117+
() => !this.slideChanging,
118+
10,
119+
);
92120
}
93121

94122
/**
@@ -109,9 +137,9 @@ export default class ComponentInitializer implements WysiwygComponentInitializer
109137
$slider.css("overflow", "hidden");
110138
sliderContent.style.transform = this.sliderTransform;
111139
$notActiveSlides.css("display", "block");
112-
$($slider.parent()).slick("slickSetOption", "accessibility", true);
140+
$slider.parent().slick("slickSetOption", "accessibility", true);
113141
if (this.autoplay) {
114-
$($slider.parent()).slick("slickPlay");
142+
$slider.parent().slick("slickPlay");
115143
}
116144
}
117145
}

‎app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/slider/preview.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -442,6 +442,7 @@ export default class Preview extends PreviewCollection {
442442
$(this.element).on(
443443
"beforeChange",
444444
(event: Event, slick: {}, currentSlide: any, nextSlide: any) => {
445+
$(this.element).css("pointer-events", "none");
445446
this.setActiveSlide(nextSlide);
446447
},
447448
).on("afterChange", () => {
@@ -452,6 +453,7 @@ export default class Preview extends PreviewCollection {
452453
});
453454
this.contentTypeHeightReset = null;
454455
}
456+
$(this.element).css("pointer-events", "");
455457
});
456458
}
457459
}

0 commit comments

Comments
 (0)