Merge pull request #2329 from tf/excursions-improvements

Excursions improvements

Author: tf

entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/tooltipDisplay-spec.js

@@ -8,13 +8,18 @@ import tooltipStyles from 'contentElements/hotspots/Tooltip.module.css';
 import {renderInContentElement} from 'pageflow-scrolled/testHelpers';
 import {asyncHandlingOf} from 'support/asyncHandlingOf'
 import '@testing-library/jest-dom/extend-expect'
+import {act, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import 'support/fakeResizeObserver';
 
 jest.mock('contentElements/hotspots/TooltipPortal');
 jest.mock('contentElements/hotspots/useTooltipTransitionStyles');
 
 describe('Hotspots', () => {
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
   it('shows tooltip on area hover', async () => {
     const seed = {
       imageFileUrlTemplates: {large: ':id_partition/image.webp'},
@@ -226,6 +231,85 @@ describe('Hotspots', () => {
 
     expect(container.querySelector(`.${tooltipStyles.box}`)).toBeNull();
   });
+
+  it('hides tooltip when storyline enters background', async () => {
+    const seed = {
+      imageFileUrlTemplates: {large: ':id_partition/image.webp'},
+      imageFiles: [{id: 1, permaId: 100}]
+    };
+    const configuration = {
+      image: 100,
+      areas: [
+        {
+          id: 1,
+          outline: [[10, 20], [10, 30], [40, 30], [40, 20]],
+          indicatorPosition: [20, 25],
+        }
+      ],
+      tooltipTexts: {
+        1: {
+          title: [{type: 'heading', children: [{text: 'Some title'}]}],
+        }
+      }
+    };
+
+    const user = userEvent.setup();
+    const {container, simulateScrollPosition, simulateStorylineMode} = renderInContentElement(
+      <Hotspots configuration={configuration} />, {seed}
+    );
+    simulateScrollPosition('near viewport');
+
+    await user.hover(clickableArea(container));
+    expect(container.querySelector(`.${tooltipStyles.box}`)).not.toBeNull();
+
+    simulateStorylineMode('background');
+
+    await waitFor(() =>
+      expect(container.querySelector(`.${tooltipStyles.box}`)).toBeNull()
+    );
+  });
+
+  it('shows tooltip again after delay when storyline becomes active', async () => {
+    jest.useFakeTimers();
+    const seed = {
+      imageFileUrlTemplates: {large: ':id_partition/image.webp'},
+      imageFiles: [{id: 1, permaId: 100}]
+    };
+    const configuration = {
+      image: 100,
+      areas: [
+        {
+          id: 1,
+          outline: [[10, 20], [10, 30], [40, 30], [40, 20]],
+          indicatorPosition: [20, 25],
+        }
+      ],
+      tooltipTexts: {
+        1: {
+          title: [{type: 'heading', children: [{text: 'Some title'}]}],
+        }
+      }
+    };
+
+    const user = userEvent.setup({advanceTimers: jest.advanceTimersByTime});
+    const {container, simulateScrollPosition, simulateStorylineMode} = renderInContentElement(
+      <Hotspots configuration={configuration} />, {seed}
+    );
+    simulateScrollPosition('near viewport');
+
+    await user.hover(clickableArea(container));
+    simulateStorylineMode('background');
+    await waitFor(() =>
+      expect(container.querySelector(`.${tooltipStyles.box}`)).toBeNull()
+    );
+
+    simulateStorylineMode('active');
+    expect(container.querySelector(`.${tooltipStyles.box}`)).toBeNull();
+
+    act(() => jest.advanceTimersByTime(200));
+
+    expect(container.querySelector(`.${tooltipStyles.box}`)).not.toBeNull();
+  });
 });
 
 function clickableArea(container) {

entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.js

@@ -22,9 +22,11 @@ import {
   useContentElementEditorState,
   useContentElementConfigurationUpdate,
   useDarkBackground,
+  useDelayedBoolean,
   useFileWithInlineRights,
   useFloatingPortalRoot,
   useI18n,
+  useStorylineActivity,
   utils,
   LinkButton
 } from 'pageflow-scrolled/frontend';
@@ -53,6 +55,9 @@ export function Tooltip({
   const updateConfiguration = useContentElementConfigurationUpdate();
   const {isEditable} = useContentElementEditorState();
 
+  const storylineMode = useStorylineActivity();
+  const inBackground = useDelayedBoolean(storylineMode !== 'active', {fromTrueToFalse: 200});
+
   const darkBackground = useDarkBackground();
   const light = configuration.invertTooltips ? !darkBackground : darkBackground;
 
@@ -75,7 +80,7 @@ export function Tooltip({
 
   const arrowRef = useRef();
   const {refs, floatingStyles, context} = useFloating({
-    open: containerRect.width > 0 && visible,
+    open: containerRect.width > 0 && visible && !inBackground,
     onOpenChange: open => !open && onDismiss(),
     strategy: floatingStrategy || 'absolute',
     placement: position === 'above' ? 'top' : 'bottom',

entry_types/scrolled/package/src/frontend/index.js

@@ -101,6 +101,8 @@ export {usePortraitOrientation} from './usePortraitOrientation';
 export {useScrollPosition} from './useScrollPosition';
 export {usePhonePlatform} from './usePhonePlatform';
 export {useIsomorphicLayoutEffect} from './useIsomorphicLayoutEffect';
+export {MainStorylineActivity, useStorylineActivity} from './storylineActivity';
+export {useDelayedBoolean} from './useDelayedBoolean';
 
 export {EditableTable} from './EditableTable';
 export {EditableText} from './EditableText';

entry_types/scrolled/package/src/testHelpers/renderInContentElement.js

@@ -1,4 +1,4 @@
-import React, {useContext} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import {DndProvider} from 'react-dnd';
 import {HTML5Backend} from 'react-dnd-html5-backend';
 import BackboneEvents from 'backbone-events-standalone';
@@ -9,6 +9,7 @@ import {
   ContentElementEditorCommandEmitterContext,
   ContentElementEditorStateContext,
   ContentElementLifecycleContext,
+  MainStorylineActivity,
   PhonePlatformContext
 } from 'pageflow-scrolled/frontend';
 
@@ -19,8 +20,9 @@ import {renderInEntryWithScrollPositionLifecycle} from './scrollPositionLifecycl
 /**
  * Provide context as if component was rendered inside of a content element.
  *
- * Returns two additionals functions to control content element scroll
- * lifecycle and editor commands: `simulateScrollPosition` and `triggerEditorCommand`.
+ * Returns additional functions to control content element scroll
+ * lifecycle, editor commands, and storyline mode: `simulateScrollPosition`,
+ * `triggerEditorCommand`, and `simulateStorylineMode`.
  *
  * @param {Function} callback - React component or function returning a React component.
  * @param {Object} [options] - Supports all options supported by {@link `renderInEntry`}.
@@ -30,12 +32,13 @@ import {renderInEntryWithScrollPositionLifecycle} from './scrollPositionLifecycl
  *
  * @example
  *
- * const {getByRole, simulateScrollPosition, triggerEditorCommand} =
+ * const {getByRole, simulateScrollPosition, triggerEditorCommand, simulateStorylineMode} =
  *   renderInContentElement(<MyContentElement />, {
  *     seed: {...}
  *   });
  * simulateScrollPosition('near viewport');
  * triggerEditorCommand({type: 'HIGHLIGHT'});
+ * simulateStorylineMode('background');
  */
 export function renderInContentElement(ui, {editorState,
                                             phonePlatform = false,
@@ -44,24 +47,33 @@ export function renderInContentElement(ui, {editorState,
                                             seed,
                                             ...options} = {}) {
   const emitter = Object.assign({}, BackboneEvents);
+  const storylineEmitter = Object.assign({}, BackboneEvents);
 
   function Wrapper({children}) {
     const defaultEditorState = useContext(ContentElementEditorStateContext);
+    const [storylineMode, setStorylineMode] = useState('active');
+
+    useEffect(() => {
+      storylineEmitter.on('storylineMode', setStorylineMode);
+      return () => storylineEmitter.off('storylineMode', setStorylineMode);
+    }, []);
 
     return (
-      <PhonePlatformContext.Provider value={phonePlatform}>
-        <DndProvider backend={HTML5Backend}>
-          <ContentElementAttributesProvider id={42}>
-            <ContentElementEditorCommandEmitterContext.Provider
-              value={emitter}>
-              <ContentElementEditorStateContext.Provider
-                value={{...defaultEditorState, ...editorState}}>
-                {OriginalWrapper ? <OriginalWrapper children={children} /> : children}
-              </ContentElementEditorStateContext.Provider>
-            </ContentElementEditorCommandEmitterContext.Provider>
-          </ContentElementAttributesProvider>
-        </DndProvider>
-      </PhonePlatformContext.Provider>
+      <MainStorylineActivity activeExcursion={storylineMode !== 'active' ? {id: 1} : null}>
+        <PhonePlatformContext.Provider value={phonePlatform}>
+          <DndProvider backend={HTML5Backend}>
+            <ContentElementAttributesProvider id={42}>
+              <ContentElementEditorCommandEmitterContext.Provider
+                value={emitter}>
+                <ContentElementEditorStateContext.Provider
+                  value={{...defaultEditorState, ...editorState}}>
+                  {OriginalWrapper ? <OriginalWrapper children={children} /> : children}
+                </ContentElementEditorStateContext.Provider>
+              </ContentElementEditorCommandEmitterContext.Provider>
+            </ContentElementAttributesProvider>
+          </DndProvider>
+        </PhonePlatformContext.Provider>
+      </MainStorylineActivity>
     );
   }
 
@@ -83,6 +95,11 @@ export function renderInContentElement(ui, {editorState,
       act(() => {
         emitter.trigger(`command:42`, command)
       })
+    },
+    simulateStorylineMode(mode) {
+      act(() => {
+        storylineEmitter.trigger('storylineMode', mode)
+      });
     }
   };
 }

entry_types/scrolled/package/src/widgets/excursionSheet/ExcursionSheet.module.css

@@ -38,6 +38,7 @@
   box-shadow: 0 0 20px 5px rgb(0 0 0 / 0.5);
   position: relative;
   overflow: clip;
+  clip-path: inset(0);
 }
 
 @media (prefers-reduced-motion: no-preference) {