pageflow 15.7.1 → 15.8.0

data/entry_types/scrolled/package/package.json

@@ -8,6 +8,7 @@
   "license": "MIT",
   "dependencies": {
     "@egjs/view360": "^3.4.3",
+    "@headlessui/react": "^1.6.6",
     "core-js": "^3.6.5",
     "debounce": "^1.2.0",
     "deep-assign": "^3.0.0",
@@ -47,7 +48,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.1",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "^14.4.3",
     "@typescript-eslint/eslint-plugin": "2.x",
     "@typescript-eslint/parser": "2.x",
     "babel-eslint": "10.x",
@@ -77,6 +78,6 @@
     "lint": "eslint .",
     "start-storybook": "start-storybook -s .storybook/static",
     "build-storybook": "build-storybook -s .storybook/static -o .storybook/out",
-    "snapshot": "STORYBOOK_SPLIT=true build-storybook --quiet -s .storybook/static -o .storybook/out && PERCY_TOKEN=${PERCY_TOKEN:-$PT} percy-storybook --widths=1280 --build_dir=.storybook/out"
+    "snapshot": "build-storybook --quiet -s .storybook/static -o .storybook/out && PERCY_TOKEN=${PERCY_TOKEN:-$PT} percy-storybook --widths=1280 --build_dir=.storybook/out"
   }
 }

data/entry_types/scrolled/package/testHelpers.js

@@ -128,12 +128,16 @@ function normalizeSeed() {
         themeOptions: themeOptions,
         themeAssets: themeAssets
       }),
-      additionalSeedData: additionalSeedData || {}
+      additionalSeedData: additionalSeedData || {
+        frontendVersion: 1
+      }
     },
     collections: {
       entries: normalizedEntries,
       imageFiles: normalizeCollection(imageFiles, {
         isReady: true,
+        basename: 'image',
+        extension: 'jpg',
         width: 1920,
         height: 1279,
         configuration: {}
@@ -183,7 +187,13 @@ function normalizeSections() {
     }, sectionDefaults)];
   }
 
-  return normalizeCollection(sections, sectionDefaults);
+  return normalizeCollection(sections, sectionDefaults).map(function (section) {
+    return _objectSpread2(_objectSpread2({}, section), {}, {
+      configuration: _objectSpread2({
+        transition: sectionDefaults.configuration.transition
+      }, section.configuration)
+    });
+  });
 }
 
 function normalizeChapters() {

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

@@ -1,4 +1,4 @@
-.DefaultNavigation-module_navigationBar__2RK0h{--default-navigation-bar-height:var(--theme-default-navigation-bar-height,50px);--default-navigation-scroller-top:var(--theme-default-navigation-scroller-top,0);--default-navigation-scroll-button-top:var(--theme-default-navigation-scroll-button-top,5px);--default-navigation-chapter-link-height:var(--theme-default-navigation-chapter-link-height,50px);--default-navigation-progress-indicator-height:var(--theme-default-navigation-progress-indicator-height,10px);font-family:var(--theme-widget-font-family);position:fixed;top:calc(-1*var(--default-navigation-bar-height));transition:top .15s;z-index:10000;width:100%;text-align:center;height:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.DefaultNavigation-module_navigationBarExpanded__C3sLq{top:0}.DefaultNavigation-module_navigationBarContentWrapper__3narH{position:relative;z-index:2;background-color:var(--theme-widget-surface-color);color:var(--theme-widget-on-surface-color);height:var(--default-navigation-bar-height);box-sizing:border-box;padding-top:var(--default-navigation-scroller-top)}.DefaultNavigation-module_menuIcon__2bb8s{position:absolute;top:0;left:12px;height:var(--default-navigation-bar-height)}.DefaultNavigation-module_contextIcons__2e65s{position:absolute;top:0;right:12px;display:flex}.DefaultNavigation-module_contextIcons__2e65s>*{pointer-events:auto}.DefaultNavigation-module_contextIcon__ELsqa{cursor:pointer;width:40px;height:var(--default-navigation-bar-height);color:var(--theme-widget-secondary-color);fill:currentcolor;stroke:currentColor}.DefaultNavigation-module_contextIcon__ELsqa svg{width:35px;height:35px;margin:7px 2px}.DefaultNavigation-module_contextIcon__ELsqa:hover,div:focus-within>.DefaultNavigation-module_contextIcon__ELsqa{color:var(--theme-widget-primary-color)}.DefaultNavigation-module_logo__3gUbx{top:0;left:15px;height:100%;max-width:15%}.DefaultNavigation-module_logo__3gUbx img{height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain}.DefaultNavigation-module_chapterList__3VoXX{padding:0;margin:0;list-style:none;display:flex}.DefaultNavigation-module_chapterListItem__1YF5e{position:relative;padding:0 5px;border-right:1px solid #e9e9e9}.DefaultNavigation-module_chapterListItem__1YF5e:last-of-type{border-right:none}.DefaultNavigation-module_navigationTooltip__26Fvn{opacity:1!important;box-shadow:0 0 .3125rem rgba(0,0,0,.2)}.DefaultNavigation-module_progressBar__1jvov{position:relative;background-color:hsla(0,0%,76.1%,.8);height:8px;width:100%}.DefaultNavigation-module_progressIndicator__2d_e3{position:absolute;top:0;left:0;width:0;height:100%;background-color:var(--theme-accent-color)}@media screen and (max-width:767px){.DefaultNavigation-module_logo__3gUbx{max-width:30%}.DefaultNavigation-module_hasChapters__3ab-r .DefaultNavigation-module_logo__3gUbx{left:65px}.DefaultNavigation-module_navigationChapters__3M6zh{display:block;position:fixed;top:calc(var(--default-navigation-bar-height) + var(--default-navigation-progress-indicator-height));left:0;background:var(--theme-widget-background-color);width:100vw;bottom:0;-ms-scroll-chaining:none;overscroll-behavior:contain;overflow:scroll}.DefaultNavigation-module_navigationChaptersHidden__2TrUo{display:none}.DefaultNavigation-module_chapterList__3VoXX{display:block;padding-top:var(--default-navigation-bar-height);box-sizing:border-box;min-height:101%}.DefaultNavigation-module_chapterListItem__1YF5e{width:80vw;padding:25px 10vw;border-right:none}.DefaultNavigation-module_chapterListItem__1YF5e:after,.DefaultNavigation-module_chapterListItem__1YF5e:before{display:table;content:" ";border-top:1px solid #646464;width:14%;margin:0 43%;transition:width .15s,margin .15s}.DefaultNavigation-module_chapterListItem__1YF5e:hover:after,.DefaultNavigation-module_chapterListItem__1YF5e:hover:before{border-top:1px solid var(--theme-widget-primary-color);width:80%;margin:0 10%}.DefaultNavigation-module_chapterListItem__1YF5e p{margin-top:0}.DefaultNavigation-module_progressBar__1jvov{height:var(--default-navigation-progress-indicator-height)}}@media print{.DefaultNavigation-module_navigationBar__2RK0h{position:relative;top:0;height:auto}.DefaultNavigation-module_logo__3gUbx{left:0}.DefaultNavigation-module_chapterList__3VoXX,.DefaultNavigation-module_contextIcons__2e65s,.DefaultNavigation-module_progressBar__1jvov{display:none}}@media (min-width:768px){.HamburgerIcon-module_burgerMenuIconContainer__3aBkk{display:none}}.HamburgerIcon-module_burgerMenuIcon__1WUV0{outline:none}
+.DefaultNavigation-module_navigationBar__2RK0h{--default-navigation-bar-height:var(--theme-default-navigation-bar-height,50px);--default-navigation-scroller-top:var(--theme-default-navigation-scroller-top,0);--default-navigation-scroll-button-top:var(--theme-default-navigation-scroll-button-top,5px);--default-navigation-chapter-link-height:var(--theme-default-navigation-chapter-link-height,50px);--default-navigation-progress-indicator-height:var(--theme-default-navigation-progress-indicator-height,10px);font-family:var(--theme-widget-font-family);position:fixed;top:calc(-1*var(--default-navigation-bar-height));transition:top .15s;z-index:10000;width:100%;text-align:center;height:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.DefaultNavigation-module_navigationBarExpanded__C3sLq{top:0}.DefaultNavigation-module_navigationBarContentWrapper__3narH{position:relative;z-index:2;background-color:var(--theme-widget-surface-color);color:var(--theme-widget-on-surface-color);height:var(--default-navigation-bar-height);box-sizing:border-box;padding-top:var(--default-navigation-scroller-top)}.DefaultNavigation-module_menuIcon__2bb8s{position:absolute;top:0;left:12px;height:var(--default-navigation-bar-height)}.DefaultNavigation-module_contextIcons__2e65s{position:absolute;top:0;right:12px;display:flex}.DefaultNavigation-module_contextIcons__2e65s>*{pointer-events:auto}.DefaultNavigation-module_contextIcon__ELsqa{cursor:pointer;width:40px;height:var(--default-navigation-bar-height);color:var(--theme-widget-secondary-color);fill:currentcolor;stroke:currentColor}.DefaultNavigation-module_contextIcon__ELsqa svg{width:35px;height:35px;margin:7px 2px}.DefaultNavigation-module_contextIcon__ELsqa:hover,div:focus-within>.DefaultNavigation-module_contextIcon__ELsqa{color:var(--theme-widget-primary-color)}.DefaultNavigation-module_logo__3gUbx{top:0;left:15px;height:100%;max-width:15%}.DefaultNavigation-module_logo__3gUbx img{height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain}.DefaultNavigation-module_chapterList__3VoXX{padding:0;margin:0;list-style:none;display:flex}.DefaultNavigation-module_chapterListItem__1YF5e{position:relative;padding:0 5px;border-right:1px solid #e9e9e9}.DefaultNavigation-module_chapterListItem__1YF5e:last-of-type{border-right:none}.DefaultNavigation-module_navigationTooltip__26Fvn{opacity:1!important;box-shadow:0 0 .3125rem rgba(0,0,0,.2)}.DefaultNavigation-module_progressBar__1jvov{position:relative;background-color:var(--theme-default-navigation-progress-bar-background-color,hsla(0,0%,76.1%,.8));height:8px;width:100%}.DefaultNavigation-module_progressIndicator__2d_e3{position:absolute;top:0;left:0;width:0;height:100%;background-color:var(--theme-default-navigation-progress-bar-indicator-color,var(--theme-accent-color))}@media screen and (max-width:767px){.DefaultNavigation-module_logo__3gUbx{max-width:30%}.DefaultNavigation-module_hasChapters__3ab-r .DefaultNavigation-module_logo__3gUbx{left:65px}.DefaultNavigation-module_navigationChapters__3M6zh{display:block;position:fixed;top:calc(var(--default-navigation-bar-height) + var(--default-navigation-progress-indicator-height));left:0;background:var(--theme-widget-background-color);width:100vw;bottom:0;-ms-scroll-chaining:none;overscroll-behavior:contain;overflow:scroll}.DefaultNavigation-module_navigationChaptersHidden__2TrUo{display:none}.DefaultNavigation-module_chapterList__3VoXX{display:block;padding-top:var(--default-navigation-bar-height);box-sizing:border-box;min-height:101%}.DefaultNavigation-module_chapterListItem__1YF5e{width:80vw;padding:25px 10vw;border-right:none}.DefaultNavigation-module_chapterListItem__1YF5e:after,.DefaultNavigation-module_chapterListItem__1YF5e:before{display:table;content:" ";border-top:1px solid #646464;width:14%;margin:0 43%;transition:width .15s,margin .15s}.DefaultNavigation-module_chapterListItem__1YF5e:hover:after,.DefaultNavigation-module_chapterListItem__1YF5e:hover:before{border-top:1px solid var(--theme-widget-primary-color);width:80%;margin:0 10%}.DefaultNavigation-module_chapterListItem__1YF5e p{margin-top:0}.DefaultNavigation-module_progressBar__1jvov{height:var(--default-navigation-progress-indicator-height)}}@media print{.DefaultNavigation-module_navigationBar__2RK0h{position:relative;top:0;height:auto}.DefaultNavigation-module_logo__3gUbx{left:0}.DefaultNavigation-module_chapterList__3VoXX,.DefaultNavigation-module_contextIcons__2e65s,.DefaultNavigation-module_progressBar__1jvov{display:none}}@media (min-width:768px){.HamburgerIcon-module_burgerMenuIconContainer__3aBkk{display:none}}.HamburgerIcon-module_burgerMenuIcon__1WUV0{outline:none}
 
 /*!
  * Hamburgers

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

@@ -1,4 +1,4 @@
-import { useI18n, utils, Tooltip, useFileRights, useLegalInfo, useCredits, Widget, ThemeIcon, usePhonePlatform, useShareProviders, useShareUrl, useMediaMuted, useTheme, useOnUnmuteMedia, useChapters, useCurrentChapter, useScrollPosition, frontend } from 'pageflow-scrolled/frontend';
+import { useI18n, utils, Tooltip, useFileRights, useLegalInfo, useCredits, Widget, ThemeIcon, useShareUrl, useMediaMuted, useTheme, useOnUnmuteMedia, useChapters, useCurrentChapter, usePhonePlatform, useShareProviders, useScrollPosition, frontend } from 'pageflow-scrolled/frontend';
 import React, { useRef, useEffect, useCallback, useState } from 'react';
 import classNames from 'classnames';
 import { media } from 'pageflow/frontend';
@@ -177,8 +177,8 @@ function LegalInfoMenu(props) {
     role: "creditsBoxFooter"
   }));
   return /*#__PURE__*/React.createElement(Tooltip, {
-    horizontalOffset: -30,
-    arrowPos: 120,
+    horizontalOffset: props.tooltipOffset - 30,
+    arrowPos: 120 - props.tooltipOffset,
     content: content
   }, /*#__PURE__*/React.createElement("button", {
     className: classNames(styles.contextIcon),
@@ -191,11 +191,8 @@ function LegalInfoMenu(props) {
 
 var styles$4 = {"shareIcon":"SharingMenu-module_shareIcon__2iW2l","sharingTooltip":"SharingMenu-module_sharingTooltip__2Tyev","shareLinkContainer":"SharingMenu-module_shareLinkContainer__3-3W6","shareLink":"SharingMenu-module_shareLink__3PdRE"};
 
-function SharingMenu() {
-  var isPhonePlatform = usePhonePlatform();
-  var shareProviders = useShareProviders({
-    isPhonePlatform: isPhonePlatform
-  });
+function SharingMenu(_ref) {
+  var shareProviders = _ref.shareProviders;
   var shareUrl = useShareUrl();
 
   var _useI18n = useI18n(),
@@ -217,21 +214,16 @@ function SharingMenu() {
       }), shareProvider.name));
     });
   }
-
-  if (shareProviders.length > 0) {
-    return /*#__PURE__*/React.createElement(Tooltip, {
-      horizontalOffset: -70,
-      arrowPos: 160,
-      content: renderShareLinks(shareProviders)
-    }, /*#__PURE__*/React.createElement("button", {
-      className: classNames(styles.contextIcon),
-      title: t('pageflow_scrolled.public.navigation.share')
-    }, /*#__PURE__*/React.createElement(ThemeIcon, {
-      name: "share"
-    })));
-  } else {
-    return null;
-  }
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    horizontalOffset: -70,
+    arrowPos: 160,
+    content: renderShareLinks(shareProviders)
+  }, /*#__PURE__*/React.createElement("button", {
+    className: classNames(styles.contextIcon),
+    title: t('pageflow_scrolled.public.navigation.share')
+  }, /*#__PURE__*/React.createElement(ThemeIcon, {
+    name: "share"
+  })));
 }
 
 var styles$5 = {"button":"ToggleMuteButton-module_button__1ACmo","animate":"ToggleMuteButton-module_animate__pd1yK","pulse":"ToggleMuteButton-module_pulse__2UN7Q"};
@@ -502,9 +494,11 @@ function Scroller(_ref) {
   }
 }
 
-function DefaultNavigation(props) {
+function DefaultNavigation(_ref) {
   var _chapters$, _chapters$2, _classNames2;
 
+  var configuration = _ref.configuration;
+
   var _useState = useState(true),
       _useState2 = _slicedToArray(_useState, 2),
       navExpanded = _useState2[0],
@@ -522,9 +516,13 @@ function DefaultNavigation(props) {
 
   var chapters = useChapters();
   var currentChapter = useCurrentChapter();
-  useScrollPosition(function (_ref) {
-    var prevPos = _ref.prevPos,
-        currPos = _ref.currPos;
+  var isPhonePlatform = usePhonePlatform();
+  var shareProviders = useShareProviders({
+    isPhonePlatform: isPhonePlatform
+  });
+  useScrollPosition(function (_ref2) {
+    var prevPos = _ref2.prevPos,
+        currPos = _ref2.currPos;
     var expand = currPos.y > prevPos.y || // Mobile Safari reports positive scroll position
     // during scroll bounce animation when scrolling
     // back to the top. Make sure navigation bar
@@ -532,9 +530,9 @@ function DefaultNavigation(props) {
     currPos.y >= 0;
     if (expand !== navExpanded) setNavExpanded(expand);
   }, [navExpanded]);
-  useScrollPosition(function (_ref2) {
-    var prevPos = _ref2.prevPos,
-        currPos = _ref2.currPos;
+  useScrollPosition(function (_ref3) {
+    var prevPos = _ref3.prevPos,
+        currPos = _ref3.currPos;
     var current = currPos.y * -1; // Todo: Memoize and update on window resize
 
     var total = document.body.clientHeight - window.innerHeight;
@@ -587,8 +585,9 @@ function DefaultNavigation(props) {
     }, renderChapterLinks(chapters))));
   }
 
+  var hideSharingButton = configuration.hideSharingButton || !shareProviders.length;
   return /*#__PURE__*/React.createElement("header", {
-    className: classNames(styles.navigationBar, (_classNames2 = {}, _defineProperty(_classNames2, styles.navigationBarExpanded, navExpanded || !mobileNavHidden), _defineProperty(_classNames2, styles.hasChapters, hasChapters), _classNames2))
+    className: classNames(styles.navigationBar, (_classNames2 = {}, _defineProperty(_classNames2, styles.navigationBarExpanded, navExpanded || !isPhonePlatform && configuration.fixedOnDesktop || !mobileNavHidden), _defineProperty(_classNames2, styles.hasChapters, hasChapters), _classNames2))
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.navigationBarContentWrapper
   }, hasChapters && /*#__PURE__*/React.createElement(HamburgerIcon, {
@@ -596,7 +595,11 @@ function DefaultNavigation(props) {
     mobileNavHidden: mobileNavHidden
   }), /*#__PURE__*/React.createElement(SkipLinks, null), /*#__PURE__*/React.createElement(Logo, null), renderNav(), /*#__PURE__*/React.createElement("div", {
     className: classNames(styles.contextIcons)
-  }, /*#__PURE__*/React.createElement(ToggleMuteButton, null), /*#__PURE__*/React.createElement(LegalInfoMenu, null), /*#__PURE__*/React.createElement(SharingMenu, null))), /*#__PURE__*/React.createElement("div", {
+  }, !configuration.hideToggleMuteButton && /*#__PURE__*/React.createElement(ToggleMuteButton, null), /*#__PURE__*/React.createElement(LegalInfoMenu, {
+    tooltipOffset: hideSharingButton ? -40 : 0
+  }), !hideSharingButton && /*#__PURE__*/React.createElement(SharingMenu, {
+    shareProviders: shareProviders
+  }))), /*#__PURE__*/React.createElement("div", {
     className: styles.progressBar,
     onMouseEnter: handleProgressBarMouseEnter
   }, /*#__PURE__*/React.createElement("span", {

data/lib/pageflow/entry_type.rb

@@ -5,7 +5,7 @@ module Pageflow
   class EntryType
     # @api private
     attr_reader :name, :frontend_app, :editor_fragment_renderer, :configuration, :editor_app,
-                :theme_files
+                :theme_files, :web_app_manifest
 
     # @param name [String] A unique name.
     #
@@ -27,14 +27,18 @@ module Pageflow
     #   entry type and which Paperclip styles shall be processed:
     #   `{logo: {content_type: %r{^image/}, styles: {small:
     #   '300x300>'}}`.
+    #
+    # @param web_app_manifest [#call] Receives published entry and
+    #   returns JSON for webmanifest file.
     def initialize(name:, frontend_app:, editor_fragment_renderer:, configuration:, editor_app: nil,
-                   theme_files: {})
+                   theme_files: {}, web_app_manifest: nil)
       @name = name
       @frontend_app = frontend_app
       @editor_fragment_renderer = editor_fragment_renderer
       @configuration = configuration
       @editor_app = editor_app
       @theme_files = theme_files
+      @web_app_manifest = web_app_manifest
     end
   end
 end

data/lib/pageflow/version.rb

@@ -1,3 +1,3 @@
 module Pageflow
-  VERSION = '15.7.1'.freeze
+  VERSION = '15.8.0'.freeze
 end