pageflow 17.0.5 → 17.2.0

data/entry_types/scrolled/package/widgets/excursionSheet.css

@@ -0,0 +1 @@
+.CloseButton-module_button__3aQ6f{position:sticky;top:var(--widget-margin-top,0);z-index:10;display:flex;margin:.25rem .25rem .25rem auto;padding:.75rem;border:0;background-color:initial;color:var(--theme-light-content-text-color);cursor:pointer;outline-offset:-3px;transition:opacity .5s,top .15s ease;@starting-style{opacity:0}}.CloseButton-module_button__3aQ6f svg{position:relative;transition:color .5s}.CloseButton-module_invert__3C788 svg{color:var(--theme-dark-content-text-color)}.ReturnButton-module_wrapper__3rzAj{height:50lvh;font-family:var(--theme-widget-font-family)}.ReturnButton-module_button__1SKjN{position:absolute;left:50%;display:flex;flex-direction:column;gap:.5rem;align-items:center;text-align:center;border:0;padding:.5rem;background-color:initial;color:var(--theme-light-content-text-color);font-size:1.25rem;cursor:pointer}.colors-module_contentColorScope__1Oidv{--theme-light-content-surface-color:var(--root-light-content-surface-color);--theme-dark-content-surface-color:var(--root-dark-content-surface-color);--theme-light-content-text-color:var(--root-light-content-text-color);--theme-dark-content-text-color:var(--root-dark-content-text-color)}.ExcursionSheet-module_container__2NpY_{position:relative;margin-top:-100vh;z-index:10;padding-top:33lvh;pointer-events:none}.ExcursionSheet-module_width-inset__2uSgb{margin-left:3vw;margin-right:3vw}.ExcursionSheet-module_container__2NpY_>*{pointer-events:auto}.ExcursionSheet-module_backdrop__3RyMJ{position:fixed;top:0;height:100vh;width:100%;background-color:rgba(0,0,0,.7)}@media (prefers-reduced-motion:no-preference){.ExcursionSheet-module_backdrop__3RyMJ{transition:opacity .2s ease;@starting-style{opacity:0}}}.ExcursionSheet-module_content__3pYqz{box-shadow:0 0 20px 5px rgba(0,0,0,.5);position:relative;overflow:clip}.ExcursionSheet-module_clip__2y2Bg{clip-path:inset(0)}@media (prefers-reduced-motion:no-preference){.ExcursionSheet-module_content__3pYqz{transition:transform .2s ease-out,opacity .2s;@starting-style{transform:translateY(20lvh);opacity:0}}}.ExcursionSheet-module_probe__3xetc{--section-intersection-observer-root-margin-top:calc(var(--widget-margin-top) + 1.5rem)}

data/entry_types/scrolled/package/widgets/excursionSheet.js

@@ -0,0 +1,225 @@
+import { useI18n, ThemeIcon, useIsomorphicLayoutEffect, SectionIntersectionObserver, useOnScreen, frontend } from 'pageflow-scrolled/frontend';
+import React, { useRef, useEffect, useState } from 'react';
+import classNames from 'classnames';
+
+var styles = {"button":"CloseButton-module_button__3aQ6f","invert":"CloseButton-module_invert__3C788"};
+
+var _jsxFileName = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/widgets/excursionSheet/CloseButton.js";
+function CloseButton({
+  invert,
+  onClick
+}) {
+  const {
+    t
+  } = useI18n();
+  return /*#__PURE__*/React.createElement("button", {
+    className: classNames(styles.button, {
+      [styles.invert]: invert
+    }),
+    "aria-label": t('pageflow_scrolled.public.close'),
+    title: t('pageflow_scrolled.public.close'),
+    onClick: onClick,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 12,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement(ThemeIcon, {
+    name: "close",
+    width: 30,
+    height: 30,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 17,
+      columnNumber: 7
+    }
+  }));
+}
+
+function useScrollCenter() {
+  const parentRef = useRef();
+  const childRef = useRef();
+  useEffect(() => {
+    function onScroll() {
+      const parentRect = parentRef.current.getBoundingClientRect();
+      childRef.current.style.transform = `translate(-50%, calc((100lvh - ${parentRect.top}px) * 0.3 - 50%)`;
+    }
+    window.addEventListener('scroll', onScroll);
+    window.addEventListener('resize', onScroll);
+    onScroll();
+    return () => {
+      window.removeEventListener('scroll', onScroll);
+      window.removeEventListener('resize', onScroll);
+    };
+  }, []);
+  return [parentRef, childRef];
+}
+
+var styles$1 = {"wrapper":"ReturnButton-module_wrapper__3rzAj","button":"ReturnButton-module_button__1SKjN"};
+
+var _jsxFileName$1 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/widgets/excursionSheet/ReturnButton.js";
+function ReturnButton({
+  label,
+  onClose,
+  children
+}) {
+  const [wrapperRef, buttonRef] = useScrollCenter();
+  useIsomorphicLayoutEffect(() => {
+    const timeline = new window.ViewTimeline({
+      subject: wrapperRef.current
+    });
+    const animation = buttonRef.current.animate({
+      opacity: ['0', '1']
+    }, {
+      timeline,
+      fill: 'both',
+      rangeStart: 'entry 10%',
+      rangeEnd: 'entry 50%'
+    });
+    return () => animation.cancel();
+  }, []);
+  const {
+    t
+  } = useI18n();
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles$1.wrapper,
+    ref: wrapperRef,
+    onClick: onClose,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 42,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    className: styles$1.button,
+    ref: buttonRef,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 45,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement(ThemeIcon, {
+    name: "back",
+    width: 30,
+    height: 30,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 47,
+      columnNumber: 9
+    }
+  }), label || t('pageflow_scrolled.public.exit_excursion')));
+}
+
+var styles$2 = {"container":"ExcursionSheet-module_container__2NpY_ colors-module_contentColorScope__1Oidv","width-inset":"ExcursionSheet-module_width-inset__2uSgb","backdrop":"ExcursionSheet-module_backdrop__3RyMJ","content":"ExcursionSheet-module_content__3pYqz","clip":"ExcursionSheet-module_clip__2y2Bg","probe":"ExcursionSheet-module_probe__3xetc"};
+
+var _jsxFileName$2 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/widgets/excursionSheet/ExcursionSheet.js";
+function ExcursionSheet({
+  excursion,
+  onClose,
+  setIsCoveringBackground,
+  children
+}) {
+  const contentRef = useRef();
+  const [intersectingSectionInverted, setIntersectingSectionInverted] = useState(false);
+  useCoversScreen(contentRef, setIsCoveringBackground);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: styles$2.backdrop,
+    onClick: onClose,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 19,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    key: excursion.id,
+    className: classNames(styles$2.container, styles$2[`width-${excursion.sheetWidth}`]),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 21,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement(CloseButton, {
+    invert: intersectingSectionInverted,
+    onClick: onClose,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 23,
+      columnNumber: 9
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: contentRef,
+    className: styles$2.content,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 25,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$2.clip,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 26,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/React.createElement(SectionIntersectionObserver, {
+    sections: excursion.sections,
+    probeClassName: styles$2.probe,
+    onChange: section => setIntersectingSectionInverted(section === null || section === void 0 ? void 0 : section.invert),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 27,
+      columnNumber: 13
+    }
+  }, children))), /*#__PURE__*/React.createElement(ReturnButton, {
+    label: excursion.returnButtonLabel,
+    onClose: onClose,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 35,
+      columnNumber: 9
+    }
+  })));
+}
+function useCoversScreen(ref, onChange) {
+  const intersectsTopRef = useRef(false);
+  const intersectsBottomRef = useRef(false);
+  const updateCoverage = () => {
+    const isCovering = intersectsTopRef.current && intersectsBottomRef.current;
+    onChange(isCovering);
+  };
+  const handleTopEdgeIntersection = intersecting => {
+    intersectsTopRef.current = intersecting;
+    updateCoverage();
+  };
+  const handleBottomEdgeIntersection = intersecting => {
+    intersectsBottomRef.current = intersecting;
+    updateCoverage();
+  };
+  useOnScreen(ref, {
+    rootMargin: '0px 0px -100% 0px',
+    onChange: handleTopEdgeIntersection
+  });
+  useOnScreen(ref, {
+    rootMargin: '-100% 0px 0px 0px',
+    onChange: handleBottomEdgeIntersection
+  });
+  useEffect(() => {
+    return () => onChange(false);
+  }, [onChange]);
+}
+
+frontend.widgetTypes.register('excursionSheet', {
+  component: ExcursionSheet
+});

data/entry_types/scrolled/package/widgets/iconInlineFileRights.css

@@ -1 +1 @@
-.IconInlineFileRights-module_standAlone__15788{color:#fff;position:absolute;right:0;bottom:0;left:0;display:flex;justify-content:flex-end;pointer-events:none}.IconInlineFileRights-module_standAlone__15788>*{pointer-events:auto}.IconInlineFileRights-module_button__o5ZmR{border:0;padding:0;background-color:transparent;width:44px;height:40px;margin:0;display:flex;align-items:center;justify-content:center;color:currentColor;cursor:pointer;position:relative}.IconInlineFileRights-module_button__o5ZmR,.IconInlineFileRights-module_tooltip__2e1u8{transition:opacity .2s,visibility .2s}.IconInlineFileRights-module_transparent__2dVaA .IconInlineFileRights-module_button__o5ZmR{opacity:.6}.IconInlineFileRights-module_wrapper__2kQK_:active .IconInlineFileRights-module_button__o5ZmR,.IconInlineFileRights-module_wrapper__2kQK_:focus .IconInlineFileRights-module_button__o5ZmR,.IconInlineFileRights-module_wrapper__2kQK_:hover .IconInlineFileRights-module_button__o5ZmR{opacity:1}.IconInlineFileRights-module_button__o5ZmR svg{width:23px;height:23px}.IconInlineFileRights-module_standAlone__15788 .IconInlineFileRights-module_button__o5ZmR svg{filter:drop-shadow(0 1px 4px #000)}.IconInlineFileRights-module_tooltip__2e1u8{font-size:13.5555px;font-family:sans-serif;line-height:1.4;position:absolute;bottom:38px;right:5px;background-color:rgba(17,17,17,.9);border-radius:3px;color:#fff;padding:8px;visibility:hidden;opacity:0;text-align:right;margin-left:10px;box-sizing:border-box;max-width:95%;z-index:1}.IconInlineFileRights-module_tooltip__2e1u8:after{content:"";display:block;border:5px solid transparent;border-top-color:rgba(17,17,17,.9);position:absolute;right:11px;top:100%}.IconInlineFileRights-module_tooltip__2e1u8 a{color:#fff;-webkit-text-decoration-color:hsla(0,0%,100%,.3);text-decoration-color:hsla(0,0%,100%,.3)}.IconInlineFileRights-module_tooltip__2e1u8 span{color:hsla(0,0%,100%,.7)}.IconInlineFileRights-module_wrapper__2kQK_:focus-within .IconInlineFileRights-module_tooltip__2e1u8,.IconInlineFileRights-module_wrapper__2kQK_:hover .IconInlineFileRights-module_tooltip__2e1u8{visibility:visible;opacity:1}.IconInlineFileRights-module_scroller__1hT8t{overflow:auto;overflow-y:hidden;scrollbar-width:thin}.IconInlineFileRights-module_scroller__1hT8t::-webkit-scrollbar{height:12px}.IconInlineFileRights-module_scroller__1hT8t::-webkit-scrollbar-thumb{background-color:hsla(0,0%,100%,.9);border-radius:20px;border:3px solid rgba(17,17,17,.9)}
+.colors-module_contentColorScope__1Nxn3{--theme-light-content-surface-color:var(--root-light-content-surface-color);--theme-dark-content-surface-color:var(--root-dark-content-surface-color);--theme-light-content-text-color:var(--root-light-content-text-color);--theme-dark-content-text-color:var(--root-dark-content-text-color)}.IconInlineFileRights-module_wrapper__2kQK_{--ai-indicator-letter-color:var(--theme-dark-content-surface-color,#101010)}.IconInlineFileRights-module_onLightBackground__GTXJd .IconInlineFileRights-module_button__o5ZmR{--ai-indicator-letter-color:var(--theme-light-content-surface-color,#fff)}.IconInlineFileRights-module_standAlone__15788{color:#fff;position:absolute;right:0;left:0;display:flex;justify-content:flex-end;pointer-events:none;z-index:2}.IconInlineFileRights-module_position-top__rxJ3d{top:0}.IconInlineFileRights-module_position-bottom__25azC{bottom:0}.IconInlineFileRights-module_standAlone__15788>*{pointer-events:auto}.IconInlineFileRights-module_button__o5ZmR{border:0;padding:0 10px;background-color:initial;box-sizing:border-box;min-width:44px;height:40px;margin:0;display:flex;align-items:center;justify-content:center;gap:4px;color:currentColor;cursor:pointer;position:relative;outline-offset:-5px}.IconInlineFileRights-module_button__o5ZmR,.IconInlineFileRights-module_tooltip__2e1u8{transition:opacity .2s,visibility .2s}.IconInlineFileRights-module_fadedOut__3A7WF .IconInlineFileRights-module_button__o5ZmR{opacity:.6}.IconInlineFileRights-module_wrapper__2kQK_:active .IconInlineFileRights-module_button__o5ZmR,.IconInlineFileRights-module_wrapper__2kQK_:focus .IconInlineFileRights-module_button__o5ZmR,.IconInlineFileRights-module_wrapper__2kQK_:hover .IconInlineFileRights-module_button__o5ZmR{opacity:1}.IconInlineFileRights-module_button__o5ZmR svg{width:23px;height:23px}.IconInlineFileRights-module_button__o5ZmR .IconInlineFileRights-module_aiIcon__33otY{width:19px;height:19px}.IconInlineFileRights-module_standAlone__15788 .IconInlineFileRights-module_button__o5ZmR svg{filter:drop-shadow(0 1px 4px #000)}.IconInlineFileRights-module_tooltip__2e1u8{font-size:13.5555px;font-family:sans-serif;line-height:1.4;position:absolute;right:5px;background-color:rgba(17,17,17,.9);border-radius:3px;color:#fff;padding:8px;visibility:hidden;opacity:0;text-align:right;margin-left:10px;box-sizing:border-box;max-width:95%;z-index:1}.IconInlineFileRights-module_position-bottom__25azC .IconInlineFileRights-module_tooltip__2e1u8{bottom:38px}.IconInlineFileRights-module_position-top__rxJ3d .IconInlineFileRights-module_tooltip__2e1u8{top:38px}.IconInlineFileRights-module_tooltip__2e1u8:after{content:"";display:block;border:5px solid transparent;position:absolute;right:11px}.IconInlineFileRights-module_position-bottom__25azC .IconInlineFileRights-module_tooltip__2e1u8:after{border-top-color:rgba(17,17,17,.9);top:100%}.IconInlineFileRights-module_position-top__rxJ3d .IconInlineFileRights-module_tooltip__2e1u8:after{border-bottom-color:rgba(17,17,17,.9);bottom:100%}.IconInlineFileRights-module_tooltip__2e1u8 a{color:#fff;-webkit-text-decoration-color:hsla(0,0%,100%,.3);text-decoration-color:hsla(0,0%,100%,.3)}.IconInlineFileRights-module_tooltip__2e1u8 [data-part]{white-space:nowrap}.IconInlineFileRights-module_tooltip__2e1u8 [data-label]{color:hsla(0,0%,100%,.7)}.IconInlineFileRights-module_wrapper__2kQK_:focus-within .IconInlineFileRights-module_tooltip__2e1u8,.IconInlineFileRights-module_wrapper__2kQK_:hover .IconInlineFileRights-module_tooltip__2e1u8{visibility:visible;opacity:1}.IconInlineFileRights-module_scroller__1hT8t{overflow:auto;overflow-y:hidden;scrollbar-width:thin}.IconInlineFileRights-module_scroller__1hT8t::-webkit-scrollbar{height:12px}.IconInlineFileRights-module_scroller__1hT8t::-webkit-scrollbar-thumb{background-color:hsla(0,0%,100%,.9);border-radius:20px;border:3px solid rgba(17,17,17,.9)}

data/entry_types/scrolled/package/widgets/iconInlineFileRights.js

@@ -1,46 +1,76 @@
-import { ThemeIcon, frontend } from 'pageflow-scrolled/frontend';
+import { useDarkBackground, AiIndicatorIcon, ThemeIcon, frontend } from 'pageflow-scrolled/frontend';
 import React from 'react';
 import classNames from 'classnames';
 
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-var styles = {"standAlone":"IconInlineFileRights-module_standAlone__15788","button":"IconInlineFileRights-module_button__o5ZmR","tooltip":"IconInlineFileRights-module_tooltip__2e1u8","transparent":"IconInlineFileRights-module_transparent__2dVaA","wrapper":"IconInlineFileRights-module_wrapper__2kQK_","scroller":"IconInlineFileRights-module_scroller__1hT8t"};
-
-function IconInlineFileRights(_ref) {
-  var _classNames;
-
-  var context = _ref.context,
-      playerControlsStandAlone = _ref.playerControlsStandAlone,
-      playerControlsTransparent = _ref.playerControlsTransparent,
-      children = _ref.children;
+var styles = {"darkContentSurfaceColor":"var(--theme-dark-content-surface-color, #101010)","lightContentSurfaceColor":"var(--theme-light-content-surface-color, #fff)","contentColorScope":"colors-module_contentColorScope__1Nxn3","wrapper":"IconInlineFileRights-module_wrapper__2kQK_ colors-module_contentColorScope__1Nxn3","onLightBackground":"IconInlineFileRights-module_onLightBackground__GTXJd","button":"IconInlineFileRights-module_button__o5ZmR","standAlone":"IconInlineFileRights-module_standAlone__15788","position-top":"IconInlineFileRights-module_position-top__rxJ3d","position-bottom":"IconInlineFileRights-module_position-bottom__25azC","tooltip":"IconInlineFileRights-module_tooltip__2e1u8","fadedOut":"IconInlineFileRights-module_fadedOut__3A7WF","aiIcon":"IconInlineFileRights-module_aiIcon__33otY","scroller":"IconInlineFileRights-module_scroller__1hT8t"};
 
+var _jsxFileName = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/widgets/iconInlineFileRights/IconInlineFileRights.js";
+function IconInlineFileRights({
+  context,
+  position,
+  playerControlsStandAlone,
+  playerControlsFadedOut,
+  hasRights,
+  hasAiIndicators,
+  children
+}) {
+  const darkBackground = useDarkBackground();
   if (context === 'afterElement') {
     return null;
   }
-
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.wrapper, (_classNames = {}, _defineProperty(_classNames, styles.transparent, context !== 'playerControls' || playerControlsTransparent), _defineProperty(_classNames, styles.standAlone, context !== 'playerControls'), _classNames))
+    className: classNames(styles.wrapper, styles[`position-${position || 'bottom'}`], {
+      [styles.fadedOut]: context !== 'playerControls' || playerControlsFadedOut,
+      [styles.standAlone]: context !== 'playerControls',
+      [styles.onLightBackground]: context === 'playerControls' && playerControlsStandAlone && !darkBackground
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 19,
+      columnNumber: 5
+    }
   }, /*#__PURE__*/React.createElement("button", {
-    className: styles.button
-  }, /*#__PURE__*/React.createElement(ThemeIcon, {
-    name: "copyright"
+    className: styles.button,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 7
+    }
+  }, hasAiIndicators && /*#__PURE__*/React.createElement(AiIndicatorIcon, {
+    kind: "ai",
+    className: styles.aiIcon,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 27,
+      columnNumber: 29
+    }
+  }), hasRights && /*#__PURE__*/React.createElement(ThemeIcon, {
+    name: "copyright",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 23
+    }
   })), /*#__PURE__*/React.createElement("div", {
-    className: styles.tooltip
+    className: styles.tooltip,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 30,
+      columnNumber: 7
+    }
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles.scroller
+    className: styles.scroller,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 31,
+      columnNumber: 9
+    }
   }, children)));
 }
 

data/entry_types/scrolled/package/widgets/iconScrollIndicator.css

@@ -0,0 +1 @@
+.IconScrollIndicator-module_indicator__2sC27{--size:40px;--animation-dist:-5px;position:fixed;bottom:1.3rem;z-index:10;filter:drop-shadow(0 0 3px #000);display:flex;justify-content:center;pointer-events:none}.IconScrollIndicator-module_indicator__2sC27>*{display:inline-block}.IconScrollIndicator-module_size-large__Ym7cB{--size:60px}.IconScrollIndicator-module_align-center__3zoez{left:0;width:100%}.IconScrollIndicator-module_align-left__3kHWt,.IconScrollIndicator-module_align-right__3TvRM{width:84%;max-width:var(--two-column-inline-content-max-width,500px)}.IconScrollIndicator-module_align-right__3TvRM{right:8%}.IconScrollIndicator-module_align-left__3kHWt{left:8%}.IconScrollIndicator-module_indicator__2sC27 svg{display:block;fill:#fff;width:var(--size);height:var(--size);opacity:.9}.IconScrollIndicator-module_animation-largeBounce__LVzn_,.IconScrollIndicator-module_animation-smallBounce__2SngV{animation:IconScrollIndicator-module_bounce__IrI-f 1s infinite}.IconScrollIndicator-module_animation-largeBounce__LVzn_{--animation-dist:-15px}@keyframes IconScrollIndicator-module_bounce__IrI-f{30%{transform:translateY(var(--animation-dist))}}

data/entry_types/scrolled/package/widgets/iconScrollIndicator.js

@@ -0,0 +1,67 @@
+import { WidgetSelectionRect, ThemeIcon, frontend } from 'pageflow-scrolled/frontend';
+import React, { useRef, useEffect } from 'react';
+import classNames from 'classnames';
+
+var styles = {"indicator":"IconScrollIndicator-module_indicator__2sC27","size-large":"IconScrollIndicator-module_size-large__Ym7cB","align-center":"IconScrollIndicator-module_align-center__3zoez","align-left":"IconScrollIndicator-module_align-left__3kHWt","align-right":"IconScrollIndicator-module_align-right__3TvRM","animation-smallBounce":"IconScrollIndicator-module_animation-smallBounce__2SngV","animation-largeBounce":"IconScrollIndicator-module_animation-largeBounce__LVzn_","bounce":"IconScrollIndicator-module_bounce__IrI-f"};
+
+var _jsxFileName = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/widgets/iconScrollIndicator/IconScrollIndicator.js";
+function IconScrollIndicator({
+  configuration,
+  sectionLayout
+}) {
+  const ref = useRef();
+  useEffect(() => {
+    const animation = ref.current.animate({
+      opacity: ['100%', '0%'],
+      visibility: ['visible', 'hidden']
+    }, {
+      fill: 'forwards',
+      timeline: new window.ViewTimeline({
+        subject: ref.current.closest('section')
+      }),
+      rangeStart: 'exit-crossing 0%',
+      rangeEnd: 'exit-crossing 100px'
+    });
+    return () => animation.cancel();
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.indicator, styles[`animation-${configuration.animation || 'smallBounce'}`], styles[`size-${configuration.size}`], styles[`align-${getAlignment(configuration, sectionLayout)}`]),
+    ref: ref,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 34,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement(WidgetSelectionRect, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 39,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement(ThemeIcon, {
+    name: "scrollDown",
+    width: 30,
+    height: 30,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 40,
+      columnNumber: 9
+    }
+  })));
+}
+function getAlignment(configuration, sectionLayout) {
+  if (configuration.alignment === 'centerViewport' || sectionLayout === 'center' || sectionLayout === 'centerRagged') {
+    return 'center';
+  } else if (sectionLayout === 'right') {
+    return 'right';
+  } else {
+    return 'left';
+  }
+}
+
+frontend.widgetTypes.register('iconScrollIndicator', {
+  component: IconScrollIndicator
+});

data/entry_types/scrolled/package/widgets/mainStorylineSheet.css

@@ -0,0 +1 @@
+.MainStorylineSheet-module_inactive__1Ji-y{position:sticky;top:0;height:100vh;overflow:clip}.MainStorylineSheet-module_scaler__jscn7{position:relative;transform-origin:center calc(var(--previous-scroll-y) + 100vh)}@media (prefers-reduced-motion:no-preference){.MainStorylineSheet-module_scaler__jscn7{transition:filter .3s ease,transform .3s ease}}.MainStorylineSheet-module_inactive__1Ji-y>.MainStorylineSheet-module_scaler__jscn7{filter:blur(2px);top:calc(var(--previous-scroll-y)*-1)}.MainStorylineSheet-module_fixedPositioningContainingBlock__3Pz_y{--fixed-positioning-containing-block-offset:var(--previous-scroll-y)}@media (max-width:480px){.MainStorylineSheet-module_inactive__1Ji-y>.MainStorylineSheet-module_scaler__jscn7{transform:scale(.94)}}@media (min-width:481px) and (max-width:768px){.MainStorylineSheet-module_inactive__1Ji-y>.MainStorylineSheet-module_scaler__jscn7{transform:scale(.95)}}@media (min-width:769px) and (max-width:1024px){.MainStorylineSheet-module_inactive__1Ji-y>.MainStorylineSheet-module_scaler__jscn7{transform:scale(.96)}}@media (min-width:1025px) and (max-width:1440px){.MainStorylineSheet-module_inactive__1Ji-y>.MainStorylineSheet-module_scaler__jscn7{transform:scale(.97)}}@media (min-width:1441px) and (max-width:1920px){.MainStorylineSheet-module_inactive__1Ji-y>.MainStorylineSheet-module_scaler__jscn7{transform:scale(.98)}}@media (min-width:1921px){.MainStorylineSheet-module_inactive__1Ji-y>.MainStorylineSheet-module_scaler__jscn7{transform:scale(.99)}}

data/entry_types/scrolled/package/widgets/mainStorylineSheet.js

@@ -0,0 +1,100 @@
+import { useIsomorphicLayoutEffect, frontend } from 'pageflow-scrolled/frontend';
+import React, { useState, useRef } from 'react';
+import classNames from 'classnames';
+
+var styles = {"inactive":"MainStorylineSheet-module_inactive__1Ji-y","scaler":"MainStorylineSheet-module_scaler__jscn7","fixedPositioningContainingBlock":"MainStorylineSheet-module_fixedPositioningContainingBlock__3Pz_y"};
+
+var _jsxFileName = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/widgets/mainStorylineSheet/MainStorylineSheet.js";
+function MainStorylineSheet({
+  activeExcursion,
+  children
+}) {
+  const excursionActive = !!activeExcursion;
+  const activeExcursionId = activeExcursion === null || activeExcursion === void 0 ? void 0 : activeExcursion.id;
+  const [previousScrollY, setPreviousScrollY] = useState(null);
+  const [inactive, setInactive] = useState(false);
+  const [fixedPositioningContainingBlock, setFixedPositioningContainingBlock] = useState(false);
+  const previousThemeColorRef = useRef();
+  const transitionTimeoutRef = useRef();
+  useIsomorphicLayoutEffect(() => {
+    const themeColorMeta = document.querySelector('meta[name="theme-color"]');
+    if (excursionActive) {
+      setPreviousScrollY(window.scrollY);
+      setInactive(true);
+      applyFixedPositioningContainingBlockOffset();
+      previousThemeColorRef.current = themeColorMeta.getAttribute('content');
+      themeColorMeta.setAttribute('content', '#000');
+    } else {
+      setInactive(false);
+      scheduleFixedPositioningContainingBlockReset();
+      if (previousThemeColorRef.current) {
+        themeColorMeta.setAttribute('content', previousThemeColorRef.current);
+      }
+    }
+    function applyFixedPositioningContainingBlockOffset() {
+      setFixedPositioningContainingBlock(true);
+      if (transitionTimeoutRef.current) {
+        clearTimeout(transitionTimeoutRef.current);
+      }
+    }
+    function scheduleFixedPositioningContainingBlockReset() {
+      const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      if (prefersReducedMotion) {
+        setFixedPositioningContainingBlock(false);
+      } else {
+        const transitionDuration = 300;
+        const buffer = 100;
+        transitionTimeoutRef.current = setTimeout(() => {
+          setFixedPositioningContainingBlock(false);
+        }, transitionDuration + buffer);
+      }
+    }
+  }, [excursionActive]);
+  useIsomorphicLayoutEffect(() => {
+    if (activeExcursionId) {
+      window.scrollTo(0, 0);
+    } else {
+      setPreviousScrollY(previousScrollY => {
+        if (previousScrollY !== null) {
+          window.queueMicrotask(() => window.scrollTo(0, previousScrollY));
+        }
+        return previousScrollY;
+      });
+    }
+  }, [activeExcursionId]);
+  function resetFixedPositioningContainingBlock(event) {
+    if (event.propertyName === 'filter' && event.target === event.currentTarget && !inactive) {
+      clearTimeout(transitionTimeoutRef.current);
+      setFixedPositioningContainingBlock(false);
+    }
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    inert: inactive ? 'true' : undefined,
+    style: {
+      '--previous-scroll-y': `${previousScrollY || 0}px`
+    },
+    className: classNames({
+      [styles.inactive]: inactive,
+      [styles.fixedPositioningContainingBlock]: fixedPositioningContainingBlock
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 87,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.scaler,
+    onTransitionEnd: fixedPositioningContainingBlock ? resetFixedPositioningContainingBlock : undefined,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 93,
+      columnNumber: 7
+    }
+  }, children));
+}
+
+frontend.widgetTypes.register('mainStorylineSheet', {
+  component: MainStorylineSheet
+});

data/entry_types/scrolled/package/widgets/textInlineFileRights.css

@@ -1 +1 @@
-.TextInlineFileRights-module_text__1tT0W{font-size:14px;position:relative;z-index:1;color:var(--content-text-color)}.TextInlineFileRights-module_text__1tT0W li{text-align:right;padding-top:.2em}.TextInlineFileRights-module_forSection__22xHD{position:absolute;bottom:0;right:0}.TextInlineFileRights-module_forSection__22xHD li{padding:0 .4em .2em 0}.TextInlineFileRights-module_text__1tT0W a{color:inherit;-webkit-text-decoration-color:color-mix(in srgb,currentColor,transparent);text-decoration-color:color-mix(in srgb,currentColor,transparent)}.TextInlineFileRights-module_text__1tT0W span{opacity:.7}
+.colors-module_contentColorScope__3ypcw{--theme-light-content-surface-color:var(--root-light-content-surface-color);--theme-dark-content-surface-color:var(--root-dark-content-surface-color);--theme-light-content-text-color:var(--root-light-content-text-color);--theme-dark-content-text-color:var(--root-dark-content-text-color)}.TextInlineFileRights-module_text__1tT0W{font-size:14px;position:relative;z-index:2;color:var(--content-text-color);--ai-indicator-letter-color:var(--theme-light-content-surface-color,#fff)}.TextInlineFileRights-module_text__1tT0W.TextInlineFileRights-module_darkBackground__3oIUp{--ai-indicator-letter-color:var(--theme-dark-content-surface-color,#101010)}.TextInlineFileRights-module_text__1tT0W li{text-align:right;justify-content:flex-end;padding-top:.2em}.TextInlineFileRights-module_text__1tT0W li[data-rights] [data-part=rights]:before{content:"\A9  ";opacity:.7}.TextInlineFileRights-module_text__1tT0W li:only-child [data-label]{display:none}.TextInlineFileRights-module_withBackdrop__2cRu8 li{padding:.1em .3em;border-radius:.25rem;margin:.2em 0 0 auto;background-color:color-mix(in srgb,var(--theme-light-content-surface-color,#fff),transparent);color:var(--theme-dark-content-text-color,#222);width:-moz-fit-content;width:fit-content}.TextInlineFileRights-module_withBackdrop__2cRu8.TextInlineFileRights-module_darkBackground__3oIUp li{background-color:color-mix(in srgb,var(--theme-dark-content-surface-color,#101010),transparent);color:var(--theme-light-content-text-color,#fff)}.TextInlineFileRights-module_forSection__22xHD{position:absolute;bottom:0;right:0}.TextInlineFileRights-module_forSection__22xHD li{margin:0 .2em .1em auto}.TextInlineFileRights-module_text__1tT0W a{color:inherit;-webkit-text-decoration-color:color-mix(in srgb,currentColor,transparent);text-decoration-color:color-mix(in srgb,currentColor,transparent)}.TextInlineFileRights-module_text__1tT0W [data-label]{opacity:.7}

data/entry_types/scrolled/package/widgets/textInlineFileRights.js

@@ -1,35 +1,57 @@
-import { frontend } from 'pageflow-scrolled/frontend';
-import React from 'react';
+import { useDarkBackground, useContentElementEditorState, frontend } from 'pageflow-scrolled/frontend';
+import React, { useEffect } from 'react';
 import classNames from 'classnames';
 
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
+var styles = {"darkContentSurfaceColor":"var(--theme-dark-content-surface-color, #101010)","lightContentSurfaceColor":"var(--theme-light-content-surface-color, #fff)","darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","text":"TextInlineFileRights-module_text__1tT0W","darkBackground":"TextInlineFileRights-module_darkBackground__3oIUp","withBackdrop":"TextInlineFileRights-module_withBackdrop__2cRu8","forSection":"TextInlineFileRights-module_forSection__22xHD"};
 
-var styles = {"text":"TextInlineFileRights-module_text__1tT0W","forSection":"TextInlineFileRights-module_forSection__22xHD"};
-
-function TextInlineFileRights(_ref) {
-  var context = _ref.context,
-      children = _ref.children;
-
-  if (context === 'insideElement' || context === 'playerControls') {
+var _jsxFileName = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/widgets/textInlineFileRights/TextInlineFileRights.js";
+function TextInlineFileRights({
+  configuration,
+  context,
+  children
+}) {
+  const darkBackground = useDarkBackground();
+  const {
+    setTransientState
+  } = useContentElementEditorState();
+  const supported = context !== 'insideElement' && context !== 'playerControls';
+  useEffect(() => {
+    if (supported) {
+      setTransientState({
+        hasFileRights: true
+      });
+    }
+    return () => {
+      if (supported) {
+        setTransientState({
+          hasFileRights: false
+        });
+      }
+    };
+  }, [setTransientState, supported]);
+  if (!supported) {
     return null;
   }
-
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.text, _defineProperty({}, styles.forSection, context === 'section'))
-  }, /*#__PURE__*/React.createElement("div", null, children));
+    className: classNames(styles.text, {
+      [styles.forSection]: context === 'section',
+      [styles.withBackdrop]: context === 'section' || configuration.showTextInlineFileRightsBackdrop,
+      [styles.darkBackground]: darkBackground
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 29,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 34,
+      columnNumber: 7
+    }
+  }, children));
 }
 
 frontend.widgetTypes.register('textInlineFileRights', {

data/entry_types/scrolled/package/widgets-server.js

@@ -2,3 +2,5 @@ import 'pageflow-scrolled/widgets/defaultNavigation';
 import 'pageflow-scrolled/widgets/consentBar';
 import 'pageflow-scrolled/widgets/iconInlineFileRights';
 import 'pageflow-scrolled/widgets/textInlineFileRights';
+import 'pageflow-scrolled/widgets/iconScrollIndicator';
+import 'pageflow-scrolled/widgets/mainStorylineSheet';

data/entry_types/scrolled/spec/factories/chapters.rb

@@ -1,7 +1,20 @@
 module PageflowScrolled
   FactoryBot.define do
     factory :scrolled_chapter, class: Chapter do
-      revision
+      transient do
+        revision { nil }
+      end
+
+      before(:create) do |chapter, evaluator|
+        if chapter.storyline.nil?
+          revision = evaluator.revision || build(:revision)
+          chapter.storyline = Storyline.all_for_revision(revision).first ||
+                              create(:scrolled_storyline,
+                                     revision:,
+                                     configuration: {main: true})
+        end
+      end
+
       configuration do
         {
           title: 'chapter title'

data/entry_types/scrolled/spec/factories/content_elements.rb

@@ -10,7 +10,7 @@ module PageflowScrolled
       before(:create) do |content_element, evaluator|
         if evaluator.revision
           chapter = create(:scrolled_chapter, revision: evaluator.revision)
-          content_element.section = create(:section, chapter: chapter)
+          content_element.section = create(:section, chapter:)
         end
       end
     end