add a gallery navigation api event

packages/gallery/src/components/gallery/proGallery/galleryContainer.js

@@ -479,6 +479,10 @@ export class GalleryContainer extends React.Component {
             this.state.options.autoSlideshowContinuousSpeed,
           imageMargin: this.state.options.imageMargin,
         };
+        this.eventsListener(GALLERY_CONSTS.events.GALLERY_NAVIGATION_START, {
+          current: 'scrollToItem',
+          scrollParams,
+        });
         this.currentScrollData = scrollToItemImp(scrollParams);
         return this.currentScrollData.scrollDeffered.promise.then(() => {
           this.currentScrollData = null;
@@ -538,6 +542,10 @@ export class GalleryContainer extends React.Component {
             this.state.options.autoSlideshowContinuousSpeed,
           imageMargin: this.state.options.imageMargin,
         };
+        this.eventsListener(GALLERY_CONSTS.events.GALLERY_NAVIGATION_START, {
+          current: 'scrollToGroup',
+          scrollParams,
+        });
         this.currentScrollData = scrollToGroupImp(scrollParams);
         return this.currentScrollData.scrollDeffered.promise.then(() => {
           this.currentScrollData = null;

packages/gallery/src/components/gallery/proGallery/slideshowView.js

@@ -403,7 +403,7 @@
     return {
       scrollMarginCorrection: this.getStyles().margin || 0,
       _scrollDuration:
-        scrollDuration || this.props.options.scrollDuration || 400,
+        scrollDuration ?? this.props.options.scrollDuration ?? 400,
     };
   }
 
@@ -943,37 +943,41 @@
   };
   createOrGetCustomNavigationPanelAPI = () => {
     const isRTL = this.props.options.isRTL;
-    return (
-      this.navigationPanelAPI ||
-      (this.navigationPanelAPI = {
-        next: () =>
+    if (!this.navigationPanelAPI) {
+      this.navigationPanelAPI = {
+        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[
@@ -990,18 +994,16 @@
             e
           );
         },
-        // nextGroup,
-        // previousItem,
-        // previousGroup,
-        toIndex: (itemIdx) =>
-          this.scrollToIndex({ itemIdx, scrollDuration: 400, isRTL }),
-        // getCurrentActiveItemIndex,
-        // getCurrentActiveGroupIndex,
-        assignIndexChangeCallback: (func) => {
-          this.navigationPanelCallbackOnIndexChange = func;
+        navigateToIndex: (itemIdx, animationDuration = 400) => {
+          this.scrollToIndex({ itemIdx, scrollDuration: animationDuration });
         },
-      })
+      };
+    }
+    this.props.actions.eventsListener(
+      GALLERY_CONSTS.events.NAVIGATION_API_READY,
+      this.navigationPanelAPI
     );
+    return this.navigationPanelAPI;
   };
 
   getNavigationPanelArray() {

packages/lib/src/common/constants/events.ts

@@ -17,6 +17,8 @@ const EVENTS = {
   ITEM_FOCUSED: 'ITEM_FOCUSED',
   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;

packages/playground/src/components/App/App.js

@@ -90,6 +90,8 @@ export function App() {
         break;
       case GALLERY_EVENTS.LOAD_MORE_CLICKED:
         break;
+      case GALLERY_EVENTS.NAVIGATION_API_READY:
+        break;
       default:
         // console.log({eventName, eventData});
         break;

packages/playground/src/components/App/PlaygroundNavigationPanel.js

@@ -26,16 +26,16 @@ import {
 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) {
+    if(props.navigationPanelAPI.currentIndex() !== activeIdx) {
       props.navigationPanelAPI.toIndex(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 = {
@@ -126,23 +126,23 @@ export function NavigationPanel(props) {
     return     <Step title={item.dto.metadata.title} description={item.dto.metadata.description} />
 
   }
-  const getAllKindsOfButtons = ({next,triggerItemAction,back,isAbleToNavigateBack, isAbleToNavigateNext, previousItem, previousGroup, toIndex, getCurrentActiveItemIndex, getCurrentActiveGroupIndex}) => {
+  const getAllKindsOfButtons = ({next,triggerItemClick,back,navigatePreviousEnabled, navigateNextEnabled, previousItem, previousGroup, toIndex, getCurrentActiveItemIndex, getCurrentActiveGroupIndex}) => {
     const buttonConfig = [
-      ['Previous item', back, !isAbleToNavigateBack()],
+      ['Previous item', back, !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">