pageflow 16.0.0 → 16.1.0

data/entry_types/scrolled/package/frontend/{PhonePlatformContext-f6093cc6.js → i18n-ddd92820.js}

@@ -1,9 +1,8 @@
-import { browser } from 'pageflow/frontend';
-import React, { useReducer, useMemo, useCallback, createContext as createContext$1, useContext, useState, useEffect } from 'react';
-import I18n from 'i18n-js';
+import React, { useReducer, useMemo, useCallback, createContext as createContext$1, useContext } from 'react';
 import { createContext, useContextSelector } from 'use-context-selector';
 import { createSelectorCreator, defaultMemoize, createSelector } from 'reselect';
 import slugify from 'slugify';
+import I18n from 'i18n-js';
 
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
@@ -112,6 +111,22 @@ function _objectSpread2(target) {
   return target;
 }
 
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+
 var PREFIX = 'PAGEFLOW_SCROLLED_COLLECTION';
 var RESET = "".concat(PREFIX, "_RESET");
 var ADD = "".concat(PREFIX, "_ADD");
@@ -215,6 +230,22 @@ function getItem(state, collectionName, key) {
     return state[collectionName].items[key];
   }
 }
+function createMultipleItemsSelector(collectionNames, filter) {
+  return createSelector.apply(void 0, _toConsumableArray(collectionNames.map(function (collectionName) {
+    return function (collections) {
+      return collections[collectionName];
+    };
+  })).concat([function () {
+    for (var _len = arguments.length, collections = new Array(_len), _key = 0; _key < _len; _key++) {
+      collections[_key] = arguments[_key];
+    }
+
+    return collectionNames.reduce(function (result, collectionName, index) {
+      result[collectionName] = toOrderedItems(collections[index]);
+      return result;
+    }, {});
+  }]));
+}
 function createItemsSelector(collectionName, filter) {
   if (filter) {
     var itemsSelector = createItemsSelector(collectionName);
@@ -227,17 +258,20 @@ function createItemsSelector(collectionName, filter) {
 
   return createSelector(function (collections) {
     return collections[collectionName];
-  }, function (collection) {
-    if (collection) {
-      var items = collection.items;
-      return collection.order.map(function (key) {
-        return items[key];
-      });
-    } else {
-      return [];
-    }
-  });
+  }, toOrderedItems);
 }
+
+function toOrderedItems(collection) {
+  if (collection) {
+    var items = collection.items;
+    return collection.order.map(function (key) {
+      return items[key];
+    });
+  } else {
+    return [];
+  }
+}
+
 var createShallowEqualArraysSelector = createSelectorCreator(defaultMemoize, shallowEqualArrays);
 
 function shallowEqualArrays(a, b) {
@@ -304,6 +338,14 @@ function useEntryStateCollectionItems(collectionName, filter) {
     return itemsSelector(entryState.collections);
   });
 }
+function useMultipleEntryStateCollectionItems(collectionNames) {
+  var multipleItemsSelector = useMemo(function () {
+    return createMultipleItemsSelector(collectionNames);
+  }, [collectionNames]);
+  return useEntryState(function (entryState) {
+    return multipleItemsSelector(entryState.collections);
+  });
+}
 
 /**
  * Returns data generated by a Ruby lambda registered server
@@ -324,6 +366,15 @@ function useAdditionalSeedData(name) {
   return config.additionalSeedData[name];
 }
 
+function useContentElementConsentVendor(_ref) {
+  var contentElementId = _ref.contentElementId;
+  var config = useEntryStateConfig();
+  var vendorName = config.contentElementConsentVendors[contentElementId];
+  return config.consentVendors.find(function (vendor) {
+    return vendor.name === vendorName;
+  });
+}
+
 /**
  * Returns a nested data structure representing the metadata of the entry.
  *
@@ -600,21 +651,52 @@ function sectionData(section) {
 }
 
 function useSectionContentElements(_ref2) {
-  var sectionId = _ref2.sectionId;
+  var sectionId = _ref2.sectionId,
+      layout = _ref2.layout;
   var filterBySectionId = useCallback(function (contentElement) {
     return contentElement.sectionId === sectionId;
   }, [sectionId]);
   var contentElements = useEntryStateCollectionItems('contentElements', filterBySectionId);
-  return contentElements.map(function (item) {
+  return contentElements.map(function (contentElement) {
+    var position = getPosition(contentElement, layout);
     return {
-      id: item.id,
-      permaId: item.permaId,
-      type: item.typeName,
-      position: item.configuration.position,
-      props: item.configuration
+      id: contentElement.id,
+      permaId: contentElement.permaId,
+      type: contentElement.typeName,
+      position: position,
+      width: getWidth(contentElement, position),
+      props: contentElement.configuration
     };
   });
 }
+var supportedPositions = {
+  center: ['inline', 'left', 'right'],
+  centerRagged: ['inline', 'left', 'right'],
+  left: ['inline', 'sticky'],
+  right: ['inline', 'sticky']
+};
+
+function getPosition(contentElement, layout) {
+  var position = contentElement.configuration.position;
+  return supportedPositions[layout || 'left'].includes(position) ? position : 'inline';
+}
+
+var legacyPositionWidths = {
+  wide: 2,
+  full: 3
+};
+var clampedWidthPositions = ['sticky', 'left', 'right'];
+
+function getWidth(contentElement, position) {
+  var width = typeof contentElement.configuration.width === 'number' ? contentElement.configuration.width : legacyPositionWidths[contentElement.configuration.position] || 0;
+
+  if (clampedWidthPositions.includes(position)) {
+    return Math.min(Math.max(width || 0, -2), 2);
+  } else {
+    return width;
+  }
+}
+
 function useChapter(_ref3) {
   var permaId = _ref3.permaId;
   var chapters = useChapters();
@@ -686,7 +768,7 @@ function expandUrls(collectionName, file, urlTemplates) {
     throw new Error("No file url templates found for ".concat(collectionName));
   }
 
-  var variants = file.variants || Object.keys(urlTemplates[collectionName]);
+  var variants = file.variants ? ['original'].concat(_toConsumableArray(file.variants)) : Object.keys(urlTemplates[collectionName]);
   var urls = variants.reduce(function (result, variant) {
     var url = getFileUrl(collectionName, file, variant, urlTemplates);
 
@@ -782,28 +864,31 @@ function getFileUrlTemplateHost(seed, collectionName, variant) {
 
 /**
  * Returns a string (comma-separated list) of copyrights of
- * all images used in the entry.
- * If none of the images has a rights attribute configured,
+ * all files used in the entry.
+ * If none of the files has a rights attribute configured,
  * it falls back to the default file rights of the entry's account,
  * otherwise returns an empty string
  *
  * @example
  *
  * const fileRights = useFileRights();
- * fileRights // => "author of image 1, author of image 2"
+ * fileRights // => "author of image 1, author of video 2"
  */
 
 function useFileRights() {
   var _config$defaultFileRi;
 
   var config = useEntryStateConfig();
-  var imageFiles = useEntryStateCollectionItems('imageFiles');
+  var fileCollectionNames = Object.keys(config.fileModelTypes);
+  var files = useMultipleEntryStateCollectionItems(fileCollectionNames);
   var defaultFileRights = (_config$defaultFileRi = config.defaultFileRights) === null || _config$defaultFileRi === void 0 ? void 0 : _config$defaultFileRi.trim();
-  return Array.from(new Set(imageFiles.map(function (imageFile) {
-    var _imageFile$rights;
+  return Array.from(new Set(Object.keys(files).flatMap(function (key) {
+    return files[key].map(function (file) {
+      var _file$rights;
 
-    return ((_imageFile$rights = imageFile.rights) === null || _imageFile$rights === void 0 ? void 0 : _imageFile$rights.trim()) || defaultFileRights;
-  }))).filter(Boolean).join(', ');
+      return ((_file$rights = file.rights) === null || _file$rights === void 0 ? void 0 : _file$rights.trim()) || defaultFileRights;
+    });
+  }))).sort().filter(Boolean).join(', ');
 }
 /**
  * Returns a nested data structure representing the legal info of the entry.
@@ -854,22 +939,6 @@ function useCredits() {
   return credits;
 }
 
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
 var qualities = ['medium', 'fullhd', '4k'];
 function useAvailableQualities(file) {
   if (!file) {
@@ -927,6 +996,40 @@ function updateContentElementConfiguration(_ref) {
   });
 }
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
 var LocaleContext = createContext$1('en');
 function setupI18n(_ref) {
   var defaultLocale = _ref.defaultLocale,
@@ -985,65 +1088,4 @@ function useI18n() {
   };
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-var BrowserFeaturesAvailableContext = createContext$1(); // Browser feature detection is not available during server side
-// rendering. To prevent mismatches during hydration, we keep features
-// disabled in the initial render. Since hydration only starts after
-// feature detection has finished, we can immediately re-render once
-// the provider has mounted.
-
-function BrowserFeaturesProvider(_ref) {
-  var children = _ref.children;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isAvailable = _useState2[0],
-      setIsAvailable = _useState2[1];
-
-  useEffect(function () {
-    return setIsAvailable(true);
-  }, []);
-  return /*#__PURE__*/React.createElement(BrowserFeaturesAvailableContext.Provider, {
-    value: isAvailable
-  }, children);
-}
-function useBrowserFeature(name) {
-  return useContext(BrowserFeaturesAvailableContext) && browser.has(name);
-}
-
-var PhonePlatformContext = React.createContext(false);
-
-export { useShareProviders as A, BrowserFeaturesProvider as B, useShareUrl as C, updateContentElementConfiguration as D, EntryStateProvider as E, _unsupportedIterableToArray as F, LocaleProvider as L, PhonePlatformContext as P, _objectWithoutProperties as _, _objectSpread2 as a, _defineProperty as b, _slicedToArray as c, useLocale as d, useLegalInfo as e, useTheme as f, useEntryMetadata as g, useNestedFiles as h, useFile as i, _toConsumableArray as j, useSectionContentElements as k, useAdditionalSeedData as l, useSectionsWithChapter as m, useBrowserFeature as n, useEntryStateDispatch as o, useSection as p, useChapter as q, useEntryStructure as r, useWidget as s, getFileUrlTemplateHost as t, useI18n as u, useAvailableQualities as v, setupI18n as w, useChapters as x, useCredits as y, useFileRights as z };
+export { useShareUrl as A, useLocale as B, updateContentElementConfiguration as C, _unsupportedIterableToArray as D, EntryStateProvider as E, LocaleProvider as L, _slicedToArray as _, _objectSpread2 as a, _defineProperty as b, useEntryMetadata as c, useNestedFiles as d, _objectWithoutProperties as e, useFile as f, useTheme as g, useSectionContentElements as h, useAdditionalSeedData as i, useSectionsWithChapter as j, useContentElementConsentVendor as k, _toConsumableArray as l, useChapter as m, useEntryStateDispatch as n, useSection as o, useEntryStructure as p, useWidget as q, getFileUrlTemplateHost as r, useAvailableQualities as s, setupI18n as t, useI18n as u, useChapters as v, useCredits as w, useFileRights as x, useLegalInfo as y, useShareProviders as z };

data/entry_types/scrolled/package/frontend/index-02378634.js

@@ -0,0 +1,118 @@
+import React, { useMemo, useEffect, useState, useCallback } from 'react';
+import ReactDOM from 'react-dom';
+import { _ as _slicedToArray, b as _defineProperty } from './i18n-ddd92820.js';
+import classNames from 'classnames';
+import { u as useDelayedBoolean } from './useContentElementEditorState-63045393.js';
+import { T as ToggleFullscreenCornerButton } from './ToggleFullscreenCornerButton-727cce0d.js';
+
+var styles = {"wrapper":"Fullscreen-module_wrapper__2MP7f"};
+
+function Fullscreen(_ref) {
+  var children = _ref.children;
+  var root = useMemo(function () {
+    return document.getElementById('fullscreenRoot');
+  }, []);
+  useEffect(function () {
+    var resetScrollbarPadding = adjustScrollbarPadding(function () {
+      document.getElementById('root').setAttribute('inert', true);
+      document.body.style.overflow = 'hidden';
+    });
+    return function () {
+      resetScrollbarPadding();
+      document.getElementById('root').removeAttribute('inert', true);
+      document.body.style.overflow = 'initial';
+    };
+  }, []);
+  return ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
+    className: styles.wrapper
+  }, children), root);
+} // Adapted from
+// https://github.com/tailwindlabs/headlessui/blob/9dff5456fa196cdc304e2ed17ef47962a9364ce7/packages/%40headlessui-react/src/hooks/document-overflow/adjust-scrollbar-padding.ts
+
+function adjustScrollbarPadding(hideScrollbar) {
+  var documentElement = document.documentElement;
+  var ownerWindow = document.defaultView || window;
+  var scrollbarWidthBefore = ownerWindow.innerWidth - documentElement.clientWidth;
+  hideScrollbar();
+  var scrollbarWidthAfter = documentElement.clientWidth - documentElement.offsetWidth;
+  var scrollbarWidth = scrollbarWidthBefore - scrollbarWidthAfter;
+  document.documentElement.style.paddingRight = "".concat(scrollbarWidth, "px");
+  return function () {
+    return document.documentElement.style.paddingRight = '0';
+  };
+}
+
+var styles$1 = {"wrapper":"index-module_wrapper__ilo7n","visible":"index-module_visible__6QUDn"};
+
+function FullscreenViewer(_ref) {
+  var contentElementId = _ref.contentElementId,
+      renderChildren = _ref.renderChildren,
+      renderFullscreenChildren = _ref.renderFullscreenChildren;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isFullscreen = _useState2[0],
+      setIsFullscreen = _useState2[1];
+
+  var isRendered = useDelayedBoolean(isFullscreen, {
+    fromTrueToFalse: 200
+  });
+  var isVisible = useDelayedBoolean(isFullscreen, {
+    fromFalseToTrue: 1
+  });
+  useEffect(function () {
+    function handlePopState() {
+      var _window$history$state;
+
+      setIsFullscreen(((_window$history$state = window.history.state) === null || _window$history$state === void 0 ? void 0 : _window$history$state.fullscreenContentElementId) === contentElementId);
+    }
+
+    window.addEventListener('popstate', handlePopState);
+    return function () {
+      return window.removeEventListener('popstate', handlePopState);
+    };
+  });
+  var enterFullscreen = useCallback(function () {
+    setIsFullscreen(true);
+
+    if (window.parent === window) {
+      window.history.pushState({
+        fullscreenContentElementId: contentElementId
+      }, '');
+    }
+  }, [contentElementId]);
+  var exitFullscreen = useCallback(function () {
+    var _window$history$state2;
+
+    setIsFullscreen(false);
+
+    if (((_window$history$state2 = window.history.state) === null || _window$history$state2 === void 0 ? void 0 : _window$history$state2.fullscreenContentElementId) === contentElementId && window.parent === window) {
+      window.history.back();
+    }
+  }, [contentElementId]);
+  useEffect(function () {
+    function handleKeyDown(event) {
+      if (event.key === 'Escape') {
+        exitFullscreen();
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown);
+    return function () {
+      return window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [exitFullscreen]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderChildren({
+    enterFullscreen: enterFullscreen,
+    isFullscreen: isFullscreen
+  }), isRendered && /*#__PURE__*/React.createElement(Fullscreen, null, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$1.wrapper, _defineProperty({}, styles$1.visible, isVisible))
+  }, renderFullscreenChildren({
+    exitFullscreen: exitFullscreen
+  }), /*#__PURE__*/React.createElement(ToggleFullscreenCornerButton, {
+    isFullscreen: true,
+    onExit: exitFullscreen
+  }))));
+}
+
+export { FullscreenViewer as F };