pageflow 17.1.0 → 17.2.0

data/entry_types/scrolled/package/frontend/i18n-493cd2a6.js

@@ -0,0 +1,93 @@
+import React, { createContext, useContext } from 'react';
+import { useEntryMetadata } from 'pageflow-scrolled/entryState';
+import I18n from 'i18n-js';
+
+const LocaleContext = createContext('en');
+function setupI18n({
+  defaultLocale,
+  locale,
+  translations
+}) {
+  I18n.defaultLocale = defaultLocale;
+  I18n.locale = locale;
+  I18n.translations = translations;
+}
+function LocaleProvider({
+  children
+}) {
+  const {
+    locale
+  } = useEntryMetadata() || {};
+  return /*#__PURE__*/React.createElement(LocaleContext.Provider, {
+    value: locale
+  }, children);
+}
+
+/**
+ * Obtain a locale to translate or format data in. Returns the
+ * configured locale of the current entry by default.
+ *
+ * Elements that are rendered on top of the entry in the editor
+ * preview or while reviewing an entry are part of the user interface
+ * rather than of the entry itself. Pass `"ui"` as `locale` option to
+ * obtain the locale of the user interface for those.
+ *
+ * @param {Object} [options]
+ * @param {"entry"|"ui"} [options.locale="entry"] -
+ *   Pass `"ui"` to obtain the locale of the user interface instead.
+ *   Note that this option selects which of the two locales to use. It
+ *   does not take a locale name.
+ *
+ * @example
+ * const locale = useLocale();
+ * date.toLocaleDateString(locale)
+ *
+ * const locale = useLocale({locale: 'ui'});
+ */
+function useLocale({
+  locale: scope = 'entry'
+} = {}) {
+  const entryLocale = useContext(LocaleContext);
+  if (!localeScopes.includes(scope)) {
+    throw new Error(`Unknown locale option '${scope}'. Pass either ${localeScopes.join(' or ')}.`);
+  }
+  return scope === 'ui' ? I18n.currentLocale() : entryLocale;
+}
+const localeScopes = ['entry', 'ui'];
+
+/**
+ * Use translations in frontend elements. Uses the configured locale
+ * of the current entry by default. Note that only translation keys
+ * from the `pageflow_scrolled.public` scope are universally
+ * available.
+ *
+ * to render translations for inline editing controls in the editor
+ * preview, you can pass `"ui"` as `locale` option and use
+ * translations from the `pageflow_scrolled.inline_editing` scope.
+ *
+ * @param {Object} [options]
+ * @param {"entry"|"ui"} [options.locale="entry"] -
+ *   Pass `"ui"` to use the locale of the user interface instead. Note
+ *   that this option selects which of the two locales to use. It does
+ *   not take a locale name.
+ *
+ * @example
+ * const {t} = useI18n();
+ * t('pageflow_scrolled.public.some.key')
+ *
+ * const {t} = useI18n({locale: 'ui'});
+ * t('pageflow_scrolled.inline_editing.some.key')
+ */
+function useI18n(options) {
+  const locale = useLocale(options);
+  return {
+    t(key, translateOptions) {
+      return I18n.t(key, {
+        ...translateOptions,
+        locale
+      });
+    }
+  };
+}
+
+export { LocaleProvider as L, useLocale as a, setupI18n as s, useI18n as u };

data/entry_types/scrolled/package/frontend/i18n-e06cac14.js

@@ -0,0 +1,100 @@
+import React, { createContext, useContext } from 'react';
+import { useEntryMetadata } from 'pageflow-scrolled/entryState';
+import I18n from 'i18n-js';
+
+var _jsxFileName = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/i18n.js";
+const LocaleContext = createContext('en');
+function setupI18n({
+  defaultLocale,
+  locale,
+  translations
+}) {
+  I18n.defaultLocale = defaultLocale;
+  I18n.locale = locale;
+  I18n.translations = translations;
+}
+function LocaleProvider({
+  children
+}) {
+  const {
+    locale
+  } = useEntryMetadata() || {};
+  return /*#__PURE__*/React.createElement(LocaleContext.Provider, {
+    value: locale,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 17,
+      columnNumber: 5
+    }
+  }, children);
+}
+
+/**
+ * Obtain a locale to translate or format data in. Returns the
+ * configured locale of the current entry by default.
+ *
+ * Elements that are rendered on top of the entry in the editor
+ * preview or while reviewing an entry are part of the user interface
+ * rather than of the entry itself. Pass `"ui"` as `locale` option to
+ * obtain the locale of the user interface for those.
+ *
+ * @param {Object} [options]
+ * @param {"entry"|"ui"} [options.locale="entry"] -
+ *   Pass `"ui"` to obtain the locale of the user interface instead.
+ *   Note that this option selects which of the two locales to use. It
+ *   does not take a locale name.
+ *
+ * @example
+ * const locale = useLocale();
+ * date.toLocaleDateString(locale)
+ *
+ * const locale = useLocale({locale: 'ui'});
+ */
+function useLocale({
+  locale: scope = 'entry'
+} = {}) {
+  const entryLocale = useContext(LocaleContext);
+  if (!localeScopes.includes(scope)) {
+    throw new Error(`Unknown locale option '${scope}'. Pass either ${localeScopes.join(' or ')}.`);
+  }
+  return scope === 'ui' ? I18n.currentLocale() : entryLocale;
+}
+const localeScopes = ['entry', 'ui'];
+
+/**
+ * Use translations in frontend elements. Uses the configured locale
+ * of the current entry by default. Note that only translation keys
+ * from the `pageflow_scrolled.public` scope are universally
+ * available.
+ *
+ * to render translations for inline editing controls in the editor
+ * preview, you can pass `"ui"` as `locale` option and use
+ * translations from the `pageflow_scrolled.inline_editing` scope.
+ *
+ * @param {Object} [options]
+ * @param {"entry"|"ui"} [options.locale="entry"] -
+ *   Pass `"ui"` to use the locale of the user interface instead. Note
+ *   that this option selects which of the two locales to use. It does
+ *   not take a locale name.
+ *
+ * @example
+ * const {t} = useI18n();
+ * t('pageflow_scrolled.public.some.key')
+ *
+ * const {t} = useI18n({locale: 'ui'});
+ * t('pageflow_scrolled.inline_editing.some.key')
+ */
+function useI18n(options) {
+  const locale = useLocale(options);
+  return {
+    t(key, translateOptions) {
+      return I18n.t(key, {
+        ...translateOptions,
+        locale
+      });
+    }
+  };
+}
+
+export { LocaleProvider as L, useLocale as a, setupI18n as s, useI18n as u };

data/entry_types/scrolled/package/frontend/{index-eb670c2f.js → index-2e5546f7.js}

@@ -1,23 +1,21 @@
 import React, { useMemo, useEffect, useState, useCallback } from 'react';
 import ReactDOM from 'react-dom';
-import { _ as _slicedToArray, b as _defineProperty } from './ThemeIcon-81f2f066.js';
 import classNames from 'classnames';
-import { u as useDelayedBoolean } from './useContentElementEditorState-77fe6c79.js';
-import { T as ToggleFullscreenCornerButton } from './ToggleFullscreenCornerButton-788e9cdb.js';
+import { u as useDelayedBoolean } from './useDelayedBoolean-a387d85b.js';
+import { T as ToggleFullscreenCornerButton } from './ToggleFullscreenCornerButton-30fd1124.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 () {
+function Fullscreen({
+  children
+}) {
+  const root = useMemo(() => document.getElementById('fullscreenRoot'), []);
+  useEffect(() => {
+    const resetScrollbarPadding = adjustScrollbarPadding(() => {
       document.getElementById('root').setAttribute('inert', true);
       document.body.style.overflow = 'hidden';
     });
-    return function () {
+    return () => {
       resetScrollbarPadding();
       document.getElementById('root').removeAttribute('inert', true);
       document.body.style.overflow = 'initial';
@@ -31,45 +29,39 @@ function Fullscreen(_ref) {
 // 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;
+  const documentElement = document.documentElement;
+  const ownerWindow = document.defaultView || window;
+  const 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';
-  };
+  const scrollbarWidthAfter = documentElement.clientWidth - documentElement.offsetWidth;
+  const scrollbarWidth = scrollbarWidthBefore - scrollbarWidthAfter;
+  document.documentElement.style.paddingRight = `${scrollbarWidth}px`;
+  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, {
+function FullscreenViewer({
+  contentElementId,
+  renderChildren,
+  renderFullscreenChildren
+}) {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const isRendered = useDelayedBoolean(isFullscreen, {
     fromTrueToFalse: 200
   });
-  var isVisible = useDelayedBoolean(isFullscreen, {
+  const isVisible = useDelayedBoolean(isFullscreen, {
     fromFalseToTrue: 1
   });
-  useEffect(function () {
+  useEffect(() => {
     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);
-    };
+    return () => window.removeEventListener('popstate', handlePopState);
   });
-  var enterFullscreen = useCallback(function () {
+  const enterFullscreen = useCallback(() => {
     setIsFullscreen(true);
     if (window.parent === window) {
       window.history.pushState({
@@ -77,31 +69,31 @@ function FullscreenViewer(_ref) {
       }, '');
     }
   }, [contentElementId]);
-  var exitFullscreen = useCallback(function () {
+  const exitFullscreen = useCallback(() => {
     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 () {
+  useEffect(() => {
     function handleKeyDown(event) {
       if (event.key === 'Escape') {
         exitFullscreen();
       }
     }
     window.addEventListener('keydown', handleKeyDown);
-    return function () {
-      return window.removeEventListener('keydown', handleKeyDown);
-    };
+    return () => window.removeEventListener('keydown', handleKeyDown);
   }, [exitFullscreen]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, renderChildren({
-    enterFullscreen: enterFullscreen,
-    isFullscreen: isFullscreen
+    enterFullscreen,
+    isFullscreen
   }), isRendered && /*#__PURE__*/React.createElement(Fullscreen, null, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$1.wrapper, _defineProperty({}, styles$1.visible, isVisible))
+    className: classNames(styles$1.wrapper, {
+      [styles$1.visible]: isVisible
+    })
   }, renderFullscreenChildren({
-    exitFullscreen: exitFullscreen
+    exitFullscreen
   }), /*#__PURE__*/React.createElement(ToggleFullscreenCornerButton, {
     isFullscreen: true,
     onExit: exitFullscreen

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

@@ -0,0 +1,130 @@
+import React, { useMemo, useEffect, useState, useCallback } from 'react';
+import ReactDOM from 'react-dom';
+import classNames from 'classnames';
+import { u as useDelayedBoolean } from './useDelayedBoolean-a387d85b.js';
+import { T as ToggleFullscreenCornerButton } from './ToggleFullscreenCornerButton-61c25224.js';
+
+var styles = {"wrapper":"Fullscreen-module_wrapper__2MP7f"};
+
+var _jsxFileName = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/FullscreenViewer/Fullscreen.js";
+function Fullscreen({
+  children
+}) {
+  const root = useMemo(() => document.getElementById('fullscreenRoot'), []);
+  useEffect(() => {
+    const resetScrollbarPadding = adjustScrollbarPadding(() => {
+      document.getElementById('root').setAttribute('inert', true);
+      document.body.style.overflow = 'hidden';
+    });
+    return () => {
+      resetScrollbarPadding();
+      document.getElementById('root').removeAttribute('inert', true);
+      document.body.style.overflow = 'initial';
+    };
+  }, []);
+  return ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
+    className: styles.wrapper,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 24,
+      columnNumber: 5
+    }
+  }, 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) {
+  const documentElement = document.documentElement;
+  const ownerWindow = document.defaultView || window;
+  const scrollbarWidthBefore = ownerWindow.innerWidth - documentElement.clientWidth;
+  hideScrollbar();
+  const scrollbarWidthAfter = documentElement.clientWidth - documentElement.offsetWidth;
+  const scrollbarWidth = scrollbarWidthBefore - scrollbarWidthAfter;
+  document.documentElement.style.paddingRight = `${scrollbarWidth}px`;
+  return () => document.documentElement.style.paddingRight = '0';
+}
+
+var styles$1 = {"wrapper":"index-module_wrapper__ilo7n","visible":"index-module_visible__6QUDn"};
+
+var _jsxFileName$1 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/FullscreenViewer/index.js";
+function FullscreenViewer({
+  contentElementId,
+  renderChildren,
+  renderFullscreenChildren
+}) {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const isRendered = useDelayedBoolean(isFullscreen, {
+    fromTrueToFalse: 200
+  });
+  const isVisible = useDelayedBoolean(isFullscreen, {
+    fromFalseToTrue: 1
+  });
+  useEffect(() => {
+    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 () => window.removeEventListener('popstate', handlePopState);
+  });
+  const enterFullscreen = useCallback(() => {
+    setIsFullscreen(true);
+    if (window.parent === window) {
+      window.history.pushState({
+        fullscreenContentElementId: contentElementId
+      }, '');
+    }
+  }, [contentElementId]);
+  const exitFullscreen = useCallback(() => {
+    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 handleKeyDown(event) {
+      if (event.key === 'Escape') {
+        exitFullscreen();
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [exitFullscreen]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderChildren({
+    enterFullscreen,
+    isFullscreen
+  }), isRendered && /*#__PURE__*/React.createElement(Fullscreen, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 61,
+      columnNumber: 8
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$1.wrapper, {
+      [styles$1.visible]: isVisible
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 62,
+      columnNumber: 10
+    }
+  }, renderFullscreenChildren({
+    exitFullscreen
+  }), /*#__PURE__*/React.createElement(ToggleFullscreenCornerButton, {
+    isFullscreen: true,
+    onExit: exitFullscreen,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 64,
+      columnNumber: 12
+    }
+  }))));
+}
+
+export { FullscreenViewer as F };