pageflow 15.4.0 → 15.5.0

Sign up to get free protection for your applications and to get access to all the features.

Potentially problematic release.


This version of pageflow might be problematic. Click here for more details.

Files changed (56) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +94 -166
  3. data/admins/pageflow/user.rb +0 -2
  4. data/app/assets/javascripts/pageflow/dist/ui.js +32 -9
  5. data/app/assets/javascripts/pageflow/editor/vendor.js +1 -0
  6. data/app/assets/stylesheets/pageflow/themes/default/page.scss +7 -0
  7. data/app/models/pageflow/chapter.rb +3 -9
  8. data/app/models/pageflow/page.rb +1 -4
  9. data/app/models/pageflow/revision.rb +0 -4
  10. data/app/models/pageflow/storyline.rb +2 -9
  11. data/app/views/pageflow/admin/initial_passwords/edit.html.erb +2 -1
  12. data/app/views/pageflow/themes/_theme.json.jbuilder +1 -1
  13. data/config/initializers/revision_components.rb +5 -0
  14. data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/editor.js +37 -13
  15. data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/frontend.js +19 -6
  16. data/entry_types/scrolled/app/helpers/pageflow_scrolled/themes_helper.rb +28 -0
  17. data/entry_types/scrolled/app/models/pageflow_scrolled/chapter.rb +3 -9
  18. data/entry_types/scrolled/app/models/pageflow_scrolled/content_element.rb +1 -4
  19. data/entry_types/scrolled/app/models/pageflow_scrolled/section.rb +3 -9
  20. data/entry_types/scrolled/app/models/pageflow_scrolled/storyline.rb +1 -9
  21. data/entry_types/scrolled/app/views/pageflow_scrolled/entries/_global_notices.html.erb +10 -0
  22. data/entry_types/scrolled/app/views/pageflow_scrolled/entries/show.html.erb +6 -3
  23. data/entry_types/scrolled/config/locales/de.yml +14 -0
  24. data/entry_types/scrolled/config/locales/en.yml +15 -49
  25. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/install_generator.rb +43 -6
  26. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/themes_plugin.rb.tt +26 -0
  27. data/entry_types/scrolled/lib/tasks/pageflow_scrolled/create_bundle_symlinks_for_yarn.rake +32 -0
  28. data/entry_types/scrolled/lib/tasks/pageflow_scrolled/dummy.rake +8 -0
  29. data/entry_types/scrolled/lib/tasks/{pageflow_scrolled_tasks.rake → pageflow_scrolled/storybook.rake} +53 -14
  30. data/entry_types/scrolled/package/contentElements-editor.js +66 -7
  31. data/entry_types/scrolled/package/contentElements-frontend.css +1 -1
  32. data/entry_types/scrolled/package/contentElements-frontend.js +109 -52
  33. data/entry_types/scrolled/package/editor.js +34 -25
  34. data/entry_types/scrolled/package/frontend/EditableText-7093fd0e.js +1071 -0
  35. data/entry_types/scrolled/package/frontend/Viewer-e49e7807.js +387 -0
  36. data/entry_types/scrolled/package/frontend/{Wavesurfer-b88b02e0.js → Wavesurfer-0adf5667.js} +1 -1
  37. data/entry_types/scrolled/package/frontend/{components-3ead1b4a.js → components-6a6793ca.js} +2 -1
  38. data/entry_types/scrolled/package/frontend/i18n-4dc6c377.js +1092 -0
  39. data/entry_types/scrolled/package/frontend/index.css +2 -2
  40. data/entry_types/scrolled/package/frontend/index.js +358 -179
  41. data/entry_types/scrolled/package/frontend/useBrowserFeature-91a4c29d.js +33 -0
  42. data/entry_types/scrolled/package/package.json +3 -5
  43. data/lib/generators/pageflow/initializer/templates/pageflow.rb +0 -7
  44. data/lib/pageflow/entry_export_import/revision_serialization.rb +15 -13
  45. data/lib/pageflow/entry_export_import/revision_serialization/import.rb +18 -26
  46. data/lib/pageflow/entry_type_configuration.rb +1 -0
  47. data/lib/pageflow/nested_revision_component.rb +49 -0
  48. data/lib/pageflow/revision_component.rb +6 -2
  49. data/lib/pageflow/user_mixin.rb +2 -1
  50. data/lib/pageflow/version.rb +1 -1
  51. data/package/editor.js +2 -1
  52. data/package/frontend.js +13 -2
  53. data/package/ui.js +32 -9
  54. data/spec/factories/test_revision_components.rb +4 -0
  55. metadata +18 -10
  56. data/entry_types/scrolled/package/frontend/EditableText-43c50894.js +0 -2161
@@ -1,2161 +0,0 @@
1
- import React, { useReducer, useMemo, useCallback, createContext as createContext$1, useContext, useState, useEffect, useRef } from 'react';
2
- import classNames from 'classnames';
3
- import { createContext, useContextSelector } from 'use-context-selector';
4
- import { createSelectorCreator, defaultMemoize, createSelector } from 'reselect';
5
- import I18n from 'i18n-js';
6
- import slugify from 'slugify';
7
- import { _ as _createClass, a as _classCallCheck, b as _inherits, c as _getPrototypeOf, d as _possibleConstructorReturn } from './getPrototypeOf-63c7c8e8.js';
8
-
9
- function _defineProperty(obj, key, value) {
10
- if (key in obj) {
11
- Object.defineProperty(obj, key, {
12
- value: value,
13
- enumerable: true,
14
- configurable: true,
15
- writable: true
16
- });
17
- } else {
18
- obj[key] = value;
19
- }
20
-
21
- return obj;
22
- }
23
-
24
- function _arrayWithHoles(arr) {
25
- if (Array.isArray(arr)) return arr;
26
- }
27
-
28
- function _iterableToArrayLimit(arr, i) {
29
- if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
30
- var _arr = [];
31
- var _n = true;
32
- var _d = false;
33
- var _e = undefined;
34
-
35
- try {
36
- for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
37
- _arr.push(_s.value);
38
-
39
- if (i && _arr.length === i) break;
40
- }
41
- } catch (err) {
42
- _d = true;
43
- _e = err;
44
- } finally {
45
- try {
46
- if (!_n && _i["return"] != null) _i["return"]();
47
- } finally {
48
- if (_d) throw _e;
49
- }
50
- }
51
-
52
- return _arr;
53
- }
54
-
55
- function _arrayLikeToArray(arr, len) {
56
- if (len == null || len > arr.length) len = arr.length;
57
-
58
- for (var i = 0, arr2 = new Array(len); i < len; i++) {
59
- arr2[i] = arr[i];
60
- }
61
-
62
- return arr2;
63
- }
64
-
65
- function _unsupportedIterableToArray(o, minLen) {
66
- if (!o) return;
67
- if (typeof o === "string") return _arrayLikeToArray(o, minLen);
68
- var n = Object.prototype.toString.call(o).slice(8, -1);
69
- if (n === "Object" && o.constructor) n = o.constructor.name;
70
- if (n === "Map" || n === "Set") return Array.from(n);
71
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
72
- }
73
-
74
- function _nonIterableRest() {
75
- throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
76
- }
77
-
78
- function _slicedToArray(arr, i) {
79
- return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
80
- }
81
-
82
- function ownKeys(object, enumerableOnly) {
83
- var keys = Object.keys(object);
84
-
85
- if (Object.getOwnPropertySymbols) {
86
- var symbols = Object.getOwnPropertySymbols(object);
87
- if (enumerableOnly) symbols = symbols.filter(function (sym) {
88
- return Object.getOwnPropertyDescriptor(object, sym).enumerable;
89
- });
90
- keys.push.apply(keys, symbols);
91
- }
92
-
93
- return keys;
94
- }
95
-
96
- function _objectSpread2(target) {
97
- for (var i = 1; i < arguments.length; i++) {
98
- var source = arguments[i] != null ? arguments[i] : {};
99
-
100
- if (i % 2) {
101
- ownKeys(Object(source), true).forEach(function (key) {
102
- _defineProperty(target, key, source[key]);
103
- });
104
- } else if (Object.getOwnPropertyDescriptors) {
105
- Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
106
- } else {
107
- ownKeys(Object(source)).forEach(function (key) {
108
- Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
109
- });
110
- }
111
- }
112
-
113
- return target;
114
- }
115
-
116
- var PREFIX = 'PAGEFLOW_SCROLLED_COLLECTION';
117
- var RESET = "".concat(PREFIX, "_RESET");
118
- var ADD = "".concat(PREFIX, "_ADD");
119
- var CHANGE = "".concat(PREFIX, "_CHANGE");
120
- var PATCH = "".concat(PREFIX, "_PATCH");
121
- var REMOVE = "".concat(PREFIX, "_REMOVE");
122
- var SORT = "".concat(PREFIX, "_SORT");
123
- function useCollections() {
124
- var seed = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
125
-
126
- var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
127
- keyAttribute = _ref.keyAttribute;
128
-
129
- return useReducer(reducer, Object.keys(seed).reduce(function (result, key) {
130
- result[key] = init(seed[key], keyAttribute);
131
- return result;
132
- }, {}));
133
- }
134
-
135
- function reducer(state, action) {
136
- var collectionName = action.payload.collectionName;
137
- var keyAttribute = action.payload.keyAttribute;
138
-
139
- switch (action.type) {
140
- case RESET:
141
- return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, collectionName, init(action.payload.items, keyAttribute)));
142
-
143
- case ADD:
144
- return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, collectionName, {
145
- order: action.payload.order,
146
- items: _objectSpread2(_objectSpread2({}, state[collectionName].items), {}, _defineProperty({}, action.payload.attributes[keyAttribute], action.payload.attributes))
147
- }));
148
-
149
- case CHANGE:
150
- return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, collectionName, {
151
- order: state[collectionName].order,
152
- items: _objectSpread2(_objectSpread2({}, state[collectionName].items), {}, _defineProperty({}, action.payload.attributes[keyAttribute], action.payload.attributes))
153
- }));
154
-
155
- case PATCH:
156
- var key = action.payload.key;
157
- return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, collectionName, {
158
- order: state[collectionName].order,
159
- items: _objectSpread2(_objectSpread2({}, state[collectionName].items), {}, _defineProperty({}, key, _objectSpread2(_objectSpread2({}, state[collectionName].items[key]), action.payload.attributes)))
160
- }));
161
-
162
- case REMOVE:
163
- var clonedItems = _objectSpread2({}, state[collectionName].items);
164
-
165
- delete clonedItems[action.payload.key];
166
- return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, collectionName, {
167
- order: action.payload.order,
168
- items: clonedItems
169
- }));
170
-
171
- case SORT:
172
- return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, collectionName, {
173
- order: action.payload.order,
174
- items: state[collectionName].items
175
- }));
176
-
177
- default:
178
- return state;
179
- }
180
- }
181
-
182
- function init(items) {
183
- var keyAttribute = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'id';
184
- items = items.filter(function (item) {
185
- return item[keyAttribute];
186
- });
187
- return {
188
- order: items.map(function (item) {
189
- return item[keyAttribute];
190
- }),
191
- items: items.reduce(function (result, item) {
192
- result[item[keyAttribute]] = item;
193
- return result;
194
- }, {})
195
- };
196
- }
197
-
198
- function updateConfiguration(_ref2) {
199
- var dispatch = _ref2.dispatch,
200
- name = _ref2.name,
201
- key = _ref2.key,
202
- configuration = _ref2.configuration;
203
- dispatch({
204
- type: PATCH,
205
- payload: {
206
- collectionName: name,
207
- key: key,
208
- attributes: {
209
- configuration: configuration
210
- }
211
- }
212
- });
213
- }
214
- function getItem(state, collectionName, key) {
215
- if (state[collectionName]) {
216
- return state[collectionName].items[key];
217
- }
218
- }
219
- function createItemsSelector(collectionName, filter) {
220
- if (filter) {
221
- var itemsSelector = createItemsSelector(collectionName);
222
- return createShallowEqualArraysSelector(function (collections) {
223
- return itemsSelector(collections).filter(filter);
224
- }, function (items) {
225
- return items;
226
- });
227
- }
228
-
229
- return createSelector(function (collections) {
230
- return collections[collectionName];
231
- }, function (collection) {
232
- if (collection) {
233
- var items = collection.items;
234
- return collection.order.map(function (key) {
235
- return items[key];
236
- });
237
- } else {
238
- return [];
239
- }
240
- });
241
- }
242
- var createShallowEqualArraysSelector = createSelectorCreator(defaultMemoize, shallowEqualArrays);
243
-
244
- function shallowEqualArrays(a, b) {
245
- return a.length === b.length && a.every(function (item, index) {
246
- return item === b[index];
247
- });
248
- }
249
-
250
- var Context = createContext();
251
- function EntryStateProvider(_ref) {
252
- var seed = _ref.seed,
253
- children = _ref.children;
254
-
255
- var _useCollections = useCollections(seed.collections, {
256
- keyAttribute: 'permaId'
257
- }),
258
- _useCollections2 = _slicedToArray(_useCollections, 2),
259
- collections = _useCollections2[0],
260
- dispatch = _useCollections2[1];
261
-
262
- var value = useMemo(function () {
263
- return {
264
- entryState: {
265
- collections: collections,
266
- config: seed.config
267
- },
268
- dispatch: dispatch
269
- };
270
- }, [collections, dispatch, seed]);
271
- return (
272
- /*#__PURE__*/
273
- React.createElement(Context.Provider, {
274
- value: value
275
- }, children)
276
- );
277
- }
278
-
279
- function useEntryState() {
280
- var selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function (entryState) {
281
- return entryState;
282
- };
283
- return useContextSelector(Context, function (value) {
284
- return selector(value.entryState);
285
- });
286
- }
287
-
288
- function useEntryStateDispatch() {
289
- return useContextSelector(Context, function (value) {
290
- return value.dispatch;
291
- });
292
- }
293
- function useEntryStateConfig() {
294
- return useEntryState(function (entryState) {
295
- return entryState.config;
296
- });
297
- }
298
- function useEntryStateCollectionItem(collectionName, key) {
299
- return useEntryState(function (entryState) {
300
- return getItem(entryState.collections, collectionName, key);
301
- });
302
- }
303
- function useEntryStateCollectionItems(collectionName, filter) {
304
- var itemsSelector = useMemo(function () {
305
- return createItemsSelector(collectionName, filter);
306
- }, [collectionName, filter]);
307
- return useEntryState(function (entryState) {
308
- return itemsSelector(entryState.collections);
309
- });
310
- }
311
-
312
- /**
313
- * Returns a nested data structure representing the metadata of the entry.
314
- *
315
- * @example
316
- *
317
- * const metaData = useEntryMetadata();
318
- * metaData // =>
319
- * {
320
- * id: 5,
321
- * locale: 'en',
322
- * shareProviders: {email: false, facebook: true},
323
- * share_url: 'http://test.host/test',
324
- * credits: 'Credits: Pageflow'
325
- * }
326
- */
327
-
328
- function useEntryMetadata() {
329
- var entries = useEntryStateCollectionItems('entries');
330
- return useMemo(function () {
331
- return entries[0];
332
- }, [entries]);
333
- }
334
-
335
- function _objectWithoutPropertiesLoose(source, excluded) {
336
- if (source == null) return {};
337
- var target = {};
338
- var sourceKeys = Object.keys(source);
339
- var key, i;
340
-
341
- for (i = 0; i < sourceKeys.length; i++) {
342
- key = sourceKeys[i];
343
- if (excluded.indexOf(key) >= 0) continue;
344
- target[key] = source[key];
345
- }
346
-
347
- return target;
348
- }
349
-
350
- function _objectWithoutProperties(source, excluded) {
351
- if (source == null) return {};
352
- var target = _objectWithoutPropertiesLoose(source, excluded);
353
- var key, i;
354
-
355
- if (Object.getOwnPropertySymbols) {
356
- var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
357
-
358
- for (i = 0; i < sourceSymbolKeys.length; i++) {
359
- key = sourceSymbolKeys[i];
360
- if (excluded.indexOf(key) >= 0) continue;
361
- if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
362
- target[key] = source[key];
363
- }
364
- }
365
-
366
- return target;
367
- }
368
-
369
- function _extends() {
370
- _extends = Object.assign || function (target) {
371
- for (var i = 1; i < arguments.length; i++) {
372
- var source = arguments[i];
373
-
374
- for (var key in source) {
375
- if (Object.prototype.hasOwnProperty.call(source, key)) {
376
- target[key] = source[key];
377
- }
378
- }
379
- }
380
-
381
- return target;
382
- };
383
-
384
- return _extends.apply(this, arguments);
385
- }
386
- var EmailIcon = (function (_ref) {
387
- var _ref$styles = _ref.styles,
388
- props = _objectWithoutProperties(_ref, ["styles"]);
389
-
390
- return React.createElement("svg", _extends({
391
- xmlns: "http://www.w3.org/2000/svg",
392
- viewBox: "0 0 612 612"
393
- }, props), React.createElement("path", {
394
- 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"
395
- }));
396
- });
397
-
398
- function _extends$1() {
399
- _extends$1 = Object.assign || function (target) {
400
- for (var i = 1; i < arguments.length; i++) {
401
- var source = arguments[i];
402
-
403
- for (var key in source) {
404
- if (Object.prototype.hasOwnProperty.call(source, key)) {
405
- target[key] = source[key];
406
- }
407
- }
408
- }
409
-
410
- return target;
411
- };
412
-
413
- return _extends$1.apply(this, arguments);
414
- }
415
- var FacebookIcon = (function (_ref) {
416
- var _ref$styles = _ref.styles,
417
- props = _objectWithoutProperties(_ref, ["styles"]);
418
-
419
- return React.createElement("svg", _extends$1({
420
- xmlns: "http://www.w3.org/2000/svg",
421
- viewBox: "0 0 430.113 430.114"
422
- }, props), React.createElement("path", {
423
- 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"
424
- }));
425
- });
426
-
427
- function _extends$2() {
428
- _extends$2 = Object.assign || function (target) {
429
- for (var i = 1; i < arguments.length; i++) {
430
- var source = arguments[i];
431
-
432
- for (var key in source) {
433
- if (Object.prototype.hasOwnProperty.call(source, key)) {
434
- target[key] = source[key];
435
- }
436
- }
437
- }
438
-
439
- return target;
440
- };
441
-
442
- return _extends$2.apply(this, arguments);
443
- }
444
- var LinkedInIcon = (function (_ref) {
445
- var _ref$styles = _ref.styles,
446
- props = _objectWithoutProperties(_ref, ["styles"]);
447
-
448
- return React.createElement("svg", _extends$2({
449
- xmlns: "http://www.w3.org/2000/svg",
450
- viewBox: "0 0 430.117 430.117"
451
- }, props), React.createElement("path", {
452
- 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"
453
- }));
454
- });
455
-
456
- function _extends$3() {
457
- _extends$3 = Object.assign || function (target) {
458
- for (var i = 1; i < arguments.length; i++) {
459
- var source = arguments[i];
460
-
461
- for (var key in source) {
462
- if (Object.prototype.hasOwnProperty.call(source, key)) {
463
- target[key] = source[key];
464
- }
465
- }
466
- }
467
-
468
- return target;
469
- };
470
-
471
- return _extends$3.apply(this, arguments);
472
- }
473
- var TelegramIcon = (function (_ref) {
474
- var _ref$styles = _ref.styles,
475
- props = _objectWithoutProperties(_ref, ["styles"]);
476
-
477
- return React.createElement("svg", _extends$3({
478
- xmlns: "http://www.w3.org/2000/svg",
479
- viewBox: "0 0 512.004 512.004"
480
- }, props), React.createElement("path", {
481
- 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"
482
- }));
483
- });
484
-
485
- function _extends$4() {
486
- _extends$4 = Object.assign || function (target) {
487
- for (var i = 1; i < arguments.length; i++) {
488
- var source = arguments[i];
489
-
490
- for (var key in source) {
491
- if (Object.prototype.hasOwnProperty.call(source, key)) {
492
- target[key] = source[key];
493
- }
494
- }
495
- }
496
-
497
- return target;
498
- };
499
-
500
- return _extends$4.apply(this, arguments);
501
- }
502
- var TwitterIcon = (function (_ref) {
503
- var _ref$styles = _ref.styles,
504
- props = _objectWithoutProperties(_ref, ["styles"]);
505
-
506
- return React.createElement("svg", _extends$4({
507
- xmlns: "http://www.w3.org/2000/svg",
508
- viewBox: "0 0 612 612"
509
- }, props), React.createElement("path", {
510
- 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"
511
- }));
512
- });
513
-
514
- function _extends$5() {
515
- _extends$5 = Object.assign || function (target) {
516
- for (var i = 1; i < arguments.length; i++) {
517
- var source = arguments[i];
518
-
519
- for (var key in source) {
520
- if (Object.prototype.hasOwnProperty.call(source, key)) {
521
- target[key] = source[key];
522
- }
523
- }
524
- }
525
-
526
- return target;
527
- };
528
-
529
- return _extends$5.apply(this, arguments);
530
- }
531
- var WhatsAppIcon = (function (_ref) {
532
- var _ref$styles = _ref.styles,
533
- props = _objectWithoutProperties(_ref, ["styles"]);
534
-
535
- return React.createElement("svg", _extends$5({
536
- xmlns: "http://www.w3.org/2000/svg",
537
- viewBox: "0 0 90 90"
538
- }, props), React.createElement("path", {
539
- 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"
540
- }));
541
- });
542
-
543
- /**
544
- * Returns a list of attributes (icon, name and url) of all configured share providers of the entry.
545
- * The url provides a %{url} placeholder where the link can be inserted.
546
- *
547
- * @example
548
- *
549
- * const shareProviders = useShareProviders(options);
550
- * shareProviders // =>
551
- * [
552
- * {
553
- * icon: <FacebookSVGIcon />,
554
- * name: 'Facebook',
555
- * url: http://www.facebook.com/sharer/sharer.php?u=%{url}
556
- * },
557
- * {
558
- * icon: <TwitterSVGIcon />,
559
- * name: 'Twitter',
560
- * url: https://twitter.com/intent/tweet?url=%{url}
561
- * }
562
- * ]
563
- */
564
-
565
- function useShareProviders(_ref) {
566
- var isPhonePlatform = _ref.isPhonePlatform;
567
- var config = useEntryStateConfig();
568
- var entryMetadata = useEntryMetadata();
569
- var shareProviders = entryMetadata ? entryMetadata.shareProviders : {};
570
- var urlTemplates = config.shareUrlTemplates;
571
- var sharing = {
572
- email: {
573
- icon: EmailIcon,
574
- name: 'Mail',
575
- url: urlTemplates.email
576
- },
577
- facebook: {
578
- icon: FacebookIcon,
579
- name: 'Facebook',
580
- url: urlTemplates.facebook
581
- },
582
- linked_in: {
583
- icon: LinkedInIcon,
584
- name: 'LinkedIn',
585
- url: urlTemplates.linked_in
586
- },
587
- telegram: {
588
- icon: TelegramIcon,
589
- name: 'Telegram',
590
- url: urlTemplates.telegram
591
- },
592
- twitter: {
593
- icon: TwitterIcon,
594
- name: 'Twitter',
595
- url: urlTemplates.twitter
596
- },
597
- whats_app: {
598
- icon: WhatsAppIcon,
599
- name: 'WhatsApp',
600
- url: urlTemplates.whats_app
601
- }
602
- };
603
- return useMemo(function () {
604
- return activeShareProviders(shareProviders, isPhonePlatform).map(function (provider) {
605
- var config = sharing[provider];
606
- return {
607
- name: config.name,
608
- icon: config.icon,
609
- url: config.url
610
- };
611
- });
612
- }, [shareProviders, isPhonePlatform]);
613
- }
614
-
615
- function activeShareProviders(shareProvidersConfig, isPhonePlatform) {
616
- var providers = filterShareProviders(shareProvidersConfig, isPhonePlatform);
617
- return providers.filter(function (provider) {
618
- return shareProvidersConfig[provider] !== false;
619
- });
620
- }
621
-
622
- function filterShareProviders(shareProvidersConfig, isPhonePlatform) {
623
- if (!isPhonePlatform) {
624
- return Object.keys(shareProvidersConfig).filter(function (provider) {
625
- return provider !== 'telegram' && provider !== 'whats_app';
626
- });
627
- }
628
-
629
- return Object.keys(shareProvidersConfig);
630
- }
631
- /**
632
- * Returns the share url of the entry.
633
- *
634
- * @example
635
- *
636
- * const shareUrl = useShareUrl();
637
- * shareUrl // => "http://test.host/test"
638
- */
639
-
640
-
641
- function useShareUrl() {
642
- var entryMetadata = useEntryMetadata();
643
- var config = useEntryStateConfig();
644
-
645
- if (entryMetadata) {
646
- return entryMetadata.shareUrl ? entryMetadata.shareUrl : config.prettyUrl;
647
- } else {
648
- return config.shareUrl;
649
- }
650
- }
651
-
652
- /**
653
- * Returns a nested data structure representing the chapters, sections
654
- * and content elements of the entry.
655
- *
656
- * @private
657
- *
658
- * @example
659
- *
660
- * const structure = useEntryStructure();
661
- * structure // =>
662
- * [
663
- * {
664
- * permaId: 5,
665
- * title: 'Chapter 1',
666
- * summary: 'An introductory chapter',
667
- * sections: [
668
- * {
669
- * id: 1,
670
- * permaId: 101,
671
- * chapterId: 3,
672
- * sectionIndex: 0,
673
- * transition: 'scroll',
674
- *
675
- * // references to adjacent section objects
676
- * previousSection: { ... },
677
- * nextSection: { ... },
678
- * }
679
- * ],
680
- * }
681
- * ]
682
- */
683
-
684
- function useEntryStructure() {
685
- var chapters = useChapters();
686
- var sections = useEntryStateCollectionItems('sections');
687
- return useMemo(function () {
688
- var linkedSections = sections.map(function (section) {
689
- return sectionData(section);
690
- });
691
- linkedSections.forEach(function (section, index) {
692
- section.sectionIndex = index;
693
- section.previousSection = linkedSections[index - 1];
694
- section.nextSection = linkedSections[index + 1];
695
- });
696
- return chapters.map(function (chapter) {
697
- return _objectSpread2(_objectSpread2({}, chapter), {}, {
698
- sections: linkedSections.filter(function (item) {
699
- return item.chapterId === chapter.id;
700
- })
701
- });
702
- });
703
- }, [chapters, sections]);
704
- }
705
- /**
706
- * Returns a nested data structure representing the content elements
707
- * of section.
708
- *
709
- * @param {Object} options
710
- * @param {number} options.sectionPermaId
711
- *
712
- * @private
713
- *
714
- * @example
715
- *
716
- * const section = useSection({sectionPermaId: 4});
717
- * section // =>
718
- * {
719
- * id: 100,
720
- * permaId: 4,
721
- * chapterId: 1,
722
- * transition: 'scroll'
723
- * }
724
- */
725
-
726
- function useSection(_ref) {
727
- var sectionPermaId = _ref.sectionPermaId;
728
- var section = useEntryStateCollectionItem('sections', sectionPermaId);
729
- return sectionData(section);
730
- }
731
-
732
- function sectionData(section) {
733
- return section && _objectSpread2({
734
- permaId: section.permaId,
735
- id: section.id,
736
- chapterId: section.chapterId
737
- }, section.configuration);
738
- }
739
-
740
- function useSectionContentElements(_ref2) {
741
- var sectionId = _ref2.sectionId;
742
- var filterBySectionId = useCallback(function (contentElement) {
743
- return contentElement.sectionId === sectionId;
744
- }, [sectionId]);
745
- var contentElements = useEntryStateCollectionItems('contentElements', filterBySectionId);
746
- return contentElements.map(function (item) {
747
- return {
748
- id: item.id,
749
- permaId: item.permaId,
750
- type: item.typeName,
751
- position: item.configuration.position,
752
- props: item.configuration
753
- };
754
- });
755
- }
756
- function useChapters() {
757
- var chapters = useEntryStateCollectionItems('chapters');
758
- var chapterSlugs = {};
759
- return chapters.map(function (chapter) {
760
- var chapterSlug = chapter.configuration.title;
761
-
762
- if (chapterSlug) {
763
- chapterSlug = slugify(chapterSlug, {
764
- lower: true,
765
- locale: 'de',
766
- strict: true
767
- });
768
-
769
- if (chapterSlugs[chapterSlug]) {
770
- chapterSlug = chapterSlug + '-' + chapter.permaId; //append permaId if chapter reference is not unique
771
- }
772
-
773
- chapterSlugs[chapterSlug] = chapter;
774
- } else {
775
- chapterSlug = 'chapter-' + chapter.permaId;
776
- }
777
-
778
- return {
779
- id: chapter.id,
780
- permaId: chapter.permaId,
781
- title: chapter.configuration.title,
782
- summary: chapter.configuration.summary,
783
- chapterSlug: chapterSlug
784
- };
785
- });
786
- }
787
-
788
- function extendFile(collectionName, file, config) {
789
- return addModelType(collectionName, expandUrls(collectionName, file, config.fileUrlTemplates), config.fileModelTypes);
790
- }
791
-
792
- function addModelType(collectionName, file, modelTypes) {
793
- if (!file) {
794
- return null;
795
- }
796
-
797
- if (!modelTypes[collectionName]) {
798
- throw new Error("Could not find model type for collection name ".concat(collectionName));
799
- }
800
-
801
- return _objectSpread2(_objectSpread2({}, file), {}, {
802
- modelType: modelTypes[collectionName]
803
- });
804
- }
805
-
806
- function expandUrls(collectionName, file, urlTemplates) {
807
- if (!file) {
808
- return null;
809
- }
810
-
811
- if (!urlTemplates[collectionName]) {
812
- throw new Error("No file url templates found for ".concat(collectionName));
813
- }
814
-
815
- var variants = file.variants || Object.keys(urlTemplates[collectionName]);
816
- var urls = variants.reduce(function (result, variant) {
817
- var url = getFileUrl(collectionName, file, variant, urlTemplates);
818
-
819
- if (url) {
820
- result[variant] = url;
821
- }
822
-
823
- return result;
824
- }, {});
825
- return _objectSpread2({
826
- urls: urls
827
- }, file);
828
- }
829
-
830
- function getFileUrl(collectionName, file, quality, urlTemplates) {
831
- var templates = urlTemplates[collectionName];
832
- var template = templates[quality];
833
-
834
- if (template) {
835
- return template.replace(':id_partition', idPartition(file.id)).replace(':basename', file.basename);
836
- }
837
- }
838
-
839
- function idPartition(id) {
840
- return partition(pad(id, 9));
841
- }
842
-
843
- function partition(string, separator) {
844
- return string.replace(/./g, function (c, i, a) {
845
- return i && (a.length - i) % 3 === 0 ? '/' + c : c;
846
- });
847
- }
848
-
849
- function pad(string, size) {
850
- return (Array(size).fill(0).join('') + string).slice(-size);
851
- }
852
-
853
- /**
854
- * Look up a file by its collection and perma id.
855
- *
856
- * @param {Object} options
857
- * @param {String} options.collectionName - Collection name of file type to look for (in camel case).
858
- * @param {String} options.permaId - Perma id of file look up
859
- *
860
- * @example
861
- * const imageFile = useFile({collectionName: 'imageFiles', permaId: 5});
862
- * imageFile // =>
863
- * {
864
- * id: 102,
865
- * permaId: 5,
866
- * width: 1000,
867
- * height: 500,
868
- * urls: {
869
- * large: 'https://...'
870
- * },
871
- * configuration: {
872
- * alt: '...'
873
- * }
874
- * }
875
- */
876
-
877
- function useFile(_ref) {
878
- var collectionName = _ref.collectionName,
879
- permaId = _ref.permaId;
880
- var file = useEntryStateCollectionItem(collectionName, permaId);
881
- return extendFile(collectionName, file, useEntryStateConfig());
882
- }
883
-
884
- function useNestedFiles(_ref) {
885
- var collectionName = _ref.collectionName,
886
- parent = _ref.parent;
887
- var config = useEntryStateConfig();
888
- var files = useEntryStateCollectionItems(collectionName, function (file) {
889
- return parent && file.parentFileId === parent.id && file.parentFileModelType === parent.modelType;
890
- });
891
- return files.map(function (file) {
892
- return extendFile(collectionName, file, config);
893
- });
894
- }
895
-
896
- /**
897
- * Returns a string (comma-separated list) of copyrights of
898
- * all images used in the entry.
899
- * If none of the images has a rights attribute configured,
900
- * it falls back to the default file rights of the entry's account,
901
- * otherwise returns an empty string
902
- *
903
- * @example
904
- *
905
- * const fileRights = useFileRights();
906
- * fileRights // => "author of image 1, author of image 2"
907
- */
908
-
909
- function useFileRights() {
910
- var config = useEntryStateConfig();
911
- var imageFiles = useEntryStateCollectionItems('imageFiles');
912
- var defaultFileRights = config.defaultFileRights;
913
- var imageFileRights = imageFiles.reduce(function (result, imageConfig) {
914
- if (imageConfig && imageConfig.rights) {
915
- result.push(imageConfig.rights.trim());
916
- }
917
-
918
- return result;
919
- }, []).filter(Boolean).join(', ');
920
- var fileRights = !!imageFileRights ? imageFileRights : defaultFileRights.trim();
921
- var fileRightsString = !!fileRights ? 'Bildrechte: ' + fileRights : '';
922
- return fileRightsString;
923
- }
924
- /**
925
- * Returns a nested data structure representing the legal info of the entry.
926
- * Each legal info is separated into label and url to use in links.
927
- * Both label and url can be blank, depending on the configuration.
928
- *
929
- * @example
930
- *
931
- * const legalInfo = useLegalInfo();
932
- * legalInfo // =>
933
- * {
934
- * imprint: {
935
- * label: '',
936
- * url: ''
937
- * },
938
- * copyright: {
939
- * label: '',
940
- * url: ''
941
- * },
942
- * privacy: {
943
- * label: '',
944
- * url: ''
945
- * }
946
- * }
947
- */
948
-
949
- function useLegalInfo() {
950
- var config = useEntryStateConfig();
951
- return config.legalInfo;
952
- }
953
- /**
954
- * Returns the credits string (rich text) of the entry.
955
- *
956
- * @example
957
- *
958
- * const credits = useCredits();
959
- * credits // => "Credits: <a href="http://pageflow.com">pageflow.com</a>"
960
- */
961
-
962
- function useCredits() {
963
- var entryMetadata = useEntryMetadata();
964
- var credits = '';
965
-
966
- if (entryMetadata) {
967
- credits = entryMetadata.credits;
968
- }
969
-
970
- return credits;
971
- }
972
-
973
- function _arrayWithoutHoles(arr) {
974
- if (Array.isArray(arr)) return _arrayLikeToArray(arr);
975
- }
976
-
977
- function _iterableToArray(iter) {
978
- if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
979
- }
980
-
981
- function _nonIterableSpread() {
982
- throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
983
- }
984
-
985
- function _toConsumableArray(arr) {
986
- return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
987
- }
988
-
989
- var qualities = ['medium', 'fullhd', '4k'];
990
- function useAvailableQualities(file) {
991
- if (!file) {
992
- return [];
993
- }
994
-
995
- return ['auto'].concat(_toConsumableArray(qualities.filter(function (name) {
996
- return file.variants.includes(name);
997
- })));
998
- }
999
-
1000
- /**
1001
- * Returns an object containing theme asset paths.
1002
- *
1003
- * @example
1004
- *
1005
- * const theme = useTheme();
1006
- * theme // =>
1007
- * {
1008
- * assets: {
1009
- * logoDesktop: 'path/to/logoDesktop.svg',
1010
- * logoMobile: 'path/to/logoMobile.svg'
1011
- * },
1012
- * options: {
1013
- * // options passed to `themes.register` in `pageflow.rb` initializer
1014
- * // with camleized keys.
1015
- * }
1016
- * }
1017
- */
1018
-
1019
- function useTheme() {
1020
- var config = useEntryStateConfig();
1021
- return config.theme;
1022
- }
1023
-
1024
- function updateContentElementConfiguration(_ref) {
1025
- var dispatch = _ref.dispatch,
1026
- permaId = _ref.permaId,
1027
- configuration = _ref.configuration;
1028
- updateConfiguration({
1029
- dispatch: dispatch,
1030
- name: 'contentElements',
1031
- key: permaId,
1032
- configuration: configuration
1033
- });
1034
- }
1035
-
1036
- var LocaleContext = createContext$1('en');
1037
- function setupI18n(_ref) {
1038
- var defaultLocale = _ref.defaultLocale,
1039
- locale = _ref.locale,
1040
- translations = _ref.translations;
1041
- I18n.defaultLocale = defaultLocale;
1042
- I18n.locale = locale;
1043
- I18n.translations = translations;
1044
- }
1045
- function LocaleProvider(_ref2) {
1046
- var children = _ref2.children;
1047
-
1048
- var _ref3 = useEntryMetadata() || {},
1049
- locale = _ref3.locale;
1050
-
1051
- return (
1052
- /*#__PURE__*/
1053
- React.createElement(LocaleContext.Provider, {
1054
- value: locale
1055
- }, children)
1056
- );
1057
- }
1058
- function useLocale() {
1059
- return useContext(LocaleContext);
1060
- }
1061
- /**
1062
- * Use translations in frontend elements. Uses the configured locale
1063
- * of the current entry by default. Note that only translation keys
1064
- * from the `pageflow_scrolled.public` scope are universally
1065
- * available.
1066
- *
1067
- * to render translations for inline editing controls in the editor
1068
- * preview, you can pass `"ui"` as `locale` option and use
1069
- * translations from the `pageflow_scrolled.inline_editing` scope.
1070
- *
1071
- * @param {Object} [options]
1072
- * @param {string} [locale="entry"] -
1073
- * Pass `"ui"` to use the locale of the editor interface instead.
1074
- *
1075
- * @example
1076
- * const {t} = useI18n();
1077
- * t('pageflow_scrolled.public.some.key')
1078
- *
1079
- * const {t} = useI18n({locale: 'ui'});
1080
- * t('pageflow_scrolled.inline_editing.some.key')
1081
- */
1082
-
1083
- function useI18n() {
1084
- var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
1085
- scope = _ref4.locale;
1086
-
1087
- var locale = useLocale();
1088
- return {
1089
- t: function t(key, options) {
1090
- return I18n.t(key, _objectSpread2(_objectSpread2({}, options), {}, {
1091
- locale: scope !== 'ui' && locale
1092
- }));
1093
- }
1094
- };
1095
- }
1096
-
1097
- var PhonePlatformContext = React.createContext(false);
1098
-
1099
- function useOnScreen(ref) {
1100
- var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
1101
- rootMargin = _ref.rootMargin,
1102
- onIntersecting = _ref.onIntersecting,
1103
- skipIframeFix = _ref.skipIframeFix;
1104
-
1105
- var _useState = useState(false),
1106
- _useState2 = _slicedToArray(_useState, 2),
1107
- isIntersecting = _useState2[0],
1108
- setIntersecting = _useState2[1];
1109
-
1110
- useEffect(function () {
1111
- var current = ref.current;
1112
- var observer = createIntersectionObserver(function (entries) {
1113
- // Even when observing only a single element, multiple entries
1114
- // may have queued up. In Chrome this can be observed when
1115
- // moving an observed element in the DOM: The callback is
1116
- // invoked once with two entries for the same target, one
1117
- // claiming the element no longer intersects and one - with a
1118
- // later timestamp - saying that is does intersect. Assuming
1119
- // entries are ordered according to time, we only consider the
1120
- // last entry.
1121
- var entry = entries[entries.length - 1];
1122
- setIntersecting(entry.isIntersecting);
1123
-
1124
- if (entry.isIntersecting && onIntersecting) {
1125
- onIntersecting();
1126
- }
1127
- }, {
1128
- rootMargin: rootMargin
1129
- }, skipIframeFix);
1130
-
1131
- if (ref.current) {
1132
- observer.observe(current);
1133
- }
1134
-
1135
- return function () {
1136
- observer.unobserve(current);
1137
- };
1138
- }, [ref, rootMargin, onIntersecting, skipIframeFix]);
1139
- return isIntersecting;
1140
- }
1141
-
1142
- function createIntersectionObserver(callback, options, skipIframeFix) {
1143
- if (skipIframeFix) {
1144
- return new IntersectionObserver(callback, options);
1145
- } // Positive root margins are ignored in iframes [1] (i.e. in
1146
- // the Pageflow editor). To make it work, the iframe document
1147
- // needs to be passed as `root` [2].
1148
- // This leads to a `TypeError`, though, in browers that do not
1149
- // support this yet (e.g. Chrome 80). We catch the error and
1150
- // skip passing the `root` option.
1151
- //
1152
- // [1] https://github.com/w3c/IntersectionObserver/issues/283
1153
- // [2] https://github.com/w3c/IntersectionObserver/issues/372
1154
-
1155
-
1156
- try {
1157
- var optionsWithIframeFix = options;
1158
-
1159
- if (options.rootMargin && window.parent !== window) {
1160
- optionsWithIframeFix = _objectSpread2(_objectSpread2({}, options), {}, {
1161
- root: window.document
1162
- });
1163
- }
1164
-
1165
- return new IntersectionObserver(callback, optionsWithIframeFix);
1166
- } catch (e) {
1167
- // Normally we would check for TypeError here. Since the polyfill
1168
- // throws a generic error, we retry either way and trust that the
1169
- // error will happen again if it is not related to the `root`
1170
- // option.
1171
- return createIntersectionObserver(callback, options, true);
1172
- }
1173
- }
1174
-
1175
- var styles = {"wrapper":"useScrollPositionLifecycle-module_wrapper__1a6Kr","isActiveProbe":"useScrollPositionLifecycle-module_isActiveProbe__3VKB5"};
1176
-
1177
- var StaticPreviewContext = createContext$1(false);
1178
- function StaticPreview(_ref) {
1179
- var children = _ref.children;
1180
- return (
1181
- /*#__PURE__*/
1182
- React.createElement(StaticPreviewContext.Provider, {
1183
- value: true
1184
- }, children)
1185
- );
1186
- }
1187
- /**
1188
- * Use inside a content element component to determine whether the
1189
- * component is being rendered in a static preview, e.g. editor
1190
- * thumbnails.
1191
- *
1192
- * @example
1193
- * const isStaticPreview = useIsStaticPreview();
1194
- */
1195
-
1196
- function useIsStaticPreview() {
1197
- return useContext(StaticPreviewContext);
1198
- }
1199
- function createScrollPositionLifecycleProvider(Context) {
1200
- return function ScrollPositionLifecycleProvider(_ref2) {
1201
- var children = _ref2.children,
1202
- onActivate = _ref2.onActivate;
1203
- var ref = useRef();
1204
- var isActiveProbeRef = useRef();
1205
- var isStaticPreview = useContext(StaticPreviewContext);
1206
- var shouldLoad = useOnScreen(ref, {
1207
- rootMargin: '200% 0px 200% 0px'
1208
- });
1209
- var shouldPrepare = useOnScreen(ref, {
1210
- rootMargin: '25% 0px 25% 0px'
1211
- }) && !isStaticPreview;
1212
- var isVisible = useOnScreen(ref) && !isStaticPreview;
1213
- var isActive = useOnScreen(isActiveProbeRef, {
1214
- rootMargin: '-50% 0px -50% 0px',
1215
- onIntersecting: onActivate
1216
- }) && !isStaticPreview;
1217
- var value = useMemo(function () {
1218
- return {
1219
- shouldLoad: shouldLoad,
1220
- shouldPrepare: shouldPrepare,
1221
- isVisible: isVisible,
1222
- isActive: isActive
1223
- };
1224
- }, [shouldLoad, shouldPrepare, isVisible, isActive]);
1225
- return (
1226
- /*#__PURE__*/
1227
- React.createElement("div", {
1228
- ref: ref,
1229
- className: classNames(styles.wrapper)
1230
- },
1231
- /*#__PURE__*/
1232
- React.createElement("div", {
1233
- ref: isActiveProbeRef,
1234
- className: styles.isActiveProbe
1235
- }),
1236
- /*#__PURE__*/
1237
- React.createElement(Context.Provider, {
1238
- value: value
1239
- }, children))
1240
- );
1241
- };
1242
- }
1243
- function createScrollPositionLifecycleHook(Context) {
1244
- return function useScrollPositionLifecycle() {
1245
- var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
1246
- onActivate = _ref3.onActivate,
1247
- onDeactivate = _ref3.onDeactivate,
1248
- onVisible = _ref3.onVisible,
1249
- onInvisible = _ref3.onInvisible;
1250
-
1251
- var result = useContext(Context);
1252
- var wasActive = useRef();
1253
- var wasVisible = useRef();
1254
-
1255
- var _ref4 = result || {},
1256
- isActive = _ref4.isActive,
1257
- isVisible = _ref4.isVisible;
1258
-
1259
- useEffect(function () {
1260
- if (!wasVisible.current && isVisible && onVisible) {
1261
- onVisible();
1262
- }
1263
-
1264
- if (!wasActive.current && isActive && onActivate) {
1265
- onActivate();
1266
- } else if (wasActive.current && !isActive && onDeactivate) {
1267
- onDeactivate();
1268
- }
1269
-
1270
- if (wasVisible.current && !isVisible && onInvisible) {
1271
- onInvisible();
1272
- }
1273
-
1274
- wasActive.current = isActive;
1275
- wasVisible.current = isVisible;
1276
- });
1277
- return result;
1278
- };
1279
- }
1280
-
1281
- var styles$1 = {"root":"MotifArea-module_root__1_ACd","visible":"MotifArea-module_visible__18Kln"};
1282
-
1283
- var VisibilityContext = React.createContext(false);
1284
- function MotifAreaVisibilityProvider(_ref) {
1285
- var visible = _ref.visible,
1286
- children = _ref.children;
1287
- return (
1288
- /*#__PURE__*/
1289
- React.createElement(VisibilityContext.Provider, {
1290
- value: visible
1291
- }, children)
1292
- );
1293
- }
1294
- var MotifArea = function MotifArea(props) {
1295
- var _props$file;
1296
-
1297
- var lastPosition = useRef();
1298
- var position = ((_props$file = props.file) === null || _props$file === void 0 ? void 0 : _props$file.isReady) && getPosition(props);
1299
- var visible = useContext(VisibilityContext);
1300
- var elementRef = useRef();
1301
- var onUpdate = props.onUpdate;
1302
- var setElementRef = useCallback(function (element) {
1303
- elementRef.current = element;
1304
- onUpdate(element);
1305
- }, [elementRef, onUpdate]);
1306
- useEffect(function () {
1307
- if (lastPosition.current && position && (lastPosition.current.top !== position.top || lastPosition.current.left !== position.left || lastPosition.current.width !== position.width || lastPosition.current.height !== position.height)) {
1308
- onUpdate(elementRef.current);
1309
- }
1310
-
1311
- lastPosition.current = position;
1312
- });
1313
-
1314
- if (!position) {
1315
- return null;
1316
- }
1317
-
1318
- return (
1319
- /*#__PURE__*/
1320
- React.createElement("div", {
1321
- ref: setElementRef,
1322
- className: classNames(styles$1.root, _defineProperty({}, styles$1.visible, visible)),
1323
- style: position,
1324
- onMouseEnter: props.onMouseEnter,
1325
- onMouseLeave: props.onMouseLeave
1326
- })
1327
- );
1328
- };
1329
- MotifArea.defaultProps = {
1330
- onUpdate: function onUpdate() {}
1331
- };
1332
-
1333
- function getPosition(props) {
1334
- return props.file.motifAreaOffsetRect || {
1335
- top: 0,
1336
- left: 0,
1337
- width: 0,
1338
- height: 0
1339
- };
1340
- }
1341
-
1342
- function useMediaQuery(query) {
1343
- var _useState = useState(false),
1344
- _useState2 = _slicedToArray(_useState, 2),
1345
- doesMatch = _useState2[0],
1346
- onSetDoesMatch = _useState2[1];
1347
-
1348
- useEffect(function () {
1349
- var onUpdateMatch = function onUpdateMatch(_ref) {
1350
- var matches = _ref.matches;
1351
- onSetDoesMatch(matches);
1352
- };
1353
-
1354
- var matcher = window.matchMedia(query);
1355
- var isModern = 'addEventListener' in matcher;
1356
-
1357
- if (isModern) {
1358
- matcher.addEventListener('change', onUpdateMatch);
1359
- } else {
1360
- matcher.addListener(onUpdateMatch);
1361
- }
1362
-
1363
- onUpdateMatch(matcher);
1364
- return function () {
1365
- if (isModern) {
1366
- matcher.removeEventListener('change', onUpdateMatch);
1367
- } else {
1368
- matcher.removeListener(onUpdateMatch);
1369
- }
1370
- };
1371
- }, [query, onSetDoesMatch]);
1372
- return doesMatch;
1373
- }
1374
-
1375
- var styles$2 = {"Foreground":"Foreground-module_Foreground__13ODU","fullFadeHeight":"Foreground-module_fullFadeHeight__2p9dx","fullHeight":"Foreground-module_fullHeight__1vMXb","inFirstSection":"Foreground-module_inFirstSection__1r-_i","paddingBottom":"Foreground-module_paddingBottom__3OtY4"};
1376
-
1377
- var ForcePaddingContext = createContext$1(false);
1378
- function Foreground(props) {
1379
- var forcePadding = useContext(ForcePaddingContext);
1380
- return (
1381
- /*#__PURE__*/
1382
- React.createElement("div", {
1383
- className: className(props, forcePadding),
1384
- style: {
1385
- minHeight: props.minHeight
1386
- }
1387
- }, props.children)
1388
- );
1389
- }
1390
-
1391
- function className(props, forcePadding) {
1392
- return classNames(styles$2.Foreground, props.transitionStyles.foreground, props.transitionStyles["foreground-".concat(props.state)], _defineProperty({}, styles$2.paddingBottom, props.paddingBottom || forcePadding), _defineProperty({}, styles$2.inFirstSection, props.inFirstSection), styles$2["".concat(props.heightMode, "Height")]);
1393
- }
1394
-
1395
- /**
1396
- * Register new types of content elements.
1397
- * @name frontend_contentElementTypes
1398
- */
1399
- var ContentElementTypeRegistry =
1400
- /*#__PURE__*/
1401
- function () {
1402
- function ContentElementTypeRegistry() {
1403
- _classCallCheck(this, ContentElementTypeRegistry);
1404
-
1405
- this.types = {};
1406
- }
1407
- /**
1408
- * Register a new type of content element.
1409
- *
1410
- * @param {string} typeName - Name of the content element type.
1411
- * @param {Object} options
1412
- * @param {React.Component} options.component
1413
- * @param {boolean} [options.supportsWrappingAroundFloats] -
1414
- * In sections with centered layout, content elements can be
1415
- * floated to the left or right. By default all content
1416
- * elements are cleared to position them below floating
1417
- * elements. If a content element renders mainly text that
1418
- * can wrap around floating elements, clearing can be
1419
- * disabled via this option.
1420
- * @memberof frontend_contentElementTypes
1421
- *
1422
- * @example
1423
- *
1424
- * // frontend.js
1425
- *
1426
- * import {frontend} from 'pageflow-scrolled/frontend';
1427
- * import {InlineImage} from './InlineImage';
1428
- *
1429
- * frontend.contentElementTypes.register('inlineImage', {
1430
- * component: InlineImage
1431
- * });
1432
- */
1433
-
1434
-
1435
- _createClass(ContentElementTypeRegistry, [{
1436
- key: "register",
1437
- value: function register(typeName, options) {
1438
- this.types[typeName] = options;
1439
- }
1440
- }, {
1441
- key: "getComponent",
1442
- value: function getComponent(typeName) {
1443
- return this.types[typeName] && this.types[typeName].component;
1444
- }
1445
- }, {
1446
- key: "getOptions",
1447
- value: function getOptions(typeName) {
1448
- return this.types[typeName];
1449
- }
1450
- }]);
1451
-
1452
- return ContentElementTypeRegistry;
1453
- }();
1454
-
1455
- var api = {
1456
- contentElementTypes: new ContentElementTypeRegistry()
1457
- };
1458
-
1459
- // For reasons that are beyond me, Storybook's Webpack build fails
1460
- // with a "JavaScript heap out of memory" error if this import
1461
- // expression lives in inlineEditing/index.js directly. I originally
1462
- // intended to hide the import from Webpack by using
1463
- // file-replace-loader in Storybook's Webpack config to replace this
1464
- // file with an empty one, but found out that extracting the import
1465
- // to a separate file apparently is enough.
1466
- function importComponents() {
1467
- return import('./components-3ead1b4a.js');
1468
- }
1469
-
1470
- var components = {};
1471
- function loadInlineEditingComponents() {
1472
- return importComponents().then(function (importedComponents) {
1473
- components = importedComponents;
1474
- });
1475
- }
1476
- function withInlineEditingDecorator(name, Component) {
1477
- return function InlineEditingDecorator(props) {
1478
- var Decorator = components[name];
1479
-
1480
- if (Decorator) {
1481
- return (
1482
- /*#__PURE__*/
1483
- React.createElement(Decorator, props,
1484
- /*#__PURE__*/
1485
- React.createElement(Component, props))
1486
- );
1487
- } else {
1488
- return (
1489
- /*#__PURE__*/
1490
- React.createElement(Component, props)
1491
- );
1492
- }
1493
- };
1494
- }
1495
- function withInlineEditingAlternative(name, Component) {
1496
- return function InlineEditingDecorator(props) {
1497
- var Alternative = components[name];
1498
-
1499
- if (Alternative) {
1500
- return (
1501
- /*#__PURE__*/
1502
- React.createElement(Alternative, props)
1503
- );
1504
- } else {
1505
- return (
1506
- /*#__PURE__*/
1507
- React.createElement(Component, props)
1508
- );
1509
- }
1510
- };
1511
- }
1512
-
1513
- var ContentElementAttributesContext = createContext$1({});
1514
- function ContentElementAttributesProvider(_ref) {
1515
- var id = _ref.id,
1516
- children = _ref.children;
1517
- var attributes = useMemo(function () {
1518
- return {
1519
- contentElementId: id
1520
- };
1521
- }, [id]);
1522
- return (
1523
- /*#__PURE__*/
1524
- React.createElement(ContentElementAttributesContext.Provider, {
1525
- value: attributes
1526
- }, children)
1527
- );
1528
- }
1529
- function useContentElementAttributes() {
1530
- return useContext(ContentElementAttributesContext);
1531
- }
1532
-
1533
- var ContentElementLifecycleContext = createContext$1();
1534
- var LifecycleProvider = createScrollPositionLifecycleProvider(ContentElementLifecycleContext);
1535
- var useLifecycle = createScrollPositionLifecycleHook(ContentElementLifecycleContext);
1536
- function ContentElementLifecycleProvider(_ref) {
1537
- var type = _ref.type,
1538
- children = _ref.children;
1539
-
1540
- var _api$contentElementTy = api.contentElementTypes.getOptions(type),
1541
- lifecycle = _api$contentElementTy.lifecycle;
1542
-
1543
- if (lifecycle) {
1544
- return (
1545
- /*#__PURE__*/
1546
- React.createElement(LifecycleProvider, null, children)
1547
- );
1548
- } else {
1549
- return children;
1550
- }
1551
- }
1552
- /**
1553
- * Returns an object containing information about the scroll position
1554
- * related lifecylce of the content element. Requires the `lifecycle`
1555
- * option to be set to true in the `frontend.contentElements.register`
1556
- * call for the content element's type.
1557
- *
1558
- * * `shouldLoad` is true if the content element should start lazy
1559
- * load. Becomes true before `shouldPrepare`.
1560
- *
1561
- * * `shouldPrepare` is true if the content element is about to enter
1562
- * the viewport.
1563
- *
1564
- * * `isActive` is true if the content element is completely in the
1565
- * viewport.
1566
- *
1567
- * @param {Function} onActivate -
1568
- * Invoked when content element has entered the viewport.
1569
- *
1570
- * @param {Function} onDeactivate -
1571
- * Invoked when content element has left the viewport.
1572
- *
1573
- * @example
1574
- *
1575
- * const {isActive, shouldPrepare} = useContentElementLifecycle();
1576
- */
1577
-
1578
- function useContentElementLifecycle(options) {
1579
- var result = useLifecycle(options);
1580
-
1581
- if (!result) {
1582
- throw new Error('useContentElementLifecycle is only available in ' + 'content elements for which `lifecycle: true` has ' + 'been passed to frontend.contentElements.register');
1583
- }
1584
-
1585
- return result;
1586
- }
1587
-
1588
- var styles$3 = {"wrapper":"ContentElementMargin-module_wrapper__20kIk"};
1589
-
1590
- function ContentElementMargin(_ref) {
1591
- var position = _ref.position,
1592
- children = _ref.children;
1593
-
1594
- if (position === 'full') {
1595
- return children;
1596
- }
1597
-
1598
- return (
1599
- /*#__PURE__*/
1600
- React.createElement("div", {
1601
- className: styles$3.wrapper
1602
- }, children)
1603
- );
1604
- }
1605
-
1606
- var styles$4 = {"missing":"ContentElement-module_missing__2_1j9"};
1607
-
1608
- function _createSuper(Derived) {
1609
- function isNativeReflectConstruct() {
1610
- if (typeof Reflect === "undefined" || !Reflect.construct) return false;
1611
- if (Reflect.construct.sham) return false;
1612
- if (typeof Proxy === "function") return true;
1613
-
1614
- try {
1615
- Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
1616
- return true;
1617
- } catch (e) {
1618
- return false;
1619
- }
1620
- }
1621
-
1622
- return function () {
1623
- var Super = _getPrototypeOf(Derived),
1624
- result;
1625
-
1626
- if (isNativeReflectConstruct()) {
1627
- var NewTarget = _getPrototypeOf(this).constructor;
1628
-
1629
- result = Reflect.construct(Super, arguments, NewTarget);
1630
- } else {
1631
- result = Super.apply(this, arguments);
1632
- }
1633
-
1634
- return _possibleConstructorReturn(this, result);
1635
- };
1636
- }
1637
- var ContentElementErrorBoundary =
1638
- /*#__PURE__*/
1639
- function (_React$Component) {
1640
- _inherits(ContentElementErrorBoundary, _React$Component);
1641
-
1642
- var _super = _createSuper(ContentElementErrorBoundary);
1643
-
1644
- function ContentElementErrorBoundary(props) {
1645
- var _this;
1646
-
1647
- _classCallCheck(this, ContentElementErrorBoundary);
1648
-
1649
- _this = _super.call(this, props);
1650
- _this.state = {
1651
- hasError: false
1652
- };
1653
- return _this;
1654
- }
1655
-
1656
- _createClass(ContentElementErrorBoundary, [{
1657
- key: "render",
1658
- value: function render() {
1659
- if (this.state.hasError) {
1660
- return (
1661
- /*#__PURE__*/
1662
- React.createElement("div", {
1663
- className: styles$4.missing
1664
- }, "Error rendering element of type \"", this.props.type, "\"")
1665
- );
1666
- }
1667
-
1668
- return this.props.children;
1669
- }
1670
- }], [{
1671
- key: "getDerivedStateFromError",
1672
- value: function getDerivedStateFromError(error) {
1673
- return {
1674
- hasError: true
1675
- };
1676
- }
1677
- }]);
1678
-
1679
- return ContentElementErrorBoundary;
1680
- }(React.Component);
1681
-
1682
- var ContentElement = withInlineEditingDecorator('ContentElementDecorator', function ContentElement(props) {
1683
- var Component = api.contentElementTypes.getComponent(props.type);
1684
-
1685
- if (Component) {
1686
- return (
1687
- /*#__PURE__*/
1688
- React.createElement(ContentElementAttributesProvider, {
1689
- id: props.id
1690
- },
1691
- /*#__PURE__*/
1692
- React.createElement(ContentElementLifecycleProvider, {
1693
- type: props.type
1694
- },
1695
- /*#__PURE__*/
1696
- React.createElement(ContentElementMargin, {
1697
- position: props.itemProps.position
1698
- },
1699
- /*#__PURE__*/
1700
- React.createElement(ContentElementErrorBoundary, {
1701
- type: props.type
1702
- },
1703
- /*#__PURE__*/
1704
- React.createElement(Component, {
1705
- sectionProps: props.sectionProps,
1706
- configuration: props.itemProps,
1707
- contentElementId: props.id
1708
- })))))
1709
- );
1710
- } else {
1711
- return (
1712
- /*#__PURE__*/
1713
- React.createElement("div", {
1714
- className: styles$4.missing
1715
- }, "Element of unknown type \"", props.type, "\"")
1716
- );
1717
- }
1718
- });
1719
- ContentElement.defaultProps = {
1720
- itemProps: {}
1721
- };
1722
-
1723
- function ContentElements(props) {
1724
- return (
1725
- /*#__PURE__*/
1726
- React.createElement(React.Fragment, null, props.items.map(function (item, index) {
1727
- return props.children(item,
1728
- /*#__PURE__*/
1729
- React.createElement(MemoizedContentElement, {
1730
- key: item.id,
1731
- id: item.id,
1732
- permaId: item.permaId,
1733
- type: item.type,
1734
- first: index === 0,
1735
- position: item.position,
1736
- itemProps: item.props,
1737
- sectionProps: props.sectionProps
1738
- }), index);
1739
- }))
1740
- );
1741
- }
1742
- var MemoizedContentElement = React.memo(ContentElement, function (prevProps, nextProps) {
1743
- return prevProps.id === nextProps.id && prevProps.permaId === nextProps.permaId && prevProps.type === nextProps.type && prevProps.position === nextProps.position && prevProps.itemProps === nextProps.itemProps && prevProps.sectionProps === nextProps.sectionProps;
1744
- });
1745
- ContentElements.defaultProps = {
1746
- children: function children(item, child) {
1747
- return child;
1748
- }
1749
- };
1750
-
1751
- function useNarrowViewport() {
1752
- return useMediaQuery('(max-width: 950px)');
1753
- }
1754
-
1755
- var styles$5 = {"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","narrow":"TwoColumn-module_narrow__qAgnL","wide":"TwoColumn-module_wide__xdF_t"};
1756
-
1757
- function availablePositions(narrow) {
1758
- if (narrow) {
1759
- return ['inline', 'full'];
1760
- } else {
1761
- return ['inline', 'sticky', 'full'];
1762
- }
1763
- }
1764
-
1765
- function TwoColumn(props) {
1766
- var narrow = useNarrowViewport();
1767
- return (
1768
- /*#__PURE__*/
1769
- React.createElement("div", {
1770
- className: classNames(styles$5.root, styles$5[props.align], narrow ? styles$5.narrow : styles$5.wide)
1771
- },
1772
- /*#__PURE__*/
1773
- React.createElement("div", {
1774
- className: classNames(styles$5.group),
1775
- key: props.align
1776
- },
1777
- /*#__PURE__*/
1778
- React.createElement("div", {
1779
- className: styles$5.inline,
1780
- ref: props.contentAreaRef
1781
- })), renderItems(props, narrow), renderPlaceholder(props.placeholder))
1782
- );
1783
- }
1784
- TwoColumn.defaultProps = {
1785
- align: 'left'
1786
- };
1787
-
1788
- function renderItems(props, narrow) {
1789
- return groupItemsByPosition(props.items, availablePositions(narrow)).map(function (group, index) {
1790
- return (
1791
- /*#__PURE__*/
1792
- React.createElement("div", {
1793
- key: index,
1794
- className: classNames(styles$5.group, styles$5["group-".concat(group.position)])
1795
- }, renderItemGroup(props, group, 'sticky'), renderItemGroup(props, group, 'inline'), renderItemGroup(props, group, 'full'))
1796
- );
1797
- });
1798
- }
1799
-
1800
- function renderItemGroup(props, group, position) {
1801
- if (group[position].length) {
1802
- return (
1803
- /*#__PURE__*/
1804
- React.createElement("div", {
1805
- className: styles$5[position]
1806
- }, props.children(
1807
- /*#__PURE__*/
1808
- React.createElement(ContentElements, {
1809
- sectionProps: props.sectionProps,
1810
- items: group[position]
1811
- }), {
1812
- position: position,
1813
- openStart: position === 'inline' && group.openStart,
1814
- openEnd: position === 'inline' && group.openEnd
1815
- }))
1816
- );
1817
- }
1818
- }
1819
-
1820
- function groupItemsByPosition(items, availablePositions) {
1821
- var groups = [];
1822
- var currentGroup;
1823
- items.reduce(function (previousItemPosition, item, index) {
1824
- var position = availablePositions.indexOf(item.position) >= 0 ? item.position : 'inline';
1825
-
1826
- if (!previousItemPosition || previousItemPosition !== position && !(previousItemPosition === 'sticky' && position === 'inline')) {
1827
- currentGroup = {
1828
- position: position,
1829
- sticky: [],
1830
- inline: [],
1831
- full: []
1832
- };
1833
- groups = [].concat(_toConsumableArray(groups), [currentGroup]);
1834
- }
1835
-
1836
- currentGroup[position].push(item);
1837
- return position;
1838
- }, null);
1839
- groups.forEach(function (group, index) {
1840
- var previous = groups[index - 1];
1841
- var next = groups[index + 1];
1842
- group.openStart = previous && !previous.full.length;
1843
- group.openEnd = next && next.inline.length > 0;
1844
- });
1845
- return groups;
1846
- }
1847
-
1848
- function renderPlaceholder(placeholder) {
1849
- if (!placeholder) {
1850
- return null;
1851
- }
1852
-
1853
- return (
1854
- /*#__PURE__*/
1855
- React.createElement("div", {
1856
- className: classNames(styles$5.group)
1857
- },
1858
- /*#__PURE__*/
1859
- React.createElement("div", {
1860
- className: styles$5.inline
1861
- }, placeholder))
1862
- );
1863
- }
1864
-
1865
- var styles$6 = {"outer":"Center-module_outer__3Rr0H","outer-full":"Center-module_outer-full__3dknO","item":"Center-module_item__1KSs3","item-full":"Center-module_item-full__1cEuv","clear":"Center-module_clear__jJEap","inner-left":"Center-module_inner-left__2z9Ea","inner-right":"Center-module_inner-right__KBkVt"};
1866
-
1867
- function Center(props) {
1868
- return (
1869
- /*#__PURE__*/
1870
- React.createElement("div", {
1871
- className: classNames(styles$6.root)
1872
- },
1873
- /*#__PURE__*/
1874
- React.createElement("div", {
1875
- ref: props.contentAreaRef
1876
- }),
1877
- /*#__PURE__*/
1878
- React.createElement(ContentElements, {
1879
- sectionProps: props.sectionProps,
1880
- items: props.items
1881
- }, function (item, child, index) {
1882
- return (
1883
- /*#__PURE__*/
1884
- React.createElement("div", {
1885
- key: item.id,
1886
- className: outerClassName(item)
1887
- },
1888
- /*#__PURE__*/
1889
- React.createElement("div", {
1890
- className: classNames(styles$6.item, styles$6["item-".concat(item.position)])
1891
- }, props.children(
1892
- /*#__PURE__*/
1893
- React.createElement("div", {
1894
- className: styles$6["inner-".concat(item.position)]
1895
- }, child), boxProps(props.items, item, index))))
1896
- );
1897
- }), renderPlaceholder$1(props.placeholder))
1898
- );
1899
- }
1900
-
1901
- function outerClassName(item) {
1902
- var _api$contentElementTy = api.contentElementTypes.getOptions(item.type),
1903
- supportsWrappingAroundFloats = _api$contentElementTy.supportsWrappingAroundFloats;
1904
-
1905
- return classNames(styles$6.outer, styles$6["outer-".concat(item.position)], _defineProperty({}, styles$6.clear, !supportsWrappingAroundFloats));
1906
- }
1907
-
1908
- function boxProps(items, item, index) {
1909
- var previous = items[index - 1];
1910
- var next = items[index + 1];
1911
- return {
1912
- position: item.position,
1913
- openStart: previous && item.position !== 'full' && previous.position !== 'full',
1914
- openEnd: next && item.position !== 'full' && next.position !== 'full'
1915
- };
1916
- }
1917
-
1918
- function renderPlaceholder$1(placeholder) {
1919
- if (!placeholder) {
1920
- return null;
1921
- }
1922
-
1923
- return (
1924
- /*#__PURE__*/
1925
- React.createElement("div", {
1926
- className: classNames(styles$6.outer)
1927
- },
1928
- /*#__PURE__*/
1929
- React.createElement("div", {
1930
- className: classNames(styles$6.item)
1931
- }, placeholder))
1932
- );
1933
- }
1934
-
1935
- var Layout = React.memo(withInlineEditingAlternative('LayoutWithPlaceholder', LayoutWithoutInlineEditing), function (prevProps, nextProps) {
1936
- return prevProps.sectionId === nextProps.sectionId && prevProps.items === nextProps.items && prevProps.appearance === nextProps.appearance && prevProps.contentAreaRef === nextProps.contentAreaRef && prevProps.sectionProps === nextProps.sectionProps;
1937
- });
1938
- function LayoutWithoutInlineEditing(props) {
1939
- if (props.sectionProps.layout === 'center') {
1940
- return (
1941
- /*#__PURE__*/
1942
- React.createElement(Center, props)
1943
- );
1944
- } else if (props.sectionProps.layout === 'right') {
1945
- return (
1946
- /*#__PURE__*/
1947
- React.createElement(TwoColumn, Object.assign({
1948
- align: "right"
1949
- }, props))
1950
- );
1951
- } else {
1952
- return (
1953
- /*#__PURE__*/
1954
- React.createElement(TwoColumn, props)
1955
- );
1956
- }
1957
- }
1958
- Layout.defaultProps = {
1959
- layout: 'left'
1960
- };
1961
-
1962
- function usePostMessageListener(receiveData) {
1963
- useEffect(function () {
1964
- if (window.parent !== window) {
1965
- window.addEventListener('message', receive);
1966
- }
1967
-
1968
- return function () {
1969
- return window.removeEventListener('message', receive);
1970
- };
1971
-
1972
- function receive(message) {
1973
- if (window.location.href.indexOf(message.origin) === 0) {
1974
- receiveData(message.data);
1975
- }
1976
- }
1977
- }, [receiveData]);
1978
- }
1979
-
1980
- var styles$7 = {"text-s":"20px","text-base":"22px","text-l":"40px","text-xl":"66px","text-2xl":"110px","h2":"Text-module_h2__34chJ","h1":"Text-module_h1__2_5kX","body":"Text-module_body__4oWD-","caption":"Text-module_caption__3_6Au"};
1981
-
1982
- /**
1983
- * Render some text using the default typography scale.
1984
- *
1985
- * @param {Object} props
1986
- * @param {string} props.scaleCategory - One of the styles `'h1'`, `'h2'`, `'body'`, `'caption'`.
1987
- * @param {string} [props.inline] - Render a span instread of a div.
1988
- * @param {string} props.children - Nodes to render with specified typography.
1989
- */
1990
-
1991
- function Text(_ref) {
1992
- var inline = _ref.inline,
1993
- scaleCategory = _ref.scaleCategory,
1994
- children = _ref.children;
1995
- return React.createElement(inline ? 'span' : 'div', {
1996
- className: styles$7[scaleCategory]
1997
- }, children);
1998
- }
1999
-
2000
- var ContentElementConfigurationUpdateContext = React.createContext(function () {});
2001
- function useContentElementConfigurationUpdate() {
2002
- return useContext(ContentElementConfigurationUpdateContext);
2003
- }
2004
-
2005
- var ContentElementEditorCommandEmitterContext = createContext$1({
2006
- on: function on() {},
2007
- off: function off() {}
2008
- });
2009
- function useContentElementEditorCommandSubscription(callback) {
2010
- var _useContentElementAtt = useContentElementAttributes(),
2011
- contentElementId = _useContentElementAtt.contentElementId;
2012
-
2013
- var emitter = useContext(ContentElementEditorCommandEmitterContext);
2014
- useEffect(function () {
2015
- emitter.on("command:".concat(contentElementId), callback);
2016
- return function () {
2017
- return emitter.off("command:".concat(contentElementId), callback);
2018
- };
2019
- }, [emitter, callback, contentElementId]);
2020
- }
2021
-
2022
- var ContentElementEditorStateContext = createContext$1({
2023
- isSelected: false,
2024
- isEditable: false,
2025
- setTransientState: function setTransientState() {}
2026
- });
2027
- /**
2028
- * Use inside a content element component to determine whether the
2029
- * component is being rendered inside the editor iframe, and whether
2030
- * the content element is currently selected. This can be used to
2031
- * implement simple inline editing capabilities like displaying extra
2032
- * information when the content element is selected.
2033
- *
2034
- * @example
2035
- * const {isEditable, isSelected} = useContentElementEditorState();
2036
- */
2037
-
2038
- function useContentElementEditorState() {
2039
- return useContext(ContentElementEditorStateContext);
2040
- }
2041
-
2042
- var EditableText = withInlineEditingAlternative('EditableText', function EditableText(_ref) {
2043
- var value = _ref.value;
2044
- return (
2045
- /*#__PURE__*/
2046
- React.createElement(Text, {
2047
- scaleCategory: "body"
2048
- }, render(value))
2049
- );
2050
- });
2051
-
2052
- function render() {
2053
- var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
2054
- return children.map(function (element, index) {
2055
- if (element.type) {
2056
- return renderElement({
2057
- attributes: {
2058
- key: index
2059
- },
2060
- element: element,
2061
- children: render(element.children)
2062
- });
2063
- } else {
2064
- return renderLeaf({
2065
- attributes: {
2066
- key: index
2067
- },
2068
- leaf: element,
2069
- children: element.text.trim() === '' ? "\uFEFF" : element.text
2070
- });
2071
- }
2072
- });
2073
- }
2074
-
2075
- function renderElement(_ref2) {
2076
- var attributes = _ref2.attributes,
2077
- children = _ref2.children,
2078
- element = _ref2.element;
2079
-
2080
- switch (element.type) {
2081
- case 'block-quote':
2082
- return (
2083
- /*#__PURE__*/
2084
- React.createElement("blockquote", attributes, children)
2085
- );
2086
-
2087
- case 'bulleted-list':
2088
- return (
2089
- /*#__PURE__*/
2090
- React.createElement("ul", attributes, children)
2091
- );
2092
-
2093
- case 'numbered-list':
2094
- return (
2095
- /*#__PURE__*/
2096
- React.createElement("ol", attributes, children)
2097
- );
2098
-
2099
- case 'list-item':
2100
- return (
2101
- /*#__PURE__*/
2102
- React.createElement("li", attributes, children)
2103
- );
2104
-
2105
- case 'heading':
2106
- return (
2107
- /*#__PURE__*/
2108
- React.createElement("h2", attributes, children)
2109
- );
2110
-
2111
- case 'link':
2112
- return (
2113
- /*#__PURE__*/
2114
- React.createElement("a", Object.assign({}, attributes, {
2115
- href: element.href
2116
- }), children)
2117
- );
2118
-
2119
- default:
2120
- return (
2121
- /*#__PURE__*/
2122
- React.createElement("p", attributes, children)
2123
- );
2124
- }
2125
- }
2126
- function renderLeaf(_ref3) {
2127
- var attributes = _ref3.attributes,
2128
- children = _ref3.children,
2129
- leaf = _ref3.leaf;
2130
-
2131
- if (leaf.bold) {
2132
- children =
2133
- /*#__PURE__*/
2134
- React.createElement("strong", null, children);
2135
- }
2136
-
2137
- if (leaf.italic) {
2138
- children =
2139
- /*#__PURE__*/
2140
- React.createElement("em", null, children);
2141
- }
2142
-
2143
- if (leaf.underline) {
2144
- children =
2145
- /*#__PURE__*/
2146
- React.createElement("u", null, children);
2147
- }
2148
-
2149
- if (leaf.strikethrough) {
2150
- children =
2151
- /*#__PURE__*/
2152
- React.createElement("s", null, children);
2153
- }
2154
-
2155
- return (
2156
- /*#__PURE__*/
2157
- React.createElement("span", attributes, children)
2158
- );
2159
- }
2160
-
2161
- export { renderElement as $, useEntryStateDispatch as A, useSection as B, loadInlineEditingComponents as C, setupI18n as D, EntryStateProvider as E, Foreground as F, api as G, useContentElementConfigurationUpdate as H, useContentElementEditorCommandSubscription as I, useContentElementEditorState as J, useContentElementLifecycle as K, Layout as L, MotifArea as M, EditableText as N, useOnScreen as O, PhonePlatformContext as P, useLocale as Q, ContentElementEditorCommandEmitterContext as R, StaticPreview as S, Text as T, MotifAreaVisibilityProvider as U, ForcePaddingContext as V, updateContentElementConfiguration as W, ContentElementConfigurationUpdateContext as X, ContentElementEditorStateContext as Y, LayoutWithoutInlineEditing as Z, _slicedToArray as _, _defineProperty as a, renderLeaf as a0, _objectWithoutProperties as b, useFileRights as c, useLegalInfo as d, useCredits as e, useShareProviders as f, useShareUrl as g, useTheme as h, useChapters as i, createScrollPositionLifecycleProvider as j, createScrollPositionLifecycleHook as k, useEntryStructure as l, _objectSpread2 as m, useIsStaticPreview as n, useEntryMetadata as o, useNestedFiles as p, useFile as q, useMediaQuery as r, useSectionContentElements as s, usePostMessageListener as t, useI18n as u, withInlineEditingAlternative as v, withInlineEditingDecorator as w, LocaleProvider as x, _toConsumableArray as y, useAvailableQualities as z };