import React, { useRef, useLayoutEffect, useEffect, useReducer, useMemo, useContext, useState, useCallback } from 'react';
import ReactDOM from 'react-dom';
import ReactTooltip from 'react-tooltip';
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
return;
}
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance");
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
}
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}
var classnames = createCommonjsModule(function (module) {
/*!
Copyright (c) 2017 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
/* global define */
(function () {
var hasOwn = {}.hasOwnProperty;
function classNames () {
var classes = [];
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (!arg) continue;
var argType = typeof arg;
if (argType === 'string' || argType === 'number') {
classes.push(arg);
} else if (Array.isArray(arg) && arg.length) {
var inner = classNames.apply(null, arg);
if (inner) {
classes.push(inner);
}
} else if (argType === 'object') {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
}
}
}
}
return classes.join(' ');
}
if ( module.exports) {
classNames.default = classNames;
module.exports = classNames;
} else {
window.classNames = classNames;
}
}());
});
// from https://github.com/n8tb1t/use-scroll-position
var isBrowser = typeof window !== "undefined";
function getScrollPosition(_ref) {
var element = _ref.element,
useWindow = _ref.useWindow;
if (!isBrowser) return {
x: 0,
y: 0
};
var target = element ? element.current : document.body;
var position = target.getBoundingClientRect();
return useWindow ? {
x: window.scrollX,
y: window.scrollY
} : {
x: position.left,
y: position.top
};
}
function useScrollPosition(effect, deps, element, useWindow, wait) {
var position = useRef(getScrollPosition({
useWindow: useWindow
}));
var throttleTimeout = null;
var callBack = function callBack() {
var currPos = getScrollPosition({
element: element,
useWindow: useWindow
});
effect({
prevPos: position.current,
currPos: currPos
});
position.current = currPos;
throttleTimeout = null;
};
useLayoutEffect(function () {
if (!isBrowser) {
return;
}
var handleScroll = function handleScroll() {
if (wait) {
if (throttleTimeout === null) {
// Todo: store in useRef hook?
throttleTimeout = setTimeout(callBack, wait);
}
} else {
callBack();
}
};
window.addEventListener('scroll', handleScroll);
return function () {
return window.removeEventListener('scroll', handleScroll);
};
}, deps);
}
useScrollPosition.defaultProps = {
deps: [],
element: false,
useWindow: false,
wait: null
};
function useNativeScrollPrevention(ref) {
useEffect(function () {
function preventNativeScroll(e) {
e.preventDefault();
}
var current = ref.current;
if (current) {
current.addEventListener('touchmove', preventNativeScroll);
current.addEventListener('mousewheel', preventNativeScroll);
}
return function () {
if (current) {
current.removeEventListener('touchmove', preventNativeScroll);
current.removeEventListener('mousewheel', preventNativeScroll);
}
};
}, [ref]);
}
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var PREFIX = 'PAGEFLOW_SCROLLED_COLLECTION';
var RESET = "".concat(PREFIX, "_RESET");
var ADD = "".concat(PREFIX, "_ADD");
var CHANGE = "".concat(PREFIX, "_CHANGE");
var REMOVE = "".concat(PREFIX, "_REMOVE");
var SORT = "".concat(PREFIX, "_SORT");
function useCollections() {
var seed = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
keyAttribute = _ref.keyAttribute;
return useReducer(reducer, Object.keys(seed).reduce(function (result, key) {
result[key] = init(seed[key], keyAttribute);
return result;
}, {}));
}
function reducer(state, action) {
var collectionName = action.payload.collectionName;
var keyAttribute = action.payload.keyAttribute;
switch (action.type) {
case RESET:
return _objectSpread({}, state, _defineProperty({}, collectionName, init(action.payload.items, keyAttribute)));
case ADD:
return _objectSpread({}, state, _defineProperty({}, collectionName, {
order: action.payload.order,
items: _objectSpread({}, state[collectionName].items, _defineProperty({}, action.payload.attributes[keyAttribute], action.payload.attributes))
}));
case CHANGE:
return _objectSpread({}, state, _defineProperty({}, collectionName, {
order: state[collectionName].order,
items: _objectSpread({}, state[collectionName].items, _defineProperty({}, action.payload.attributes[keyAttribute], action.payload.attributes))
}));
case REMOVE:
var clonedItems = _objectSpread({}, state[collectionName].items);
delete clonedItems[action.payload.key];
return _objectSpread({}, state, _defineProperty({}, collectionName, {
order: action.payload.order,
items: clonedItems
}));
case SORT:
return _objectSpread({}, state, _defineProperty({}, collectionName, {
order: action.payload.order,
items: state[collectionName].items
}));
default:
return state;
}
}
function init(items) {
var keyAttribute = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'id';
return {
order: items.map(function (item) {
return item[keyAttribute];
}),
items: items.reduce(function (result, item) {
result[item[keyAttribute]] = item;
return result;
}, {})
};
}
function getItems(state, collectionName) {
if (state[collectionName]) {
var items = state[collectionName].items;
return state[collectionName].order.map(function (key) {
return items[key];
});
} else {
return [];
}
}
function getItem(state, collectionName, key) {
if (state[collectionName]) {
return state[collectionName].items[key];
}
}
var Context = React.createContext();
function EntryStateProvider(_ref) {
var seed = _ref.seed,
children = _ref.children;
var _useCollections = useCollections(seed.collections, {
keyAttribute: 'permaId'
}),
_useCollections2 = _slicedToArray(_useCollections, 2),
collections = _useCollections2[0],
dispatch = _useCollections2[1];
var value = useMemo(function () {
return {
entryState: {
collections: collections,
config: seed.config
},
dispatch: dispatch
};
}, [collections, dispatch, seed]);
return React.createElement(Context.Provider, {
value: value
}, children);
}
function useEntryState() {
var value = useContext(Context);
return value.entryState;
}
function useEntryStateDispatch() {
var value = useContext(Context);
return value.dispatch;
}
/**
* Returns a nested data structure representing the metadata of the entry.
*
* @example
*
* const metaData = useEntryMetadata();
* metaData // =>
* {
* id: 5,
* shareProviders: {email: false, facebook: true},
* share_url: 'http://test.host/test',
* credits: 'Credits: Pageflow'
* }
*/
function useEntryMetadata() {
var entryState = useEntryState();
return useMemo(function () {
return getItems(entryState.collections, 'entries')[0];
}, [entryState]);
}
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;
}
function _extends() {
_extends = Object.assign || 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 EmailIcon = (function (_ref) {
var _ref$styles = _ref.styles,
props = _objectWithoutProperties(_ref, ["styles"]);
return React.createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 612 612"
}, props), React.createElement("path", {
d: "M573.75 57.375H38.25C17.136 57.375 0 74.511 0 95.625v420.75c0 21.133 17.136 38.25 38.25 38.25h535.5c21.133 0 38.25-17.117 38.25-38.25V95.625c0-21.114-17.117-38.25-38.25-38.25zM554.625 497.25H57.375V204.657l224.03 187.999c7.134 5.967 15.874 8.97 24.595 8.97 8.74 0 17.461-3.003 24.595-8.97l224.03-187.999V497.25zm0-367.487L306 338.379 57.375 129.763V114.75h497.25v15.013z"
}));
});
function _extends$1() {
_extends$1 = Object.assign || 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$1.apply(this, arguments);
}
var FacebookIcon = (function (_ref) {
var _ref$styles = _ref.styles,
props = _objectWithoutProperties(_ref, ["styles"]);
return React.createElement("svg", _extends$1({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 430.113 430.114"
}, props), React.createElement("path", {
d: "M158.081 83.3v59.218h-43.385v72.412h43.385v215.183h89.122V214.936h59.805s5.601-34.721 8.316-72.685H247.54V92.74c0-7.4 9.717-17.354 19.321-17.354h48.557V.001h-66.021C155.878-.004 158.081 72.48 158.081 83.3z"
}));
});
function _extends$2() {
_extends$2 = Object.assign || 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$2.apply(this, arguments);
}
var LinkedInIcon = (function (_ref) {
var _ref$styles = _ref.styles,
props = _objectWithoutProperties(_ref, ["styles"]);
return React.createElement("svg", _extends$2({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 430.117 430.117"
}, props), React.createElement("path", {
d: "M430.117 261.543V420.56h-92.188V272.193c0-37.271-13.334-62.707-46.703-62.707-25.473 0-40.632 17.142-47.301 33.724-2.432 5.928-3.058 14.179-3.058 22.477V420.56h-92.219s1.242-251.285 0-277.32h92.21v39.309c-.187.294-.43.611-.606.896h.606v-.896c12.251-18.869 34.13-45.824 83.102-45.824 60.673-.001 106.157 39.636 106.157 124.818zM52.183 9.558C20.635 9.558 0 30.251 0 57.463c0 26.619 20.038 47.94 50.959 47.94h.616c32.159 0 52.159-21.317 52.159-47.94-.606-27.212-20-47.905-51.551-47.905zM5.477 420.56h92.184V143.24H5.477v277.32z"
}));
});
function _extends$3() {
_extends$3 = Object.assign || 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$3.apply(this, arguments);
}
var TelegramIcon = (function (_ref) {
var _ref$styles = _ref.styles,
props = _objectWithoutProperties(_ref, ["styles"]);
return React.createElement("svg", _extends$3({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 512.004 512.004"
}, props), React.createElement("path", {
d: "M508.194 20.517c-4.43-4.96-11.42-6.29-17.21-3.76l-482 211a15.01 15.01 0 00-8.98 13.41 15.005 15.005 0 008.38 13.79l115.09 56.6 28.68 172.06c.93 6.53 6.06 11.78 12.74 12.73 4.8.69 9.57-1 12.87-4.4l90.86-90.86 129.66 92.62a15.02 15.02 0 0014.24 1.74 15.01 15.01 0 009.19-11.01l90-451c.89-4.47-.26-9.26-3.52-12.92zm-372.84 263.45l-84.75-41.68 334.82-146.57-250.07 188.25zm46.94 44.59l-13.95 69.75-15.05-90.3 183.97-138.49-150.88 151.39c-2.12 2.12-3.53 4.88-4.09 7.65zm9.13 107.3l15.74-78.67 36.71 26.22-52.45 52.45zm205.41 19.94l-176.73-126.23 252.47-253.31-75.74 379.54z"
}));
});
function _extends$4() {
_extends$4 = Object.assign || 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$4.apply(this, arguments);
}
var TwitterIcon = (function (_ref) {
var _ref$styles = _ref.styles,
props = _objectWithoutProperties(_ref, ["styles"]);
return React.createElement("svg", _extends$4({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 612 612"
}, props), React.createElement("path", {
d: "M612 116.258a250.714 250.714 0 01-72.088 19.772c25.929-15.527 45.777-40.155 55.184-69.411-24.322 14.379-51.169 24.82-79.775 30.48-22.907-24.437-55.49-39.658-91.63-39.658-69.334 0-125.551 56.217-125.551 125.513 0 9.828 1.109 19.427 3.251 28.606-104.326-5.24-196.835-55.223-258.75-131.174-10.823 18.51-16.98 40.078-16.98 63.101 0 43.559 22.181 81.993 55.835 104.479a125.556 125.556 0 01-56.867-15.756v1.568c0 60.806 43.291 111.554 100.693 123.104-10.517 2.83-21.607 4.398-33.08 4.398-8.107 0-15.947-.803-23.634-2.333 15.985 49.907 62.336 86.199 117.253 87.194-42.947 33.654-97.099 53.655-155.916 53.655-10.134 0-20.116-.612-29.944-1.721 55.567 35.681 121.536 56.485 192.438 56.485 230.948 0 357.188-191.291 357.188-357.188l-.421-16.253c24.666-17.593 46.005-39.697 62.794-64.861z"
}));
});
function _extends$5() {
_extends$5 = Object.assign || 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$5.apply(this, arguments);
}
var WhatsAppIcon = (function (_ref) {
var _ref$styles = _ref.styles,
props = _objectWithoutProperties(_ref, ["styles"]);
return React.createElement("svg", _extends$5({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 90 90"
}, props), React.createElement("path", {
d: "M90 43.841c0 24.213-19.779 43.841-44.182 43.841a44.256 44.256 0 01-21.357-5.455L0 90l7.975-23.522a43.38 43.38 0 01-6.34-22.637C1.635 19.628 21.416 0 45.818 0 70.223 0 90 19.628 90 43.841zM45.818 6.982c-20.484 0-37.146 16.535-37.146 36.859 0 8.065 2.629 15.534 7.076 21.61L11.107 79.14l14.275-4.537A37.122 37.122 0 0045.819 80.7c20.481 0 37.146-16.533 37.146-36.857S66.301 6.982 45.818 6.982zm22.311 46.956c-.273-.447-.994-.717-2.076-1.254-1.084-.537-6.41-3.138-7.4-3.495-.993-.358-1.717-.538-2.438.537-.721 1.076-2.797 3.495-3.43 4.212-.632.719-1.263.809-2.347.271-1.082-.537-4.571-1.673-8.708-5.333-3.219-2.848-5.393-6.364-6.025-7.441-.631-1.075-.066-1.656.475-2.191.488-.482 1.084-1.255 1.625-1.882.543-.628.723-1.075 1.082-1.793.363-.717.182-1.344-.09-1.883-.27-.537-2.438-5.825-3.34-7.977-.902-2.15-1.803-1.792-2.436-1.792-.631 0-1.354-.09-2.076-.09s-1.896.269-2.889 1.344c-.992 1.076-3.789 3.676-3.789 8.963 0 5.288 3.879 10.397 4.422 11.113.541.716 7.49 11.92 18.5 16.223C58.2 65.771 58.2 64.336 60.186 64.156c1.984-.179 6.406-2.599 7.312-5.107.9-2.512.9-4.663.631-5.111z"
}));
});
/**
* Returns a list of attributes (icon, name and url) of all configured share providers of the entry.
* The url provides a %{url} placeholder where the link can be inserted.
*
* @example
*
* const shareProviders = useShareProviders();
* shareProviders // =>
* [
* {
* icon: ,
* name: 'Facebook',
* url: http://www.facebook.com/sharer/sharer.php?u=%{url}
* },
* {
* icon: ,
* name: 'Twitter',
* url: https://twitter.com/intent/tweet?url=%{url}
* }
* ]
*/
function useShareProviders() {
var entryState = useEntryState();
var entryMetadata = useEntryMetadata();
var shareProviders = entryMetadata ? entryMetadata.shareProviders : {};
var urlTemplates = entryState.config.shareUrlTemplates;
var sharing = {
email: {
icon: EmailIcon,
name: 'Email',
url: urlTemplates.email
},
facebook: {
icon: FacebookIcon,
name: 'Facebook',
url: urlTemplates.facebook
},
linked_in: {
icon: LinkedInIcon,
name: 'LinkedIn',
url: urlTemplates.linked_in
},
telegram: {
icon: TelegramIcon,
name: 'Telegram',
url: urlTemplates.telegram
},
twitter: {
icon: TwitterIcon,
name: 'Twitter',
url: urlTemplates.twitter
},
whats_app: {
icon: WhatsAppIcon,
name: 'WhatsApp',
url: urlTemplates.whats_app
}
};
return useMemo(function () {
return activeShareProviders(shareProviders).map(function (provider) {
var config = sharing[provider];
return {
name: config.name,
icon: config.icon,
url: config.url
};
});
}, [shareProviders]);
}
function activeShareProviders(shareProvidersConfig) {
return Object.keys(shareProvidersConfig).filter(function (provider) {
return shareProvidersConfig[provider] !== false;
});
}
/**
* Returns the share url of the entry.
*
* @example
*
* const shareUrl = useShareUrl();
* shareUrl // => "http://test.host/test"
*/
function useShareUrl() {
var entryMetadata = useEntryMetadata();
var entryState = useEntryState();
if (entryMetadata) {
return entryMetadata.shareUrl ? entryMetadata.shareUrl : entryState.config.prettyUrl;
} else {
return entryState.config.shareUrl;
}
}
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
/**
* Returns a nested data structure representing the chapters, sections
* and content elements of the entry.
*
* @example
*
* const structure = useEntryStructure();
* structure // =>
* [
* {
* permaId: 5,
* title: 'Chapter 1',
* summary: 'An introductory chapter',
* sections: [
* {
* permaId: 101,
* sectionIndex: 0,
* transition: 'scroll',
*
* // references to adjacent section objects
* previousSection: { ... },
* nextSection: { ... },
*
* foreground: [
* {
* type: 'heading',
* props: {
* children: 'Heading'
* }
* },
* {
* type: 'textBlock',
* props: {
* children: 'Some text'
* }
* }
* ]
* }
* ],
* }
* ]
*/
function useEntryStructure() {
var entryState = useEntryState();
return useMemo(function () {
var sections = [];
var chapters = getItems(entryState.collections, 'chapters').map(function (chapter) {
return _objectSpread$1({
permaId: chapter.permaId
}, chapter.configuration, {
sections: getItems(entryState.collections, 'sections').filter(function (item) {
return item.chapterId === chapter.id;
}).map(function (section) {
var result = sectionStructure(entryState.collections, section);
sections.push(result);
return result;
})
});
});
sections.forEach(function (section, index) {
section.sectionIndex = index;
section.previousSection = sections[index - 1];
section.nextSection = sections[index + 1];
});
return chapters;
}, [entryState]);
}
function sectionStructure(collections, section) {
return section && _objectSpread$1({
permaId: section.permaId
}, section.configuration, {
foreground: getItems(collections, 'contentElements').filter(function (item) {
return item.sectionId === section.id;
}).map(function (item) {
return {
type: item.typeName,
position: item.configuration.position,
props: item.configuration
};
})
});
}
function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function expandUrls(collectionName, file, urlTemplates) {
if (!file) {
return null;
}
if (!urlTemplates[collectionName]) {
throw new Error("No file url templates found for ".concat(collectionName));
}
var variants = file.variants || Object.keys(urlTemplates[collectionName]);
var urls = variants.reduce(function (result, variant) {
var url = getFileUrl(collectionName, file, variant, urlTemplates);
if (url) {
result[variant] = url;
}
return result;
}, {});
return _objectSpread$2({
urls: urls
}, file);
}
function getFileUrl(collectionName, file, quality, urlTemplates) {
var templates = urlTemplates[collectionName];
var template = templates[quality];
if (template) {
return template.replace(':id_partition', idPartition(file.id)).replace(':basename', file.basename);
}
}
function idPartition(id) {
return partition(pad(id, 9));
}
function partition(string, separator) {
return string.replace(/./g, function (c, i, a) {
return i && (a.length - i) % 3 === 0 ? '/' + c : c;
});
}
function pad(string, size) {
return (Array(size).fill(0).join('') + string).slice(-size);
}
/**
* Look up a file by its collection and perma id.
*
* @param {Object} options
* @param {String} options.collectionName - Collection name of file type to look for (in camel case).
* @param {String} options.permaId - Perma id of file look up
*
* @example
* const imageFile = useFile({collectionName: 'imageFiles', permaId: 5});
* imageFile // =>
* {
* id: 102,
* permaId: 5,
* width: 1000,
* height: 500,
* urls: {
* large: 'https://...'
* },
* }
*/
function useFile(_ref) {
var collectionName = _ref.collectionName,
permaId = _ref.permaId;
var entryState = useEntryState();
return expandUrls(collectionName, getItem(entryState.collections, collectionName, permaId), entryState.config.fileUrlTemplates);
}
/**
* 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,
* 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"
*/
function useFileRights() {
var entryState = useEntryState();
var defaultFileRights = entryState.config.defaultFileRights;
var imageFiles = getItems(entryState.collections, 'imageFiles');
var imageFileRights = imageFiles.map(function (imageConfig) {
return imageConfig.rights ? imageConfig.rights.trim() : undefined;
}).filter(Boolean).join(', ');
var fileRights = !!imageFileRights ? imageFileRights : defaultFileRights.trim();
var fileRightsString = !!fileRights ? 'Bildrechte: ' + fileRights : '';
return fileRightsString;
}
/**
* Returns a nested data structure representing the legal info of the entry.
* Each legal info is separated into label and url to use in links.
* Both label and url can be blank, depending on the configuration.
*
* @example
*
* const legalInfo = useLegalInfo();
* legalInfo // =>
* {
* imprint: {
* label: '',
* url: ''
* },
* copyright: {
* label: '',
* url: ''
* },
* privacy: {
* label: '',
* url: ''
* }
* }
*/
function useLegalInfo() {
var entryState = useEntryState();
return entryState.config.legalInfo;
}
/**
* Returns the credits string (rich text) of the entry.
*
* @example
*
* const credits = useCredits();
* credits // => "Credits: pageflow.com"
*/
function useCredits() {
var entryMetadata = useEntryMetadata();
var credits = '';
if (entryMetadata) {
credits = entryMetadata.credits;
}
return credits;
}
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css = "header svg {\n fill: #c2c2c2;\n cursor: pointer;\n}\n\nheader svg:hover {\n fill: rgb(0, 55, 90);;\n}\n\n.AppHeader-module_navigationBar__2EFHw {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n position: sticky;\n top: -50px;\n transition: top .15s;\n z-index: 10000;\n width: 100%;\n text-align: center;\n}\n\n.AppHeader-module_navigationBarExpanded__18nbf {\n top: 0;\n}\n\n.AppHeader-module_navigationBarContentWrapper__2Sf8y {\n position: relative;\n z-index: 2;\n background-color: #fff;\n height: 50px;\n}\n\n.AppHeader-module_menuIcon__5JKuj {\n position: absolute;\n}\n\n.AppHeader-module_wdrLogo__3XGNI {\n top: 12px;\n left: 15px;\n width: 80px;\n}\n\n.AppHeader-module_chapterList__2lMMD {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n\n.AppHeader-module_chapterListItem__28zrc {\n position: relative;\n display: inline-block;\n padding: 0 15px;\n border-right: 1px solid #e9e9e9;\n}\n\n.AppHeader-module_chapterListItem__28zrc:last-of-type {\n border-right: none;\n}\n\n.AppHeader-module_navigationTooltip__1EvCy {\n opacity: 1 !important;\n box-shadow: 0 0 0.3125rem rgba(0,0,0,.2);\n}\n\n.AppHeader-module_progressBar__17IVu {\n background-color: rgba(194,194,194,0.8);\n height: 8px;\n width: 100%;\n}\n\n.AppHeader-module_progressIndicator__3SlYz {\n position: absolute;\n top: 0;\n left: 0;\n width: 0vw;\n height: 100%;\n background-color: #e10028;\n}\n\n/* mobile view */\n@media (max-width: 780px) {\n .AppHeader-module_wdrLogo__3XGNI {\n position: inherit;\n }\n\n .AppHeader-module_navigationChapters__1dzyV {\n touch-action: none;\n display: block;\n position: fixed;\n top: 60px;\n left: 0px;\n background: rgba(255, 255, 255, 0.95);\n width: 100vw;\n height: 100vh;\n }\n\n .AppHeader-module_navigationChaptersHidden__8AEPA {\n display: none;\n }\n\n .AppHeader-module_chapterList__2lMMD {\n margin-top: 50px;\n }\n\n .AppHeader-module_chapterListItem__28zrc {\n display: list-item;\n width: 80vw;\n padding: 25px 10vw;\n border-right: none;\n }\n\n .AppHeader-module_chapterListItem__28zrc::before,\n .AppHeader-module_chapterListItem__28zrc::after {\n display: table;\n content: \" \";\n border-top: 1px solid rgb(100, 100, 100);\n width: 30%;\n margin: 0 35%;\n transition: width .15s, margin .15s;\n }\n\n .AppHeader-module_chapterListItem__28zrc:hover::before,\n .AppHeader-module_chapterListItem__28zrc:hover::after {\n border-top: 1px solid rgb(0, 55, 90);\n width: 80%;\n margin: 0 10%;\n }\n\n .AppHeader-module_chapterLink__1Q-ee,\n .AppHeader-module_chapterLink__1Q-ee:hover {\n padding: 10px 0px;\n }\n\n .AppHeader-module_progressBar__17IVu {\n height: 10px;\n }\n}\n";
var styles = {"navigationBar":"AppHeader-module_navigationBar__2EFHw","navigationBarExpanded":"AppHeader-module_navigationBarExpanded__18nbf","navigationBarContentWrapper":"AppHeader-module_navigationBarContentWrapper__2Sf8y","menuIcon":"AppHeader-module_menuIcon__5JKuj","wdrLogo":"AppHeader-module_wdrLogo__3XGNI","chapterList":"AppHeader-module_chapterList__2lMMD","chapterListItem":"AppHeader-module_chapterListItem__28zrc","navigationTooltip":"AppHeader-module_navigationTooltip__1EvCy","progressBar":"AppHeader-module_progressBar__17IVu","progressIndicator":"AppHeader-module_progressIndicator__3SlYz","navigationChapters":"AppHeader-module_navigationChapters__1dzyV","navigationChaptersHidden":"AppHeader-module_navigationChaptersHidden__8AEPA","chapterLink":"AppHeader-module_chapterLink__1Q-ee"};
styleInject(css);
var css$1 = ".HamburgerIcon-module_burgerMenuIconContainer__26RY4 {\n display: none;\n}\n\n.HamburgerIcon-module_burgerMenuIcon__24t-5 {\n top: 12px;\n left: 12px;\n outline: none;\n}\n\n/* mobile view */\n@media (max-width: 780px) {\n .HamburgerIcon-module_burgerMenuIconContainer__26RY4 {\n display: block;\n }\n}\n";
var styles$1 = {"burgerMenuIconContainer":"HamburgerIcon-module_burgerMenuIconContainer__26RY4","burgerMenuIcon":"HamburgerIcon-module_burgerMenuIcon__24t-5"};
styleInject(css$1);
var css$2 = "/*!\n * Hamburgers\n * @description Tasty CSS-animated hamburgers\n * @author Jonathan Suh @jonsuh\n * @site https://jonsuh.com/hamburgers\n * @link https://github.com/jonsuh/hamburgers\n */\n.HamburgerIcons-module_hamburger__NnCze {\n display: inline-block;\n cursor: pointer;\n transition-property: opacity, filter;\n transition-duration: 0.15s;\n transition-timing-function: linear;\n font: inherit;\n color: inherit;\n text-transform: none;\n background-color: transparent;\n border: 0;\n margin: 0;\n overflow: visible;\n}\n\n.HamburgerIcons-module_hamburger__NnCze.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg,\n.HamburgerIcons-module_hamburger__NnCze.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg::before,\n.HamburgerIcons-module_hamburger__NnCze.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg::after {\n background-color: #e10028;\n}\n\n.HamburgerIcons-module_hamburger-box__34rgF {\n width: 40px;\n height: 24px;\n display: inline-block;\n position: relative;\n}\n\n.HamburgerIcons-module_hamburger-inner__187lg {\n display: block;\n top: 50%;\n margin-top: -2px;\n}\n\n.HamburgerIcons-module_hamburger-inner__187lg, .HamburgerIcons-module_hamburger-inner__187lg::before, .HamburgerIcons-module_hamburger-inner__187lg::after {\n width: 30px;\n height: 4px;\n background-color: rgb(0, 55, 90);\n border-radius: 4px;\n position: absolute;\n transition-property: transform;\n transition-duration: 0.15s;\n transition-timing-function: ease;\n}\n\n.HamburgerIcons-module_hamburger-inner__187lg::before, .HamburgerIcons-module_hamburger-inner__187lg::after {\n content: \"\";\n display: block;\n}\n\n.HamburgerIcons-module_hamburger-inner__187lg::before {\n top: -10px;\n}\n\n.HamburgerIcons-module_hamburger-inner__187lg::after {\n bottom: -10px;\n}\n\n/*\n * Collapse\n */\n.HamburgerIcons-module_hamburger--collapse__gRQFa .HamburgerIcons-module_hamburger-inner__187lg {\n top: auto;\n bottom: 0;\n transition-duration: 0.13s;\n transition-delay: 0.13s;\n transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n}\n\n.HamburgerIcons-module_hamburger--collapse__gRQFa .HamburgerIcons-module_hamburger-inner__187lg::after {\n top: -20px;\n transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;\n}\n\n.HamburgerIcons-module_hamburger--collapse__gRQFa .HamburgerIcons-module_hamburger-inner__187lg::before {\n transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);\n}\n\n.HamburgerIcons-module_hamburger--collapse__gRQFa.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg {\n transform: translate3d(0, -10px, 0) rotate(-45deg);\n transition-delay: 0.22s;\n transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.HamburgerIcons-module_hamburger--collapse__gRQFa.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg::after {\n top: 0;\n opacity: 0;\n transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;\n}\n\n.HamburgerIcons-module_hamburger--collapse__gRQFa.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg::before {\n top: 0;\n transform: rotate(-90deg);\n transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n";
var hamburgerIconStyles = {"hamburger":"HamburgerIcons-module_hamburger__NnCze","is-active":"HamburgerIcons-module_is-active__10qoY","hamburger-inner":"HamburgerIcons-module_hamburger-inner__187lg","hamburger-box":"HamburgerIcons-module_hamburger-box__34rgF","hamburger--collapse":"HamburgerIcons-module_hamburger--collapse__gRQFa"};
styleInject(css$2);
function HamburgerIcon(props) {
return React.createElement("div", {
className: styles$1.burgerMenuIconContainer
}, React.createElement("button", {
className: classnames(styles.menuIcon, styles$1.burgerMenuIcon, hamburgerIconStyles.hamburger, hamburgerIconStyles['hamburger--collapse'], _defineProperty({}, hamburgerIconStyles['is-active'], !props.mobileNavHidden)),
type: "button",
onClick: props.onClick
}, React.createElement("span", {
className: hamburgerIconStyles['hamburger-box']
}, React.createElement("span", {
className: hamburgerIconStyles['hamburger-inner']
}))));
}
var css$3 = ".ChapterLink-module_chapterLink__v5VRl {\n line-height: 3rem;\n color: rgb(0, 55, 90);\n text-decoration: none;\n position: relative;\n display: block;\n font-family: inherit;\n font-weight: 700;\n font-size: 1rem;\n height: 48px;\n}\n\n.ChapterLink-module_chapterLink__v5VRl:hover,\n.ChapterLink-module_chapterLinkActive__jl4h5 {\n color: #e10028;\n}\n\n/* mobile view */\n@media (max-width: 780px) {\n .ChapterLink-module_chapterLink__v5VRl,\n .ChapterLink-module_chapterLink__v5VRl:hover {\n padding: 10px 0px;\n }\n}";
var styles$2 = {"chapterLink":"ChapterLink-module_chapterLink__v5VRl","chapterLinkActive":"ChapterLink-module_chapterLinkActive__jl4h5"};
styleInject(css$3);
var css$4 = ".ChapterLinkTooltip-module_chapterLinkTooltip__cCfsw {\n border-bottom: 3px solid #e10028;\n width: 200px;\n}\n\n.ChapterLinkTooltip-module_tooltipHeadline__reew_ {\n margin: 5px 0 0px;\n color: #e10028;\n}\n\n@media (max-width: 780px) {\n .ChapterLinkTooltip-module_chapterLinkTooltip__cCfsw {\n display: none !important;\n }\n}\n";
var styles$3 = {"chapterLinkTooltip":"ChapterLinkTooltip-module_chapterLinkTooltip__cCfsw","tooltipHeadline":"ChapterLinkTooltip-module_tooltipHeadline__reew_"};
styleInject(css$4);
function ChapterLinkTooltip(props) {
return React.createElement(ReactTooltip, {
id: props.chapterLinkId,
type: "light",
place: "bottom",
effect: "solid",
className: classnames(styles.navigationTooltip, styles$3.chapterLinkTooltip)
}, React.createElement("div", null, React.createElement("h3", {
className: styles$3.tooltipHeadline
}, "Kapitel ", props.chapterIndex), React.createElement("p", {
dangerouslySetInnerHTML: {
__html: props.summary
}
})));
}
function ChapterLink(props) {
return React.createElement("div", null, React.createElement("a", {
className: classnames(styles$2.chapterLink, _defineProperty({}, styles$2.chapterLinkActive, props.active)),
href: "#chapter-".concat(props.permaId),
onClick: function onClick() {
return props.handleMenuClick(props.chapterLinkId);
},
"data-tip": true,
"data-for": props.chapterLinkId
}, props.title), React.createElement(ChapterLinkTooltip, Object.assign({
chapterIndex: props.chapterIndex,
chapterLinkId: props.chapterLinkId
}, props)));
}
var css$5 = ".LegalInfoMenu-module_infoIcon__1kTnt {\n top: 12px;\n right: 55px;\n width: 26px;\n}\n\n";
var styles$4 = {"infoIcon":"LegalInfoMenu-module_infoIcon__1kTnt"};
styleInject(css$5);
function _extends$6() {
_extends$6 = Object.assign || 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$6.apply(this, arguments);
}
var InfoIcon = (function (_ref) {
var _ref$styles = _ref.styles,
props = _objectWithoutProperties(_ref, ["styles"]);
return React.createElement("svg", _extends$6({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 330 330"
}, props), React.createElement("path", {
d: "M165 0C74.019 0 0 74.02 0 165.001 0 255.982 74.019 330 165 330s165-74.018 165-164.999S255.981 0 165 0zm0 300c-74.44 0-135-60.56-135-134.999S90.56 30 165 30s135 60.562 135 135.001C300 239.44 239.439 300 165 300z"
}), React.createElement("path", {
d: "M164.998 70c-11.026 0-19.996 8.976-19.996 20.009 0 11.023 8.97 19.991 19.996 19.991 11.026 0 19.996-8.968 19.996-19.991 0-11.033-8.97-20.009-19.996-20.009zm.002 70c-8.284 0-15 6.716-15 15v90c0 8.284 6.716 15 15 15 8.284 0 15-6.716 15-15v-90c0-8.284-6.716-15-15-15z"
}));
});
var css$6 = ".LegalInfoTooltip-module_legalInfoTooltip__ChzOS {\n width: 200px;\n max-width: 200px;\n text-align: left;\n margin-top: 12px !important;\n margin-bottom: 12px !important;\n}\n\n.LegalInfoTooltip-module_legalInfoTooltip__ChzOS:after {\n left: 90% !important;\n}\n\n.LegalInfoTooltip-module_legalInfoTooltip__ChzOS p {\n margin: 0 0 0.5em;\n}\n\n.LegalInfoTooltip-module_legalInfoTooltip__ChzOS a {\n color: #e10028;\n}\n";
var styles$5 = {"legalInfoTooltip":"LegalInfoTooltip-module_legalInfoTooltip__ChzOS"};
styleInject(css$6);
function LegalInfoLink(props) {
return React.createElement("div", null, props.label && props.url && React.createElement("a", {
target: "_blank",
href: props.url,
dangerouslySetInnerHTML: {
__html: props.label
}
}));
}
function LegalInfoTooltip() {
var fileRights = useFileRights();
var legalInfo = useLegalInfo();
var credits = useCredits();
return React.createElement(ReactTooltip, {
id: 'legalInfoTooltip',
type: 'light',
place: 'bottom',
effect: 'solid',
event: 'click',
globalEventOff: 'click',
clickable: true,
offset: {
bottom: 5,
right: -97
},
className: classnames(styles.navigationTooltip, styles$5.legalInfoTooltip)
}, React.createElement("div", {
onMouseLeave: function onMouseLeave() {
ReactTooltip.hide();
}
}, credits && React.createElement("p", {
dangerouslySetInnerHTML: {
__html: credits
}
}), fileRights && React.createElement("p", null, fileRights), React.createElement(LegalInfoLink, legalInfo.imprint), React.createElement(LegalInfoLink, legalInfo.copyright), React.createElement(LegalInfoLink, legalInfo.privacy)));
}
function LegalInfoMenu(props) {
return React.createElement("div", null, React.createElement("a", {
className: classnames(styles.menuIcon, styles$4.infoIcon),
"data-tip": true,
"data-for": 'legalInfoTooltip',
onMouseEnter: function onMouseEnter() {
ReactTooltip.hide();
}
}, React.createElement(InfoIcon, null)), React.createElement(LegalInfoTooltip, null));
}
var css$7 = ".SharingMenu-module_shareIcon__1AlDL {\n top: 5px;\n right: 10px;\n width: 40px;\n}";
var styles$6 = {"shareIcon":"SharingMenu-module_shareIcon__1AlDL"};
styleInject(css$7);
function _extends$7() {
_extends$7 = Object.assign || 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$7.apply(this, arguments);
}
var ShareIcon = (function (_ref) {
var _ref$styles = _ref.styles,
props = _objectWithoutProperties(_ref, ["styles"]);
return React.createElement("svg", _extends$7({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 96 96"
}, props), React.createElement("path", {
d: "M67.5 18c-5.1 0-9.3 4.2-9.3 9.3 0 .5.1 1.1.2 1.6l-23 12.9c-1.7-1.8-4.1-3-6.8-3-5.1 0-9.3 4.1-9.3 9.3 0 5.1 4.1 9.3 9.3 9.3 2.7 0 5.2-1.2 6.9-3.1l22.8 13.4c0 .4-.1.7-.1 1.1 0 5.1 4.1 9.3 9.3 9.3 5.1 0 9.3-4.1 9.3-9.3 0-5.1-4.1-9.3-9.3-9.3-2.8 0-5.4 1.3-7.1 3.3L37.7 49.4c.1-.4.1-.9.1-1.3 0-.5 0-1-.1-1.5l23.1-13c1.7 1.8 4.1 3 6.8 3 5.1 0 9.3-4.1 9.3-9.3-.1-5.1-4.3-9.3-9.4-9.3z"
}));
});
var css$8 = "header .share svg {\n fill: rgb(0, 55, 90);\n}\n\nheader .share:hover svg {\n fill: #e10028;\n}\n\n.SharingTooltip-module_sharingTooltip__1cljv {\n width: 160px;\n padding: 0 !important;\n}\n\n.SharingTooltip-module_sharingTooltip__1cljv:after {\n left: 90% !important;\n}\n\n.SharingTooltip-module_shareLinkContainer__2MnKN {\n float: left;\n width: 80px;\n height: 60px;\n cursor: pointer;\n color: transparent;\n text-align: center;\n}\n\n.SharingTooltip-module_shareLink__2ySSX {\n position: relative;\n color: rgb(0, 55, 90);\n text-decoration: none;\n}\n\n.SharingTooltip-module_shareLink__2ySSX:hover {\n color: #e10028;\n}\n\n.SharingTooltip-module_shareIcon__3igrs {\n width: 80px;\n height: 25px;\n margin-top: 5px;\n margin-bottom: 3px;\n}\n";
var styles$7 = {"sharingTooltip":"SharingTooltip-module_sharingTooltip__1cljv","shareLinkContainer":"SharingTooltip-module_shareLinkContainer__2MnKN","shareLink":"SharingTooltip-module_shareLink__2ySSX","shareIcon":"SharingTooltip-module_shareIcon__3igrs"};
styleInject(css$8);
function SharingTooltip() {
var shareUrl = useShareUrl();
var shareProviders = useShareProviders();
function renderShareLinks(shareProviders) {
return shareProviders.map(function (shareProvider) {
var Icon = shareProvider.icon;
return React.createElement("div", {
key: shareProvider.name,
className: styles$7.shareLinkContainer
}, React.createElement("a", {
className: classnames('share', styles$7.shareLink),
href: shareProvider.url.replace('%{url}', shareUrl),
target: '_blank'
}, React.createElement(Icon, {
className: styles$7.shareIcon
}), shareProvider.name));
});
}
return React.createElement(ReactTooltip, {
id: 'sharingTooltip',
type: 'light',
place: 'bottom',
effect: 'solid',
event: 'click',
globalEventOff: 'click',
clickable: true,
offset: {
right: -64
},
className: classnames(styles.navigationTooltip, styles$7.sharingTooltip)
}, React.createElement("div", {
onMouseLeave: function onMouseLeave() {
ReactTooltip.hide();
}
}, renderShareLinks(shareProviders)));
}
function SharingMenu() {
return React.createElement("div", null, React.createElement("a", {
className: classnames(styles.menuIcon, styles$6.shareIcon),
"data-tip": true,
"data-for": 'sharingTooltip',
onMouseEnter: function onMouseEnter() {
ReactTooltip.hide();
}
}, React.createElement(ShareIcon, null)), React.createElement(SharingTooltip, null));
}
function _extends$8() {
_extends$8 = Object.assign || 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$8.apply(this, arguments);
}
var WDRlogo = (function (_ref) {
var _ref$styles = _ref.styles,
props = _objectWithoutProperties(_ref, ["styles"]);
return React.createElement("svg", _extends$8({
viewBox: "-0.445 -0.445 51.921 15.721"
}, props), React.createElement("path", {
d: "M31.189 14.83h3.731v-4.772h.285c.425 0 1.496-.023 2.079.919l2.292 3.854h4.015l-2.088-3.509c-.69-1.176-1.258-1.806-1.704-2.13v-.039c1.259-.446 2.636-1.522 2.636-3.715 0-2.716-1.946-4.116-5.394-4.116H31.19v4.689h-.038c-.708-2.829-3.095-4.689-7.453-4.689h-8.253l-1.257 5.516a42.42 42.42 0 00-.488 2.578h-.04s-.284-1.603-.547-2.74l-1.077-5.354h-4.53L6.43 6.676c-.264 1.137-.547 2.74-.547 2.74H5.84s-.222-1.442-.486-2.578L4.097 1.322H0L3.61 14.83h4.121L9.78 6.169h.041l2.048 8.662h4.056L18.93 3.614h.04v11.217h4.606c4.42 0 6.86-2.028 7.577-4.927h.036v4.927zm-7.309-3.062h-1.135V4.384h1.034c2.475 0 3.59 1.095 3.59 3.612 0 2.473-1.115 3.772-3.489 3.772m13.08-4.565h-2.04V4.182h1.918c1.278 0 1.806.506 1.806 1.52 0 .934-.548 1.501-1.684 1.501m12.003-2.317V1.404L45.48 2.66v.865l1.153-.418v2.616l2.33-.838zM47.573 0a3.469 3.469 0 013.459 3.478 3.468 3.468 0 01-3.46 3.477 3.468 3.468 0 01-3.458-3.478A3.469 3.469 0 0147.573 0m0 .51a2.96 2.96 0 00-2.951 2.967 2.96 2.96 0 002.95 2.968 2.96 2.96 0 002.953-2.967A2.96 2.96 0 0047.573.51",
fill: "#00375a"
}));
});
function AppHeader(props) {
var _useState = useState(true),
_useState2 = _slicedToArray(_useState, 2),
navExpanded = _useState2[0],
setNavExpanded = _useState2[1];
var _useState3 = useState(true),
_useState4 = _slicedToArray(_useState3, 2),
mobileNavHidden = _useState4[0],
setMobileNavHidden = _useState4[1];
var _useState5 = useState(0),
_useState6 = _slicedToArray(_useState5, 2),
readingProgress = _useState6[0],
setReadingProgress = _useState6[1];
var _useState7 = useState('chapterLink1'),
_useState8 = _slicedToArray(_useState7, 2),
activeChapterLink = _useState8[0],
setActiveChapterLink = _useState8[1];
var entryStructure = useEntryStructure();
var ref = useRef();
useNativeScrollPrevention(ref);
var chapters = entryStructure.map(function (chapter) {
return {
permaId: chapter.permaId,
title: chapter.title,
summary: chapter.summary
};
});
useScrollPosition(function (_ref) {
var prevPos = _ref.prevPos,
currPos = _ref.currPos;
var expand = currPos.y > prevPos.y;
if (expand !== navExpanded) setNavExpanded(expand);
}, [navExpanded]);
useScrollPosition(function (_ref2) {
var prevPos = _ref2.prevPos,
currPos = _ref2.currPos;
var current = currPos.y * -1; // Todo: Memoize and update on window resize
var total = document.body.clientHeight - window.innerHeight;
var progress = Math.abs(current / total) * 100;
setReadingProgress(progress);
}, [readingProgress], null, false, 1);
function handleProgressBarMouseEnter() {
setNavExpanded(true);
}
function handleBurgerMenuClick() {
setMobileNavHidden(!mobileNavHidden);
}
function handleMenuClick(chapterLinkId) {
setActiveChapterLink(chapterLinkId);
setMobileNavHidden(true);
}
function renderChapterLinks(chapters) {
return chapters.map(function (chapter, index) {
var chapterIndex = index + 1;
var chapterLinkId = "chapterLink".concat(chapterIndex);
return React.createElement("li", {
key: index,
className: styles.chapterListItem
}, React.createElement(ChapterLink, Object.assign({}, chapter, {
chapterIndex: chapterIndex,
chapterLinkId: chapterLinkId,
active: activeChapterLink === chapterLinkId,
handleMenuClick: handleMenuClick
})));
});
}
return React.createElement("header", {
className: classnames(styles.navigationBar, _defineProperty({}, styles.navigationBarExpanded, navExpanded))
}, React.createElement("div", {
className: styles.navigationBarContentWrapper
}, React.createElement(HamburgerIcon, {
onClick: handleBurgerMenuClick,
mobileNavHidden: mobileNavHidden
}), React.createElement(WDRlogo, {
className: classnames(styles.menuIcon, styles.wdrLogo)
}), React.createElement("nav", {
className: classnames(styles.navigationChapters, _defineProperty({}, styles.navigationChaptersHidden, mobileNavHidden)),
role: "navigation",
ref: ref
}, React.createElement("ul", {
className: styles.chapterList
}, renderChapterLinks(chapters))), React.createElement(LegalInfoMenu, null), React.createElement(SharingMenu, null)), React.createElement("div", {
className: styles.progressBar,
onMouseEnter: handleProgressBarMouseEnter
}, React.createElement("span", {
className: styles.progressIndicator,
style: {
width: readingProgress + '%'
}
})));
}
function useOnScreen(ref) {
var rootMargin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '0px';
var cb = arguments.length > 2 ? arguments[2] : undefined;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isIntersecting = _useState2[0],
setIntersecting = _useState2[1];
useEffect(function () {
var current = ref.current;
var observer = new IntersectionObserver(function (_ref) {
var _ref2 = _slicedToArray(_ref, 1),
entry = _ref2[0];
setIntersecting(entry.isIntersecting);
if (entry.isIntersecting && cb) {
cb();
}
}, {
rootMargin: rootMargin
});
if (ref.current) {
observer.observe(current);
}
return function () {
observer.unobserve(current);
};
}, [ref, rootMargin, cb]);
return isIntersecting;
}
var css$9 = ".Fullscreen-module_root__1N3CI {\n width: 100%;\n height: 100vh;\n position: relative;\n overflow: hidden;\n}\n";
var styles$8 = {"root":"Fullscreen-module_root__1N3CI"};
styleInject(css$9);
var Fullscreen = React.forwardRef(function Fullscreen(props, ref) {
return React.createElement("div", {
ref: ref,
className: styles$8.root
}, props.children);
});
var css$a = ".Image-module_root__1ef3j {\n background-size: cover;\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n}\n\n@media (orientation: landscape) {\n .Image-module_portrait__1mRha {\n display: none;\n }\n}\n\n@media (orientation: portrait) {\n .Image-module_portrait__1mRha {\n display: block;\n }\n}";
var styles$9 = {"root":"Image-module_root__1ef3j","portrait":"Image-module_portrait__1mRha"};
styleInject(css$a);
/**
* Render an image file.
*
* @param {Object} props
* @param {number} props.id - Perma id of the image file.
*/
function Image(props) {
var image = useFile({
collectionName: 'imageFiles',
permaId: props.id
});
if (image) {
var focusX = typeof image.configuration.focusX === 'undefined' ? 50 : image.configuration.focusX;
var focusY = typeof image.configuration.focusY === 'undefined' ? 50 : image.configuration.focusY;
return React.createElement("div", {
className: classnames(styles$9.root, _defineProperty({}, styles$9.portrait, props.mobile)),
role: "img",
style: {
backgroundImage: "url(".concat(image.urls.large, ")"),
backgroundPosition: "".concat(focusX, "% ").concat(focusY, "%")
}
});
}
return null;
}
var ScrollToSectionContext = React.createContext(function () {});
var MutedContext = React.createContext({
muted: true,
setMuted: function setMuted() {},
mediaOff: true
});
var css$b = ".Video-module_root__30u0y {\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n}\n\n.Video-module_video__3FJvj {\n width: 100%;\n height: 100%;\n transition: transform ease 0.2s;\n outline: none;\n}\n\n.Video-module_video__3FJvj:focus {\n outline: none;\n}\n\n.Video-module_backdrop__1R7f4 {\n object-fit: cover;\n}\n";
var styles$a = {"root":"Video-module_root__30u0y","video":"Video-module_video__3FJvj","backdrop":"Video-module_backdrop__1R7f4"};
styleInject(css$b);
function Video(props) {
var awsBucket = '//s3-eu-west-1.amazonaws.com/de.codevise.pageflow.development/pageflow-next/presentation-videos/';
var videoBoatSunset = awsBucket + 'floodplain-clean.mp4';
var poster_videoBoatSunset = awsBucket + 'posterframes/poster_katerchen.jpeg';
var videoBoatDark = awsBucket + 'floodplain-dirty.mp4';
var poster_videoBoatDark = awsBucket + 'posterframes/poster_katerchen.jpeg';
var videoKaterchen = awsBucket + 'katerchen.mp4';
var poster_videoKaterchen = awsBucket + 'posterframes/poster_katerchen.jpeg';
var videoGarzweilerLoop1 = awsBucket + 'braunkohle_loop1.mp4';
var poster_videoGarzweilerLoop1 = awsBucket + 'posterframes/poster_braunkohle_loop1.jpeg';
var videoGarzweilerLoop2 = awsBucket + 'braunkohle_loop2.mp4';
var poster_videoGarzweilerLoop2 = awsBucket + 'posterframes/poster_braunkohle_loop2.jpeg';
var videoGarzweilerDrohne = awsBucket + 'braunkohle_drone.mp4';
var poster_videoGarzweilerDrohne = awsBucket + 'posterframes/poster_braunkohle_drone.jpeg';
var videoInselInterviewToni = awsBucket + 'pageflow_insel_interview_toni02.mp4';
var poster_videoInselInterviewToni = awsBucket + 'posterframes/poster_pageflow_insel_interview_toni02.jpg';
var videoUrl = {
videoBoatSunset: videoBoatSunset,
videoBoatDark: videoBoatDark,
videoKaterchen: videoKaterchen,
videoGarzweilerLoop1: videoGarzweilerLoop1,
videoGarzweilerLoop2: videoGarzweilerLoop2,
videoGarzweilerDrohne: videoGarzweilerDrohne,
videoInselInterviewToni: videoInselInterviewToni
}[props.id];
var posterUrl = {
poster_videoBoatSunset: poster_videoBoatSunset,
poster_videoBoatDark: poster_videoBoatDark,
poster_videoKaterchen: poster_videoKaterchen,
poster_videoGarzweilerLoop1: poster_videoGarzweilerLoop1,
poster_videoGarzweilerLoop2: poster_videoGarzweilerLoop2,
poster_videoGarzweilerDrohne: poster_videoGarzweilerDrohne,
poster_videoInselInterviewToni: poster_videoInselInterviewToni
}['poster_' + props.id];
var videoRef = useRef();
var state = props.state;
var mutedSettings = useContext(MutedContext);
var mediaOff = mutedSettings.mediaOff;
useEffect(function () {
var video = videoRef.current;
if (video && !mediaOff) {
if (state === 'active') {
if (video.readyState > 0) {
video.play();
} else {
video.addEventListener('loadedmetadata', play);
return function () {
return video.removeEventListener('loadedmetadata', play);
};
}
} else {
video.pause();
}
}
function play() {
video.play();
}
}, [state, videoRef, mediaOff]);
return React.createElement("div", {
className: styles$a.root
}, React.createElement(ScrollToSectionContext.Consumer, null, function (scrollToSection) {
return React.createElement("video", {
src: videoUrl,
ref: videoRef,
className: classnames(styles$a.video, _defineProperty({}, styles$a.backdrop, !props.interactive)),
controls: props.controls,
playsInline: true,
onEnded: function onEnded() {
return props.nextSectionOnEnd && scrollToSection('next');
},
loop: !props.interactive,
muted: mutedSettings.muted,
poster: posterUrl
});
}));
}
Video.defaultProps = {
interactive: false,
controls: false
};
var css$c = ".FillColor-module_FillColor__S1uEG {\n width: 100%;\n height: 100vh;\n}\n";
var styles$b = {"FillColor":"FillColor-module_FillColor__S1uEG"};
styleInject(css$c);
function FillColor(props) {
return React.createElement("div", {
className: styles$b.FillColor,
style: {
backgroundColor: props.color
}
});
}
var css$d = ".MotifArea-module_root__1_ACd {\n position: absolute;\n background: hsla(0, 0%, 100%, 0.2);\n z-index: 2;\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.MotifArea-module_active__1q4z2 {\n opacity: 1;\n}\n\n.MotifArea-module_corner__3hB5t {\n position: absolute;\n width: 10px;\n height: 10px;\n}\n\n.MotifArea-module_topLeft__3vHHi {\n border-top: solid 2px #fff;\n border-left: solid 2px #fff;\n}\n\n.MotifArea-module_topRight__2gNmC {\n right: 0;\n border-top: solid 2px #fff;\n border-right: solid 2px #fff;\n}\n\n.MotifArea-module_bottomLeft__2qEqb {\n bottom: 0;\n border-bottom: solid 2px #fff;\n border-left: solid 2px #fff;\n}\n\n.MotifArea-module_bottomRight__3OjTb {\n right: 0;\n bottom: 0;\n border-bottom: solid 2px #fff;\n border-right: solid 2px #fff;\n}\n";
var styles$c = {"root":"MotifArea-module_root__1_ACd","active":"MotifArea-module_active__1q4z2","corner":"MotifArea-module_corner__3hB5t","topLeft":"MotifArea-module_topLeft__3vHHi MotifArea-module_corner__3hB5t","topRight":"MotifArea-module_topRight__2gNmC MotifArea-module_corner__3hB5t","bottomLeft":"MotifArea-module_bottomLeft__2qEqb MotifArea-module_corner__3hB5t","bottomRight":"MotifArea-module_bottomRight__3OjTb MotifArea-module_corner__3hB5t"};
styleInject(css$d);
var MotifArea = React.forwardRef(function MotifArea(props, ref) {
var image = useFile({
collectionName: 'imageFiles',
permaId: props.imageId
});
if (!image) {
return null;
}
return React.createElement("div", {
ref: ref,
className: classnames(styles$c.root, _defineProperty({}, styles$c.active, props.active)),
style: position(props, image),
onMouseEnter: props.onMouseEnter,
onMouseLeave: props.onMouseLeave
}, React.createElement("div", {
className: styles$c.topLeft
}), React.createElement("div", {
className: styles$c.topRight
}), React.createElement("div", {
className: styles$c.bottomLeft
}), React.createElement("div", {
className: styles$c.bottomRight
}));
});
function position(props, image) {
var originalRatio = image.width / image.height;
var containerRatio = props.containerWidth / props.containerHeight;
var scale = containerRatio > originalRatio ? props.containerWidth / image.width : props.containerHeight / image.height;
var contentWidth = image.width * scale;
var contentHeight = image.height * scale;
var focusX = image.configuration.focusX === undefined ? 50 : image.configuration.focusX;
var focusY = image.configuration.focusY === undefined ? 50 : image.configuration.focusY;
var cropLeft = (contentWidth - props.containerWidth) * focusX / 100;
var cropTop = (contentHeight - props.containerHeight) * focusY / 100;
var motifArea = image.configuration.motifArea || {
top: 0,
left: 0,
width: 0,
height: 0
};
return {
top: contentHeight * motifArea.top / 100 - cropTop,
left: contentWidth * motifArea.left / 100 - cropLeft,
width: contentWidth * motifArea.width / 100,
height: contentHeight * motifArea.height / 100
};
}
function getSize(el) {
if (!el) {
return {
left: 0,
top: 0,
width: 0,
height: 0
};
}
return {
left: el.offsetLeft,
top: el.offsetTop,
width: el.offsetWidth,
height: el.offsetHeight
};
}
function useDimension() {
var _useState = useState(getSize(null)),
_useState2 = _slicedToArray(_useState, 2),
componentSize = _useState2[0],
setComponentSize = _useState2[1];
var _useState3 = useState(null),
_useState4 = _slicedToArray(_useState3, 2),
currentNode = _useState4[0],
setCurrentNode = _useState4[1];
var measuredRef = useCallback(function (node) {
setCurrentNode(node);
setComponentSize(getSize(node));
}, []);
useEffect(function () {
function handleResize() {
setComponentSize(getSize(currentNode));
}
if (!currentNode) {
return;
}
handleResize();
window.addEventListener('resize', handleResize);
return function () {
window.removeEventListener('resize', handleResize);
};
}, [currentNode]);
return [componentSize, measuredRef];
}
var videos = {
videoBoatSunset: {
id: "videoBoatSunset",
width: 960,
height: 406,
motiveArea: {
top: 0,
left: 0,
width: 0,
height: 0
},
focusX: 50,
focusY: 50
},
videoBoatDark: {
id: "videoBoatDark",
width: 960,
height: 406,
motiveArea: {
top: 0,
left: 0,
width: 0,
height: 0
},
focusX: 50,
focusY: 50
},
videoKaterchen: {
id: "videoKaterchen",
width: 1920,
height: 1080,
motiveArea: {
top: 0,
left: 0,
width: 0,
height: 0
},
focusX: 50,
focusY: 50
},
videoGarzweilerLoop1: {
id: "videoGarzweilerLoop1",
width: 3840,
height: 2160,
motiveArea: {
top: 0,
left: 0,
width: 1,
height: 1
},
focusX: 50,
focusY: 50
},
videoGarzweilerLoop2: {
id: "videoGarzweilerLoop2",
width: 1920,
height: 1080,
motiveArea: {
top: 0,
left: 0,
width: 1,
height: 1
},
focusX: 15,
focusY: 20
},
videoGarzweilerDrohne: {
id: "videoGarzweilerDrohne",
width: 1920,
height: 1080,
motiveArea: {
top: 0,
left: 0,
width: 0,
height: 0
}
},
videoInselInterviewToni: {
id: "videoInselInterviewToni",
width: 1920,
height: 1080,
motiveArea: {
top: 0,
left: 0,
width: 0,
height: 0
}
}
};
var ResizeSensor = createCommonjsModule(function (module, exports) {
// Copyright (c) 2013 Marc J. Schmidt
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
// Originally based on version 1.2.1,
// https://github.com/marcj/css-element-queries/tree/1.2.1
// Some lines removed for compatibility.
(function (root, factory) {
{
module.exports = factory();
}
})(typeof window !== 'undefined' ? window : commonjsGlobal, function () {
// Make sure it does not throw in a SSR (Server Side Rendering) situation
if (typeof window === "undefined") {
return null;
} // https://github.com/Semantic-Org/Semantic-UI/issues/3855
// https://github.com/marcj/css-element-queries/issues/257
var globalWindow = window; // Only used for the dirty checking, so the event callback count is limited to max 1 call per fps per sensor.
// In combination with the event based resize sensor this saves cpu time, because the sensor is too fast and
// would generate too many unnecessary events.
var requestAnimationFrame = globalWindow.requestAnimationFrame || globalWindow.mozRequestAnimationFrame || globalWindow.webkitRequestAnimationFrame || function (fn) {
return globalWindow.setTimeout(fn, 20);
};
function forEachElement(elements, callback) {
var elementsType = Object.prototype.toString.call(elements);
var isCollectionTyped = '[object Array]' === elementsType || '[object NodeList]' === elementsType || '[object HTMLCollection]' === elementsType || '[object Object]' === elementsType;
var i = 0,
j = elements.length;
if (isCollectionTyped) {
for (; i < j; i++) {
callback(elements[i]);
}
} else {
callback(elements);
}
}
function getElementSize(element) {
if (!element.getBoundingClientRect) {
return {
width: element.offsetWidth,
height: element.offsetHeight
};
}
var rect = element.getBoundingClientRect();
return {
width: Math.round(rect.width),
height: Math.round(rect.height)
};
}
function setStyle(element, style) {
Object.keys(style).forEach(function (key) {
element.style[key] = style[key];
});
}
var ResizeSensor = function ResizeSensor(element, callback) {
function EventQueue() {
var q = [];
this.add = function (ev) {
q.push(ev);
};
var i, j;
this.call = function (sizeInfo) {
for (i = 0, j = q.length; i < j; i++) {
q[i].call(this, sizeInfo);
}
};
this.remove = function (ev) {
var newQueue = [];
for (i = 0, j = q.length; i < j; i++) {
if (q[i] !== ev) newQueue.push(q[i]);
}
q = newQueue;
};
this.length = function () {
return q.length;
};
}
function attachResizeEvent(element, resized) {
if (!element) return;
if (element.resizedAttached) {
element.resizedAttached.add(resized);
return;
}
element.resizedAttached = new EventQueue();
element.resizedAttached.add(resized);
element.resizeSensor = document.createElement('div');
element.resizeSensor.dir = 'ltr';
element.resizeSensor.className = 'resize-sensor';
var style = {
pointerEvents: 'none',
position: 'absolute',
left: '0px',
top: '0px',
right: '0px',
bottom: '0px',
overflow: 'hidden',
zIndex: '-1',
visibility: 'hidden',
maxWidth: '100%'
};
var styleChild = {
position: 'absolute',
left: '0px',
top: '0px',
transition: '0s'
};
setStyle(element.resizeSensor, style);
var expand = document.createElement('div');
expand.className = 'resize-sensor-expand';
setStyle(expand, style);
var expandChild = document.createElement('div');
setStyle(expandChild, styleChild);
expand.appendChild(expandChild);
var shrink = document.createElement('div');
shrink.className = 'resize-sensor-shrink';
setStyle(shrink, style);
var shrinkChild = document.createElement('div');
setStyle(shrinkChild, styleChild);
setStyle(shrinkChild, {
width: '200%',
height: '200%'
});
shrink.appendChild(shrinkChild);
element.resizeSensor.appendChild(expand);
element.resizeSensor.appendChild(shrink);
element.appendChild(element.resizeSensor);
var computedStyle = window.getComputedStyle(element);
var position = computedStyle ? computedStyle.getPropertyValue('position') : null;
if ('absolute' !== position && 'relative' !== position && 'fixed' !== position) {
element.style.position = 'relative';
}
var dirty, rafId;
var size = getElementSize(element);
var lastWidth = 0;
var lastHeight = 0;
var initialHiddenCheck = true;
var lastAnimationFrame = 0;
var resetExpandShrink = function resetExpandShrink() {
var width = element.offsetWidth;
var height = element.offsetHeight;
expandChild.style.width = width + 10 + 'px';
expandChild.style.height = height + 10 + 'px';
expand.scrollLeft = width + 10;
expand.scrollTop = height + 10;
shrink.scrollLeft = width + 10;
shrink.scrollTop = height + 10;
};
var reset = function reset() {
// Check if element is hidden
if (initialHiddenCheck) {
var invisible = element.offsetWidth === 0 && element.offsetHeight === 0;
if (invisible) {
// Check in next frame
if (!lastAnimationFrame) {
lastAnimationFrame = requestAnimationFrame(function () {
lastAnimationFrame = 0;
reset();
});
}
return;
} else {
// Stop checking
initialHiddenCheck = false;
}
}
resetExpandShrink();
};
element.resizeSensor.resetSensor = reset;
var onResized = function onResized() {
rafId = 0;
if (!dirty) return;
lastWidth = size.width;
lastHeight = size.height;
if (element.resizedAttached) {
element.resizedAttached.call(size);
}
};
var onScroll = function onScroll() {
size = getElementSize(element);
dirty = size.width !== lastWidth || size.height !== lastHeight;
if (dirty && !rafId) {
rafId = requestAnimationFrame(onResized);
}
reset();
};
var addEvent = function addEvent(el, name, cb) {
if (el.attachEvent) {
el.attachEvent('on' + name, cb);
} else {
el.addEventListener(name, cb);
}
};
addEvent(expand, 'scroll', onScroll);
addEvent(shrink, 'scroll', onScroll); // Fix for custom Elements
requestAnimationFrame(reset);
}
forEachElement(element, function (elem) {
attachResizeEvent(elem, callback);
});
this.detach = function (ev) {
ResizeSensor.detach(element, ev);
};
this.reset = function () {
element.resizeSensor.resetSensor();
};
};
ResizeSensor.reset = function (element) {
forEachElement(element, function (elem) {
elem.resizeSensor.resetSensor();
});
};
ResizeSensor.detach = function (element, ev) {
forEachElement(element, function (elem) {
if (!elem) return;
if (elem.resizedAttached && typeof ev === "function") {
elem.resizedAttached.remove(ev);
if (elem.resizedAttached.length()) return;
}
if (elem.resizeSensor) {
if (elem.contains(elem.resizeSensor)) {
elem.removeChild(elem.resizeSensor);
}
delete elem.resizeSensor;
delete elem.resizedAttached;
}
});
};
if (typeof MutationObserver !== "undefined") {
var observer = new MutationObserver(function (mutations) {
for (var i in mutations) {
if (mutations.hasOwnProperty(i)) {
var items = mutations[i].addedNodes;
for (var j = 0; j < items.length; j++) {
if (items[j].resizeSensor) {
ResizeSensor.reset(items[j]);
}
}
}
}
});
document.addEventListener("DOMContentLoaded", function (event) {
observer.observe(document.body, {
childList: true,
subtree: true
});
});
}
return ResizeSensor;
});
});
var cssElementQueries = {
ResizeSensor: ResizeSensor
};
var cssElementQueries_1 = cssElementQueries.ResizeSensor;
function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var defaultProps = {
handleSize: 40,
handle: null,
hover: false,
leftImageAlt: '',
leftImageCss: {},
leftImageLabel: null,
onSliderPositionChange: function onSliderPositionChange() {},
rightImageAlt: '',
rightImageCss: {},
rightImageLabel: null,
skeleton: null,
sliderLineColor: '#ffffff',
sliderLineWidth: 2,
sliderPositionPercentage: 0.5
};
function ReactCompareImage(props) {
var handleSize = props.handleSize,
handle = props.handle,
hover = props.hover,
leftImage = props.leftImage,
leftImageAlt = props.leftImageAlt,
leftImageCss = props.leftImageCss,
leftImageLabel = props.leftImageLabel,
onSliderPositionChange = props.onSliderPositionChange,
rightImage = props.rightImage,
rightImageAlt = props.rightImageAlt,
rightImageCss = props.rightImageCss,
rightImageLabel = props.rightImageLabel,
skeleton = props.skeleton,
sliderLineColor = props.sliderLineColor,
sliderLineWidth = props.sliderLineWidth,
sliderPositionPercentage = props.sliderPositionPercentage,
sliderPosition = props.sliderPosition,
setSliderPosition = props.setSliderPosition,
isSliding = props.isSliding,
setIsSliding = props.setIsSliding,
classicMode = props.classicMode,
wiggle = props.wiggle;
var _useState = useState(0),
_useState2 = _slicedToArray(_useState, 2),
containerWidth = _useState2[0],
setContainerWidth = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
leftImgLoaded = _useState4[0],
setLeftImgLoaded = _useState4[1];
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
rightImgLoaded = _useState6[0],
setRightImgLoaded = _useState6[1];
var containerRef = useRef();
var rightImageRef = useRef();
var leftImageRef = useRef(); // keep track container's width in local state
useEffect(function () {
var updateContainerWidth = function updateContainerWidth() {
var currentContainerWidth = containerRef.current.getBoundingClientRect().width;
setContainerWidth(currentContainerWidth);
}; // initial execution must be done manually
updateContainerWidth(); // update local state if container size is changed
var containerElement = containerRef.current;
var resizeSensor = new cssElementQueries_1(containerElement, function () {
updateContainerWidth();
});
return function () {
resizeSensor.detach(containerElement);
};
}, []);
useEffect(function () {
// consider the case where loading image is completed immediately
// due to the cache etc.
var alreadyDone = leftImageRef.current.complete;
alreadyDone && setLeftImgLoaded(true);
return function () {
// when the left image source is changed
setLeftImgLoaded(false);
};
}, [leftImage]);
useEffect(function () {
// consider the case where loading image is completed immediately
// due to the cache etc.
var alreadyDone = rightImageRef.current.complete;
alreadyDone && setRightImgLoaded(true);
return function () {
// when the right image source is changed
setRightImgLoaded(false);
};
}, [rightImage]);
var allImagesLoaded = rightImgLoaded && leftImgLoaded;
useEffect(function () {
var handleSliding = function handleSliding(event) {
var e = event || window.event; // Calc Cursor Position from the left edge of the viewport
var cursorXfromViewport = e.touches ? e.touches[0].pageX : e.pageX; // Calc Cursor Position from the left edge of the window (consider any page scrolling)
var cursorXfromWindow = cursorXfromViewport - window.pageXOffset; // Calc Cursor Position from the left edge of the image
var imagePosition = rightImageRef.current.getBoundingClientRect();
var pos = cursorXfromWindow - imagePosition.left; // Set minimum and maximum values to prevent the slider from overflowing
var minPos = 0 + sliderLineWidth / 2;
var maxPos = containerWidth - sliderLineWidth / 2;
if (pos < minPos) pos = minPos;
if (pos > maxPos) pos = maxPos;
setSliderPosition(pos / containerWidth); // If there's a callback function, invoke it everytime the slider changes
if (onSliderPositionChange) {
onSliderPositionChange(pos / containerWidth);
}
};
var startSliding = function startSliding(e) {
setIsSliding(true); // Prevent default behavior other than mobile scrolling
if (!('touches' in e)) {
e.preventDefault();
} // Slide the image even if you just click or tap (not drag)
handleSliding(e);
window.addEventListener('mousemove', handleSliding); // 07
window.addEventListener('touchmove', handleSliding); // 08
};
var finishSliding = function finishSliding() {
setIsSliding(false);
window.removeEventListener('mousemove', handleSliding);
window.removeEventListener('touchmove', handleSliding);
};
var containerElement = containerRef.current;
if (allImagesLoaded) {
if (classicMode) {
// it's necessary to reset event handlers each time the canvasWidth changes
// for mobile
containerElement.addEventListener('touchstart', startSliding); // 01
window.addEventListener('touchend', finishSliding); // 02
// for desktop
if (hover) {
containerElement.addEventListener('mousemove', handleSliding); // 03
containerElement.addEventListener('mouseleave', finishSliding); // 04
} else {
containerElement.addEventListener('mousedown', startSliding); // 05
window.addEventListener('mouseup', finishSliding); // 06
}
}
}
return function () {
if (classicMode) {
// cleanup all event resteners
containerElement.removeEventListener('touchstart', startSliding); // 01
window.removeEventListener('touchend', finishSliding); // 02
containerElement.removeEventListener('mousemove', handleSliding); // 03
containerElement.removeEventListener('mouseleave', finishSliding); // 04
containerElement.removeEventListener('mousedown', startSliding); // 05
window.removeEventListener('mouseup', finishSliding); // 06
window.removeEventListener('mousemove', handleSliding); // 07
window.removeEventListener('touchmove', handleSliding); // 08
}
};
}, [allImagesLoaded, containerWidth, hover, sliderLineWidth]); // eslint-disable-line
// Image size set as follows.
//
// 1. right(under) image:
// width = 100% of container width
// height = auto
//
// 2. left(over) imaze:
// width = 100% of container width
// height = right image's height
// (protrudes is hidden by css 'object-fit: hidden')
var styles = {
container: {
boxSizing: 'border-box',
position: 'relative',
width: '100%',
overflow: 'hidden'
},
rightImage: _objectSpread$3({
display: 'block',
height: 'auto',
// Respect the aspect ratio
width: '100%'
}, rightImageCss),
leftImage: _objectSpread$3({
clip: "rect(auto, ".concat(containerWidth * sliderPosition, "px, auto, auto)"),
display: 'block',
height: '100%',
// fit to the height of right(under) image
objectFit: 'cover',
// protrudes is hidden
position: 'absolute',
top: 0,
width: '100%'
}, leftImageCss),
slider: {
alignItems: 'center',
cursor: !hover && 'ew-resize',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
left: "".concat(containerWidth * sliderPosition - handleSize / 2, "px"),
position: 'absolute',
top: 0,
width: "".concat(handleSize, "px")
},
line: {
background: sliderLineColor,
boxShadow: '0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)',
flex: '0 1 auto',
height: '100%',
width: "".concat(sliderLineWidth, "px")
},
handleCustom: {
alignItems: 'center',
boxSizing: 'border-box',
display: 'flex',
flex: '1 0 auto',
height: 'auto',
justifyContent: 'center',
width: 'auto'
},
handleDefault: {
alignItems: 'center',
border: "".concat(sliderLineWidth, "px solid ").concat(sliderLineColor),
borderRadius: '100%',
boxShadow: '0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)',
boxSizing: 'border-box',
display: 'flex',
flex: '1 0 auto',
height: "".concat(handleSize, "px"),
justifyContent: 'center',
width: "".concat(handleSize, "px")
},
leftArrow: {
border: "inset ".concat(handleSize * 0.15, "px rgba(0,0,0,0)"),
borderRight: "".concat(handleSize * 0.15, "px solid ").concat(sliderLineColor),
height: '0px',
marginLeft: "-".concat(handleSize * 0.25, "px"),
// for IE11
marginRight: "".concat(handleSize * 0.25, "px"),
width: '0px'
},
rightArrow: {
border: "inset ".concat(handleSize * 0.15, "px rgba(0,0,0,0)"),
borderLeft: "".concat(handleSize * 0.15, "px solid ").concat(sliderLineColor),
height: '0px',
marginRight: "-".concat(handleSize * 0.25, "px"),
// for IE11
width: '0px'
},
leftLabel: {
background: 'rgba(0, 0, 0, 0.5)',
color: 'white',
left: '5%',
opacity: isSliding ? 0 : 1,
padding: '10px 20px',
position: 'absolute',
top: '50%',
transform: 'translate(0,-50%)',
transition: 'opacity 0.1s ease-out 0.5s',
maxWidth: '30%',
WebkitUserSelect: 'none',
WebkitTouchCallout: 'none'
},
rightLabel: {
background: 'rgba(0, 0, 0, 0.5)',
color: 'white',
opacity: isSliding ? 0 : 1,
padding: '10px 20px',
position: 'absolute',
right: '5%',
top: '50%',
transform: 'translate(0,-50%)',
transition: 'opacity 0.1s ease-out 0.5s',
maxWidth: '30%',
WebkitUserSelect: 'none',
WebkitTouchCallout: 'none'
}
};
return React.createElement(React.Fragment, null, skeleton && !allImagesLoaded && React.createElement("div", {
style: _objectSpread$3({}, styles.container)
}, skeleton), React.createElement("div", {
style: _objectSpread$3({}, styles.container, {
display: allImagesLoaded ? 'block' : 'none'
}),
ref: containerRef,
"data-testid": "container"
}, React.createElement("img", {
onLoad: function onLoad() {
return setRightImgLoaded(true);
},
alt: rightImageAlt,
"data-testid": "right-image",
ref: rightImageRef,
src: rightImage,
style: styles.rightImage
}), React.createElement("img", {
onLoad: function onLoad() {
return setLeftImgLoaded(true);
},
alt: leftImageAlt,
"data-testid": "left-image",
ref: leftImageRef,
src: leftImage,
style: styles.leftImage
}), React.createElement("div", {
style: styles.slider,
className: classnames(_defineProperty({}, 'wiggle', wiggle))
}, React.createElement("div", {
style: styles.line
}), handle ? React.createElement("div", {
style: styles.handleCustom
}, handle) : React.createElement("div", {
style: styles.handleDefault
}, React.createElement("div", {
style: styles.leftArrow
}), React.createElement("div", {
style: styles.rightArrow
})), React.createElement("div", {
style: styles.line
})), leftImageLabel && React.createElement("div", {
style: styles.leftLabel
}, leftImageLabel), rightImageLabel && React.createElement("div", {
style: styles.rightLabel
}, rightImageLabel)));
}
ReactCompareImage.defaultProps = defaultProps;
var css$e = ".BeforeAfter-module_container__38Dru {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n.wiggle {\n animation: BeforeAfter-module_shake__3iLe8 1.5s cubic-bezier(.36,.07,.19,.97) both;\n}\n\n@keyframes BeforeAfter-module_shake__3iLe8 {\n 10%, 90% {\n transform: translate3d(-20%, 0, 0);\n }\n\n 20%, 80% {\n transform: translate3d(40%, 0, 0);\n }\n\n 30%, 50%, 70% {\n transform: translate3d(-80%, 0, 0);\n }\n\n 40%, 60% {\n transform: translate3d(80%, 0, 0);\n }\n}";
var styles$d = {"container":"BeforeAfter-module_container__38Dru","shake":"BeforeAfter-module_shake__3iLe8"};
styleInject(css$e);
var BeforeAfter = (function (_ref) {
var state = _ref.state,
leftImageLabel = _ref.leftImageLabel,
rightImageLabel = _ref.rightImageLabel,
_ref$startPos = _ref.startPos,
startPos = _ref$startPos === void 0 ? 0 : _ref$startPos,
_ref$slideMode = _ref.slideMode,
slideMode = _ref$slideMode === void 0 ? 'both' : _ref$slideMode;
var _useState = useState({
pos: window.pageYOffset || document.documentElement.scrollTop,
dir: 'unknown'
}),
_useState2 = _slicedToArray(_useState, 2),
scrollPos = _useState2[0],
setScrollPos = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
isSliding = _useState4[0],
setIsSliding = _useState4[1];
var _useState5 = useState(startPos),
_useState6 = _slicedToArray(_useState5, 2),
beforeAfterPos = _useState6[0],
setBeforeAfterPos = _useState6[1];
var beforeAfterRef = useRef();
var slideOnScroll = slideMode === 'both' || slideMode === 'scroll';
var slideClassic = slideMode === 'both' || slideMode === 'classic';
var current = beforeAfterRef.current;
var _useState7 = useState(false),
_useState8 = _slicedToArray(_useState7, 2),
wiggle = _useState8[0],
setWiggle = _useState8[1];
useEffect(function () {
var node = current;
if (node) {
setWiggle(state === 'active');
}
}, [state, current]);
useEffect(function () {
var node = current;
function handler() {
if (node) {
setScrollPos(function (prevPos) {
var currPos = window.pageYOffset || document.documentElement.scrollTop;
if (currPos > prevPos['pos']) {
return {
pos: currPos,
dir: 'down'
};
}
if (currPos < prevPos['pos']) {
return {
pos: currPos,
dir: 'up'
};
}
return prevPos;
});
if (slideOnScroll) {
if (scrollPos['dir'] === 'down' && beforeAfterPos < 1) {
setBeforeAfterPos(function (prev) {
return prev + 0.025;
});
setIsSliding(true);
setTimeout(function () {
return setIsSliding(false);
}, 200);
} else if (scrollPos['dir'] === 'up' && beforeAfterPos > 0) {
setBeforeAfterPos(function (prev) {
return prev - 0.025;
});
setIsSliding(true);
setTimeout(function () {
return setIsSliding(false);
}, 250);
} else {
setIsSliding(false);
}
}
}
}
if (!node) {
return;
}
setTimeout(handler, 0);
if (state === 'active') {
window.addEventListener('scroll', handler);
return function () {
window.removeEventListener('scroll', handler);
};
}
}, [current, setBeforeAfterPos, scrollPos, state, setIsSliding]);
var awsBucket = '//s3-eu-west-1.amazonaws.com/de.codevise.pageflow.development/pageflow-next/presentation-images/';
var beforeImage = awsBucket + 'before_after/haldern_church1.jpg';
var afterImage = awsBucket + 'before_after/haldern_church2.jpg';
return React.createElement("div", {
ref: beforeAfterRef,
className: styles$d.container
}, React.createElement(ReactCompareImage, {
leftImage: beforeImage,
rightImage: afterImage,
sliderPosition: beforeAfterPos,
setSliderPosition: setBeforeAfterPos,
isSliding: isSliding,
setIsSliding: setIsSliding,
leftImageLabel: leftImageLabel,
rightImageLabel: rightImageLabel,
classicMode: slideClassic,
wiggle: wiggle
}));
});
var css$f = ".Backdrop-module_Backdrop__1w4UZ {\n width: 100%;\n z-index: 2;\n}\n\n.Backdrop-module_offScreen__2_FYZ {\n}\n";
var styles$e = {"Backdrop":"Backdrop-module_Backdrop__1w4UZ","offScreen":"Backdrop-module_offScreen__2_FYZ"};
styleInject(css$f);
function Backdrop(props) {
var _useDimension = useDimension(),
_useDimension2 = _slicedToArray(_useDimension, 2),
containerDimension = _useDimension2[0],
setContainerRef = _useDimension2[1];
return React.createElement("div", {
className: classnames(styles$e.Backdrop, props.transitionStyles.backdrop, props.transitionStyles["backdrop-".concat(props.state)], _defineProperty({}, styles$e.offScreen, props.offScreen))
}, React.createElement("div", {
className: props.transitionStyles.backdropInner
}, React.createElement("div", {
className: props.transitionStyles.backdropInner2
}, props.children(renderContent(props, containerDimension, setContainerRef)))));
}
Backdrop.defaultProps = {
transitionStyles: {}
};
function renderContent(props, containerDimension, setContainerRef) {
if (props.image.toString().startsWith('#')) {
return React.createElement(FillColor, {
color: props.image
});
} else if (props.image.toString().startsWith('video')) {
var video = videos[props.image];
return React.createElement(Fullscreen, {
ref: setContainerRef
}, React.createElement(Video, {
state: props.onScreen ? 'active' : 'inactive',
id: props.image,
offset: props.offset,
interactive: props.interactive,
nextSectionOnEnd: props.nextSectionOnEnd
}), React.createElement(MotifArea, {
ref: props.motifAreaRef,
image: video,
containerWidth: containerDimension.width,
containerHeight: containerDimension.height
}));
} else if (props.image.toString().startsWith('beforeAfter')) {
return React.createElement(Fullscreen, {
ref: setContainerRef
}, React.createElement(BeforeAfter, {
state: props.state,
leftImageLabel: props.leftImageLabel,
rightImageLabel: props.rightImageLabel,
startPos: props.startPos,
slideMode: props.slideMode
}));
} else {
return React.createElement(Fullscreen, {
ref: setContainerRef
}, React.createElement(Image, {
id: props.image
}), React.createElement(Image, {
id: props.imageMobile,
mobile: true
}), React.createElement(MotifArea, {
ref: props.motifAreaRef,
imageId: props.image,
containerWidth: containerDimension.width,
containerHeight: containerDimension.height
}));
}
}
var css$g = ".Foreground-module_Foreground__13ODU {\n position: relative;\n z-index: 3;\n\n box-sizing: border-box;\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n.Foreground-module_fullFadeHeight__2p9dx {\n min-height: 51vh;\n}\n\n.Foreground-module_fullHeight__1vMXb {\n min-height: 100vh;\n}\n\n.Foreground-module_fullFadeHeight__2p9dx.Foreground-module_enlarge__14Plm,\n.Foreground-module_fullHeight__1vMXb.Foreground-module_enlarge__14Plm {\n min-height: 130vh;\n}\n\n.Foreground-module_hidden__2dmAx {\n visibility: hidden;\n}\n";
var styles$f = {"Foreground":"Foreground-module_Foreground__13ODU","fullFadeHeight":"Foreground-module_fullFadeHeight__2p9dx","fullHeight":"Foreground-module_fullHeight__1vMXb","enlarge":"Foreground-module_enlarge__14Plm","hidden":"Foreground-module_hidden__2dmAx"};
styleInject(css$g);
function Foreground(props) {
return React.createElement("div", {
className: className(props)
}, props.children);
}
function className(props) {
var _classNames;
return classnames(styles$f.Foreground, props.transitionStyles.foreground, props.transitionStyles["foreground-".concat(props.state)], styles$f["".concat(props.heightMode, "Height")], (_classNames = {}, _defineProperty(_classNames, styles$f.hidden, props.hidden), _defineProperty(_classNames, styles$f.enlarge, props.hidden && !props.disableEnlarge), _classNames));
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
arr2[i] = arr[i];
}
return arr2;
}
}
function _iterableToArray(iter) {
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance");
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}
var css$h = "\n\n.Heading-module_Heading__1YSiy {\n font-size: 66px;\n font-weight: 700;\n margin-top: 0;\n margin-bottom: 0.5em;\n padding-top: 0.5em;\n}\n\n.Heading-module_first__1yPxD {\n font-size: 110px;\n line-height: 1;\n}\n\n@media (orientation: landscape) {\n .Heading-module_first__1yPxD {\n padding-top: 25%;\n }\n}\n\n@media (max-width: 600px) {\n .Heading-module_Heading__1YSiy {\n font-size: 40px;\n }\n\n .Heading-module_first__1yPxD {\n font-size: 66px;\n }\n}\n";
var styles$g = {"text-l":"40px","text-xl":"66px","text-2xl":"110px","Heading":"Heading-module_Heading__1YSiy","first":"Heading-module_first__1yPxD"};
styleInject(css$h);
function Heading(props) {
return React.createElement("h1", {
className: classnames(styles$g.Heading, _defineProperty({}, styles$g.first, props.first)),
style: props.style
}, props.children);
}
var css$i = "\n\n.TextBlock-module_TextBlock__5Zpj7 {\n font-size: 22px;\n line-height: 1.4;\n\n padding: 1em 0;\n margin-top: 0;\n margin-bottom: 0;\n text-shadow: none;\n}\n\n.TextBlock-module_dummy__3W5ls {\n opacity: 0.7;\n}\n\n.TextBlock-module_TextBlock__5Zpj7 a {\n color: #fff;\n word-wrap: break-word;\n}\n\n.TextBlock-module_TextBlock__5Zpj7 ol,\n.TextBlock-module_TextBlock__5Zpj7 ul {\n padding-left: 20px;\n}\n";
var styles$h = {"text-base":"22px","TextBlock":"TextBlock-module_TextBlock__5Zpj7","dummy":"TextBlock-module_dummy__3W5ls"};
styleInject(css$i);
function TextBlock(props) {
return React.createElement("div", {
className: classnames(styles$h.TextBlock, _defineProperty({}, styles$h.dummy, props.dummy)),
style: props.style,
dangerouslySetInnerHTML: {
__html: props.children
}
});
}
var css$j = ".InlineCaption-module_root__1R8Ib {\n padding: 3px 10px 5px;\n background-color: #fff;\n color: #222;\n font-size: text-s;\n line-height: 1.4;\n text-shadow: none;\n}\n";
var styles$i = {"text-base":"22px","root":"InlineCaption-module_root__1R8Ib"};
styleInject(css$j);
function InlineCaption(props) {
if (props.text) {
return React.createElement("div", {
className: styles$i.root
}, props.text);
} else {
return null;
}
}
var css$k = ".InlineImage-module_root__1DvUb {\n position: relative;\n margin-top: 1em;\n}\n\n.InlineImage-module_container__Pui7E {\n position: relative;\n margin-top: 1em;\n}\n\n.InlineImage-module_spacer__2rMkE {\n padding-top: 75%;\n}\n\n.InlineImage-module_inner__2AMK- {\n border: solid 2px #fff;\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n}\n";
var styles$j = {"root":"InlineImage-module_root__1DvUb","container":"InlineImage-module_container__Pui7E","spacer":"InlineImage-module_spacer__2rMkE","inner":"InlineImage-module_inner__2AMK-"};
styleInject(css$k);
function InlineImage(props) {
return React.createElement("div", {
className: classnames(styles$j.root)
}, React.createElement("div", {
className: styles$j.container
}, React.createElement("div", {
className: styles$j.spacer
}, React.createElement("div", {
className: styles$j.inner
}, React.createElement(Image, props)))), React.createElement(InlineCaption, {
text: props.caption
}));
}
var css$l = ".InlineVideo-module_root__2UD3D {\n position: relative;\n max-height: 98vh;\n}\n\n.InlineVideo-module_inner__H81_g {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n}\n";
var styles$k = {"root":"InlineVideo-module_root__2UD3D","inner":"InlineVideo-module_inner__H81_g"};
styleInject(css$l);
function InlineVideo(props) {
var ref = useRef();
var onScreen = useOnScreen(ref, '-50% 0px -50% 0px');
return React.createElement("div", {
ref: ref,
className: classnames(styles$k.root)
}, React.createElement("div", {
style: {
paddingTop: props.wideFormat ? '41.15%' : '56.25%'
}
}, React.createElement("div", {
className: styles$k.inner
}, React.createElement(Video, Object.assign({}, props, {
state: onScreen ? 'active' : 'inactive',
interactive: true
})))));
}
var css$m = ".InlineBeforeAfter-module_root__2O9F8 {\n position: relative;\n margin: 0 auto;\n}\n";
var styles$l = {"root":"InlineBeforeAfter-module_root__2O9F8"};
styleInject(css$m);
function InlineBeforeAfter(props) {
var ref = useRef();
var onScreen = useOnScreen(ref, '-50% 0px -50% 0px');
return React.createElement("div", {
ref: ref,
className: styles$l.root
}, React.createElement(BeforeAfter, Object.assign({}, props, {
state: onScreen ? 'active' : 'inactive'
})));
}
var css$n = ".SoundDisclaimer-module_soundDisclaimer__1sAiH {\n text-align: center;\n border: 1px solid white;\n border-radius: 4px;\n cursor: pointer;\n font-size: inherit;\n}\n\n.SoundDisclaimer-module_soundDisclaimer__1sAiH:hover {\n background: rgba(255, 255, 255, 0.25);\n}";
var styles$m = {"soundDisclaimer":"SoundDisclaimer-module_soundDisclaimer__1sAiH"};
styleInject(css$n);
function UnmuteButton() {
return React.createElement(MutedContext.Consumer, null, function (mutedSettings) {
return React.createElement("div", {
className: classnames(styles$m.soundDisclaimer),
onClick: function onClick() {
return mutedSettings.setMuted(false);
}
}, React.createElement("p", null, "Dieser Artikel wirkt am besten mit eingeschaltetem Ton.", React.createElement("br", null), "Klicken Sie einmal in dieses Feld, um den Ton f\xFCr die gesamte Geschichte zu aktivieren."));
});
}
var loremIpsum1 = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ';
var loremIpsum2 = 'At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.';
var loremIpsum3 = 'Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.';
var templates = {
heading: {
name: 'Überschrift',
component: Heading
},
textBlock: {
name: 'Text Block',
component: TextBlock
},
soundDisclaimer: {
name: 'Sound Disclaimer',
component: UnmuteButton
},
loremIpsum1: {
name: 'Blindtext 1',
component: TextBlock,
props: {
children: loremIpsum1
}
},
loremIpsum2: {
name: 'Blindtext 2',
component: TextBlock,
props: {
children: loremIpsum2
}
},
loremIpsum3: {
name: 'Blindtext 3',
component: TextBlock,
props: {
children: loremIpsum3
}
},
inlineImage: {
name: 'Inline Bild',
component: InlineImage,
inlinePositioning: true
},
inlineVideo: {
name: 'Inline Video',
component: InlineVideo,
inlinePositioning: true
},
inlineBeforeAfter: {
name: 'Inline Before/After',
component: InlineBeforeAfter,
inlinePositioning: true
},
stickyImage: {
name: 'Sticky Bild',
component: InlineImage,
inlinePositioning: true
}
};
function ForegroundItem(props) {
var template = templates[props.type];
var Component = template.component;
return React.createElement(Component, Object.assign({}, template.props, props.itemProps));
}
function ForegroundItems(props) {
return React.createElement(React.Fragment, null, props.items.map(function (item, index) {
return props.children(item, React.createElement(ForegroundItem, {
key: index,
type: item.type,
position: item.position,
itemProps: item.props
}));
}));
}
ForegroundItems.defaultProps = {
children: function children(item, child) {
return child;
}
};
var css$o = ".TwoColumn-module_root__37EqL {\n}\n\n.TwoColumn-module_group__3Hg2y {\n clear: right;\n margin-left: 8%;\n margin-right: 8%;\n}\n\n.TwoColumn-module_group-full__2OT4o {\n margin-left: 0;\n margin-right: 0;\n}\n\n.TwoColumn-module_sticky__4LCDO,\n.TwoColumn-module_inline__1fPfM {\n max-width: 500px;\n}\n\n.TwoColumn-module_right__Fr52a .TwoColumn-module_inline__1fPfM {\n margin-left: auto;\n}\n\n@media (max-width: 949px) {\n .TwoColumn-module_right__Fr52a .TwoColumn-module_sticky__4LCDO {\n margin-left: auto;\n }\n}\n\n@media (min-width: 950px) {\n .TwoColumn-module_sticky__4LCDO {\n position: sticky;\n float: right;\n top: 33%;\n width: 30%;\n max-width: 600px;\n }\n\n .TwoColumn-module_right__Fr52a .TwoColumn-module_sticky__4LCDO {\n float: left;\n }\n}\n";
var styles$n = {"root":"TwoColumn-module_root__37EqL","group":"TwoColumn-module_group__3Hg2y","group-full":"TwoColumn-module_group-full__2OT4o","sticky":"TwoColumn-module_sticky__4LCDO","inline":"TwoColumn-module_inline__1fPfM","right":"TwoColumn-module_right__Fr52a"};
styleInject(css$o);
var availablePositions = ['inline', 'sticky', 'full'];
function TwoColumn(props) {
return React.createElement("div", {
className: classnames(styles$n.root, styles$n[props.align])
}, React.createElement("div", {
className: styles$n.inline,
ref: props.contentAreaRef
}), renderItems(props));
}
TwoColumn.defaultProps = {
align: 'left'
};
function renderItems(props) {
return groupItemsByPosition(props.items).map(function (group, index) {
return React.createElement("div", {
key: index,
className: classnames(styles$n.group, styles$n["group-".concat(group.position)])
}, renderItemGroup(props, group, 'sticky'), renderItemGroup(props, group, 'inline'), renderItemGroup(props, group, 'full'));
});
}
function renderItemGroup(props, group, position) {
if (group[position].length) {
return React.createElement("div", {
className: styles$n[position]
}, props.children(React.createElement(ForegroundItems, {
items: group[position]
})));
}
}
function groupItemsByPosition(items) {
var groups = [];
var currentGroup;
items.reduce(function (previousItemPosition, item, index) {
var position = availablePositions.indexOf(item.position) >= 0 ? item.position : 'inline';
if (!previousItemPosition || previousItemPosition !== position && (previousItemPosition !== 'sticky' || position !== 'inline')) {
currentGroup = {
position: position,
sticky: [],
inline: [],
full: []
};
groups = [].concat(_toConsumableArray(groups), [currentGroup]);
}
currentGroup[position].push(item);
return position;
}, null);
return groups;
}
var css$p = ".Center-module_outer__3Rr0H {\n margin-left: 8%;\n margin-right: 8%;\n}\n\n.Center-module_outer-full__3dknO {\n margin-left: 0;\n margin-right: 0;\n}\n\n.Center-module_item__1KSs3 {\n margin-left: auto;\n margin-right: auto;\n max-width: 700px;\n}\n\n.Center-module_item-full__1cEuv {\n margin-left: 0;\n margin-right: 0;\n max-width: none;\n}\n\n@media (min-width: 950px) {\n .Center-module_inner-left__2z9Ea {\n float: left;\n width: 60%;\n margin-left: -10%;\n margin-right: 1em;\n margin-bottom: 1em;\n }\n\n .Center-module_inner-right__KBkVt {\n float: right;\n width: 60%;\n margin-right: -10%;\n margin-left: 1em;\n margin-bottom: 1em;\n }\n}\n";
var styles$o = {"outer":"Center-module_outer__3Rr0H","outer-full":"Center-module_outer-full__3dknO","item":"Center-module_item__1KSs3","item-full":"Center-module_item-full__1cEuv","inner-left":"Center-module_inner-left__2z9Ea","inner-right":"Center-module_inner-right__KBkVt"};
styleInject(css$p);
function Center(props) {
return React.createElement("div", {
className: classnames(styles$o.root)
}, React.createElement("div", {
ref: props.contentAreaRef
}), React.createElement(ForegroundItems, {
items: props.items
}, function (item, child) {
return React.createElement("div", {
key: item.index,
className: classnames(styles$o.outer, styles$o["outer-".concat(item.position)])
}, React.createElement("div", {
className: classnames(styles$o.item, styles$o["item-".concat(item.position)])
}, props.children(React.createElement("div", {
className: styles$o["inner-".concat(item.position)]
}, child))));
}));
}
function Layout(props) {
if (props.layout === 'center') {
return React.createElement(Center, props);
} else if (props.layout === 'right') {
return React.createElement(TwoColumn, Object.assign({
align: "right"
}, props));
} else {
return React.createElement(TwoColumn, props);
}
}
Layout.defaultProps = {
layout: 'left'
};
function isIntersectingX(rectA, rectB) {
return rectA.left < rectB.right && rectA.right > rectB.left || rectB.left < rectA.right && rectB.right > rectA.left;
}
function getBoundingClientRect(el) {
if (!el) {
return {
left: 0,
right: 0,
top: 0,
bottom: 0,
width: 0,
height: 0
};
}
return el.getBoundingClientRect();
}
function useBoundingClientRect() {
var _useState = useState(getBoundingClientRect(null)),
_useState2 = _slicedToArray(_useState, 2),
boundingClientRect = _useState2[0],
setBoundingClientRect = _useState2[1];
var _useState3 = useState(null),
_useState4 = _slicedToArray(_useState3, 2),
currentNode = _useState4[0],
setCurrentNode = _useState4[1];
var measureRef = useCallback(function (node) {
setCurrentNode(node);
setBoundingClientRect(getBoundingClientRect(node));
}, []);
useEffect(function () {
function handler() {
setBoundingClientRect(getBoundingClientRect(currentNode));
}
if (!currentNode) {
return;
}
window.addEventListener('resize', handler);
window.addEventListener('scroll', handler);
return function () {
window.removeEventListener('resize', handler);
window.removeEventListener('scroll', handler);
};
}, [currentNode]);
return [boundingClientRect, measureRef];
}
function useScrollTarget(ref, isScrollTarget) {
useEffect(function () {
if (ref.current && isScrollTarget) {
window.scrollTo({
top: ref.current.getBoundingClientRect().top + window.scrollY - window.innerHeight * 0.25,
behavior: 'smooth'
});
}
}, [ref, isScrollTarget]);
}
var css$q = ".Section-module_Section__Yo58b {\n position: relative;\n}\n\n.Section-module_invert__3_p7F {\n color: #222;\n}\n\n.Section-module_activityProbe__Fsklh {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 2px;\n width: 1px;\n}\n";
var styles$p = {"Section":"Section-module_Section__Yo58b","invert":"Section-module_invert__3_p7F","activityProbe":"Section-module_activityProbe__Fsklh"};
styleInject(css$q);
var css$r = "\n\n.fadeInBgConceal-module_backdrop__11JGO {\n position: absolute;\n height: 100%;\n}\n\n.fadeInBgConceal-module_backdropInner__1IAYD {\n position: fixed;\n top: 0;\n height: 100vh;\n width: 100%;\n}\n\n.fadeInBgConceal-module_backdrop__11JGO {\n transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInBgConceal-module_backdrop-below__3E6Uk {\n opacity: 0;\n visibility: hidden;\n}\n";
var fadeInBgConceal = {"fade-duration":"0.5s","backdrop":"fadeInBgConceal-module_backdrop__11JGO","backdropInner":"fadeInBgConceal-module_backdropInner__1IAYD","backdrop-below":"fadeInBgConceal-module_backdrop-below__3E6Uk"};
styleInject(css$r);
var css$s = "\n\n.fadeInBgFadeOut-module_backdrop__r0YXp {\n position: absolute;\n height: 100%;\n}\n\n.fadeInBgFadeOut-module_backdropInner__IQp87 {\n position: fixed;\n top: 0;\n height: 100vh;\n width: 100%;\n}\n\n.fadeInBgFadeOut-module_backdrop__r0YXp .fadeInBgFadeOut-module_backdropInner__IQp87,\n.fadeInBgFadeOut-module_foreground__Q2vkT {\n transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInBgFadeOut-module_foreground-above__3pmz9,\n.fadeInBgFadeOut-module_backdrop-below__2G-Ic .fadeInBgFadeOut-module_backdropInner__IQp87 {\n opacity: 0;\n visibility: hidden;\n}\n\n.fadeInBgFadeOut-module_bbackdrop__1thge::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n background-color: #000;\n}\n\n.fadeInBgFadeOut-module_bbackdrop-below__yaeMc::before {\n visibility: hidden;\n}\n";
var fadeInBgFadeOut = {"fade-duration":"0.5s","backdrop":"fadeInBgFadeOut-module_backdrop__r0YXp","backdropInner":"fadeInBgFadeOut-module_backdropInner__IQp87","foreground":"fadeInBgFadeOut-module_foreground__Q2vkT","foreground-above":"fadeInBgFadeOut-module_foreground-above__3pmz9","backdrop-below":"fadeInBgFadeOut-module_backdrop-below__2G-Ic","bbackdrop":"fadeInBgFadeOut-module_bbackdrop__1thge","bbackdrop-below":"fadeInBgFadeOut-module_bbackdrop-below__yaeMc"};
styleInject(css$s);
var css$t = "\n\n.fadeInBgFadeOutBg-module_backdrop__15ocl {\n position: absolute;\n height: 100%;\n}\n\n.fadeInBgFadeOutBg-module_backdropInner__sAnz6 {\n position: fixed;\n top: 0;\n height: 100vh;\n width: 100%;\n}\n\n.fadeInBgFadeOutBg-module_boxShadow__xUKyj,\n.fadeInBgFadeOutBg-module_backdrop__15ocl .fadeInBgFadeOutBg-module_backdropInner__sAnz6 {\n transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInBgFadeOutBg-module_boxShadow-above__2bY0E,\n.fadeInBgFadeOutBg-module_backdrop-below__1rDT6 .fadeInBgFadeOutBg-module_backdropInner__sAnz6 {\n opacity: 0;\n visibility: hidden;\n}\n\n.fadeInBgFadeOutBg-module_bbackdrop__25Ux-::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n background-color: #000;\n}\n\n.fadeInBgFadeOutBg-module_bbackdrop-below__2MPgj::before {\n visibility: hidden;\n}\n";
var fadeInBgFadeOutBg = {"fade-duration":"0.5s","backdrop":"fadeInBgFadeOutBg-module_backdrop__15ocl","backdropInner":"fadeInBgFadeOutBg-module_backdropInner__sAnz6","boxShadow":"fadeInBgFadeOutBg-module_boxShadow__xUKyj","boxShadow-above":"fadeInBgFadeOutBg-module_boxShadow-above__2bY0E","backdrop-below":"fadeInBgFadeOutBg-module_backdrop-below__1rDT6","bbackdrop":"fadeInBgFadeOutBg-module_bbackdrop__25Ux-","bbackdrop-below":"fadeInBgFadeOutBg-module_bbackdrop-below__2MPgj"};
styleInject(css$t);
var css$u = "\n\n.fadeInBgScrollOut-module_backdrop__1bSsb {\n position: absolute;\n top: 0;\n bottom: 0;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n}\n\n.fadeInBgScrollOut-module_backdropInner__3JZBG {\n position: sticky;\n bottom: 0;\n width: 100%;\n}\n\n.fadeInBgScrollOut-module_backdropInner2__q-00L {\n position: absolute;\n bottom: 0;\n width: 100%;\n}\n\n.fadeInBgScrollOut-module_foreground__1ODH9 {\n min-height: 100vh;\n}\n\n.fadeInBgScrollOut-module_backdrop__1bSsb {\n transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInBgScrollOut-module_backdrop-below__2Dbkr {\n opacity: 0;\n visibility: hidden;\n}\n";
var fadeInBgScrollOut = {"fade-duration":"0.5s","backdrop":"fadeInBgScrollOut-module_backdrop__1bSsb","backdropInner":"fadeInBgScrollOut-module_backdropInner__3JZBG","backdropInner2":"fadeInBgScrollOut-module_backdropInner2__q-00L","foreground":"fadeInBgScrollOut-module_foreground__1ODH9","backdrop-below":"fadeInBgScrollOut-module_backdrop-below__2Dbkr"};
styleInject(css$u);
var css$v = "\n\n.fadeInConceal-module_backdrop__1zaRO {\n position: absolute;\n height: 100%;\n}\n\n.fadeInConceal-module_backdropInner__1AIvq {\n position: fixed;\n top: 0;\n height: 100vh;\n width: 100%;\n}\n\n.fadeInConceal-module_backdrop__1zaRO,\n.fadeInConceal-module_foreground__3giM9 {\n transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInConceal-module_backdrop-below__AWyQe,\n.fadeInConceal-module_foreground-below__2z5Op {\n opacity: 0;\n visibility: hidden;\n}\n";
var fadeInConceal = {"fade-duration":"0.5s","backdrop":"fadeInConceal-module_backdrop__1zaRO","backdropInner":"fadeInConceal-module_backdropInner__1AIvq","foreground":"fadeInConceal-module_foreground__3giM9","backdrop-below":"fadeInConceal-module_backdrop-below__AWyQe","foreground-below":"fadeInConceal-module_foreground-below__2z5Op"};
styleInject(css$v);
var css$w = "\n\n.fadeInFadeOut-module_backdrop__Y4xOA {\n position: absolute;\n height: 100%;\n}\n\n.fadeInFadeOut-module_backdropInner__1oRfP {\n position: fixed;\n top: 0;\n height: 100vh;\n width: 100%;\n}\n\n.fadeInFadeOut-module_backdrop__Y4xOA .fadeInFadeOut-module_backdropInner__1oRfP,\n.fadeInFadeOut-module_foreground__1eleZ {\n transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInFadeOut-module_foreground-above__249wa,\n.fadeInFadeOut-module_backdrop-below__1h2I4 .fadeInFadeOut-module_backdropInner__1oRfP,\n.fadeInFadeOut-module_foreground-below__3mE6f {\n opacity: 0;\n visibility: hidden;\n}\n\n.fadeInFadeOut-module_bbackdrop__WJjFl::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n background-color: #000;\n}\n\n.fadeInFadeOut-module_bbackdrop-below__1Htkz::before {\n visibility: hidden;\n}\n";
var fadeInFadeOut = {"fade-duration":"0.5s","backdrop":"fadeInFadeOut-module_backdrop__Y4xOA","backdropInner":"fadeInFadeOut-module_backdropInner__1oRfP","foreground":"fadeInFadeOut-module_foreground__1eleZ","foreground-above":"fadeInFadeOut-module_foreground-above__249wa","backdrop-below":"fadeInFadeOut-module_backdrop-below__1h2I4","foreground-below":"fadeInFadeOut-module_foreground-below__3mE6f","bbackdrop":"fadeInFadeOut-module_bbackdrop__WJjFl","bbackdrop-below":"fadeInFadeOut-module_bbackdrop-below__1Htkz"};
styleInject(css$w);
var css$x = "\n\n.fadeInFadeOutBg-module_backdrop__2-IF3 {\n position: absolute;\n height: 100%;\n}\n\n.fadeInFadeOutBg-module_backdropInner__3r_bo {\n position: fixed;\n top: 0;\n height: 100vh;\n width: 100%;\n}\n\n.fadeInFadeOutBg-module_backdrop__2-IF3 .fadeInFadeOutBg-module_backdropInner__3r_bo,\n.fadeInFadeOutBg-module_boxShadow__3x7Ki,\n.fadeInFadeOutBg-module_foreground__24f_M {\n transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInFadeOutBg-module_backdrop-below__4Ys_2 .fadeInFadeOutBg-module_backdropInner__3r_bo,\n.fadeInFadeOutBg-module_boxShadow-above__3T2K5,\n.fadeInFadeOutBg-module_foreground-below__3pTRc {\n opacity: 0;\n visibility: hidden;\n}\n\n.fadeInFadeOutBg-module_bbackdrop__MVdvw::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n background-color: #000;\n}\n\n.fadeInFadeOutBg-module_bbackdrop-below__30mpF::before {\n visibility: hidden;\n}\n";
var fadeInFadeOutBg = {"fade-duration":"0.5s","backdrop":"fadeInFadeOutBg-module_backdrop__2-IF3","backdropInner":"fadeInFadeOutBg-module_backdropInner__3r_bo","boxShadow":"fadeInFadeOutBg-module_boxShadow__3x7Ki","foreground":"fadeInFadeOutBg-module_foreground__24f_M","backdrop-below":"fadeInFadeOutBg-module_backdrop-below__4Ys_2","boxShadow-above":"fadeInFadeOutBg-module_boxShadow-above__3T2K5","foreground-below":"fadeInFadeOutBg-module_foreground-below__3pTRc","bbackdrop":"fadeInFadeOutBg-module_bbackdrop__MVdvw","bbackdrop-below":"fadeInFadeOutBg-module_bbackdrop-below__30mpF"};
styleInject(css$x);
var css$y = "\n\n.fadeInScrollOut-module_backdrop__2FhBb {\n position: absolute;\n top: 0;\n bottom: 0;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n}\n\n.fadeInScrollOut-module_backdropInner__1OfNZ {\n position: sticky;\n bottom: 0;\n width: 100%;\n}\n\n.fadeInScrollOut-module_backdropInner2__5bNPT {\n position: absolute;\n bottom: 0;\n width: 100%;\n}\n\n.fadeInScrollOut-module_foreground__3h0EX {\n min-height: 100vh;\n}\n\n.fadeInScrollOut-module_backdrop__2FhBb,\n.fadeInScrollOut-module_foreground__3h0EX {\n transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInScrollOut-module_backdrop-below__3cRLH,\n.fadeInScrollOut-module_foreground-below__1Jcql {\n opacity: 0;\n visibility: hidden;\n}\n";
var fadeInScrollOut = {"fade-duration":"0.5s","backdrop":"fadeInScrollOut-module_backdrop__2FhBb","backdropInner":"fadeInScrollOut-module_backdropInner__1OfNZ","backdropInner2":"fadeInScrollOut-module_backdropInner2__5bNPT","foreground":"fadeInScrollOut-module_foreground__3h0EX","backdrop-below":"fadeInScrollOut-module_backdrop-below__3cRLH","foreground-below":"fadeInScrollOut-module_foreground-below__1Jcql"};
styleInject(css$y);
var css$z = ".revealConceal-module_backdrop__dLUhU {\n position: absolute;\n clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);\n height: 100%;\n}\n\n.revealConceal-module_backdropInner__2k1Z- {\n position: fixed;\n top: 0;\n height: 100vh;\n width: 100%;\n\n transform: translateZ(0);\n backface-visibility: hidden;\n}\n";
var revealConceal = {"backdrop":"revealConceal-module_backdrop__dLUhU","backdropInner":"revealConceal-module_backdropInner__2k1Z-"};
styleInject(css$z);
var css$A = "\n\n.revealFadeOut-module_backdrop___Q1QF {\n position: absolute;\n clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);\n height: 200%;\n}\n\n.revealFadeOut-module_backdropInner__17qRn {\n position: fixed;\n top: 0;\n height: 100vh;\n width: 100%;\n\n transform: translateZ(0);\n backface-visibility: hidden;\n}\n\n.revealFadeOut-module_foreground__1GzBs {\n transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.revealFadeOut-module_foreground-above__3GxOf {\n opacity: 0;\n visibility: hidden;\n}\n";
var revealFadeOut = {"fade-duration":"0.5s","backdrop":"revealFadeOut-module_backdrop___Q1QF","backdropInner":"revealFadeOut-module_backdropInner__17qRn","foreground":"revealFadeOut-module_foreground__1GzBs","foreground-above":"revealFadeOut-module_foreground-above__3GxOf"};
styleInject(css$A);
var css$B = "\n\n.revealFadeOutBg-module_backdrop__30OCF {\n position: absolute;\n clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);\n height: 200%;\n}\n\n.revealFadeOutBg-module_backdropInner__3v3tM {\n position: fixed;\n top: 0;\n height: 100vh;\n width: 100%;\n\n transform: translateZ(0);\n backface-visibility: hidden;\n}\n\n.revealFadeOutBg-module_boxShadow__1NZRz {\n transition: opacity 1s ease, visibility 1s;\n}\n\n.revealFadeOutBg-module_boxShadow-above__2r4ov {\n opacity: 0;\n visibility: hidden;\n}\n";
var revealFadeOutBg = {"fade-duration":"0.5s","backdrop":"revealFadeOutBg-module_backdrop__30OCF","backdropInner":"revealFadeOutBg-module_backdropInner__3v3tM","boxShadow":"revealFadeOutBg-module_boxShadow__1NZRz","boxShadow-above":"revealFadeOutBg-module_boxShadow-above__2r4ov"};
styleInject(css$B);
var css$C = ".revealScrollOut-module_backdrop__2yOXd {\n position: absolute;\n clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);\n top: 0;\n bottom: 0;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n}\n\n.revealScrollOut-module_backdropInner__211p3 {\n position: sticky;\n bottom: 0;\n width: 100%;\n\n transform: translateZ(0);\n backface-visibility: hidden;\n}\n\n.revealScrollOut-module_backdropInner2__v6WqM {\n position: absolute;\n bottom: 0;\n width: 100%;\n}\n\n.revealScrollOut-module_foreground__3z-hw {\n}\n";
var revealScrollOut = {"backdrop":"revealScrollOut-module_backdrop__2yOXd","backdropInner":"revealScrollOut-module_backdropInner__211p3","backdropInner2":"revealScrollOut-module_backdropInner2__v6WqM","foreground":"revealScrollOut-module_foreground__3z-hw"};
styleInject(css$C);
var css$D = ".scrollInConceal-module_backdrop__2OJJC {\n position: sticky;\n top: 0;\n height: 0;\n}\n";
var scrollInConceal = {"backdrop":"scrollInConceal-module_backdrop__2OJJC"};
styleInject(css$D);
var css$E = "\n\n.scrollInFadeOut-module_backdrop__1vXJd {\n position: sticky;\n top: 0;\n height: 0;\n}\n\n.scrollInFadeOut-module_foreground__3Ikxb {\n transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.scrollInFadeOut-module_foreground-above__6ipm- {\n opacity: 0;\n visibility: hidden;\n}\n\n.scrollInFadeOut-module_bbackdrop__2C-bf::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n background-color: #000;\n}\n\n.scrollInFadeOut-module_bbackdrop-below__3tq0M::before {\n visibility: hidden;\n}\n";
var scrollInFadeOut = {"fade-duration":"0.5s","backdrop":"scrollInFadeOut-module_backdrop__1vXJd","foreground":"scrollInFadeOut-module_foreground__3Ikxb","foreground-above":"scrollInFadeOut-module_foreground-above__6ipm-","bbackdrop":"scrollInFadeOut-module_bbackdrop__2C-bf","bbackdrop-below":"scrollInFadeOut-module_bbackdrop-below__3tq0M"};
styleInject(css$E);
var css$F = "\n\n.scrollInFadeOutBg-module_backdrop__zw95c {\n position: sticky;\n top: 0;\n height: 0;\n}\n\n.scrollInFadeOutBg-module_boxShadow__3UxCQ {\n transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.scrollInFadeOutBg-module_boxShadow-above__3kfau {\n opacity: 0;\n visibility: hidden;\n}\n\n.scrollInFadeOutBg-module_bbackdrop__2pO9o::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n background-color: #000;\n}\n\n.scrollInFadeOutBg-module_bbackdrop-below__1Ky2w::before {\n visibility: hidden;\n}\n";
var scrollInFadeOutBg = {"fade-duration":"0.5s","backdrop":"scrollInFadeOutBg-module_backdrop__zw95c","boxShadow":"scrollInFadeOutBg-module_boxShadow__3UxCQ","boxShadow-above":"scrollInFadeOutBg-module_boxShadow-above__3kfau","bbackdrop":"scrollInFadeOutBg-module_bbackdrop__2pO9o","bbackdrop-below":"scrollInFadeOutBg-module_bbackdrop-below__1Ky2w"};
styleInject(css$F);
var css$G = ".scrollInScrollOut-module_backdrop__XzCge {\n position: sticky;\n top: 0;\n height: 100vh;\n}\n\n.scrollInScrollOut-module_foreground__1yyY8 {\n margin-top: -100vh;\n}\n";
var scrollInScrollOut = {"backdrop":"scrollInScrollOut-module_backdrop__XzCge","foreground":"scrollInScrollOut-module_foreground__1yyY8"};
styleInject(css$G);
var css$H = ".previewScrollOut-module_scene__W9bDl {\n height: 100%;\n}\n\n.previewScrollOut-module_backdrop__2-Bl_ {\n position: absolute;\n top: 0;\n}\n";
var previewScrollOut = {"scene":"previewScrollOut-module_scene__W9bDl","backdrop":"previewScrollOut-module_backdrop__2-Bl_"};
styleInject(css$H);
var styles$q = {
fadeInBgConceal: fadeInBgConceal,
fadeInBgFadeOut: fadeInBgFadeOut,
fadeInBgFadeOutBg: fadeInBgFadeOutBg,
fadeInBgScrollOut: fadeInBgScrollOut,
fadeInConceal: fadeInConceal,
fadeInFadeOut: fadeInFadeOut,
fadeInFadeOutBg: fadeInFadeOutBg,
fadeInScrollOut: fadeInScrollOut,
revealConceal: revealConceal,
revealFadeOut: revealFadeOut,
revealFadeOutBg: revealFadeOutBg,
revealScrollOut: revealScrollOut,
scrollInConceal: scrollInConceal,
scrollInFadeOut: scrollInFadeOut,
scrollInFadeOutBg: scrollInFadeOutBg,
scrollInScrollOut: scrollInScrollOut,
previewScrollOut: previewScrollOut
};
var enterTransitions = {
fade: 'fadeIn',
fadeBg: 'fadeInBg',
scroll: 'scrollIn',
scrollOver: 'scrollIn',
reveal: 'reveal',
beforeAfter: 'reveal',
preview: 'preview'
};
var exitTransitions = {
fade: 'fadeOut',
fadeBg: 'fadeOutBg',
scroll: 'scrollOut',
scrollOver: 'conceal',
reveal: 'scrollOut',
beforeAfter: 'conceal'
};
function getTransitionStyles(section, previousSection, nextSection) {
var enterTransition = enterTransitions[section.transition];
var exitTransition = exitTransitions[nextSection ? nextSection.transition : 'scroll'];
var name = "".concat(enterTransition).concat(capitalize(exitTransition));
if (!styles$q[name]) {
throw new Error("Unknown transition ".concat(name));
}
return styles$q[name];
}
function capitalize(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
function NoOpShadow(props) {
return React.createElement("div", null, props.children);
}
var css$I = ".GradientShadow-module_shadow__2UiDH {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n z-index: 1;\n transition: opacity 1s ease;\n}\n\n.GradientShadow-module_align-right__3iXZs .GradientShadow-module_shadow__2UiDH,\n.GradientShadow-module_align-left__3qcNM .GradientShadow-module_shadow__2UiDH {\n background: linear-gradient(to right, #000 0%,rgba(0, 0, 0, 0) 100%);\n}\n\n@media (min-width: 950px) {\n .GradientShadow-module_align-right__3iXZs .GradientShadow-module_shadow__2UiDH {\n background: linear-gradient(to left, #000 0%,rgba(0, 0, 0, 0) 100%);\n }\n}\n\n.GradientShadow-module_intersecting__h6vpz .GradientShadow-module_shadow__2UiDH,\n.GradientShadow-module_align-center__2C7cl .GradientShadow-module_shadow__2UiDH {\n background: #000;\n}\n";
var styles$r = {"shadow":"GradientShadow-module_shadow__2UiDH","align-right":"GradientShadow-module_align-right__3iXZs","align-left":"GradientShadow-module_align-left__3qcNM","intersecting":"GradientShadow-module_intersecting__h6vpz","align-center":"GradientShadow-module_align-center__2C7cl"};
styleInject(css$I);
function GradientShadow(props) {
var maxOpacityOverlap = props.motifAreaRect.height / 2;
var motifAreaOverlap = Math.min(maxOpacityOverlap, props.motifAreaRect.bottom - props.contentAreaRect.top);
var opacityFactor = props.intersecting && props.motifAreaRect.height > 0 ? motifAreaOverlap / maxOpacityOverlap : 1;
return React.createElement("div", {
className: classnames(styles$r.root, styles$r["align-".concat(props.align)], _defineProperty({}, styles$r.intersecting, props.intersecting))
}, React.createElement("div", {
className: styles$r.shadow,
style: {
opacity: props.opacity * Math.round(opacityFactor * 10) / 10
}
}), props.children);
}
GradientShadow.defaultProps = {
opacity: 0.7,
align: 'left'
};
function NoOpBoxWrapper(props) {
return React.createElement("div", null, props.children);
}
var css$J = ".GradientBox-module_wrapper__1Jj7N {\n padding-bottom: 50px;\n}\n\n.GradientBox-module_shadow__2XilX {\n --background: rgba(0, 0, 0, 0.7);\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n pointer-events: none;\n}\n\n.GradientBox-module_long__10s6v .GradientBox-module_shadow__2XilX {\n bottom: -100vh;\n}\n\n.GradientBox-module_gradient__31tJ- {\n text-shadow: 0px 1px 5px black;\n}\n\n.GradientBox-module_gradient__31tJ- .GradientBox-module_shadow__2XilX {\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px,rgba(0, 0, 0, 0.3) 100px,rgba(0, 0, 0, 0.3) 100%);\n}\n\n.GradientBox-module_content__96lDk {\n position: relative;\n}\n";
var styles$s = {"wrapper":"GradientBox-module_wrapper__1Jj7N","shadow":"GradientBox-module_shadow__2XilX","long":"GradientBox-module_long__10s6v","gradient":"GradientBox-module_gradient__31tJ-","content":"GradientBox-module_content__96lDk"};
styleInject(css$J);
function GradientBox(props) {
var _classNames;
var padding = props.active ? props.padding : 0;
return React.createElement("div", {
className: classnames(styles$s.root, (_classNames = {}, _defineProperty(_classNames, styles$s.gradient, padding > 0), _defineProperty(_classNames, styles$s["long"], props.coverInvisibleNextSection), _classNames)),
style: {
paddingTop: padding
}
}, React.createElement("div", {
className: styles$s.wrapper
}, React.createElement("div", {
className: classnames(styles$s.shadow, props.transitionStyles.boxShadow, props.transitionStyles["boxShadow-".concat(props.state)]),
style: {
top: padding,
opacity: props.opacity
}
}), React.createElement("div", {
className: styles$s.content
}, props.children)));
}
GradientBox.defaultProps = {
opacity: 1
};
var css$K = ".CardBox-module_wrapper__3vnaH {\n}\n\n.CardBox-module_content__36v7J {\n position: relative;\n}\n";
var styles$t = {"wrapper":"CardBox-module_wrapper__3vnaH","content":"CardBox-module_content__36v7J"};
styleInject(css$K);
function CardBox(props) {
var padding = props.active ? props.padding : 0;
return React.createElement("div", {
style: {
paddingTop: padding
}
}, React.createElement("div", {
className: styles$t.wrapper
}, React.createElement("div", {
style: {
top: padding
}
}), React.createElement("div", {
className: styles$t.content
}, props.children)));
}
var css$L = ".CardBoxWrapper-module_cardBg__154o2 {\n background: white;\n color: black;\n padding: 4%;\n margin: 0 -4% 50px 0;\n border-radius: 15px;\n opacity: 1;\n}\n";
var styles$u = {"cardBg":"CardBoxWrapper-module_cardBg__154o2"};
styleInject(css$L);
function CardBoxWrapper(props) {
return React.createElement("div", {
className: styles$u.cardBg
}, props.children);
}
function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var OnScreenContext = React.createContext({
center: false,
top: false,
bottom: false
});
function Section(props) {
var activityProbeRef = useRef();
useOnScreen(activityProbeRef, '-50% 0px -50% 0px', props.onActivate);
var ref = useRef();
var onScreen = useOnScreen(ref, '0px 0px 0px 0px');
useScrollTarget(ref, props.isScrollTarget);
var _useBoundingClientRec = useBoundingClientRect(),
_useBoundingClientRec2 = _slicedToArray(_useBoundingClientRec, 2),
motifAreaRect = _useBoundingClientRec2[0],
setMotifAreaRectRect = _useBoundingClientRec2[1];
var _useDimension = useDimension(),
_useDimension2 = _slicedToArray(_useDimension, 2),
motifAreaDimension = _useDimension2[0],
setMotifAreaDimensionRef = _useDimension2[1];
var setMotifAreaRefs = useCallback(function (node) {
setMotifAreaRectRect(node);
setMotifAreaDimensionRef(node);
}, [setMotifAreaRectRect, setMotifAreaDimensionRef]);
var _useBoundingClientRec3 = useBoundingClientRect(props.layout),
_useBoundingClientRec4 = _slicedToArray(_useBoundingClientRec3, 2),
contentAreaRect = _useBoundingClientRec4[0],
setContentAreaRef = _useBoundingClientRec4[1];
var intersecting = isIntersectingX(motifAreaRect, contentAreaRect);
var heightOffset = 0; //(props.backdrop.first || props.transition === 'scrollOver') ? 0 : (window.innerHeight / 3);
var transitionStyles = getTransitionStyles(props, props.previousSection, props.nextSection);
var appearance = {
shadow: {
background: GradientShadow,
foreground: GradientBox,
foregroundWrapper: NoOpBoxWrapper
},
transparent: {
background: NoOpShadow,
foreground: CardBox,
foregroundWrapper: NoOpBoxWrapper
},
cards: {
background: NoOpShadow,
foreground: CardBox,
foregroundWrapper: CardBoxWrapper
}
}[props.appearance || 'shadow'];
var Shadow = appearance.background;
var Box = appearance.foreground;
var BoxWrapper = appearance.foregroundWrapper;
return React.createElement("section", {
id: "section-".concat(props.permaId),
ref: ref,
className: classnames(styles$p.Section, transitionStyles.section, _defineProperty({}, styles$p.invert, props.invert))
}, React.createElement("div", {
ref: activityProbeRef,
className: styles$p.activityProbe
}), React.createElement(Backdrop, Object.assign({}, props.backdrop, {
motifAreaRef: setMotifAreaRefs,
onScreen: onScreen,
offset: Math.max(0, Math.max(1, -contentAreaRect.top / 200)),
state: props.state,
transitionStyles: transitionStyles,
nextSectionOnEnd: props.nextSectionOnEnd,
interactive: props.interactiveBackdrop
}), function (children) {
return props.interactiveBackdrop ? children : React.createElement(Shadow, {
align: props.layout,
intersecting: intersecting,
opacity: props.shadowOpacity >= 0 ? props.shadowOpacity / 100 : 0.7,
motifAreaRect: motifAreaRect,
contentAreaRect: contentAreaRect
}, children);
}), React.createElement(Foreground, {
transitionStyles: transitionStyles,
hidden: props.interactiveBackdrop,
disableEnlarge: props.disableEnlarge,
state: props.state,
heightMode: heightMode(props)
}, React.createElement(Box, {
active: intersecting,
coverInvisibleNextSection: props.nextSection && props.nextSection.transition.startsWith('fade'),
transitionStyles: transitionStyles,
state: props.state,
padding: Math.max(0, motifAreaDimension.top + motifAreaDimension.height - heightOffset),
opacity: props.shadowOpacity
}, React.createElement(Layout, {
items: indexItems(props.foreground),
appearance: props.appearance,
contentAreaRef: setContentAreaRef,
layout: props.layout
}, function (children) {
return React.createElement(BoxWrapper, null, children);
}))));
}
function indexItems(items) {
return items.map(function (item, index) {
return _objectSpread$4({}, item, {
index: index
});
});
}
function heightMode(props) {
if (props.fullHeight) {
if (props.transition.startsWith('fade') || props.nextSection && props.nextSection.transition.startsWith('fade')) {
return 'fullFade';
} else {
return 'full';
}
}
return 'dynamic';
}
function Chapter(props) {
return React.createElement("div", {
id: "chapter-".concat(props.permaId)
}, renderSections(props.sections, props.currentSectionIndex, props.setCurrentSectionIndex, props.scrollTargetSectionIndex, props.setScrollTargetSectionIndex));
}
function renderSections(sections, currentSectionIndex, setCurrentSectionIndex, scrollTargetSectionIndex, setScrollTargetSectionIndex) {
function _onActivate(sectionIndex) {
setCurrentSectionIndex(sectionIndex);
setScrollTargetSectionIndex(null);
}
return sections.map(function (section) {
return React.createElement(Section, Object.assign({
key: section.permaId,
state: section.sectionIndex > currentSectionIndex ? 'below' : section.sectionIndex < currentSectionIndex ? 'above' : 'active',
isScrollTarget: section.sectionIndex === scrollTargetSectionIndex,
onActivate: function onActivate() {
return _onActivate(section.sectionIndex);
}
}, section));
});
}
var css$M = "\n\n.Entry-module_Entry__1nDGh {\n font-family: 'Source Sans Pro', sans-serif;\n background-color: #000;\n color: #fff;\n}\n\n.Entry-module_exampleSelect__1uAJs {\n position: absolute;\n top: 5px;\n left: 50%;\n z-index: 10;\n transform: translateX(-50%);\n}\n";
var styles$v = {"font-sans":"'Source Sans Pro', sans-serif","Entry":"Entry-module_Entry__1nDGh","exampleSelect":"Entry-module_exampleSelect__1uAJs"};
styleInject(css$M);
function Entry(props) {
var _useState = useState(0),
_useState2 = _slicedToArray(_useState, 2),
currentSectionIndex = _useState2[0],
setCurrentSectionIndexState = _useState2[1];
var _useState3 = useState(null),
_useState4 = _slicedToArray(_useState3, 2),
scrollTargetSectionIndex = _useState4[0],
setScrollTargetSectionIndex = _useState4[1];
var _useState5 = useState(true),
_useState6 = _slicedToArray(_useState5, 2),
muted = _useState6[0],
setMuted = _useState6[1];
var dispatch = useEntryStateDispatch();
var entryStructure = useEntryStructure();
var setCurrentSectionIndex = useCallback(function (index) {
if (window.parent) {
window.parent.postMessage({
type: 'CHANGE_SECTION',
payload: {
index: index
}
}, window.location.origin);
}
setCurrentSectionIndexState(index);
}, [setCurrentSectionIndexState]);
useEffect(function () {
if (window.parent) {
window.addEventListener('message', receive);
window.parent.postMessage({
type: 'READY'
}, window.location.origin);
}
return function () {
return window.removeEventListener('message', receive);
};
function receive(message) {
if (window.location.href.indexOf(message.origin) === 0) {
if (message.data.type === 'ACTION') {
dispatch(message.data.payload);
} else if (message.data.type === 'SCROLL_TO_SECTION') {
setScrollTargetSectionIndex(message.data.payload.index);
}
}
}
}, [dispatch]);
function scrollToSection(index) {
if (index === 'next') {
index = currentSectionIndex + 1;
}
setScrollTargetSectionIndex(index);
}
return React.createElement("div", {
className: styles$v.Entry
}, React.createElement(MutedContext.Provider, {
value: {
muted: muted,
setMuted: setMuted
}
}, React.createElement(ScrollToSectionContext.Provider, {
value: scrollToSection
}, renderChapters(entryStructure, currentSectionIndex, setCurrentSectionIndex, scrollTargetSectionIndex, setScrollTargetSectionIndex))));
}
function renderChapters(entryStructure, currentSectionIndex, setCurrentSectionIndex, scrollTargetSectionIndex, setScrollTargetSectionIndex) {
return entryStructure.map(function (chapter, index) {
return React.createElement(Chapter, {
key: index,
permaId: chapter.permaId,
sections: chapter.sections,
currentSectionIndex: currentSectionIndex,
setCurrentSectionIndex: setCurrentSectionIndex,
scrollTargetSectionIndex: scrollTargetSectionIndex,
setScrollTargetSectionIndex: setScrollTargetSectionIndex
});
});
}
var css$N = "body {\n margin: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n";
styleInject(css$N);
function Root() {
return React.createElement(React.Fragment, null, React.createElement(EntryStateProvider, {
seed: window.pageflowScrolledSeed
}, React.createElement(AppHeader, null), React.createElement(Entry, null)));
}
ReactDOM.render(React.createElement(Root, null), document.getElementById('root'));
export default Root;