Skip to content

Commit aec8387

Browse files
omiroshnichenkoomiroshnichenko
committed
Merge branch 'MC-3314' of github.com:magento-obsessive-owls/magento2-page-builder into PR
# Conflicts: # app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderSlideCommonTest.xml
2 parents 6c7d879 + e9a3ee1 commit aec8387

File tree

8 files changed

+255
-14
lines changed

8 files changed

+255
-14
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@
3232
<element name="firstSlideNavigationDot" type="button" selector="(//div[contains(@class, 'navigation-dot')])[1]"/>
3333
<element name="activeSlideTooltip" type="button" selector="//div[contains(@class, 'navigation-dot')]//span[contains(@role, 'tooltip')]"/>
3434
<element name="slideNavigationDot" type="button" selector="(//div[contains(@class, 'navigation-dot')])[{{arg1}}]" parameterized="true"/>
35+
<element name="slideNavigationDragHandle" type="button" selector="a.navigation-dot-anchor"/>
36+
<element name="slideNavigationDragHandleByIndex" type="button" selector="(//a[contains(@class, 'navigation-dot-anchor')])[{{arg1}}]" parameterized="true"/>
3537
<element name="allNavigationDots" type="button" selector="(//div[contains(@class, 'navigation-dot')])"/>
3638
<element name="activeSlideNavigationDot" type="button" selector="//div[contains(@class, 'navigation-dot active')]"/>
3739
<element name="slideNavigationDotNameTooltip" type="button" selector="(//span[contains(@class, 'tooltip-content')])"/>

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

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1938,4 +1938,145 @@
19381938
<seeElementInDOM selector="{{SlideOnBackend.emptyslide}}" stepKey="seeEmptySliderOnStage"/>
19391939
<dontSeeElementInDOM selector="{{SlideOnBackend.slideBackgroundImage('0',PageBuilderSlideBackgroundImageProperty2.path, PageBuilderSlideBackgroundImageProperty1.extension)}}" stepKey="dontSeeImageInrMainImageSource1"/>
19401940
</test>
1941+
<test name="SliderSorting">
1942+
<annotations>
1943+
<features value="PageBuilder"/>
1944+
<stories value="Slider"/>
1945+
<title value="Can sort slides using drag and drop"/>
1946+
<description value="A user should be able to manage slides order by using drag and drop"/>
1947+
<severity value="CRITICAL"/>
1948+
<useCaseId value="MC-3314"/>
1949+
<testCaseId value="MC-2957"/>
1950+
<group value="pagebuilder"/>
1951+
<group value="pagebuilder-slider"/>
1952+
<group value="pagebuilder-sliderCommon"/>
1953+
</annotations>
1954+
<before>
1955+
<actionGroup ref="LoginAsAdmin" stepKey="loginAsAdmin"/>
1956+
<actionGroup ref="navigateToAPageWithPageBuilder" stepKey="navigateToAPageWithPageBuilder"/>
1957+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
1958+
</before>
1959+
<after>
1960+
<actionGroup ref="logout" stepKey="logout"/>
1961+
</after>
1962+
<actionGroup ref="addPageBuilderPageTitle" stepKey="enterPageTitle">
1963+
<argument name="contentType" value="PageBuilderSliderContentType"/>
1964+
</actionGroup>
1965+
<actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandPageBuilderPanelGroup">
1966+
<argument name="group" value="PageBuilderSliderContentType"/>
1967+
</actionGroup>
1968+
1969+
<!-- Add Slider to Stage -->
1970+
<comment userInput="User adds Slider into the content, user sees first Slide to be displayed inside the slider" stepKey="addSliderToStage"/>
1971+
<actionGroup ref="dragContentTypeToStageAndExpectEditPanel" stepKey="dragSliderIntoStage">
1972+
<argument name="contentType" value="PageBuilderSliderContentType"/>
1973+
</actionGroup>
1974+
1975+
<!-- Fill first slide data -->
1976+
<comment userInput="Fill first slide data." stepKey="fillSlide1"/>
1977+
<actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="enterSlideNameText1">
1978+
<argument name="property" value="PageBuilderSlideItemName1"/>
1979+
</actionGroup>
1980+
<actionGroup ref="addTextToTinyMCE" stepKey="addTextToTinyMCE">
1981+
<argument name="property" value="PageBuilderSlideItemContent1"/>
1982+
<argument name="section" value="SlideOnConfigurationPanel"/>
1983+
</actionGroup>
1984+
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanel1Settings"/>
1985+
1986+
<!-- Validate first slide -->
1987+
<comment userInput="User sees Slide on stage with updated title and content." stepKey="checkFilledData"/>
1988+
<click stepKey="unfocusNavigation" selector="{{SliderInAdmin.sliderContainer}}"/>
1989+
<moveMouseOver selector="{{SliderInAdmin.activeSlideNavigationDot}}" stepKey="mouseOverActiveSlide"/>
1990+
<see userInput="{{PageBuilderSlideItemName1.value}}" selector="{{SliderInAdmin.slideNavigationDotNameTooltip}}" stepKey="seeSlideNameInTooltip"/>
1991+
<see userInput="{{PageBuilderSlideItemContent1.value}}" selector="{{SlideOnBackend.slideContent('0')}}" stepKey="seeSlide1ContentDisplayedAdmin"/>
1992+
1993+
<!-- Add second slide -->
1994+
<comment userInput="User clicks (+) icon, sees new slide added to to the right." stepKey="addSecondSlide"/>
1995+
<actionGroup ref="addSlide" stepKey="addSlide2"/>
1996+
1997+
<!-- Fill second slide data -->
1998+
<comment userInput="Fill second slide data." stepKey="fillSlide2"/>
1999+
<actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="enterSlideNameText2">
2000+
<argument name="property" value="PageBuilderSlideItemName2"/>
2001+
</actionGroup>
2002+
<actionGroup ref="addTextToTinyMCE" stepKey="addTextToTinyMCESlide2">
2003+
<argument name="property" value="PageBuilderSlideItemContent2"/>
2004+
<argument name="section" value="SlideOnConfigurationPanel"/>
2005+
</actionGroup>
2006+
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanel1Settings2"/>
2007+
2008+
<!-- Validate second slide data -->
2009+
<comment userInput="User sees Second Slide on stage with updated title and content." stepKey="checkFilledData2"/>
2010+
<click stepKey="unfocusNavigation2" selector="{{SliderInAdmin.sliderContainer}}"/>
2011+
<moveMouseOver selector="{{SliderInAdmin.activeSlideNavigationDot}}" stepKey="mouseOverActiveSlide2"/>
2012+
<see userInput="{{PageBuilderSlideItemName2.value}}" selector="{{SliderInAdmin.slideNavigationDotNameTooltip}}" stepKey="seeSlideName2InTooltip"/>
2013+
<see userInput="{{PageBuilderSlideItemContent2.value}}" selector="{{SlideOnBackend.slideContent('1')}}" stepKey="seeSlide2ContentDisplayedAdmin"/>
2014+
2015+
<!-- Save Page-->
2016+
<comment userInput="Save page" stepKey="savePage"/>
2017+
<scrollTo selector="{{CmsNewPagePageActionsSection.pageTitle}}" stepKey="scrollToTop1"/>
2018+
<actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
2019+
2020+
<!-- Validate Stage-->
2021+
<comment userInput="Validate saved data" stepKey="validateSavedData"/>
2022+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage1"/>
2023+
<see userInput="{{PageBuilderSlideItemContent1.value}}" selector="{{SlideOnBackend.slideContent('0')}}" stepKey="seeSlideContentAfterSave"/>
2024+
<click selector="{{SliderInAdmin.sliderContainer}}" stepKey="unfocusNavigationAfterSave"/>
2025+
<moveMouseOver selector="{{SliderInAdmin.activeSlideNavigationDot}}" stepKey="mouseOverActiveSlide1AfterSave"/>
2026+
<see userInput="{{PageBuilderSlideItemName1.value}}" selector="{{SliderInAdmin.slideNavigationDotNameTooltip}}" stepKey="seeSlideName1InTooltipAfterSave"/>
2027+
<moveMouseOver selector="{{SliderInAdmin.slideNavigationDot('2')}}" stepKey="moveMouseOverSecondSlideNavigationDotAfterSave"/>
2028+
<see userInput="{{PageBuilderSlideItemName2.value}}" selector="{{SliderInAdmin.slideNavigationDotNameTooltip}}" stepKey="seeSlideName2InTooltipAfterSave"/>
2029+
<click selector="{{SliderInAdmin.slideNavigationDot('2')}}" stepKey="clickSecondNavigationDot"/>
2030+
<see userInput="{{PageBuilderSlideItemContent2.value}}" selector="{{SlideOnBackend.slideContent('1')}}" stepKey="seeSecondSlideContentAfterSave"/>
2031+
2032+
<!-- Drag and drop second slide to first position -->
2033+
<comment userInput="User sorts slides using drag and drop" stepKey="sortingSlides"/>
2034+
<executeJS function="return document.querySelectorAll('{{SliderInAdmin.slideNavigationDragHandle}}')[0].clientWidth / 4" stepKey="xCoordinateToMoveTo"/>
2035+
<comment userInput="xCoordinateToMoveTo: $xCoordinateToMoveTo" stepKey="commentXCoordinate"/>
2036+
<executeJS function="return document.querySelectorAll('{{SliderInAdmin.slideNavigationDragHandle}}')[0].clientHeight / 2" stepKey="yCoordinateToMoveTo"/>
2037+
<comment userInput="yCoordinateToMoveTo: $yCoordinateToMoveTo" stepKey="commentYCoordinate"/>
2038+
<click selector="{{SliderInAdmin.slideNavigationDot('2')}}" stepKey="clickButton"/>
2039+
<dragAndDrop selector1="{{SliderInAdmin.slideNavigationDragHandleByIndex('2')}}" selector2="{{SliderInAdmin.slideNavigationDot('1')}}" x="$xCoordinateToMoveTo" y="$yCoordinateToMoveTo" stepKey="dragAndDropSlide"/>
2040+
2041+
<!-- Validate content after sorting -->
2042+
<comment userInput="User sees content of active slide is equal to second slide content" stepKey="AC17"/>
2043+
<see userInput="{{PageBuilderSlideItemContent2.value}}" selector="{{SlideOnBackend.slideContent('0')}}" stepKey="seeSlide2ContentAfterSort"/>
2044+
2045+
<!-- Validate Side names after sorting -->
2046+
<comment userInput="User hovers each slide dot, user sees tooltip displayed with Slide name after sorting" stepKey="checkAfterSort"/>
2047+
<click selector="{{SliderInAdmin.sliderContainer}}" stepKey="unfocusNavigationAfterSort"/>
2048+
<moveMouseOver selector="{{SliderInAdmin.activeSlideNavigationDot}}" stepKey="mouseOverActiveSlide2AfterSort"/>
2049+
<see userInput="{{PageBuilderSlideItemName2.value}}" selector="{{SliderInAdmin.slideNavigationDotNameTooltip}}" stepKey="seeSlideName2InTooltipAfterSort"/>
2050+
<moveMouseOver selector="{{SliderInAdmin.slideNavigationDot('2')}}" stepKey="moveMouseOverSecondSlideNavigationDot"/>
2051+
<see userInput="{{PageBuilderSlideItemName1.value}}" selector="{{SliderInAdmin.slideNavigationDotNameTooltip}}" stepKey="seeSlideName1InTooltipAfterSort"/>
2052+
2053+
<!-- Save Page-->
2054+
<comment userInput="Save page" stepKey="savePage1"/>
2055+
<scrollTo selector="{{CmsNewPagePageActionsSection.pageTitle}}" stepKey="scrollToTop"/>
2056+
<actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage1"/>
2057+
2058+
<!-- Validate Stage-->
2059+
<comment userInput="Validate saved data" stepKey="validateSavedData2"/>
2060+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage2"/>
2061+
<see userInput="{{PageBuilderSlideItemContent2.value}}" selector="{{SlideOnBackend.slideContent('0')}}" stepKey="seeSlide2ContentAfterSave"/>
2062+
<click selector="{{SliderInAdmin.sliderContainer}}" stepKey="unfocusNavigationAfterSave2"/>
2063+
<moveMouseOver selector="{{SliderInAdmin.activeSlideNavigationDot}}" stepKey="mouseOverActiveSlide2AfterSave"/>
2064+
<see userInput="{{PageBuilderSlideItemName2.value}}" selector="{{SliderInAdmin.slideNavigationDotNameTooltip}}" stepKey="seeSlideName2InTooltipAfterSave2"/>
2065+
<moveMouseOver selector="{{SliderInAdmin.slideNavigationDot('2')}}" stepKey="moveMouseOverSecondSlideNavigationDotAfterSave2"/>
2066+
<see userInput="{{PageBuilderSlideItemName1.value}}" selector="{{SliderInAdmin.slideNavigationDotNameTooltip}}" stepKey="seeSlideName1InTooltipAfterSave2"/>
2067+
<click selector="{{SliderInAdmin.slideNavigationDot('2')}}" stepKey="clickSecondNavigationDot2"/>
2068+
<see userInput="{{PageBuilderSlideItemContent1.value}}" selector="{{SlideOnBackend.slideContent('1')}}" stepKey="seeSlideContentAfterSave2"/>
2069+
2070+
<!-- Validate Storefront -->
2071+
<comment userInput="Validate Slider on Storefront" stepKey="commentValidateStorefront"/>
2072+
<actionGroup ref="navigateToStoreFront" stepKey="navigateToStoreFront">
2073+
<argument name="contentType" value="PageBuilderSliderContentType"/>
2074+
</actionGroup>
2075+
<waitForElementVisible selector="{{SliderOnFrontend.SliderDisplay}}" stepKey="seeSliderOnPageBuilderPage"/>
2076+
<seeElement selector="{{SlideOnFrontend.slide('1')}}" stepKey="seeSlide1InSlider"/>
2077+
<see userInput="{{PageBuilderSlideItemContent2.value}}" selector="{{SlideOnFrontend.slideContent('0')}}" stepKey="seeSlide1ContentDisplayed"/>
2078+
<click selector="{{SliderOnFrontend.slideNavigator('2')}}" stepKey="clickNextSlideOnSlider"/>
2079+
<waitForElementVisible time="2" selector="{{SlideOnFrontend.slide2}}" stepKey="waitForSlide2" />
2080+
<see userInput="{{PageBuilderSlideItemContent1.value}}" selector="{{SlideOnFrontend.slideContent('1')}}" stepKey="seeSlide2ContentDisplayed"/>
2081+
</test>
19412082
</tests>

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slider/_default.less

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,11 @@
177177
}
178178
}
179179

180+
.pagebuilder-options {
181+
visibility: visible;
182+
z-index: -1;
183+
}
184+
180185
&.ui-sortable-helper .navigation-dot-anchor {
181186
opacity: .65;
182187
}
@@ -207,11 +212,13 @@
207212
}
208213
}
209214

210-
&:focus {
215+
&.focus {
211216
outline: 1px solid @color-blue-pure;
212217

213218
.pagebuilder-options {
214219
.pagebuilder-options-visible;
220+
z-index: 30;
221+
215222
}
216223

217224
.tooltip-content {

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/binding/sortable-children.js

Lines changed: 4 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/slider/preview.js

Lines changed: 46 additions & 1 deletion
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/template/content-type/slider/default/preview.html

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,16 @@
1616
<render args="previewChildTemplate" />
1717
</div>
1818
<div class="slider-controls focus-options">
19-
<div if="$parent.children().length > 0"
20-
class="slider-navigation"
19+
<div class="slider-navigation"
2120
each="$parent.getChildren()"
22-
data-bind="previewSortable: {handle: '.navigation-dot-anchor', containment: 'parent', placeholder: 'navigation-dot sortable-placeholder', tolerance: 'pointer', start: function () { onSortStart.apply($parent.preview, arguments); }, stop: function () { onSortStop.apply($parent.preview, arguments); } }">
21+
data-bind="sortableChildren: { handle: '.navigation-dot-anchor', containment: 'parent', placeholder: 'navigation-dot sortable-placeholder', tolerance: 'pointer', start: onSortStart.bind($parent.preview), stop: onSortStop.bind($parent.preview) }">
2322
<div class="navigation-dot"
24-
attr="{id: 'navigation-' + parent.id, tabindex: $index}"
25-
css="{active: $parent.activeSlide() === $index()}"
26-
data-bind="hasFocusNoScroll: $parent.focusedSlide() === $index(), event: { focusin: function () { $parent.setFocusedSlide($index()) }, focusout: function () { $parent.setFocusedSlide(null) } }">
23+
event="focusin: $parent.setFocusedSlide.bind($parent, $index(), false), focusout: $parent.onFocusOut.bind($parent)"
24+
css="active: $parent.activeSlide() === $index(), focus: $parent.focusedSlide() === $index()">
25+
<a class="navigation-dot-anchor" href="#" tabindex="0" click="$parent.onControlClick.bind($parent, $index())" hasFocus="$parent.focusedSlide() === $index()"/>
2726
<with args="preview">
2827
<render with="preview" args="getOptions().template" />
2928
</with>
30-
<a class="navigation-dot-anchor" href="#" data-bind="click: function () { $parent.navigateToSlide($index()); $parent.setFocusedSlide($index()); }"></a>
3129
<span if="preview.previewData.slide_name() !== ''"
3230
class="tooltip-content"
3331
role="tooltip"

‎app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/binding/sortable-children.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,14 @@ ko.bindingHandlers.sortableChildren = {
4040
ui,
4141
});
4242
})
43-
.on("sortstop", (event: Event, ui: JQueryUI.SortableUIParams) => {
43+
.on("sortstop", (event: JQueryEventObject, ui: JQueryUI.SortableUIParams) => {
4444
events.trigger("childContentType:sortStop", {
4545
instance,
4646
ui,
47+
originalPosition,
4748
});
4849
})
49-
.on("sortupdate", function(event: Event, ui: JQueryUI.SortableUIParams) {
50+
.on("sortupdate", function(event: JQueryEventObject, ui: JQueryUI.SortableUIParams) {
5051
if (this === ui.item.parent()[0]) {
5152
const index = ui.item.index();
5253
const targetParent = ko.dataFor(ui.item.parent()[0]).parent;
@@ -62,6 +63,7 @@ ko.bindingHandlers.sortableChildren = {
6263
newPosition: index,
6364
originalPosition,
6465
ui,
66+
event,
6567
});
6668
}
6769
}
@@ -74,4 +76,5 @@ export interface PreviewSortableSortUpdateEventParams {
7476
newPosition: number;
7577
originalPosition: number;
7678
ui: JQueryUI.SortableUIParams;
79+
event: JQueryEventObject;
7780
}

0 commit comments

Comments
 (0)