geosolutions-it#6830. Disable URL update on initial scroll (geosoluti…

…ons-it#6835)
dsuren1 · Jul 15, 2021 · af0e872 · af0e872
1 parent 0c54aa6
commit af0e872
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 13 deletions.
diff --git a/web/client/actions/__tests__/geostory-test.js b/web/client/actions/__tests__/geostory-test.js
@@ -63,10 +63,17 @@ import {
     hideCarouselItems,
     HIDE_CAROUSEL_ITEMS,
     syncCarouselMap,
-    SYNC_CAROUSEL_MAP
+    SYNC_CAROUSEL_MAP,
+    geostoryScrolling,
+    GEOSTORY_SCROLLING
 } from '../geostory';
 
 describe('test geostory action creators', () => {
+    it('geostoryScrolling', () => {
+        const status = true;
+        const action = geostoryScrolling(status);
+        expect(action).toEqual({type: GEOSTORY_SCROLLING, status});
+    });
     it('clearSaveError', () => {
         const action = clearSaveError();
         expect(action.type).toBe(CLEAR_SAVE_ERROR);

diff --git a/web/client/actions/geostory.js b/web/client/actions/geostory.js
@@ -17,6 +17,7 @@ export const EDIT_RESOURCE = "GEOSTORY:EDIT_RESOURCE";
 export const EDIT_WEBPAGE = "GEOSTORY:EDIT_WEBPAGE";
 export const ERRORS_LOGO = "GEOSTORY:ERRORS_LOGO";
 export const GEOSTORY_LOADED = "GEOSTORY:GEOSTORY_LOADED";
+export const GEOSTORY_SCROLLING = "GEOSTORY:SCROLLING";
 export const LOAD_GEOSTORY = "GEOSTORY:LOAD_GEOSTORY";
 export const LOAD_GEOSTORY_ERROR = "GEOSTORY:LOAD_GEOSTORY_ERROR";
 export const LOADING_GEOSTORY = "GEOSTORY:LOADING_GEOSTORY";
@@ -247,6 +248,13 @@ export const updateUrlOnScroll = value => ({type: SET_UPDATE_URL_SCROLL, value})
 
 export const updateMediaEditorSettings = mediaEditorSettings => ({ type: UPDATE_MEDIA_EDITOR_SETTINGS, mediaEditorSettings });
 
+/**
+ * This action can be used to disable/enable URL update during story load,
+ * to avoid conflicts due to the initial scroll when the user opens a link pointing to a section/column.
+ * @param {boolean} status true if the application is actually scrolling
+ * @returns the action
+ */
+export const geostoryScrolling = (status) => ({ type: GEOSTORY_SCROLLING, status});
 
 /**
  * Set the feature drawn

diff --git a/web/client/epics/__tests__/geostory-test.js b/web/client/epics/__tests__/geostory-test.js
@@ -39,13 +39,17 @@ import {
     synchronizeCarouselOnMapRemove,
     synchronizeCarouselOnMapUpdate,
     hideCarouselItemsOnUpdateCurrentPage,
-    updateResourceOnAddCarouselItem
+    updateResourceOnAddCarouselItem,
+    scrollOnLoad,
+    urlUpdateOnScroll
 } from '../geostory';
 import {
     ADD,
     LOADING_GEOSTORY,
     loadGeostory,
     SET_CURRENT_STORY,
+    setCurrentStory,
+    GEOSTORY_SCROLLING,
     LOAD_GEOSTORY_ERROR,
     add,
     UPDATE,
@@ -69,7 +73,8 @@ import {
     SYNC_CAROUSEL_MAP,
     update,
     drawingFeatures,
-    HIDE_CAROUSEL_ITEMS
+    HIDE_CAROUSEL_ITEMS,
+    updateCurrentPage
 } from '../../actions/geostory';
 import { SET_CONTROL_PROPERTY } from '../../actions/controls';
 import {
@@ -1789,6 +1794,25 @@ describe('Geostory Epics', () => {
         });
     });
 
+    it('urlUpdateOnScroll', (done) => {
+        const NUM_ACTIONS = 1;
+        testEpic(addTimeoutEpic(urlUpdateOnScroll, 100), NUM_ACTIONS, [updateCurrentPage({sectionId: "sectionId"})],
+            (actions) => {
+                expect(actions[0].type).toBe(TEST_TIMEOUT);
+                done();
+            }, {geostory: {mode: "view", updateUrlOnScroll: true, resource: {id: "1"}}});
+    });
+    it('scrollOnLoad', (done) => {
+        const NUM_ACTIONS = 2;
+        testEpic(scrollOnLoad, NUM_ACTIONS, setCurrentStory({}),
+            (actions) => {
+                expect(actions[0].type).toBe(GEOSTORY_SCROLLING);
+                expect(actions[0].status).toBe(true);
+                expect(actions[1].type).toBe(GEOSTORY_SCROLLING);
+                expect(actions[1].status).toBe(false);
+                done();
+            });
+    });
     describe('loadStoryOnHistoryPop', () => {
         it('loadStoryOnHistoryPop without shared', (done) => {
             const NUM_ACTIONS = 1;

diff --git a/web/client/epics/geostory.js b/web/client/epics/geostory.js
@@ -64,7 +64,9 @@ import {
     DRAWING_FEATURE,
     sideEffect,
     hideCarouselItems,
-    syncCarouselMap
+    syncCarouselMap,
+    geostoryScrolling,
+    GEOSTORY_SCROLLING
 } from '../actions/geostory';
 import { setControlProperty } from '../actions/controls';
 
@@ -844,13 +846,23 @@ export const handlePendingGeoStoryChanges = action$ =>
             )
     );
 
+const semaphore = (sem$, start = true, condition = (c) => c) => (stream$) =>
+    stream$
+        .withLatestFrom(sem$.startWith(start))
+        .filter(([, s]) => condition(s))
+        .map(([e]) => e);
+
 /**
  * Handle the url updates on currentPage change
  * @param {Observable} action$ stream of actions
  * @param {object} store redux store
  */
 export const urlUpdateOnScroll = (action$, {getState}) =>
     action$.ofType(UPDATE_CURRENT_PAGE)
+        .let(semaphore(
+            action$.ofType(GEOSTORY_SCROLLING)
+                .map(a => !a.value)
+        ))
         .debounceTime(50) // little delay if too many UPDATE_CURRENT_PAGE actions come
         .switchMap(({sectionId, columnId}) => {
             if (
@@ -872,16 +884,23 @@ export const urlUpdateOnScroll = (action$, {getState}) =>
  */
 export const scrollOnLoad = (action$) =>
     action$.ofType(SET_CURRENT_STORY)
-        .switchMap(() => {
+        .switchMap(({delay = 500}) => {
             const storyIds = window?.location?.hash?.split('/');
-            if (window?.location?.hash?.includes('shared')) {
-                scrollToContent(storyIds[7] || storyIds[5], {block: "start", behavior: "auto"});
-            } else if (storyIds.length > 5) {
-                scrollToContent(storyIds[6], {block: "start", behavior: "auto"});
-            } else if (storyIds.length === 5) {
-                scrollToContent(storyIds[4], {block: 'start', behavior: "auto"});
-            }
-            return Observable.empty();
+            return Observable.of(storyIds)
+                .delay(delay)
+                .do(() => {
+                    if (window?.location?.hash?.includes('shared')) {
+                            scrollToContent(storyIds[7] || storyIds[5], {block: "start", behavior: "auto"});
+                        } else if (storyIds.length > 5) {
+                            scrollToContent(storyIds[6], {block: "start", behavior: "auto"});
+                        } else if (storyIds.length === 5) {
+                            scrollToContent(storyIds[4], {block: 'start', behavior: "auto"});
+                        }
+                    }
+                )
+                .ignoreElements()
+                .startWith(geostoryScrolling(true))
+                .concat(Observable.of(geostoryScrolling(false)).delay(delay));
     });
 
 /**