Navigation API- Add GalleryNavigationStart event (#1212)

* add willNavigate event- WIP * add GalleryNavigationStart event * change naming * fix scroll duration 0 + naming * remove comments
wix-incubator · May 2, 2024 · d13aaae · d13aaae
1 parent 35e1db9
commit d13aaae
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 34 deletions.
diff --git a/packages/gallery/src/components/gallery/proGallery/galleryContainer.js b/packages/gallery/src/components/gallery/proGallery/galleryContainer.js
@@ -425,6 +425,10 @@ export class GalleryContainer extends React.Component {
             this.state.options[optionsMap.behaviourParams.gallery.horizontal.autoSlide.speed],
           itemSpacing: this.state.options[optionsMap.layoutParams.structure.itemSpacing],
         };
+        this.eventsListener(GALLERY_CONSTS.events.GALLERY_NAVIGATION_START, {
+          current: 'scrollToItem',
+          scrollParams,
+        });
         this.currentScrollData = scrollToItemImp(scrollParams);
         return this.currentScrollData.scrollDeffered.promise.then(() => {
           this.currentScrollData = null;
@@ -485,6 +489,10 @@ export class GalleryContainer extends React.Component {
             this.state.options[optionsMap.behaviourParams.gallery.horizontal.autoSlide.speed],
           itemSpacing: this.state.options[optionsMap.layoutParams.structure.itemSpacing],
         };
+        this.eventsListener(GALLERY_CONSTS.events.GALLERY_NAVIGATION_START, {
+          current: 'scrollToGroup',
+          scrollParams,
+        });
         this.currentScrollData = scrollToGroupImp(scrollParams);
         return this.currentScrollData.scrollDeffered.promise.then(() => {
           this.currentScrollData = null;

diff --git a/packages/gallery/src/components/gallery/proGallery/slideshowView.js b/packages/gallery/src/components/gallery/proGallery/slideshowView.js
@@ -342,7 +342,7 @@ class SlideshowView extends React.Component {
     return {
       scrollMarginCorrection: this.getStyles().margin || 0,
       _scrollDuration:
-        scrollDuration || this.props.options.behaviourParams_gallery_horizontal_navigationDuration || 400,
+        scrollDuration ?? this.props.options.behaviourParams_gallery_horizontal_navigationDuration ?? 400,
     };
   }
 
@@ -862,34 +862,39 @@ class SlideshowView extends React.Component {
       GALLERY_CONSTS[optionsMap.behaviourParams.gallery.layoutDirection].RIGHT_TO_LEFT;
     if (!this.navigationPanelAPI) {
       this.navigationPanelAPI = {
-        next: () =>
+        onGalleryNavigationStart: (handler) => {
+          this.props.actions.eventsListener(GALLERY_CONSTS.events.GALLERY_NAVIGATION_START, handler);
+        },
+        next: () => {
           this.next({
             scrollDuration: 400,
             isKeyboardNavigation: false,
             isAutoTrigger: false,
             avoidIndividualNavigation: false,
             isContinuousScrolling: false,
             direction: isRTL ? -1 : 1,
-          }),
-        back: () =>
+          });
+        },
+        previous: () => {
           this.next({
             scrollDuration: 400,
             isKeyboardNavigation: false,
             isAutoTrigger: false,
             avoidIndividualNavigation: false,
             isContinuousScrolling: false,
             direction: isRTL ? 1 : -1,
-          }),
-        isAbleToNavigateNext: () => {
+          });
+        },
+        navigateNextEnabled: () => {
           return isRTL ? !this.state.hideLeftArrow : !this.state.hideRightArrow;
         },
-        isAbleToNavigateBack: () => {
+        navigatePreviousEnabled: () => {
           return isRTL ? !this.state.hideRightArrow : !this.state.hideLeftArrow;
         },
-        getActiveItemIndex: () => {
+        currentIndex: () => {
           return this.state.activeIndex;
         },
-        triggerItemAction: (e, { itemIndex = this.state.activeIndex } = {}) => {
+        triggerItemClick: (e, { itemIndex = this.state.activeIndex } = {}) => {
           const galleryConfig = this.createGalleryConfig();
           const item = this.props.galleryStructure.galleryItems[itemIndex % this.props.totalItemsCount];
           const props = item?.renderProps({
@@ -899,15 +904,8 @@ class SlideshowView extends React.Component {
 
           this.props.actions.eventsListener(GALLERY_CONSTS.events.ITEM_ACTION_TRIGGERED, props, e);
         },
-        // nextGroup,
-        // previousItem,
-        // previousGroup,
-        toIndex: (itemIdx, animationDuration = 400) =>
-          this.scrollToIndex({ itemIdx, scrollDuration: animationDuration }),
-        // getCurrentActiveItemIndex,
-        // getCurrentActiveGroupIndex,
-        assignIndexChangeCallback: (func) => {
-          this.navigationPanelCallbackOnIndexChange = func;
+        navigateToIndex: (itemIdx, animationDuration = 400) => {
+          this.scrollToIndex({ itemIdx, scrollDuration: animationDuration });
         },
       };
     }

diff --git a/packages/lib/src/common/constants/events.ts b/packages/lib/src/common/constants/events.ts
@@ -18,6 +18,7 @@ const EVENTS = {
   ITEM_LOST_FOCUS: 'ITEM_LOST_FOCUS',
   GALLERY_SCROLLED: 'GALLERY_SCROLLED',
   NAVIGATION_API_READY: 'NAVIGATION_API_READY',
+  GALLERY_NAVIGATION_START: 'GALLERY_NAVIGATION_START',
 } as const;
 
 export default EVENTS;
diff --git a/packages/playground/src/components/App/PlaygroundNavigationPanel.js b/packages/playground/src/components/App/PlaygroundNavigationPanel.js
@@ -28,16 +28,16 @@ import { optionsMap, GALLERY_CONSTS } from 'pro-gallery-lib';
 const { Step } = Steps;
 
 export function NavigationPanel(props) {
-  const [activeIdx, setActiveIndex] = useState(props.navigationPanelAPI.getActiveItemIndex());
+  const [activeIdx, setActiveIndex] = useState(props.navigationPanelAPI.currentIndex());
   props.navigationPanelAPI.assignIndexChangeCallback(setActiveIndex);
   useEffect(() => {
-    if (props.navigationPanelAPI.getActiveItemIndex() !== activeIdx) {
-      props.navigationPanelAPI.toIndex(activeIdx);
+    if (props.navigationPanelAPI.currentIndex() !== activeIdx) {
+      props.navigationPanelAPI.navigateToIndex(activeIdx);
     }
   }, [activeIdx, props.navigationPanelAPI]);
 
   const APINavigationPanel = (props) => {
-    const activeIdx = props.navigationPanelAPI.getActiveItemIndex();
+    const activeIdx = props.navigationPanelAPI.currentIndex();
     const percent = (activeIdx + 1) / props.totalItemsCount;
     const totalForProgress = props.totalItemsCount === Infinity ? 100 : props.totalItemsCount;
     let containerStyles = {
@@ -141,36 +141,36 @@ export function NavigationPanel(props) {
   };
   const getAllKindsOfButtons = ({
     next,
-    triggerItemAction,
-    back,
-    isAbleToNavigateBack,
-    isAbleToNavigateNext,
-    toIndex,
+    triggerItemClick,
+    previous,
+    navigatePreviousEnabled,
+    navigateNextEnabled,
+    navigateToIndex,
   }) => {
     const buttonConfig = [
-      ['Previous item', back, !isAbleToNavigateBack()],
+      ['Previous item', previous, !navigatePreviousEnabled()],
       [
         'Next item',
         async () => {
           console.time('SCROLLING NEXT');
           await next(); //Scrolling functions are async.
           console.timeEnd('SCROLLING NEXT');
         },
-        !isAbleToNavigateNext(),
+        !navigateNextEnabled(),
       ],
       [
         'toIndex 3',
         async () => {
           console.time('SCROLLING to item 3');
-          await toIndex(3); //Scrolling functions are async.
+          await navigateToIndex(3); //Scrolling functions are async.
           console.timeEnd('SCROLLING to item 3');
         },
         false,
       ],
-      ['toIndex 0', () => toIndex(0), false],
-      ['toIndex 10', () => toIndex(10), false],
-      ['ItemAction', (e) => triggerItemAction(e), false],
-      ['Item 3 action', (e) => triggerItemAction(e, { itemIndex: 3 }), false],
+      ['toIndex 0', () => navigateToIndex(0), false],
+      ['toIndex 10', () => navigateToIndex(10), false],
+      ['ItemAction', (e) => triggerItemClick(e), false],
+      ['Item 3 action', (e) => triggerItemClick(e, { itemIndex: 3 }), false],
     ];
     return (
       <div class="navigation-panel-buttons">