From bd45f1e209e2055bf498b95b068f0fbdd9e18513 Mon Sep 17 00:00:00 2001 From: Galpittel Date: Wed, 3 Jul 2024 15:53:54 +0300 Subject: [PATCH 1/2] add a gallery navigation api ready event --- .../gallery/proGallery/galleryContainer.js | 13 ++++++ .../gallery/proGallery/slideshowView.js | 46 ++++++++++--------- packages/lib/src/common/constants/events.ts | 2 + packages/playground/src/components/App/App.js | 2 + .../App/PlaygroundNavigationPanel.js | 22 ++++----- 5 files changed, 52 insertions(+), 33 deletions(-) diff --git a/packages/gallery/src/components/gallery/proGallery/galleryContainer.js b/packages/gallery/src/components/gallery/proGallery/galleryContainer.js index eb81c26920..29c7e67e9c 100644 --- a/packages/gallery/src/components/gallery/proGallery/galleryContainer.js +++ b/packages/gallery/src/components/gallery/proGallery/galleryContainer.js @@ -181,6 +181,11 @@ export class GalleryContainer extends React.Component { this.props.activeIndex !== nextProps.activeIndex && nextProps.activeIndex !== this.currentSlideshowViewIdx ) { + console.log( + 'scrolling to item', + this.props.activeIndex, + nextProps.activeIndex + ); this.scrollToItem(nextProps.activeIndex, false, true, 0); } @@ -479,6 +484,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 +547,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; diff --git a/packages/gallery/src/components/gallery/proGallery/slideshowView.js b/packages/gallery/src/components/gallery/proGallery/slideshowView.js index 41be7fa93c..6da50af47e 100644 --- a/packages/gallery/src/components/gallery/proGallery/slideshowView.js +++ b/packages/gallery/src/components/gallery/proGallery/slideshowView.js @@ -403,7 +403,7 @@ class SlideshowView extends React.Component { return { scrollMarginCorrection: this.getStyles().margin || 0, _scrollDuration: - scrollDuration || this.props.options.scrollDuration || 400, + scrollDuration ?? this.props.options.scrollDuration ?? 400, }; } @@ -943,10 +943,12 @@ class SlideshowView extends React.Component { }; 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, @@ -954,8 +956,9 @@ class SlideshowView extends React.Component { avoidIndividualNavigation: false, isContinuousScrolling: false, direction: isRTL ? -1 : 1, - }), - back: () => + }); + }, + previous: () => { this.next({ scrollDuration: 400, isKeyboardNavigation: false, @@ -963,17 +966,18 @@ class SlideshowView extends React.Component { 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 @@ class SlideshowView extends React.Component { 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() { diff --git a/packages/lib/src/common/constants/events.ts b/packages/lib/src/common/constants/events.ts index 1206260204..c957f019a2 100644 --- a/packages/lib/src/common/constants/events.ts +++ b/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; diff --git a/packages/playground/src/components/App/App.js b/packages/playground/src/components/App/App.js index 3b64dffc7c..5aaecaca36 100644 --- a/packages/playground/src/components/App/App.js +++ b/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; diff --git a/packages/playground/src/components/App/PlaygroundNavigationPanel.js b/packages/playground/src/components/App/PlaygroundNavigationPanel.js index e947b65996..8e2ae6a54f 100644 --- a/packages/playground/src/components/App/PlaygroundNavigationPanel.js +++ b/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 } - 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 (
From 25ecd2df584a329ab56e14b8e079603d966f964f Mon Sep 17 00:00:00 2001 From: Galpittel Date: Wed, 3 Jul 2024 15:59:48 +0300 Subject: [PATCH 2/2] remove console.log --- .../src/components/gallery/proGallery/galleryContainer.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/gallery/src/components/gallery/proGallery/galleryContainer.js b/packages/gallery/src/components/gallery/proGallery/galleryContainer.js index 29c7e67e9c..38232bbf3f 100644 --- a/packages/gallery/src/components/gallery/proGallery/galleryContainer.js +++ b/packages/gallery/src/components/gallery/proGallery/galleryContainer.js @@ -181,11 +181,6 @@ export class GalleryContainer extends React.Component { this.props.activeIndex !== nextProps.activeIndex && nextProps.activeIndex !== this.currentSlideshowViewIdx ) { - console.log( - 'scrolling to item', - this.props.activeIndex, - nextProps.activeIndex - ); this.scrollToItem(nextProps.activeIndex, false, true, 0); }