pageflow 17.0.5 → 17.1.0

data/entry_types/scrolled/package/frontend/ToggleFullscreenCornerButton-788e9cdb.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { u as useI18n, T as ThemeIcon } from './ThemeIcon-81f2f066.js';
+
+var styles = {"button":"ToggleFullscreenButton-module_button__2n69- utils-module_unstyledButton__3rgne"};
+
+function ToggleFullscreenButton(props) {
+  var _useI18n = useI18n(),
+    t = _useI18n.t;
+  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();
+    }
+  }, icon(props));
+}
+function icon(props) {
+  if (props.isFullscreen) {
+    return /*#__PURE__*/React.createElement(ThemeIcon, {
+      name: "exitFullscreen"
+    });
+  } else {
+    return /*#__PURE__*/React.createElement(ThemeIcon, {
+      name: "enterFullscreen"
+    });
+  }
+}
+
+var styles$1 = {"corner":"ToggleFullscreenCornerButton-module_corner__CxAAH"};
+
+function ToggleFullscreenCornerButton(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles$1.corner
+  }, /*#__PURE__*/React.createElement(ToggleFullscreenButton, props));
+}
+
+export { ToggleFullscreenCornerButton as T };

data/entry_types/scrolled/package/frontend/{Viewer-1bb5597c.js → Viewer-0345ce57.js}

@@ -1,15 +1,15 @@
 import 'pageflow/frontend';
 import React, { useMemo, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { b as _defineProperty, e as _objectWithoutProperties, _ as _slicedToArray } from './i18n-ce13a8bf.js';
+import { b as _defineProperty, T as ThemeIcon, e as _objectWithoutProperties, _ as _slicedToArray } from './ThemeIcon-81f2f066.js';
 import classNames from 'classnames';
 import 'use-context-selector';
 import 'reselect';
 import 'slugify';
 import 'i18n-js';
-import { u as useBrowserFeature } from './PhonePlatformContext-4ec6b2de.js';
-import { T as ToggleFullscreenCornerButton } from './ToggleFullscreenCornerButton-b79159cc.js';
-import { a as ArrowLeftIcon, A as ArrowRightIcon, u as usePhonePlatform } from './arrowRight-62998af9.js';
+import { u as useBrowserFeature } from './PhonePlatformContext-9f76033e.js';
+import { T as ToggleFullscreenCornerButton } from './ToggleFullscreenCornerButton-788e9cdb.js';
+import { u as usePhonePlatform } from './usePhonePlatform-c2ba875d.js';
 import { PanoViewer } from '@egjs/view360';
 import screenfull from 'screenfull';
 
@@ -17,7 +17,7 @@ var styles = {"wrapper":"Fullscreen-module_wrapper__300hJ"};
 
 function Fullscreen(_ref) {
   var isFullscreen = _ref.isFullscreen,
-      children = _ref.children;
+    children = _ref.children;
   var root = useMemo(function () {
     return document.getElementById('fullscreenRoot');
   }, []);
@@ -28,7 +28,6 @@ function Fullscreen(_ref) {
       document.body.style.overflow = 'initial';
     }
   }, [isFullscreen]);
-
   if (isFullscreen) {
     return ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
       className: styles.wrapper
@@ -42,19 +41,16 @@ var styles$1 = {"indicator":"PanoramaIndicator-module_indicator__3A90v","visible
 
 function PanoramaIndicator(_ref) {
   var visible = _ref.visible;
-  var size = 40;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(styles$1.indicator, _defineProperty({}, styles$1.visible, visible))
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$1.arrowLeft
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ArrowLeftIcon, {
-    width: size,
-    height: size
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ThemeIcon, {
+    name: "arrowLeft"
   }))), /*#__PURE__*/React.createElement("div", {
     className: styles$1.arrowRight
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ArrowRightIcon, {
-    width: size,
-    height: size
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ThemeIcon, {
+    name: "arrowRight"
   }))), /*#__PURE__*/React.createElement("div", {
     className: styles$1.text
   }, "360\xB0"));
@@ -64,32 +60,27 @@ var styles$2 = {"indicator":"FullscreenIndicator-module_indicator__2Jl_-","visib
 
 function FullscreenIndicator(_ref) {
   var visible = _ref.visible,
-      onClick = _ref.onClick;
-  var size = 50;
+    onClick = _ref.onClick;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(styles$2.indicator, _defineProperty({}, styles$2.visible, visible))
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$2.icons
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$2.iconTopLeft
-  }, /*#__PURE__*/React.createElement(ArrowLeftIcon, {
-    width: size,
-    height: size
+  }, /*#__PURE__*/React.createElement(ThemeIcon, {
+    name: "arrowLeft"
   })), /*#__PURE__*/React.createElement("div", {
     className: styles$2.iconTopRight
-  }, /*#__PURE__*/React.createElement(ArrowLeftIcon, {
-    width: size,
-    height: size
+  }, /*#__PURE__*/React.createElement(ThemeIcon, {
+    name: "arrowLeft"
   })), /*#__PURE__*/React.createElement("div", {
     className: styles$2.iconBottomRight
-  }, /*#__PURE__*/React.createElement(ArrowLeftIcon, {
-    width: size,
-    height: size
+  }, /*#__PURE__*/React.createElement(ThemeIcon, {
+    name: "arrowLeft"
   })), /*#__PURE__*/React.createElement("div", {
     className: styles$2.iconBottomLeft
-  }, /*#__PURE__*/React.createElement(ArrowLeftIcon, {
-    width: size,
-    height: size
+  }, /*#__PURE__*/React.createElement(ThemeIcon, {
+    name: "arrowLeft"
   }))), /*#__PURE__*/React.createElement("div", {
     className: styles$2.text
   }, "360\xB0"));
@@ -97,27 +88,24 @@ function FullscreenIndicator(_ref) {
 
 var styles$3 = {"full":"Viewer-module_full__1q18y","container":"Viewer-module_container__3eJ34 Viewer-module_full__1q18y","spinner":"Viewer-module_spinner__2oRve","spin":"Viewer-module_spin__3jBR2","isLoading":"Viewer-module_isLoading__sQuGw"};
 
+var _excluded = ["styles"];
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 var SpinnerIcon = (function (_ref) {
   var _ref$styles = _ref.styles,
-      props = _objectWithoutProperties(_ref, ["styles"]);
-
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
@@ -138,28 +126,27 @@ var SpinnerIcon = (function (_ref) {
 
 function Viewer(_ref) {
   var imageFile = _ref.imageFile,
-      viewerRef = _ref.viewerRef,
-      initialYaw = _ref.initialYaw,
-      initialPitch = _ref.initialPitch,
-      hidePanoramaIndicator = _ref.hidePanoramaIndicator,
-      onReady = _ref.onReady,
-      onFullscreen = _ref.onFullscreen;
+    viewerRef = _ref.viewerRef,
+    initialYaw = _ref.initialYaw,
+    initialPitch = _ref.initialPitch,
+    hidePanoramaIndicator = _ref.hidePanoramaIndicator,
+    onReady = _ref.onReady,
+    onFullscreen = _ref.onFullscreen;
   var elRef = useRef();
   var initialYawRef = useRef(initialYaw);
   var initialPitchRef = useRef(initialPitch);
   var touchSupport = useBrowserFeature('touch support');
-
   var _useState = useState(true),
-      _useState2 = _slicedToArray(_useState, 2),
-      isLoading = _useState2[0],
-      setIsLoading = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isFullscreen = _useState4[0],
-      setIsFullscreen = _useState4[1];
+    _useState4 = _slicedToArray(_useState3, 2),
+    isFullscreen = _useState4[0],
+    setIsFullscreen = _useState4[1];
+  var isPhonePlatform = usePhonePlatform();
 
-  var isPhonePlatform = usePhonePlatform(); // When toggling to fullscreen mode, this component renders to a
+  // When toggling to fullscreen mode, this component renders to a
   // portal div in the body of the document. We do not want to recreate
   // the PanoViewer instead to keep its current state (pitch, yaw etc.).
   // We therefore initialize the PanoViewer on a detached DOM element
@@ -168,7 +155,6 @@ function Viewer(_ref) {
   // render only when either
   // - the parent Viewer component is mounted
   // - Fullscreen component switches between using the portal or not
-
   function appendViewerTo(parentNode) {
     if (!elRef.current) {
       elRef.current = document.createElement('div');
@@ -184,17 +170,14 @@ function Viewer(_ref) {
       viewerRef.current.on(PanoViewer.EVENTS.READY, function () {
         viewerRef.current.updateViewportDimensions();
         setIsLoading(false);
-
         if (onReady) {
           onReady();
         }
       });
     }
-
     parentNode.appendChild(elRef.current);
     viewerRef.current.updateViewportDimensions();
   }
-
   useEffect(function () {
     return function () {
       if (elRef.current) {
@@ -226,7 +209,6 @@ function Viewer(_ref) {
         setIsFullscreen(false);
       }
     }
-
     if (screenfull.isEnabled) {
       screenfull.on('change', onChange);
       return function () {
@@ -238,7 +220,6 @@ function Viewer(_ref) {
     function onChange() {
       viewerRef.current.updateViewportDimensions();
     }
-
     window.addEventListener('resize', onChange);
     return function () {
       return window.removeEventListener('resize', onChange);
@@ -261,39 +242,31 @@ function Viewer(_ref) {
           fov: 65
         });
       }
-
       viewerRef.current.setGyroMode(PanoViewer.GYRO_MODE.NONE);
       viewerRef.current.setUseZoom(false);
     }
   }, [isFullscreen, viewerRef, touchSupport]);
-
   function preventDefaultForArrowUpDown(event) {
     if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
       event.preventDefault();
     }
   }
-
   function enterFullscreen() {
     if (onFullscreen) {
       onFullscreen();
     }
-
     if (screenfull.isEnabled) {
       screenfull.request();
     }
-
     setIsFullscreen(true);
     viewerRef.current.enableSensor();
   }
-
   function exitFullscreen() {
     if (screenfull.isEnabled) {
       screenfull.exit();
     }
-
     setIsFullscreen(false);
   }
-
   return /*#__PURE__*/React.createElement(Fullscreen, {
     isFullscreen: isFullscreen
   }, /*#__PURE__*/React.createElement("div", {
@@ -321,7 +294,7 @@ function Viewer(_ref) {
 }
 var DOMNodeContainer = React.memo(function (_ref2) {
   var className = _ref2.className,
-      onUpdate = _ref2.onUpdate;
+    onUpdate = _ref2.onUpdate;
   var ref = useRef();
   useEffect(function () {
     var current = ref.current;

data/entry_types/scrolled/package/frontend/{Viewer-1ecf3375.js → Viewer-cdc549cc.js}

@@ -1,21 +1,21 @@
 import React, { useRef, useCallback, useState } from 'react';
 import 'react-dom';
-import { _ as _slicedToArray, b as _defineProperty } from './i18n-ce13a8bf.js';
+import { _ as _slicedToArray, b as _defineProperty } from './ThemeIcon-81f2f066.js';
 import classNames from 'classnames';
-import { a as useContentElementEditorState } from './useContentElementEditorState-4f4c3cf6.js';
+import { a as useContentElementEditorState } from './useContentElementEditorState-77fe6c79.js';
 import 'use-context-selector';
 import 'reselect';
 import 'slugify';
 import 'i18n-js';
-import { T as ToggleFullscreenCornerButton } from './ToggleFullscreenCornerButton-b79159cc.js';
-import { F as FullscreenViewer } from './index-11f32f10.js';
+import { T as ToggleFullscreenCornerButton } from './ToggleFullscreenCornerButton-788e9cdb.js';
+import { F as FullscreenViewer } from './index-eb670c2f.js';
 import QuickPinchZoom, { make3dTransformValue } from 'react-quick-pinch-zoom';
 
 var styles = {"outer":"SwipeToClose-module_outer__1fl2h","inner":"SwipeToClose-module_inner__NOg1v"};
 
 function SwipeToClose(_ref) {
   var onClose = _ref.onClose,
-      children = _ref.children;
+    children = _ref.children;
   var start = useRef();
   var inner = useRef();
   var ratio = useRef(0);
@@ -35,11 +35,9 @@ function SwipeToClose(_ref) {
   }, []);
   var handleTouchEnd = useCallback(function (event) {
     event.preventDefault();
-
     if (ratio.current > 0.5) {
       onClose();
     }
-
     requestAnimationFrame(function () {
       if (inner.current) {
         inner.current.style.setProperty('transition', "opacity 0.2s linear, transform 0.2s ease");
@@ -64,19 +62,16 @@ var styles$1 = {"full":"ZoomableImage-module_full__1YJoO","container":"ZoomableI
 
 function ZoomableImage(_ref) {
   var onClose = _ref.onClose,
-      imageFile = _ref.imageFile;
+    imageFile = _ref.imageFile;
   var imgRef = useRef();
-
   var _useState = useState(true),
-      _useState2 = _slicedToArray(_useState, 2),
-      isVisible = _useState2[0],
-      setIsVisible = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isVisible = _useState2[0],
+    setIsVisible = _useState2[1];
   var onUpdate = useCallback(function (_ref2) {
     var x = _ref2.x,
-        y = _ref2.y,
-        scale = _ref2.scale;
-
+      y = _ref2.y,
+      scale = _ref2.scale;
     if (imgRef.current) {
       imgRef.current.style.setProperty('transform', make3dTransformValue({
         x: x,
@@ -120,13 +115,11 @@ function ZoomableImage(_ref) {
 
 function Viewer(_ref) {
   var imageFile = _ref.imageFile,
-      contentElementId = _ref.contentElementId,
-      children = _ref.children;
-
+    contentElementId = _ref.contentElementId,
+    children = _ref.children;
   var _useContentElementEdi = useContentElementEditorState(),
-      isEditable = _useContentElementEdi.isEditable,
-      isSelected = _useContentElementEdi.isSelected;
-
+    isEditable = _useContentElementEdi.isEditable,
+    isSelected = _useContentElementEdi.isSelected;
   return /*#__PURE__*/React.createElement(FullscreenViewer, {
     contentElementId: contentElementId,
     renderChildren: function renderChildren(_ref2) {