pageflow 17.0.5 → 17.2.0

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

@@ -1,34 +1,31 @@
 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 classNames from 'classnames';
-import 'use-context-selector';
-import 'reselect';
-import 'slugify';
+import 'pageflow-scrolled/entryState';
 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 './i18n-493cd2a6.js';
+import { u as useBrowserFeature } from './PhonePlatformContext-035a99fa.js';
+import { T as ThemeIcon } from './ThemeIcon-ab834849.js';
+import { T as ToggleFullscreenCornerButton } from './ToggleFullscreenCornerButton-30fd1124.js';
+import { u as usePhonePlatform } from './usePhonePlatform-ce9ff08d.js';
 import { PanoViewer } from '@egjs/view360';
 import screenfull from 'screenfull';
 
 var styles = {"wrapper":"Fullscreen-module_wrapper__300hJ"};
 
-function Fullscreen(_ref) {
-  var isFullscreen = _ref.isFullscreen,
-      children = _ref.children;
-  var root = useMemo(function () {
-    return document.getElementById('fullscreenRoot');
-  }, []);
-  useEffect(function () {
+function Fullscreen({
+  isFullscreen,
+  children
+}) {
+  const root = useMemo(() => document.getElementById('fullscreenRoot'), []);
+  useEffect(() => {
     if (isFullscreen) {
       document.body.style.overflow = 'hidden';
     } else {
       document.body.style.overflow = 'initial';
     }
   }, [isFullscreen]);
-
   if (isFullscreen) {
     return ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
       className: styles.wrapper
@@ -40,21 +37,21 @@ function Fullscreen(_ref) {
 
 var styles$1 = {"indicator":"PanoramaIndicator-module_indicator__3A90v","visible":"PanoramaIndicator-module_visible__3LOgm","arrow":"PanoramaIndicator-module_arrow__QV1Pd","arrowLeft":"PanoramaIndicator-module_arrowLeft__Jh7GC PanoramaIndicator-module_arrow__QV1Pd","arrowRight":"PanoramaIndicator-module_arrowRight__ZZBtO PanoramaIndicator-module_arrow__QV1Pd","nudgeLeft":"PanoramaIndicator-module_nudgeLeft__IU_Iy","nudgeRight":"PanoramaIndicator-module_nudgeRight__3XzNu","text":"PanoramaIndicator-module_text__2FzUy"};
 
-function PanoramaIndicator(_ref) {
-  var visible = _ref.visible;
-  var size = 40;
+function PanoramaIndicator({
+  visible
+}) {
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$1.indicator, _defineProperty({}, styles$1.visible, visible))
+    className: classNames(styles$1.indicator, {
+      [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"));
@@ -62,34 +59,32 @@ function PanoramaIndicator(_ref) {
 
 var styles$2 = {"indicator":"FullscreenIndicator-module_indicator__2Jl_-","visible":"FullscreenIndicator-module_visible__2ywsZ","icon":"FullscreenIndicator-module_icon__2Ddof","icons":"FullscreenIndicator-module_icons__3-Xm6","text":"FullscreenIndicator-module_text__3wCW3","pulse":"FullscreenIndicator-module_pulse__1qujU","iconTopLeft":"FullscreenIndicator-module_iconTopLeft__2u7-j FullscreenIndicator-module_icon__2Ddof","iconTopRight":"FullscreenIndicator-module_iconTopRight__14nUk FullscreenIndicator-module_icon__2Ddof","iconBottomRight":"FullscreenIndicator-module_iconBottomRight__lEtN6 FullscreenIndicator-module_icon__2Ddof","iconBottomLeft":"FullscreenIndicator-module_iconBottomLeft__voLm_ FullscreenIndicator-module_icon__2Ddof"};
 
-function FullscreenIndicator(_ref) {
-  var visible = _ref.visible,
-      onClick = _ref.onClick;
-  var size = 50;
+function FullscreenIndicator({
+  visible,
+  onClick
+}) {
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$2.indicator, _defineProperty({}, styles$2.visible, visible))
+    className: classNames(styles$2.indicator, {
+      [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"));
@@ -98,68 +93,57 @@ 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"};
 
 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"]);
-
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24"
-  }, props), /*#__PURE__*/React.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10",
-    stroke: "currentColor",
-    strokeWidth: "4",
-    opacity: ".23"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
-    opacity: ".75"
-  }));
-});
-
-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;
-  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];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isFullscreen = _useState4[0],
-      setIsFullscreen = _useState4[1];
-
-  var isPhonePlatform = usePhonePlatform(); // When toggling to fullscreen mode, this component renders to a
+var SpinnerIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React.createElement("circle", {
+  cx: "12",
+  cy: "12",
+  r: "10",
+  stroke: "currentColor",
+  strokeWidth: "4",
+  opacity: ".23"
+}), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
+  opacity: ".75"
+})));
+
+function Viewer({
+  imageFile,
+  viewerRef,
+  initialYaw,
+  initialPitch,
+  hidePanoramaIndicator,
+  onReady,
+  onFullscreen
+}) {
+  const elRef = useRef();
+  const initialYawRef = useRef(initialYaw);
+  const initialPitchRef = useRef(initialPitch);
+  const touchSupport = useBrowserFeature('touch support');
+  const [isLoading, setIsLoading] = useState(true);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const isPhonePlatform = usePhonePlatform();
+
+  // 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 +152,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');
@@ -181,22 +164,19 @@ function Viewer(_ref) {
         yaw: initialYawRef.current,
         pitch: initialPitchRef.current
       });
-      viewerRef.current.on(PanoViewer.EVENTS.READY, function () {
+      viewerRef.current.on(PanoViewer.EVENTS.READY, () => {
         viewerRef.current.updateViewportDimensions();
         setIsLoading(false);
-
         if (onReady) {
           onReady();
         }
       });
     }
-
     parentNode.appendChild(elRef.current);
     viewerRef.current.updateViewportDimensions();
   }
-
-  useEffect(function () {
-    return function () {
+  useEffect(() => {
+    return () => {
       if (elRef.current) {
         viewerRef.current.destroy();
         viewerRef.current = null;
@@ -204,7 +184,7 @@ function Viewer(_ref) {
       }
     };
   }, [viewerRef]);
-  useEffect(function () {
+  useEffect(() => {
     if (initialYawRef.current !== initialYaw) {
       initialYawRef.current = initialYaw;
       viewerRef.current.lookAt({
@@ -212,7 +192,7 @@ function Viewer(_ref) {
       }, 200);
     }
   }, [initialYaw, viewerRef]);
-  useEffect(function () {
+  useEffect(() => {
     if (initialPitchRef.current !== initialPitch) {
       initialPitchRef.current = initialPitch;
       viewerRef.current.lookAt({
@@ -220,31 +200,25 @@ function Viewer(_ref) {
       }, 200);
     }
   }, [initialPitch, viewerRef]);
-  useEffect(function () {
+  useEffect(() => {
     function onChange() {
       if (!screenfull.isFullscreen) {
         setIsFullscreen(false);
       }
     }
-
     if (screenfull.isEnabled) {
       screenfull.on('change', onChange);
-      return function () {
-        return screenfull.off('change', onChange);
-      };
+      return () => screenfull.off('change', onChange);
     }
   }, []);
-  useEffect(function () {
+  useEffect(() => {
     function onChange() {
       viewerRef.current.updateViewportDimensions();
     }
-
     window.addEventListener('resize', onChange);
-    return function () {
-      return window.removeEventListener('resize', onChange);
-    };
+    return () => window.removeEventListener('resize', onChange);
   }, [viewerRef]);
-  useEffect(function () {
+  useEffect(() => {
     if (isFullscreen) {
       viewerRef.current.setTouchDirection(PanoViewer.TOUCH_DIRECTION.ALL);
       viewerRef.current.setGyroMode(PanoViewer.GYRO_MODE.YAWPITCH);
@@ -261,54 +235,46 @@ 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", {
     className: styles$3.container,
     onKeyDown: preventDefaultForArrowUpDown,
-    onClick: function onClick() {
+    onClick: () => {
       isPhonePlatform && enterFullscreen();
     }
   }, /*#__PURE__*/React.createElement(DOMNodeContainer, {
     className: styles$3.full,
-    onUpdate: function onUpdate(el) {
-      return appendViewerTo(el);
-    }
+    onUpdate: el => appendViewerTo(el)
   })), /*#__PURE__*/React.createElement(SpinnerIcon, {
-    className: classNames(styles$3.spinner, _defineProperty({}, styles$3.isLoading, isLoading))
+    className: classNames(styles$3.spinner, {
+      [styles$3.isLoading]: isLoading
+    })
   }), (!isPhonePlatform || isFullscreen) && /*#__PURE__*/React.createElement(ToggleFullscreenCornerButton, {
     isFullscreen: isFullscreen,
     onEnter: enterFullscreen,
@@ -319,14 +285,15 @@ function Viewer(_ref) {
     visible: !isLoading && isPhonePlatform && !isFullscreen
   }));
 }
-var DOMNodeContainer = React.memo(function (_ref2) {
-  var className = _ref2.className,
-      onUpdate = _ref2.onUpdate;
-  var ref = useRef();
-  useEffect(function () {
-    var current = ref.current;
+const DOMNodeContainer = React.memo(function ({
+  className,
+  onUpdate
+}) {
+  const ref = useRef();
+  useEffect(() => {
+    const current = ref.current;
     onUpdate(current);
-    return function () {
+    return () => {
       current.removeChild(current.firstChild);
     };
   });
@@ -334,8 +301,6 @@ var DOMNodeContainer = React.memo(function (_ref2) {
     ref: ref,
     className: className
   });
-}, function () {
-  return true;
-});
+}, () => true);
 
 export default Viewer;