Skip to content

Commit 21e8f64

Browse files
omiroshnichenkoomiroshnichenko
committed
MC-3314: Cannot sort slides on slider
1 parent 1722432 commit 21e8f64

File tree

8 files changed

+152
-19
lines changed

8 files changed

+152
-19
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
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"/>
3535
<element name="slideNavigationDragHandle" type="button" selector="a.navigation-dot-anchor"/>
36-
<element name="slideNavigationDragHandleArgs" type="button" selector="(//a[contains(@class, 'navigation-dot-anchor')])[{{arg1}}]" parameterized="true"/>
36+
<element name="slideNavigationDragHandleByIndex" type="button" selector="(//a[contains(@class, 'navigation-dot-anchor')])[{{arg1}}]" parameterized="true"/>
3737
<element name="allNavigationDots" type="button" selector="(//div[contains(@class, 'navigation-dot')])"/>
3838
<element name="activeSlideNavigationDot" type="button" selector="//div[contains(@class, 'navigation-dot active')]"/>
3939
<element name="slideNavigationDotNameTooltip" type="button" selector="(//span[contains(@class, 'tooltip-content')])"/>

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

Lines changed: 112 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -696,19 +696,6 @@
696696
<see userInput="{{PageBuilderSlideItemName2.value}}" selector="{{SliderInAdmin.slideNavigationDotNameTooltip}}" stepKey="seeSlideName2InTooltip"/>
697697
<moveMouseOver selector="{{SliderInAdmin.slideNavigationDot('1')}}" stepKey="moveMouseOverFirstSlideNavigationDot"/>
698698
<see userInput="{{PageBuilderSlideItemName1.value}}" selector="{{SliderInAdmin.slideNavigationDotNameTooltip}}" stepKey="seeSlideName1InTooltip"/>
699-
<comment userInput="User sorts slides using drag and drop" stepKey="AC16"/>
700-
<executeJS function="return document.querySelectorAll('{{SliderInAdmin.slideNavigationDragHandle}}')[0].clientWidth / 4" stepKey="xCoordinateToMoveTo"/>
701-
<comment userInput="xCoordinateToMoveTo: $xCoordinateToMoveTo" stepKey="commentXCoordinate"/>
702-
<executeJS function="return document.querySelectorAll('{{SliderInAdmin.slideNavigationDragHandle}}')[1].clientHeight / 2" stepKey="yCoordinateToMoveTo"/>
703-
<comment userInput="yCoordinateToMoveTo: $yCoordinateToMoveTo" stepKey="commentYCoordinate"/>
704-
<click selector="{{SliderInAdmin.slideNavigationDot('2')}}" stepKey="clickButton"/>
705-
<dragAndDrop selector1="{{SliderInAdmin.slideNavigationDragHandleArgs('2')}}" selector2="{{SliderInAdmin.slideNavigationDot('1')}}" x="$xCoordinateToMoveTo" y="$yCoordinateToMoveTo" stepKey="dragAndDropSlide"/>
706-
<comment userInput="User hovers each slide dot, user sees tooltip displayed with Slide name after sorting" stepKey="AC17"/>
707-
<click selector="{{SliderInAdmin.sliderContainer}}" stepKey="unfocusNavigationAfterSort"/>
708-
<moveMouseOver selector="{{SliderInAdmin.activeSlideNavigationDot}}" stepKey="mouseOverActiveSlide2AfterSort"/>
709-
<see userInput="{{PageBuilderSlideItemName2.value}}" selector="{{SliderInAdmin.slideNavigationDotNameTooltip}}" stepKey="seeSlideName2InTooltipAfterSort"/>
710-
<moveMouseOver selector="{{SliderInAdmin.slideNavigationDot('2')}}" stepKey="moveMouseOverSecondSlideNavigationDot"/>
711-
<see userInput="{{PageBuilderSlideItemName1.value}}" selector="{{SliderInAdmin.slideNavigationDotNameTooltip}}" stepKey="seeSlideName1InTooltipAfterSort"/>
712699
</test>
713700
<test name="SliderDelete">
714701
<annotations>
@@ -1875,4 +1862,116 @@
18751862
<argument name="containerTargetIndex" value="2"/>
18761863
</actionGroup>
18771864
</test>
1865+
<test name="SliderSorting">
1866+
<annotations>
1867+
<features value="PageBuilder"/>
1868+
<stories value="Slider"/>
1869+
<title value="Can sort slides using drag and drop"/>
1870+
<description value="A user should be able to manage slides order by using drag and drop"/>
1871+
<severity value="CRITICAL"/>
1872+
<useCaseId value="MC-3314"/>
1873+
<testCaseId value="MC-2957"/>
1874+
<group value="pagebuilder"/>
1875+
<group value="pagebuilder-slider"/>
1876+
<group value="pagebuilder-sliderCommon"/>
1877+
</annotations>
1878+
<before>
1879+
<actionGroup ref="LoginAsAdmin" stepKey="loginAsAdmin"/>
1880+
<actionGroup ref="navigateToAPageWithPageBuilder" stepKey="navigateToAPageWithPageBuilder"/>
1881+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
1882+
</before>
1883+
<after>
1884+
<actionGroup ref="logout" stepKey="logout"/>
1885+
</after>
1886+
<actionGroup ref="addPageBuilderPageTitle" stepKey="enterPageTitle">
1887+
<argument name="contentType" value="PageBuilderSliderContentType"/>
1888+
</actionGroup>
1889+
<actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandPageBuilderPanelGroup">
1890+
<argument name="group" value="PageBuilderSliderContentType"/>
1891+
</actionGroup>
1892+
1893+
<!-- Add Slider to Stage -->
1894+
<comment userInput="User adds Slider into the content, user sees first Slide to be displayed inside the slider" stepKey="addSliderToStage"/>
1895+
<actionGroup ref="dragContentTypeToStageAndExpectEditPanel" stepKey="dragSliderIntoStage">
1896+
<argument name="contentType" value="PageBuilderSliderContentType"/>
1897+
</actionGroup>
1898+
1899+
<!-- Fill first slide data -->
1900+
<comment userInput="User sees Slide configuration opened with a delay and add title and content." stepKey="fillSlide1"/>
1901+
<actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="enterSlideNameText1">
1902+
<argument name="property" value="PageBuilderSlideItemName1"/>
1903+
</actionGroup>
1904+
<actionGroup ref="addTextToTinyMCE" stepKey="addTextToTinyMCE">
1905+
<argument name="property" value="PageBuilderSlideItemContent1"/>
1906+
<argument name="section" value="SlideOnConfigurationPanel"/>
1907+
</actionGroup>
1908+
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanel1Settings"/>
1909+
1910+
<!-- Validate first slide -->
1911+
<comment userInput="User sees Slide on stage with updated title and content." stepKey="checkFilledData"/>
1912+
<click stepKey="unfocusNavigation" selector="{{SliderInAdmin.sliderContainer}}"/>
1913+
<moveMouseOver selector="{{SliderInAdmin.activeSlideNavigationDot}}" stepKey="mouseOverActiveSlide"/>
1914+
<see userInput="{{PageBuilderSlideItemName1.value}}" selector="{{SliderInAdmin.slideNavigationDotNameTooltip}}" stepKey="seeSlideNameInTooltip"/>
1915+
<see userInput="{{PageBuilderSlideItemContent1.value}}" selector="{{SlideOnBackend.slideContent('0')}}" stepKey="seeSlide1ContentDisplayedAdmin"/>
1916+
1917+
<!-- Add second slide -->
1918+
<comment userInput="User clicks (+) icon, sees new slide added to to the right." stepKey="addSecondSlide"/>
1919+
<actionGroup ref="addSlide" stepKey="addSlide2"/>
1920+
1921+
<!-- Fill second slide data -->
1922+
<comment userInput="User sees Second Slide configuration opened with a delay and add title and content." stepKey="fillSlide2"/>
1923+
<actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="enterSlideNameText2">
1924+
<argument name="property" value="PageBuilderSlideItemName2"/>
1925+
</actionGroup>
1926+
<actionGroup ref="addTextToTinyMCE" stepKey="addTextToTinyMCESlide2">
1927+
<argument name="property" value="PageBuilderSlideItemContent2"/>
1928+
<argument name="section" value="SlideOnConfigurationPanel"/>
1929+
</actionGroup>
1930+
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanel1Settings2"/>
1931+
1932+
<!-- Validate second slide data -->
1933+
<comment userInput="User sees Second Slide on stage with updated title and content." stepKey="checkFilledData2"/>
1934+
<click stepKey="unfocusNavigation2" selector="{{SliderInAdmin.sliderContainer}}"/>
1935+
<moveMouseOver selector="{{SliderInAdmin.activeSlideNavigationDot}}" stepKey="mouseOverActiveSlide2"/>
1936+
<see userInput="{{PageBuilderSlideItemName2.value}}" selector="{{SliderInAdmin.slideNavigationDotNameTooltip}}" stepKey="seeSlideName2InTooltip"/>
1937+
<see userInput="{{PageBuilderSlideItemContent2.value}}" selector="{{SlideOnBackend.slideContent('1')}}" stepKey="seeSlide2ContentDisplayedAdmin"/>
1938+
1939+
<!-- Drag and drop second slide to first position -->
1940+
<comment userInput="User sorts slides using drag and drop" stepKey="sortingSlides"/>
1941+
<executeJS function="return document.querySelectorAll('{{SliderInAdmin.slideNavigationDragHandle}}')[0].clientWidth / 4" stepKey="xCoordinateToMoveTo"/>
1942+
<comment userInput="xCoordinateToMoveTo: $xCoordinateToMoveTo" stepKey="commentXCoordinate"/>
1943+
<executeJS function="return document.querySelectorAll('{{SliderInAdmin.slideNavigationDragHandle}}')[1].clientHeight / 2" stepKey="yCoordinateToMoveTo"/>
1944+
<comment userInput="yCoordinateToMoveTo: $yCoordinateToMoveTo" stepKey="commentYCoordinate"/>
1945+
<click selector="{{SliderInAdmin.slideNavigationDot('2')}}" stepKey="clickButton"/>
1946+
<dragAndDrop selector1="{{SliderInAdmin.slideNavigationDragHandleByIndex('2')}}" selector2="{{SliderInAdmin.slideNavigationDot('1')}}" x="$xCoordinateToMoveTo" y="$yCoordinateToMoveTo" stepKey="dragAndDropSlide"/>
1947+
1948+
<!-- Validate content after sorting -->
1949+
<comment userInput="User sees content of active slide is equal to second slide content" stepKey="AC17"/>
1950+
<see userInput="{{PageBuilderSlideItemContent2.value}}" selector="{{SlideOnBackend.slideContent('0')}}" stepKey="seeSlide2ContentAfterSort"/>
1951+
1952+
<!-- Validate Side names after sorting -->
1953+
<comment userInput="User hovers each slide dot, user sees tooltip displayed with Slide name after sorting" stepKey="checkAfterSort"/>
1954+
<click selector="{{SliderInAdmin.sliderContainer}}" stepKey="unfocusNavigationAfterSort"/>
1955+
<moveMouseOver selector="{{SliderInAdmin.activeSlideNavigationDot}}" stepKey="mouseOverActiveSlide2AfterSort"/>
1956+
<see userInput="{{PageBuilderSlideItemName2.value}}" selector="{{SliderInAdmin.slideNavigationDotNameTooltip}}" stepKey="seeSlideName2InTooltipAfterSort"/>
1957+
<moveMouseOver selector="{{SliderInAdmin.slideNavigationDot('2')}}" stepKey="moveMouseOverSecondSlideNavigationDot"/>
1958+
<see userInput="{{PageBuilderSlideItemName1.value}}" selector="{{SliderInAdmin.slideNavigationDotNameTooltip}}" stepKey="seeSlideName1InTooltipAfterSort"/>
1959+
1960+
<!-- Save Page-->
1961+
<comment userInput="Save page" stepKey="savePage"/>
1962+
<scrollTo selector="{{CmsNewPagePageActionsSection.pageTitle}}" stepKey="scrollToTop"/>
1963+
<actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
1964+
1965+
<!-- Validate Stage-->
1966+
<comment userInput="Validate saved data" stepKey="validateSavedData"/>
1967+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage2"/>
1968+
<see userInput="{{PageBuilderSlideItemContent2.value}}" selector="{{SlideOnBackend.slideContent('0')}}" stepKey="seeSlide2ContentAfterSave"/>
1969+
<click selector="{{SliderInAdmin.sliderContainer}}" stepKey="unfocusNavigationAfterSave"/>
1970+
<moveMouseOver selector="{{SliderInAdmin.activeSlideNavigationDot}}" stepKey="mouseOverActiveSlide2AfterSave"/>
1971+
<see userInput="{{PageBuilderSlideItemName2.value}}" selector="{{SliderInAdmin.slideNavigationDotNameTooltip}}" stepKey="seeSlideName2InTooltipAfterSave"/>
1972+
<moveMouseOver selector="{{SliderInAdmin.slideNavigationDot('2')}}" stepKey="moveMouseOverSecondSlideNavigationDotAfterSave"/>
1973+
<see userInput="{{PageBuilderSlideItemName1.value}}" selector="{{SliderInAdmin.slideNavigationDotNameTooltip}}" stepKey="seeSlideName1InTooltipAfterSave"/>
1974+
<click selector="{{SliderInAdmin.slideNavigationDot('2')}}" stepKey="clickSecondNavigationDot"/>
1975+
<see userInput="{{PageBuilderSlideItemContent1.value}}" selector="{{SlideOnBackend.slideContent('1')}}" stepKey="seeSlideContentAfterSave"/>
1976+
</test>
18781977
</tests>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -292,7 +292,7 @@
292292
opacity: 1;
293293
transform: translate(-50%, -50%);
294294
transition-delay: 200ms;
295-
z-index: 30;
295+
visibility: visible;
296296
}
297297

298298
.pagebuilder-options {
@@ -307,7 +307,8 @@
307307
top: 0;
308308
transform: translate(-50%, -50%);
309309
transition: opacity 200ms, visibility 200ms;
310-
z-index: -1;
310+
visibility: hidden;
311+
z-index: 30;
311312

312313
&.pagebuilder-options-visible {
313314
.pagebuilder-options-visible;

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

Lines changed: 7 additions & 0 deletions
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
}
@@ -212,6 +217,8 @@
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: 0 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/js/content-type/slider/preview.js

Lines changed: 13 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/template/content-type/slider/default/preview.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@
2020
each="$parent.getChildren()"
2121
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) }">
2222
<div class="navigation-dot"
23-
event="focusin: $parent.setFocusedSlide.bind($parent, $index(), false), focusout: $parent.setFocusedSlide.bind($parent, null, false)"
23+
event="focusin: $parent.setFocusedSlide.bind($parent, $index(), false), focusout: $parent.onFocusOut.bind($parent)"
2424
css="active: $parent.activeSlide() === $index(), focus: $parent.focusedSlide() === $index()">
25-
<a class="navigation-dot-anchor" href="#" tabindex="0" click="$parent.onControlClick.bind($parent, $index())"/>
25+
<a class="navigation-dot-anchor" href="#" tabindex="0" click="$parent.onControlClick.bind($parent, $index())" hasFocus="$parent.focusedSlide() === $index()"/>
2626
<with args="preview">
2727
<render with="preview" args="getOptions().template" />
2828
</with>

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,20 @@ export default class Preview extends PreviewCollection {
168168
this.focusedSlide(slideIndex);
169169
}
170170

171+
/**
172+
* Unset focused slide on focusout event.
173+
*
174+
* @param {PreviewCollection} data
175+
* @param {JQueryEventObject} event
176+
*/
177+
public onFocusOut(data: PreviewCollection, event: JQueryEventObject) {
178+
if (_.isNull(event.relatedTarget) ||
179+
event.relatedTarget && !$.contains(event.currentTarget as Element, event.relatedTarget)
180+
) {
181+
this.setFocusedSlide(null);
182+
}
183+
}
184+
171185
/**
172186
* Navigate to a slide
173187
*

0 commit comments

Comments
 (0)