pageflow 17.1.0 → 17.2.0

data/entry_types/scrolled/package/frontend/{ToggleFullscreenCornerButton-788e9cdb.js → ToggleFullscreenCornerButton-30fd1124.js}

@@ -1,19 +1,19 @@
 import React from 'react';
-import { u as useI18n, T as ThemeIcon } from './ThemeIcon-81f2f066.js';
+import { u as useI18n } from './i18n-493cd2a6.js';
+import { T as ThemeIcon } from './ThemeIcon-ab834849.js';
 
 var styles = {"button":"ToggleFullscreenButton-module_button__2n69- utils-module_unstyledButton__3rgne"};
 
 function ToggleFullscreenButton(props) {
-  var _useI18n = useI18n(),
-    t = _useI18n.t;
+  const {
+    t
+  } = useI18n();
   return /*#__PURE__*/React.createElement("button", {
     className: styles.button,
     title: t(props.isFullscreen ? 'exit_fullscreen' : 'enter_fullscreen', {
       scope: 'pageflow_scrolled.public'
     }),
-    onClick: function onClick() {
-      return props.isFullscreen ? props.onExit() : props.onEnter();
-    }
+    onClick: () => props.isFullscreen ? props.onExit() : props.onEnter()
   }, icon(props));
 }
 function icon(props) {

data/entry_types/scrolled/package/frontend/ToggleFullscreenCornerButton-61c25224.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { u as useI18n } from './i18n-e06cac14.js';
+import { T as ThemeIcon } from './ThemeIcon-f6cb3a8f.js';
+
+var styles = {"button":"ToggleFullscreenButton-module_button__2n69- utils-module_unstyledButton__3rgne"};
+
+var _jsxFileName = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/ToggleFullscreenButton.js";
+function ToggleFullscreenButton(props) {
+  const {
+    t
+  } = useI18n();
+  return /*#__PURE__*/React.createElement("button", {
+    className: styles.button,
+    title: t(props.isFullscreen ? 'exit_fullscreen' : 'enter_fullscreen', {
+      scope: 'pageflow_scrolled.public'
+    }),
+    onClick: () => props.isFullscreen ? props.onExit() : props.onEnter(),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 11,
+      columnNumber: 5
+    }
+  }, icon(props));
+}
+function icon(props) {
+  if (props.isFullscreen) {
+    return /*#__PURE__*/React.createElement(ThemeIcon, {
+      name: "exitFullscreen",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 24,
+        columnNumber: 12
+      }
+    });
+  } else {
+    return /*#__PURE__*/React.createElement(ThemeIcon, {
+      name: "enterFullscreen",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 26,
+        columnNumber: 12
+      }
+    });
+  }
+}
+
+var styles$1 = {"corner":"ToggleFullscreenCornerButton-module_corner__CxAAH"};
+
+var _jsxFileName$1 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/ToggleFullscreenCornerButton.js";
+function ToggleFullscreenCornerButton(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles$1.corner,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 9,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement(ToggleFullscreenButton, Object.assign({}, props, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 10,
+      columnNumber: 7
+    }
+  })));
+}
+
+export { ToggleFullscreenCornerButton as T };

data/entry_types/scrolled/package/frontend/Viewer-1074fd59.js

@@ -0,0 +1,147 @@
+import React, { useRef, useCallback, useState } from 'react';
+import 'react-dom';
+import classNames from 'classnames';
+import './useDelayedBoolean-a387d85b.js';
+import 'pageflow-scrolled/entryState';
+import 'i18n-js';
+import './i18n-493cd2a6.js';
+import { u as useContentElementEditorState } from './useContentElementEditorState-a084912e.js';
+import './ThemeIcon-ab834849.js';
+import { T as ToggleFullscreenCornerButton } from './ToggleFullscreenCornerButton-30fd1124.js';
+import { F as FullscreenViewer } from './index-2e5546f7.js';
+import QuickPinchZoom, { make3dTransformValue } from 'react-quick-pinch-zoom';
+
+var styles = {"outer":"SwipeToClose-module_outer__1fl2h","inner":"SwipeToClose-module_inner__NOg1v"};
+
+function SwipeToClose({
+  onClose,
+  children
+}) {
+  const start = useRef();
+  const inner = useRef();
+  const ratio = useRef(0);
+  const handleTouchStart = useCallback(event => {
+    start.current = event.touches[0].pageY;
+  }, []);
+  const handleTouchMove = useCallback(event => {
+    const offset = Math.max(-200, Math.min(200, event.touches[0].pageY - start.current));
+    ratio.current = Math.abs(offset / 200);
+    requestAnimationFrame(() => {
+      if (inner.current) {
+        inner.current.style.setProperty('transition', `none`);
+        inner.current.style.setProperty('transform', `translate3d(0, ${offset}px, 0)`);
+        inner.current.style.setProperty('opacity', 1 - ratio.current);
+      }
+    });
+  }, []);
+  const handleTouchEnd = useCallback(event => {
+    event.preventDefault();
+    if (ratio.current > 0.5) {
+      onClose();
+    }
+    requestAnimationFrame(() => {
+      if (inner.current) {
+        inner.current.style.setProperty('transition', `opacity 0.2s linear, transform 0.2s ease`);
+        inner.current.style.setProperty('transform', `translate3d(0, 0, 0)`);
+        inner.current.style.setProperty('opacity', 1);
+      }
+    });
+  }, [onClose]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.outer,
+    onClick: onClose,
+    onTouchStart: handleTouchStart,
+    onTouchMove: handleTouchMove,
+    onTouchEnd: handleTouchEnd
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.inner,
+    ref: inner
+  }, children));
+}
+
+var styles$1 = {"full":"ZoomableImage-module_full__1YJoO","container":"ZoomableImage-module_container__RTuPI","img":"ZoomableImage-module_img__3Vnst","visible":"ZoomableImage-module_visible__2ez0D"};
+
+function ZoomableImage({
+  onClose,
+  imageFile
+}) {
+  const imgRef = useRef();
+  const [isVisible, setIsVisible] = useState(true);
+  const onUpdate = useCallback(({
+    x,
+    y,
+    scale
+  }) => {
+    if (imgRef.current) {
+      imgRef.current.style.setProperty('transform', make3dTransformValue({
+        x,
+        y,
+        scale
+      }));
+    }
+  }, []);
+  const handleClose = useCallback(() => {
+    onClose();
+    setIsVisible(false);
+  }, [onClose]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles$1.full
+  }, /*#__PURE__*/React.createElement(SwipeToClose, {
+    onClose: handleClose
+  }, /*#__PURE__*/React.createElement(QuickPinchZoom, {
+    containerProps: {
+      className: styles$1.container
+    },
+    onUpdate: onUpdate,
+    isTouch: () => true,
+    minZoom: 0.8,
+    maxZoom: 5,
+    tapZoomFactor: 1.5,
+    draggableUnZoomed: false,
+    doubleTapToggleZoom: true,
+    enforceBoundsDuringZoom: true,
+    centerContained: true
+  }, /*#__PURE__*/React.createElement("img", {
+    src: imageFile.urls.large,
+    width: imageFile.width,
+    height: imageFile.height,
+    alt: "img",
+    ref: imgRef,
+    className: classNames(styles$1.img, {
+      [styles$1.visible]: isVisible
+    })
+  }))));
+}
+
+function Viewer({
+  imageFile,
+  contentElementId,
+  children
+}) {
+  const {
+    isEditable,
+    isSelected
+  } = useContentElementEditorState();
+  return /*#__PURE__*/React.createElement(FullscreenViewer, {
+    contentElementId: contentElementId,
+    renderChildren: ({
+      enterFullscreen
+    }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      onClick: enterFullscreen,
+      style: {
+        pointerEvents: isEditable && !isSelected ? 'none' : undefined
+      }
+    }, children), /*#__PURE__*/React.createElement(ToggleFullscreenCornerButton, {
+      isFullscreen: false,
+      onEnter: enterFullscreen
+    })),
+    renderFullscreenChildren: ({
+      exitFullscreen
+    }) => /*#__PURE__*/React.createElement(ZoomableImage, {
+      onClose: exitFullscreen,
+      imageFile: imageFile
+    })
+  });
+}
+
+export default Viewer;