add a gallery navigation api ready event (#1186)

wix-incubator · Feb 18, 2024 · 44901b6 · 44901b6
1 parent 9a86954
commit 44901b6
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/packages/gallery/src/components/gallery/proGallery/slideshowView.js b/packages/gallery/src/components/gallery/proGallery/slideshowView.js
@@ -860,9 +860,8 @@ class SlideshowView extends React.Component {
     const isRTL =
       this.props.options.behaviourParams_gallery_layoutDirection ===
       GALLERY_CONSTS[optionsMap.behaviourParams.gallery.layoutDirection].RIGHT_TO_LEFT;
-    return (
-      this.navigationPanelAPI ||
-      (this.navigationPanelAPI = {
+    if (!this.navigationPanelAPI) {
+      this.navigationPanelAPI = {
         next: () =>
           this.next({
             scrollDuration: 400,
@@ -909,8 +908,10 @@ class SlideshowView extends React.Component {
         assignIndexChangeCallback: (func) => {
           this.navigationPanelCallbackOnIndexChange = func;
         },
-      })
-    );
+      };
+    }
+    this.props.actions.eventsListener(GALLERY_CONSTS.events.NAVIGATION_API_READY, this.navigationPanelAPI);
+    return this.navigationPanelAPI;
   };
 
   getNavigationPanelArray() {
@@ -1144,6 +1145,7 @@ class SlideshowView extends React.Component {
       this.setCurrentItemByScroll();
     }
     this.startAutoSlideshowIfNeeded(this.props.options);
+    this.createOrGetCustomNavigationPanelAPI();
   }
 
   componentWillUnmount() {

diff --git a/packages/lib/src/common/constants/events.ts b/packages/lib/src/common/constants/events.ts
@@ -17,6 +17,7 @@ const EVENTS = {
   ITEM_FOCUSED: 'ITEM_FOCUSED',
   ITEM_LOST_FOCUS: 'ITEM_LOST_FOCUS',
   GALLERY_SCROLLED: 'GALLERY_SCROLLED',
+  NAVIGATION_API_READY: 'NAVIGATION_API_READY',
 } as const;
 
 export default EVENTS;
diff --git a/packages/playground/src/components/App/App.js b/packages/playground/src/components/App/App.js
@@ -111,6 +111,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;