pageflow 16.0.0 → 16.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +210 -33
- data/README.md +0 -1
- data/Rakefile +1 -1
- data/admins/pageflow/entry.rb +0 -1
- data/admins/pageflow/sites.rb +3 -0
- data/app/assets/javascripts/pageflow/dist/ui.js +298 -72
- data/app/assets/stylesheets/pageflow/admin/permalink_input.scss +10 -0
- data/app/assets/stylesheets/pageflow/editor/drop_down_button.scss +6 -1
- data/app/assets/stylesheets/pageflow/editor/file_thumbnails.scss +4 -0
- data/app/assets/stylesheets/pageflow/editor/help.scss +3 -3
- data/app/assets/stylesheets/pageflow/editor/info_box.scss +7 -0
- data/app/assets/stylesheets/pageflow/editor/inputs/file_input.scss +0 -5
- data/app/assets/stylesheets/pageflow/ui/forms.scss +1 -1
- data/app/controllers/pageflow/chapters_controller.rb +2 -2
- data/app/controllers/pageflow/editor/files_controller.rb +1 -1
- data/app/controllers/pageflow/entries_controller.rb +10 -0
- data/app/controllers/pageflow/feeds_controller.rb +18 -0
- data/app/controllers/pageflow/pages_controller.rb +2 -2
- data/app/controllers/pageflow/sitemaps_controller.rb +15 -0
- data/app/controllers/pageflow/storylines_controller.rb +2 -2
- data/app/helpers/pageflow/entries_helper.rb +2 -1
- data/app/helpers/pageflow/feeds_helper.rb +66 -0
- data/app/helpers/pageflow/page_types_helper.rb +9 -9
- data/app/inputs/pageflow_permalink_input.rb +15 -3
- data/app/models/concerns/pageflow/reusable_file.rb +3 -3
- data/app/models/pageflow/account.rb +8 -0
- data/app/models/pageflow/audio_file_url_templates.rb +2 -1
- data/app/models/pageflow/draft_entry.rb +1 -1
- data/app/models/pageflow/entries_feed.rb +32 -0
- data/app/models/pageflow/image_file.rb +14 -3
- data/app/models/pageflow/membership.rb +3 -2
- data/app/models/pageflow/other_file.rb +5 -0
- data/app/models/pageflow/other_file_url_templates.rb +16 -0
- data/app/models/pageflow/published_entry.rb +6 -0
- data/app/models/pageflow/revision.rb +4 -0
- data/app/models/pageflow/site.rb +8 -0
- data/app/models/pageflow/sitemaps.rb +13 -0
- data/app/models/pageflow/used_file.rb +2 -2
- data/app/models/pageflow/video_file_url_templates.rb +3 -1
- data/app/models/pageflow/widget.rb +9 -1
- data/app/views/admin/entries/_permalink_inputs.html.erb +1 -2
- data/app/views/admin/sites/_attributes_table.html.arb +3 -0
- data/app/views/admin/sites/_fields.html.erb +6 -0
- data/app/views/components/pageflow/admin/extensible_attributes_table.rb +8 -2
- data/app/views/components/pageflow/admin/sites_tab.rb +3 -0
- data/app/views/pageflow/editor/config/_seeds.json.jbuilder +1 -0
- data/app/views/pageflow/feeds/index.atom.builder +20 -0
- data/app/views/pageflow/sitemaps/index.xml.builder +9 -0
- data/config/initializers/features.rb +1 -0
- data/config/initializers/paperclip.rb +4 -0
- data/config/locales/de.yml +27 -6
- data/config/locales/en.yml +30 -4
- data/config/routes.rb +3 -0
- data/config/spring.rb +1 -1
- data/db/migrate/20230120092923_create_other_files.rb +23 -0
- data/db/migrate/20230323115745_add_feeds_enabled_to_sites.rb +5 -0
- data/db/migrate/20230323154323_add_sitemap_enabled_to_sites.rb +5 -0
- data/db/migrate/20230331103823_add_title_to_sites.rb +5 -0
- data/db/migrate/20230405103612_add_custom_feed_url_to_sites.rb +5 -0
- data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/editor.js +445 -109
- data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/frontend.js +26 -3
- data/entry_types/paged/app/controllers/pageflow_paged/editor/entries_controller.rb +0 -2
- data/entry_types/paged/app/controllers/pageflow_paged/entries_controller.rb +1 -0
- data/entry_types/paged/app/views/pageflow_paged/entries/show.html.erb +1 -0
- data/entry_types/paged/config/initializers/features.rb +0 -1
- data/entry_types/paged/lib/pageflow_paged/engine.rb +17 -1
- data/entry_types/scrolled/app/controllers/pageflow_scrolled/editor/chapters_controller.rb +2 -2
- data/entry_types/scrolled/app/controllers/pageflow_scrolled/editor/content_elements_controller.rb +3 -4
- data/entry_types/scrolled/app/controllers/pageflow_scrolled/editor/sections_controller.rb +13 -6
- data/entry_types/scrolled/app/controllers/pageflow_scrolled/entries_controller.rb +2 -0
- data/entry_types/scrolled/app/helpers/pageflow_scrolled/cache_helper.rb +11 -0
- data/entry_types/scrolled/app/helpers/pageflow_scrolled/editor/entry_json_seed_helper.rb +42 -0
- data/entry_types/scrolled/app/helpers/pageflow_scrolled/editor/seed_html_helper.rb +3 -0
- data/entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb +31 -10
- data/entry_types/scrolled/app/helpers/pageflow_scrolled/react_server_side_rendering_helper.rb +9 -1
- data/entry_types/scrolled/app/helpers/pageflow_scrolled/themes_helper.rb +3 -1
- data/entry_types/scrolled/app/models/pageflow_scrolled/chapter.rb +23 -0
- data/entry_types/scrolled/app/views/pageflow_scrolled/editor/entries/_head.html.erb +6 -1
- data/entry_types/scrolled/app/views/pageflow_scrolled/editor/entries/_seed.json.jbuilder +1 -5
- data/entry_types/scrolled/app/views/pageflow_scrolled/editor/sections/_section_with_content_elements.json.jbuilder +10 -0
- data/entry_types/scrolled/app/views/pageflow_scrolled/entries/show.html.erb +44 -41
- data/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_consent_vendors.json.jbuilder +16 -0
- data/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder +3 -0
- data/entry_types/scrolled/config/initializers/features.rb +5 -0
- data/entry_types/scrolled/config/locales/consent_widget.de.yml +4 -0
- data/entry_types/scrolled/config/locales/consent_widget.en.yml +4 -0
- data/entry_types/scrolled/config/locales/de.yml +189 -8
- data/entry_types/scrolled/config/locales/en.yml +207 -2
- data/entry_types/scrolled/config/routes.rb +4 -0
- data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/install_generator.rb +97 -5
- data/entry_types/scrolled/lib/pageflow_scrolled/additional_seed_data.rb +1 -1
- data/entry_types/scrolled/lib/pageflow_scrolled/configuration.rb +96 -0
- data/entry_types/scrolled/lib/pageflow_scrolled/content_element_consent_vendors.rb +38 -0
- data/entry_types/scrolled/lib/pageflow_scrolled/engine.rb +17 -1
- data/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb +24 -0
- data/entry_types/scrolled/lib/pageflow_scrolled/react_widget_type.rb +6 -1
- data/entry_types/scrolled/lib/tasks/pageflow_scrolled/storybook.rake +1 -2
- data/entry_types/scrolled/package/contentElements-editor.js +307 -22
- data/entry_types/scrolled/package/contentElements-frontend.css +1 -1
- data/entry_types/scrolled/package/contentElements-frontend.js +690 -71
- data/entry_types/scrolled/package/editor.js +616 -220
- data/entry_types/scrolled/package/frontend/{EditableInlineText.module-14c7b097.js → EditableInlineText.module-fa9e3aff.js} +1669 -1674
- data/entry_types/scrolled/package/frontend/PhonePlatformContext-10a1d600.js +32 -0
- data/entry_types/scrolled/package/frontend/ToggleFullscreenCornerButton-727cce0d.js +107 -0
- data/entry_types/scrolled/package/frontend/Viewer-169e14ca.js +154 -0
- data/entry_types/scrolled/package/frontend/{Viewer-b6becc57.js → Viewer-ee1aa590.js} +32 -161
- data/entry_types/scrolled/package/frontend/arrowRight-92a34ccc.js +77 -0
- data/entry_types/scrolled/package/frontend/{components-b3160dd7.js → components-4a09bfa3.js} +185 -45
- data/entry_types/scrolled/package/frontend/{PhonePlatformContext-f6093cc6.js → i18n-ddd92820.js} +149 -107
- data/entry_types/scrolled/package/frontend/index-02378634.js +118 -0
- data/entry_types/scrolled/package/frontend/index.css +1 -1
- data/entry_types/scrolled/package/frontend/index.js +206 -54
- data/entry_types/scrolled/package/frontend/useContentElementEditorState-63045393.js +52 -0
- data/entry_types/scrolled/package/package.json +2 -1
- data/entry_types/scrolled/package/testHelpers.js +9 -2
- data/entry_types/scrolled/package/values/colors.module.css +15 -0
- data/entry_types/scrolled/package/widgets/consentBar.css +1 -0
- data/entry_types/scrolled/package/widgets/consentBar.js +426 -0
- data/entry_types/scrolled/package/widgets/defaultNavigation.css +1 -1
- data/lib/generators/pageflow/resque/resque_generator.rb +1 -1
- data/lib/pageflow/ability_mixin.rb +5 -5
- data/lib/pageflow/active_admin_can_can_fix.rb +2 -2
- data/lib/pageflow/built_in_file_type.rb +7 -0
- data/lib/pageflow/configuration.rb +21 -0
- data/lib/pageflow/engine.rb +60 -39
- data/lib/pageflow/entry_export_import/revision_serialization.rb +1 -1
- data/lib/pageflow/file_type.rb +2 -2
- data/lib/pageflow/global_config_api.rb +2 -2
- data/lib/pageflow/nested_revision_component.rb +23 -5
- data/lib/pageflow/rails_version.rb +19 -0
- data/lib/pageflow/seeds.rb +10 -7
- data/lib/pageflow/version.rb +1 -1
- data/lib/pageflow/widget_types.rb +4 -0
- data/package/config/webpack5.js +14 -0
- data/package/editor.js +141 -30
- data/package/frontend.js +26 -2
- data/package/testHelpers.js +1 -1
- data/package/ui.js +296 -71
- data/spec/factories/entries.rb +17 -3
- data/spec/factories/sites.rb +3 -0
- data/vendor/assets/javascripts/iscroll.js +4 -7
- metadata +65 -49
- data/app/helpers/pageflow/admin/permalinks_helper.rb +0 -15
- data/entry_types/scrolled/package/frontend/arrowRight-78a7cee4.js +0 -42
@@ -1,5 +1,5 @@
|
|
1
|
-
import { useContentElementConfigurationUpdate, useI18n, withShadowClassName, Text, EditableInlineText, frontend, useFile, useContentElementEditorState, FitViewport, ContentElementBox,
|
2
|
-
import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
|
1
|
+
import { useContentElementConfigurationUpdate, useI18n, useDarkBackground, contentElementWidths, withShadowClassName, paletteColor, Text, EditableInlineText, frontend, useFile, useContentElementEditorState, FitViewport, ContentElementBox, ContentElementFigure, useContentElementLifecycle, usePortraitOrientation, ExpandableImage, Image, usePlayerState, MediaInteractionTracking, useAudioFocus, VideoPlayerControls, PlayerEventContextDataProvider, VideoPlayer, AudioPlayerControls, AudioPlayer, useMediaMuted, useTheme, EditableText, ThirdPartyOptOutInfo, ThirdPartyOptIn, useAtmo, textColorForBackgroundColor, Panorama, utils, ThemeIcon, useLocale, Figure, usePhonePlatform, FullscreenViewer, ToggleFullscreenCornerButton } from 'pageflow-scrolled/frontend';
|
2
|
+
import React, { useState, useEffect, useMemo, useRef, useCallback, forwardRef } from 'react';
|
3
3
|
import classNames from 'classnames';
|
4
4
|
import ReactCompareImage from 'react-compare-image';
|
5
5
|
import Measure from 'react-measure';
|
@@ -21,11 +21,12 @@ function _defineProperty(obj, key, value) {
|
|
21
21
|
return obj;
|
22
22
|
}
|
23
23
|
|
24
|
-
var styles = {"root":"Heading-module_root__33TFw","right":"Heading-module_right__1TJKF","centerRagged":"Heading-module_centerRagged__388sq","center":"Heading-module_center__38lDY","forcePaddingTop":"Heading-module_forcePaddingTop__30Juh"};
|
24
|
+
var styles = {"darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","root":"Heading-module_root__33TFw","right":"Heading-module_right__1TJKF","light":"Heading-module_light__1TQE8","dark":"Heading-module_dark__18iWa","centerRagged":"Heading-module_centerRagged__388sq","center":"Heading-module_center__38lDY","forcePaddingTop":"Heading-module_forcePaddingTop__30Juh"};
|
25
25
|
|
26
26
|
function Heading(_ref) {
|
27
27
|
var configuration = _ref.configuration,
|
28
|
-
sectionProps = _ref.sectionProps
|
28
|
+
sectionProps = _ref.sectionProps,
|
29
|
+
contentElementWidth = _ref.contentElementWidth;
|
29
30
|
var level = configuration.level || sectionProps.sectionIndex;
|
30
31
|
var firstSectionInEntry = level === 0;
|
31
32
|
var updateConfiguration = useContentElementConfigurationUpdate();
|
@@ -35,11 +36,15 @@ function Heading(_ref) {
|
|
35
36
|
}),
|
36
37
|
t = _useI18n.t;
|
37
38
|
|
39
|
+
var darkBackground = useDarkBackground();
|
38
40
|
var legacyValue = configuration.children;
|
39
41
|
var Tag = firstSectionInEntry ? 'h1' : 'h2';
|
40
42
|
var forcePaddingTop = firstSectionInEntry && !('marginTop' in configuration);
|
41
43
|
return /*#__PURE__*/React.createElement(Tag, {
|
42
|
-
className: classNames(styles.root, configuration.typographyVariant && "typography-heading-".concat(configuration.typographyVariant), _defineProperty({}, styles.forcePaddingTop, forcePaddingTop), _defineProperty({}, styles[sectionProps.layout],
|
44
|
+
className: classNames(styles.root, 'scope-headings', configuration.typographyVariant && "typography-heading-".concat(configuration.typographyVariant), darkBackground ? styles.light : styles.dark, _defineProperty({}, styles.forcePaddingTop, forcePaddingTop), _defineProperty({}, styles[sectionProps.layout], contentElementWidth > contentElementWidths.md || sectionProps.layout === 'centerRagged'), _defineProperty({}, withShadowClassName, !sectionProps.invert)),
|
45
|
+
style: {
|
46
|
+
color: paletteColor(configuration.color)
|
47
|
+
}
|
43
48
|
}, /*#__PURE__*/React.createElement(Text, {
|
44
49
|
scaleCategory: getScaleCategory(configuration, firstSectionInEntry),
|
45
50
|
inline: true
|
@@ -142,17 +147,15 @@ var placeholderFile = {
|
|
142
147
|
width: 640,
|
143
148
|
height: 403
|
144
149
|
};
|
145
|
-
function BeforeAfter(
|
146
|
-
var isActive =
|
147
|
-
load =
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
initial_slider_position = _ref.initial_slider_position,
|
155
|
-
slider_color = _ref.slider_color;
|
150
|
+
function BeforeAfter(configuration) {
|
151
|
+
var isActive = configuration.isActive,
|
152
|
+
load = configuration.load,
|
153
|
+
before_id = configuration.before_id,
|
154
|
+
before_label = configuration.before_label,
|
155
|
+
after_id = configuration.after_id,
|
156
|
+
after_label = configuration.after_label,
|
157
|
+
initial_slider_position = configuration.initial_slider_position,
|
158
|
+
slider_color = configuration.slider_color;
|
156
159
|
|
157
160
|
var _useState = useState(false),
|
158
161
|
_useState2 = _slicedToArray(_useState, 2),
|
@@ -190,15 +193,15 @@ function BeforeAfter(_ref) {
|
|
190
193
|
var initialSliderPos = initial_slider_position / 100;
|
191
194
|
return /*#__PURE__*/React.createElement(FitViewport, {
|
192
195
|
file: beforeImage || afterImage || placeholderFile
|
193
|
-
}, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(
|
194
|
-
|
196
|
+
}, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(ContentElementFigure, {
|
197
|
+
configuration: configuration
|
195
198
|
}, /*#__PURE__*/React.createElement(FitViewport.Content, null, /*#__PURE__*/React.createElement(Measure, {
|
196
199
|
bounds: true
|
197
|
-
}, function (
|
200
|
+
}, function (_ref) {
|
198
201
|
var _cx;
|
199
202
|
|
200
|
-
var measureRef =
|
201
|
-
contentRect =
|
203
|
+
var measureRef = _ref.measureRef,
|
204
|
+
contentRect = _ref.contentRect;
|
202
205
|
var initialRectWidth = contentRect.bounds.width * initialSliderPos + 'px';
|
203
206
|
return /*#__PURE__*/React.createElement("div", {
|
204
207
|
ref: measureRef,
|
@@ -233,9 +236,9 @@ function BeforeAfter(_ref) {
|
|
233
236
|
}
|
234
237
|
}
|
235
238
|
|
236
|
-
function InitialSliderPositionIndicator(
|
237
|
-
var parentSelected =
|
238
|
-
position =
|
239
|
+
function InitialSliderPositionIndicator(_ref2) {
|
240
|
+
var parentSelected = _ref2.parentSelected,
|
241
|
+
position = _ref2.position;
|
239
242
|
var indicatorWidth = '2px';
|
240
243
|
var indicatorStyles = {
|
241
244
|
left: "calc(".concat(position, "% - ").concat(indicatorWidth, "/2)"),
|
@@ -269,7 +272,9 @@ frontend.contentElementTypes.register('inlineBeforeAfter', {
|
|
269
272
|
});
|
270
273
|
|
271
274
|
function InlineImage(_ref) {
|
272
|
-
var
|
275
|
+
var contentElementId = _ref.contentElementId,
|
276
|
+
contentElementWidth = _ref.contentElementWidth,
|
277
|
+
configuration = _ref.configuration;
|
273
278
|
var imageFile = useFile({
|
274
279
|
collectionName: 'imageFiles',
|
275
280
|
permaId: configuration.id
|
@@ -286,11 +291,15 @@ function InlineImage(_ref) {
|
|
286
291
|
return /*#__PURE__*/React.createElement(OrientationAwareInlineImage, {
|
287
292
|
landscapeImageFile: imageFile,
|
288
293
|
portraitImageFile: portraitImageFile,
|
294
|
+
contentElementId: contentElementId,
|
295
|
+
contentElementWidth: contentElementWidth,
|
289
296
|
configuration: configuration
|
290
297
|
});
|
291
298
|
} else {
|
292
299
|
return /*#__PURE__*/React.createElement(ImageWithCaption, {
|
293
300
|
imageFile: imageFile,
|
301
|
+
contentElementId: contentElementId,
|
302
|
+
contentElementWidth: contentElementWidth,
|
294
303
|
configuration: configuration
|
295
304
|
});
|
296
305
|
}
|
@@ -299,35 +308,47 @@ function InlineImage(_ref) {
|
|
299
308
|
function OrientationAwareInlineImage(_ref2) {
|
300
309
|
var landscapeImageFile = _ref2.landscapeImageFile,
|
301
310
|
portraitImageFile = _ref2.portraitImageFile,
|
311
|
+
contentElementId = _ref2.contentElementId,
|
312
|
+
contentElementWidth = _ref2.contentElementWidth,
|
302
313
|
configuration = _ref2.configuration;
|
303
314
|
var portraitOrientation = usePortraitOrientation();
|
304
315
|
var imageFile = portraitOrientation && portraitImageFile ? portraitImageFile : landscapeImageFile;
|
305
316
|
return /*#__PURE__*/React.createElement(ImageWithCaption, {
|
306
317
|
imageFile: imageFile,
|
318
|
+
contentElementId: contentElementId,
|
319
|
+
contentElementWidth: contentElementWidth,
|
307
320
|
configuration: configuration
|
308
321
|
});
|
309
322
|
}
|
310
323
|
|
311
324
|
function ImageWithCaption(_ref3) {
|
312
325
|
var imageFile = _ref3.imageFile,
|
326
|
+
contentElementId = _ref3.contentElementId,
|
327
|
+
contentElementWidth = _ref3.contentElementWidth,
|
313
328
|
configuration = _ref3.configuration;
|
314
329
|
|
315
330
|
var _useContentElementLif = useContentElementLifecycle(),
|
316
331
|
shouldLoad = _useContentElementLif.shouldLoad;
|
317
332
|
|
333
|
+
var enableFullscreen = configuration.enableFullscreen;
|
334
|
+
var supportFullscreen = enableFullscreen && contentElementWidth < contentElementWidths.full;
|
318
335
|
return /*#__PURE__*/React.createElement(FitViewport, {
|
319
336
|
file: imageFile,
|
320
337
|
aspectRatio: imageFile ? undefined : 0.75,
|
321
338
|
opaque: !imageFile
|
322
|
-
}, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(
|
323
|
-
|
324
|
-
}, /*#__PURE__*/React.createElement(FitViewport.Content, null, /*#__PURE__*/React.createElement(
|
339
|
+
}, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(ContentElementFigure, {
|
340
|
+
configuration: configuration
|
341
|
+
}, /*#__PURE__*/React.createElement(FitViewport.Content, null, /*#__PURE__*/React.createElement(ExpandableImage, {
|
342
|
+
enabled: supportFullscreen && shouldLoad,
|
343
|
+
imageFile: imageFile,
|
344
|
+
contentElementId: contentElementId
|
345
|
+
}, /*#__PURE__*/React.createElement(Image, {
|
325
346
|
imageFile: imageFile,
|
326
347
|
load: shouldLoad,
|
327
348
|
structuredData: true,
|
328
|
-
variant:
|
349
|
+
variant: contentElementWidth === contentElementWidths.full ? 'large' : 'medium',
|
329
350
|
preferSvg: true
|
330
|
-
})))));
|
351
|
+
}))))));
|
331
352
|
}
|
332
353
|
|
333
354
|
frontend.contentElementTypes.register('inlineImage', {
|
@@ -439,7 +460,6 @@ function getPlayerClickHandler(_ref) {
|
|
439
460
|
|
440
461
|
function InlineVideo(_ref) {
|
441
462
|
var contentElementId = _ref.contentElementId,
|
442
|
-
sectionProps = _ref.sectionProps,
|
443
463
|
configuration = _ref.configuration;
|
444
464
|
var videoFile = useFile({
|
445
465
|
collectionName: 'videoFiles',
|
@@ -449,6 +469,61 @@ function InlineVideo(_ref) {
|
|
449
469
|
collectionName: 'imageFiles',
|
450
470
|
permaId: configuration.posterId
|
451
471
|
});
|
472
|
+
var portraitVideoFile = useFile({
|
473
|
+
collectionName: 'videoFiles',
|
474
|
+
permaId: configuration.portraitId
|
475
|
+
});
|
476
|
+
var portraitPosterImageFile = useFile({
|
477
|
+
collectionName: 'imageFiles',
|
478
|
+
permaId: configuration.portraitPosterId
|
479
|
+
}); // Only render OrientationAwareInlineImage if a portrait image has
|
480
|
+
// been selected. This prevents having the component rerender on
|
481
|
+
// orientation changes even if it does not depend on orientation at
|
482
|
+
// all.
|
483
|
+
|
484
|
+
if (portraitVideoFile) {
|
485
|
+
return /*#__PURE__*/React.createElement(OrientationAwareInlineVideo, {
|
486
|
+
landscapeVideoFile: videoFile,
|
487
|
+
portraitVideoFile: portraitVideoFile,
|
488
|
+
landscapePosterImageFile: posterImageFile,
|
489
|
+
portraitPosterImageFile: portraitPosterImageFile,
|
490
|
+
contentElementId: contentElementId,
|
491
|
+
configuration: configuration
|
492
|
+
});
|
493
|
+
} else {
|
494
|
+
return /*#__PURE__*/React.createElement(OrientationUnawareInlineVideo, {
|
495
|
+
videoFile: videoFile,
|
496
|
+
posterImageFile: posterImageFile,
|
497
|
+
contentElementId: contentElementId,
|
498
|
+
configuration: configuration
|
499
|
+
});
|
500
|
+
}
|
501
|
+
}
|
502
|
+
|
503
|
+
function OrientationAwareInlineVideo(_ref2) {
|
504
|
+
var landscapeVideoFile = _ref2.landscapeVideoFile,
|
505
|
+
portraitVideoFile = _ref2.portraitVideoFile,
|
506
|
+
landscapePosterImageFile = _ref2.landscapePosterImageFile,
|
507
|
+
portraitPosterImageFile = _ref2.portraitPosterImageFile,
|
508
|
+
contentElementId = _ref2.contentElementId,
|
509
|
+
configuration = _ref2.configuration;
|
510
|
+
var portraitOrientation = usePortraitOrientation();
|
511
|
+
var videoFile = portraitOrientation && portraitVideoFile ? portraitVideoFile : landscapeVideoFile;
|
512
|
+
var posterImageFile = portraitOrientation && portraitPosterImageFile ? portraitPosterImageFile : landscapePosterImageFile;
|
513
|
+
return /*#__PURE__*/React.createElement(OrientationUnawareInlineVideo, {
|
514
|
+
key: portraitOrientation,
|
515
|
+
videoFile: videoFile,
|
516
|
+
posterImageFile: posterImageFile,
|
517
|
+
contentElementId: contentElementId,
|
518
|
+
configuration: configuration
|
519
|
+
});
|
520
|
+
}
|
521
|
+
|
522
|
+
function OrientationUnawareInlineVideo(_ref3) {
|
523
|
+
var videoFile = _ref3.videoFile,
|
524
|
+
posterImageFile = _ref3.posterImageFile,
|
525
|
+
contentElementId = _ref3.contentElementId,
|
526
|
+
configuration = _ref3.configuration;
|
452
527
|
|
453
528
|
var _usePlayerState = usePlayerState(),
|
454
529
|
_usePlayerState2 = _slicedToArray(_usePlayerState, 2),
|
@@ -462,8 +537,8 @@ function InlineVideo(_ref) {
|
|
462
537
|
file: videoFile,
|
463
538
|
aspectRatio: videoFile ? undefined : fallbackAspectRatio,
|
464
539
|
opaque: !videoFile
|
465
|
-
}, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(
|
466
|
-
|
540
|
+
}, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(ContentElementFigure, {
|
541
|
+
configuration: configuration
|
467
542
|
}, /*#__PURE__*/React.createElement(FitViewport.Content, null, /*#__PURE__*/React.createElement(MutedIndicator, {
|
468
543
|
visible: media.muted && playerState.shouldPlay && !configuration.keepMuted
|
469
544
|
}), /*#__PURE__*/React.createElement(Player, {
|
@@ -473,19 +548,17 @@ function InlineVideo(_ref) {
|
|
473
548
|
playerState: playerState,
|
474
549
|
playerActions: playerActions,
|
475
550
|
contentElementId: contentElementId,
|
476
|
-
sectionProps: sectionProps,
|
477
551
|
configuration: configuration
|
478
552
|
}))))));
|
479
553
|
}
|
480
554
|
|
481
|
-
function Player(
|
482
|
-
var videoFile =
|
483
|
-
posterImageFile =
|
484
|
-
playerState =
|
485
|
-
playerActions =
|
486
|
-
contentElementId =
|
487
|
-
|
488
|
-
configuration = _ref2.configuration;
|
555
|
+
function Player(_ref4) {
|
556
|
+
var videoFile = _ref4.videoFile,
|
557
|
+
posterImageFile = _ref4.posterImageFile,
|
558
|
+
playerState = _ref4.playerState,
|
559
|
+
playerActions = _ref4.playerActions,
|
560
|
+
contentElementId = _ref4.contentElementId,
|
561
|
+
configuration = _ref4.configuration;
|
489
562
|
|
490
563
|
var _useContentElementEdi = useContentElementEditorState(),
|
491
564
|
isEditable = _useContentElementEdi.isEditable,
|
@@ -537,7 +610,6 @@ function Player(_ref2) {
|
|
537
610
|
hideControlBar: configuration.hideControlBar || configuration.playbackMode === 'loop',
|
538
611
|
hideBigPlayButton: configuration.playbackMode === 'loop',
|
539
612
|
configuration: configuration,
|
540
|
-
sectionProps: sectionProps,
|
541
613
|
onPlayerClick: onPlayerClick
|
542
614
|
}, /*#__PURE__*/React.createElement(PlayerEventContextDataProvider, {
|
543
615
|
playerDescription: "Inline Video",
|
@@ -565,7 +637,6 @@ frontend.contentElementTypes.register('inlineVideo', {
|
|
565
637
|
|
566
638
|
function InlineAudio(_ref) {
|
567
639
|
var contentElementId = _ref.contentElementId,
|
568
|
-
sectionProps = _ref.sectionProps,
|
569
640
|
configuration = _ref.configuration;
|
570
641
|
var audioFile = useFile({
|
571
642
|
collectionName: 'audioFiles',
|
@@ -620,8 +691,8 @@ function InlineAudio(_ref) {
|
|
620
691
|
|
621
692
|
return /*#__PURE__*/React.createElement(FitViewport, {
|
622
693
|
file: posterImageFile
|
623
|
-
}, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(
|
624
|
-
|
694
|
+
}, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(ContentElementFigure, {
|
695
|
+
configuration: configuration
|
625
696
|
}, /*#__PURE__*/React.createElement(FitViewport.Content, null, /*#__PURE__*/React.createElement(AudioPlayerControls, {
|
626
697
|
audioFile: audioFile,
|
627
698
|
defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
|
@@ -629,7 +700,6 @@ function InlineAudio(_ref) {
|
|
629
700
|
playerActions: playerActions,
|
630
701
|
standAlone: !posterImageFile,
|
631
702
|
configuration: configuration,
|
632
|
-
sectionProps: sectionProps,
|
633
703
|
onPlayerClick: onPlayerClick
|
634
704
|
}, /*#__PURE__*/React.createElement(PlayerEventContextDataProvider, {
|
635
705
|
playerDescription: "Inline Audio",
|
@@ -793,18 +863,18 @@ frontend.contentElementTypes.register('soundDisclaimer', {
|
|
793
863
|
component: SoundDisclaimer
|
794
864
|
});
|
795
865
|
|
796
|
-
var styles$4 = {"breakpoint-sm":"(min-width: 640px)","text":"TextBlock-module_text__21Hk4","
|
866
|
+
var styles$4 = {"contentLinkColor":"var(--content-link-color)","breakpoint-sm":"(min-width: 640px)","text":"TextBlock-module_text__21Hk4","quoteDesign-hanging":"TextBlock-module_quoteDesign-hanging__1c9AW","quoteDesign-largeHanging":"TextBlock-module_quoteDesign-largeHanging__2VkIW","layout-centerRagged":"TextBlock-module_layout-centerRagged__1tjoI"};
|
797
867
|
|
798
868
|
function TextBlock(props) {
|
799
869
|
var updateConfiguration = useContentElementConfigurationUpdate();
|
800
|
-
var dark = useDarkBackground();
|
801
870
|
|
802
871
|
var _useI18n = useI18n({
|
803
872
|
locale: 'ui'
|
804
873
|
}),
|
805
874
|
t = _useI18n.t;
|
806
875
|
|
807
|
-
var
|
876
|
+
var theme = useTheme();
|
877
|
+
var className = classNames(styles$4.text, styles$4["quoteDesign-".concat(theme.options.quoteDesign || 'largeHanging')], styles$4["layout-".concat(props.sectionProps.layout)]);
|
808
878
|
return /*#__PURE__*/React.createElement(EditableText, {
|
809
879
|
value: props.configuration.value,
|
810
880
|
contentElementId: props.contentElementId,
|
@@ -871,8 +941,8 @@ function VideoEmbed(_ref) {
|
|
871
941
|
}
|
872
942
|
}, /*#__PURE__*/React.createElement(FitViewport, {
|
873
943
|
aspectRatio: aspectRatios[configuration.aspectRatio || 'wide']
|
874
|
-
}, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(
|
875
|
-
|
944
|
+
}, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(ContentElementFigure, {
|
945
|
+
configuration: configuration
|
876
946
|
}, /*#__PURE__*/React.createElement(FitViewport.Content, null, shouldLoad && /*#__PURE__*/React.createElement(PreparedPlayer, {
|
877
947
|
playerState: playerState,
|
878
948
|
setPlayerState: setPlayerState,
|
@@ -881,8 +951,7 @@ function VideoEmbed(_ref) {
|
|
881
951
|
providerName: providerName
|
882
952
|
})), /*#__PURE__*/React.createElement(ThirdPartyOptOutInfo, {
|
883
953
|
providerName: providerName,
|
884
|
-
hide: playerState === 'playing'
|
885
|
-
contentElementPosition: configuration.position
|
954
|
+
hide: playerState === 'playing'
|
886
955
|
})))));
|
887
956
|
}
|
888
957
|
|
@@ -1021,7 +1090,7 @@ frontend.contentElementTypes.register('videoEmbed', {
|
|
1021
1090
|
}
|
1022
1091
|
});
|
1023
1092
|
|
1024
|
-
var styles$6 = {"darkContentSurfaceColor":"var(--theme-dark-content-surface-color, #101010)","lightContentSurfaceColor":"var(--theme-light-content-surface-color, #fff)","darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","
|
1093
|
+
var styles$6 = {"darkContentSurfaceColor":"var(--theme-dark-content-surface-color, #101010)","lightContentSurfaceColor":"var(--theme-light-content-surface-color, #fff)","darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","breakpoint-sm":"(min-width: 640px)","hidden":"ExternalLink-module_hidden__3jer0","link_item":"ExternalLink-module_link_item__Blypv","layout_center":"ExternalLink-module_layout_center__3NRpQ","link_title":"ExternalLink-module_link_title__FZJ-0","link_thumbnail":"ExternalLink-module_link_thumbnail__2_BHq","link_details":"ExternalLink-module_link_details__lRhKU","invert":"ExternalLink-module_invert__1zrgN","tooltip":"ExternalLink-module_tooltip__18MpC"};
|
1025
1094
|
|
1026
1095
|
function ExternalLink(props) {
|
1027
1096
|
var _classNames2;
|
@@ -1111,7 +1180,7 @@ function ensureAbsolute(url) {
|
|
1111
1180
|
}
|
1112
1181
|
}
|
1113
1182
|
|
1114
|
-
var styles$7 = {"ext_links_container":"ExternalLinkList-module_ext_links_container__16IIo scope-externalLinks"};
|
1183
|
+
var styles$7 = {"contentColorScope":"colors-module_contentColorScope__3zLO1","ext_links_container":"ExternalLinkList-module_ext_links_container__16IIo scope-externalLinks colors-module_contentColorScope__3zLO1"};
|
1115
1184
|
|
1116
1185
|
function ExternalLinkList(props) {
|
1117
1186
|
var linkList = props.configuration.links || [];
|
@@ -1187,8 +1256,8 @@ function DataWrapperChart(_ref) {
|
|
1187
1256
|
}
|
1188
1257
|
|
1189
1258
|
var backgroundColor = configuration.backgroundColor || '#323d4d';
|
1190
|
-
return /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(
|
1191
|
-
|
1259
|
+
return /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(ContentElementFigure, {
|
1260
|
+
configuration: configuration
|
1192
1261
|
}, /*#__PURE__*/React.createElement("div", {
|
1193
1262
|
className: styles$8.container,
|
1194
1263
|
style: {
|
@@ -1201,8 +1270,7 @@ function DataWrapperChart(_ref) {
|
|
1201
1270
|
}, /*#__PURE__*/React.createElement(ThirdPartyOptIn, {
|
1202
1271
|
providerName: "datawrapper"
|
1203
1272
|
}, shouldLoad && renderIframe(srcURL, configuration.title || t('pageflow_scrolled.public.chart.default_title'))), /*#__PURE__*/React.createElement(DatawrapperOptOutInfo, {
|
1204
|
-
providerName: "datawrapper"
|
1205
|
-
contentElementPosition: configuration.position
|
1273
|
+
providerName: "datawrapper"
|
1206
1274
|
}))));
|
1207
1275
|
}
|
1208
1276
|
|
@@ -1295,7 +1363,8 @@ function useAutoCruising(_ref) {
|
|
1295
1363
|
}
|
1296
1364
|
|
1297
1365
|
function VrImage(_ref) {
|
1298
|
-
var configuration = _ref.configuration
|
1366
|
+
var configuration = _ref.configuration,
|
1367
|
+
contentElementWidth = _ref.contentElementWidth;
|
1299
1368
|
|
1300
1369
|
var _useContentElementLif = useContentElementLifecycle(),
|
1301
1370
|
shouldLoad = _useContentElementLif.shouldLoad;
|
@@ -1313,9 +1382,9 @@ function VrImage(_ref) {
|
|
1313
1382
|
pointerEvents: isEditable && !isSelected ? 'none' : undefined
|
1314
1383
|
}
|
1315
1384
|
}, /*#__PURE__*/React.createElement(FitViewport, {
|
1316
|
-
aspectRatio:
|
1317
|
-
}, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(
|
1318
|
-
|
1385
|
+
aspectRatio: contentElementWidth === contentElementWidths.full ? 0.5 : 0.75
|
1386
|
+
}, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(ContentElementFigure, {
|
1387
|
+
configuration: configuration
|
1319
1388
|
}, /*#__PURE__*/React.createElement(FitViewport.Content, null, renderLazyPanorama(configuration, imageFile, shouldLoad))))));
|
1320
1389
|
}
|
1321
1390
|
|
@@ -1401,13 +1470,25 @@ function IframeEmbed(_ref) {
|
|
1401
1470
|
}, /*#__PURE__*/React.createElement(FitViewport, {
|
1402
1471
|
aspectRatio: aspectRatios$1[aspectRatio || 'wide'],
|
1403
1472
|
opaque: utils.isBlank(configuration.source)
|
1404
|
-
}, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(
|
1405
|
-
|
1406
|
-
}, /*#__PURE__*/React.createElement(FitViewport.Content, null, shouldLoad && /*#__PURE__*/React.createElement("iframe", {
|
1473
|
+
}, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(ContentElementFigure, {
|
1474
|
+
configuration: configuration
|
1475
|
+
}, /*#__PURE__*/React.createElement(FitViewport.Content, null, /*#__PURE__*/React.createElement(ThirdPartyOptIn, null, shouldLoad && /*#__PURE__*/React.createElement("iframe", {
|
1407
1476
|
className: classNames(styles$9.iframe, styles$9["scale-".concat(configuration.scale)]),
|
1408
1477
|
title: configuration.title,
|
1409
1478
|
src: configuration.source
|
1410
|
-
})))
|
1479
|
+
}))), /*#__PURE__*/React.createElement(OptOutInfo, {
|
1480
|
+
configuration: configuration
|
1481
|
+
})))));
|
1482
|
+
}
|
1483
|
+
|
1484
|
+
function OptOutInfo(_ref2) {
|
1485
|
+
var configuration = _ref2.configuration;
|
1486
|
+
|
1487
|
+
if (!configuration.requireConsent) {
|
1488
|
+
return null;
|
1489
|
+
}
|
1490
|
+
|
1491
|
+
return /*#__PURE__*/React.createElement(ThirdPartyOptOutInfo, null);
|
1411
1492
|
}
|
1412
1493
|
|
1413
1494
|
frontend.contentElementTypes.register('iframeEmbed', {
|
@@ -1519,8 +1600,7 @@ function TwitterEmbed(_ref) {
|
|
1519
1600
|
})) : /*#__PURE__*/React.createElement(Placeholder, {
|
1520
1601
|
minHeight: minHeight[key]
|
1521
1602
|
}), /*#__PURE__*/React.createElement(ThirdPartyOptOutInfo, {
|
1522
|
-
providerName: "twitter"
|
1523
|
-
contentElementPosition: configuration.position
|
1603
|
+
providerName: "twitter"
|
1524
1604
|
})));
|
1525
1605
|
}
|
1526
1606
|
|
@@ -1597,7 +1677,7 @@ frontend.contentElementTypes.register('twitterEmbed', {
|
|
1597
1677
|
}
|
1598
1678
|
});
|
1599
1679
|
|
1600
|
-
var styles$c = {"details":"Question-module_details__3FxH-","layout-centerRagged":"Question-module_layout-centerRagged__1hovs"};
|
1680
|
+
var styles$c = {"contentLinkColor":"var(--content-link-color)","details":"Question-module_details__3FxH-","answer":"Question-module_answer__2jMt6","layout-centerRagged":"Question-module_layout-centerRagged__1hovs"};
|
1601
1681
|
|
1602
1682
|
function Question(_ref) {
|
1603
1683
|
var configuration = _ref.configuration,
|
@@ -1637,6 +1717,7 @@ function Question(_ref) {
|
|
1637
1717
|
}))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(EditableText, {
|
1638
1718
|
value: configuration.answer,
|
1639
1719
|
contentElementId: contentElementId,
|
1720
|
+
className: styles$c.answer,
|
1640
1721
|
onChange: function onChange(answer) {
|
1641
1722
|
return updateConfiguration({
|
1642
1723
|
answer: answer
|
@@ -1651,3 +1732,541 @@ function Question(_ref) {
|
|
1651
1732
|
frontend.contentElementTypes.register('question', {
|
1652
1733
|
component: Question
|
1653
1734
|
});
|
1735
|
+
|
1736
|
+
var styles$d = {"contentLinkColor":"var(--content-link-color)","wrapper":"Counter-module_wrapper__3XTil","number":"Counter-module_number__1Y4AV","centerRagged":"Counter-module_centerRagged__3Va0Y","center":"Counter-module_center__1SCJY","animation-fadeIn":"Counter-module_animation-fadeIn__3Hyky","animation-fadeIn-active":"Counter-module_animation-fadeIn-active__16DIk","animation-fadeInFromBelow":"Counter-module_animation-fadeInFromBelow__3l1qX","animation-fadeInFromAbove":"Counter-module_animation-fadeInFromAbove__3iGf-","animation-fadeInFromAbove-active":"Counter-module_animation-fadeInFromAbove-active__37UsW","animation-fadeInFromBelow-active":"Counter-module_animation-fadeInFromBelow-active__2CSjv","animation-fadeInScaleUp":"Counter-module_animation-fadeInScaleUp__1ngk5","animation-fadeInScaleDown":"Counter-module_animation-fadeInScaleDown__SpNGu","animation-fadeInScaleUp-active":"Counter-module_animation-fadeInScaleUp-active__1GEXn","animation-fadeInScaleDown-active":"Counter-module_animation-fadeInScaleDown-active__3gaYM"};
|
1737
|
+
|
1738
|
+
function Counter(_ref) {
|
1739
|
+
var configuration = _ref.configuration,
|
1740
|
+
contentElementId = _ref.contentElementId,
|
1741
|
+
contentElementWidth = _ref.contentElementWidth,
|
1742
|
+
sectionProps = _ref.sectionProps;
|
1743
|
+
var updateConfiguration = useContentElementConfigurationUpdate();
|
1744
|
+
var locale = useLocale();
|
1745
|
+
|
1746
|
+
var _useI18n = useI18n({
|
1747
|
+
locale: 'ui'
|
1748
|
+
}),
|
1749
|
+
t = _useI18n.t;
|
1750
|
+
|
1751
|
+
var targetValue = configuration.targetValue || 0;
|
1752
|
+
var decimalPlaces = configuration.decimalPlaces || 0;
|
1753
|
+
var startValue = configuration.startValue || 0;
|
1754
|
+
var countingDuration = countingDurations[configuration.countingSpeed];
|
1755
|
+
|
1756
|
+
var _useState = useState(countingDuration > 0 ? startValue : targetValue),
|
1757
|
+
_useState2 = _slicedToArray(_useState, 2),
|
1758
|
+
currentValue = _useState2[0],
|
1759
|
+
setCurrentValue = _useState2[1];
|
1760
|
+
|
1761
|
+
var _useState3 = useState(false),
|
1762
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
1763
|
+
animated = _useState4[0],
|
1764
|
+
setAnimated = _useState4[1];
|
1765
|
+
|
1766
|
+
var intervalRef = useRef();
|
1767
|
+
var timeoutRef = useRef();
|
1768
|
+
|
1769
|
+
var _useContentElementEdi = useContentElementEditorState(),
|
1770
|
+
isEditable = _useContentElementEdi.isEditable;
|
1771
|
+
|
1772
|
+
var animate = useCallback(function () {
|
1773
|
+
setAnimated(true);
|
1774
|
+
|
1775
|
+
if (!intervalRef.current && countingDuration > 0) {
|
1776
|
+
var startTime = new Date().getTime();
|
1777
|
+
var ease = configuration.entranceAnimation && configuration.entranceAnimation !== 'none' ? easeOut : easeInOut;
|
1778
|
+
intervalRef.current = setInterval(function () {
|
1779
|
+
var t = (new Date().getTime() - startTime) / countingDuration;
|
1780
|
+
|
1781
|
+
if (t < 1) {
|
1782
|
+
setCurrentValue(startValue + (targetValue - startValue) * ease(t));
|
1783
|
+
} else {
|
1784
|
+
clearInterval(intervalRef.current);
|
1785
|
+
setCurrentValue(targetValue);
|
1786
|
+
}
|
1787
|
+
}, 10);
|
1788
|
+
}
|
1789
|
+
}, [targetValue, startValue, countingDuration, configuration.entranceAnimation]);
|
1790
|
+
var resetAnimation = useCallback(function () {
|
1791
|
+
clearInterval(intervalRef.current);
|
1792
|
+
intervalRef.current = null;
|
1793
|
+
setCurrentValue(countingDuration > 0 ? startValue : targetValue);
|
1794
|
+
setAnimated(false);
|
1795
|
+
}, [startValue, targetValue, countingDuration]);
|
1796
|
+
useEffect(function () {
|
1797
|
+
if (isEditable) {
|
1798
|
+
resetAnimation();
|
1799
|
+
clearTimeout(timeoutRef.current);
|
1800
|
+
timeoutRef.current = setTimeout(animate, 500);
|
1801
|
+
}
|
1802
|
+
}, [animate, resetAnimation, isEditable]);
|
1803
|
+
useContentElementLifecycle({
|
1804
|
+
onActivate: function onActivate() {
|
1805
|
+
animate();
|
1806
|
+
},
|
1807
|
+
onInvisible: function onInvisible() {
|
1808
|
+
if (isEditable) {
|
1809
|
+
resetAnimation();
|
1810
|
+
}
|
1811
|
+
}
|
1812
|
+
});
|
1813
|
+
|
1814
|
+
function format(value) {
|
1815
|
+
var localeString = value.toLocaleString(locale, {
|
1816
|
+
minimumFractionDigits: decimalPlaces,
|
1817
|
+
maximumFractionDigits: decimalPlaces
|
1818
|
+
});
|
1819
|
+
var unit = configuration.unit || '';
|
1820
|
+
return configuration.unitPlacement === 'leading' ? "".concat(unit).concat(localeString) : "".concat(localeString).concat(unit);
|
1821
|
+
}
|
1822
|
+
|
1823
|
+
return /*#__PURE__*/React.createElement("div", {
|
1824
|
+
className: classNames(_defineProperty({}, styles$d.center, contentElementWidth > contentElementWidths.md))
|
1825
|
+
}, /*#__PURE__*/React.createElement("div", {
|
1826
|
+
className: classNames(styles$d.wrapper, _defineProperty({}, styles$d.centerRagged, sectionProps.layout === 'centerRagged'))
|
1827
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
1828
|
+
scaleCategory: numberScaleCategories[configuration.textSize || 'medium']
|
1829
|
+
}, /*#__PURE__*/React.createElement("div", {
|
1830
|
+
className: classNames("typography-counter-".concat(configuration.typographyVariant), styles$d.number, styles$d["animation-".concat(configuration.entranceAnimation)], _defineProperty({}, styles$d["animation-".concat(configuration.entranceAnimation, "-active")], animated)),
|
1831
|
+
style: {
|
1832
|
+
'--counting-duration': "".concat(countingDuration || 1000, "ms"),
|
1833
|
+
'--palette-color': paletteColor(configuration.numberColor)
|
1834
|
+
}
|
1835
|
+
}, format(currentValue))), /*#__PURE__*/React.createElement(EditableText, {
|
1836
|
+
value: configuration.description,
|
1837
|
+
contentElementId: contentElementId,
|
1838
|
+
className: styles$d.description,
|
1839
|
+
onChange: function onChange(description) {
|
1840
|
+
return updateConfiguration({
|
1841
|
+
description: description
|
1842
|
+
});
|
1843
|
+
},
|
1844
|
+
onlyParagraphs: true,
|
1845
|
+
scaleCategory: "counterDescription",
|
1846
|
+
placeholder: t('pageflow_scrolled.inline_editing.type_description')
|
1847
|
+
})));
|
1848
|
+
}
|
1849
|
+
var numberScaleCategories = {
|
1850
|
+
verySmall: 'counterNumber-xs',
|
1851
|
+
small: 'counterNumber-sm',
|
1852
|
+
medium: 'counterNumber-md',
|
1853
|
+
large: 'counterNumber-lg'
|
1854
|
+
};
|
1855
|
+
var countingDurations = {
|
1856
|
+
none: 0,
|
1857
|
+
fast: 500,
|
1858
|
+
medium: 2000,
|
1859
|
+
slow: 5000
|
1860
|
+
};
|
1861
|
+
|
1862
|
+
function easeInOut(t) {
|
1863
|
+
t = t * 2;
|
1864
|
+
if (t < 1) return Math.pow(t, 2) / 2;
|
1865
|
+
t = t - 1;
|
1866
|
+
return t - Math.pow(t, 2) / 2 + 1 / 2;
|
1867
|
+
}
|
1868
|
+
|
1869
|
+
function easeOut(t) {
|
1870
|
+
return (t - Math.pow(t, 2) / 2) * 2;
|
1871
|
+
}
|
1872
|
+
|
1873
|
+
frontend.contentElementTypes.register('counter', {
|
1874
|
+
component: Counter,
|
1875
|
+
lifecycle: true
|
1876
|
+
});
|
1877
|
+
|
1878
|
+
var styles$e = {"breakpoint-sm":"(min-width: 640px)","contentLinkColor":"var(--content-link-color)","figure":"Quote-module_figure__1Q3tJ","design-largeCentered":"Quote-module_design-largeCentered__2f6qW","text":"Quote-module_text__C0md2","design-largeHanging":"Quote-module_design-largeHanging__1TVQh","design-hanging":"Quote-module_design-hanging__4aDVU","centerRagged":"Quote-module_centerRagged__1CeFH","maskedMark":"Quote-module_maskedMark__2n08e","attribution":"Quote-module_attribution__3iXxu"};
|
1879
|
+
|
1880
|
+
function Quote(_ref) {
|
1881
|
+
var _theme$options$proper, _theme$options$proper2;
|
1882
|
+
|
1883
|
+
var configuration = _ref.configuration,
|
1884
|
+
contentElementId = _ref.contentElementId,
|
1885
|
+
sectionProps = _ref.sectionProps;
|
1886
|
+
var updateConfiguration = useContentElementConfigurationUpdate();
|
1887
|
+
|
1888
|
+
var _useContentElementEdi = useContentElementEditorState(),
|
1889
|
+
isSelected = _useContentElementEdi.isSelected;
|
1890
|
+
|
1891
|
+
var theme = useTheme();
|
1892
|
+
|
1893
|
+
var _useI18n = useI18n({
|
1894
|
+
locale: 'ui'
|
1895
|
+
}),
|
1896
|
+
t = _useI18n.t;
|
1897
|
+
|
1898
|
+
var design = configuration.variant ? configuration.variant.split('-')[0] : theme.options.quoteDesign;
|
1899
|
+
return /*#__PURE__*/React.createElement("figure", {
|
1900
|
+
className: classNames(styles$e.figure, styles$e["design-".concat(design || 'largeHanging')], "scope-quote-".concat(configuration.variant), _defineProperty({}, styles$e.maskedMark, (_theme$options$proper = theme.options.properties) === null || _theme$options$proper === void 0 ? void 0 : (_theme$options$proper2 = _theme$options$proper.root) === null || _theme$options$proper2 === void 0 ? void 0 : _theme$options$proper2.quoteLeftMarkMaskImage), _defineProperty({}, styles$e.centerRagged, sectionProps.layout === 'centerRagged')),
|
1901
|
+
style: {
|
1902
|
+
'--palette-color': paletteColor(configuration.color)
|
1903
|
+
}
|
1904
|
+
}, /*#__PURE__*/React.createElement("blockquote", {
|
1905
|
+
className: styles$e.text
|
1906
|
+
}, /*#__PURE__*/React.createElement(EditableText, {
|
1907
|
+
value: configuration.text,
|
1908
|
+
contentElementId: contentElementId,
|
1909
|
+
onChange: function onChange(text) {
|
1910
|
+
return updateConfiguration({
|
1911
|
+
text: text
|
1912
|
+
});
|
1913
|
+
},
|
1914
|
+
onlyParagraphs: true,
|
1915
|
+
scaleCategory: getTextScaleCategory(configuration)
|
1916
|
+
})), (isSelected || !utils.isBlankEditableTextValue(configuration.attribution || [])) && /*#__PURE__*/React.createElement("figcaption", {
|
1917
|
+
className: styles$e.attribution
|
1918
|
+
}, /*#__PURE__*/React.createElement(EditableText, {
|
1919
|
+
value: configuration.attribution,
|
1920
|
+
contentElementId: contentElementId,
|
1921
|
+
onChange: function onChange(attribution) {
|
1922
|
+
return updateConfiguration({
|
1923
|
+
attribution: attribution
|
1924
|
+
});
|
1925
|
+
},
|
1926
|
+
onlyParagraphs: true,
|
1927
|
+
scaleCategory: "quoteAttribution",
|
1928
|
+
placeholder: t('pageflow_scrolled.inline_editing.type_attribution')
|
1929
|
+
})));
|
1930
|
+
}
|
1931
|
+
|
1932
|
+
function getTextScaleCategory(configuration) {
|
1933
|
+
switch (configuration.textSize) {
|
1934
|
+
case 'large':
|
1935
|
+
return 'quoteText-lg';
|
1936
|
+
|
1937
|
+
case 'small':
|
1938
|
+
return 'quoteText-sm';
|
1939
|
+
|
1940
|
+
case 'verySmall':
|
1941
|
+
return 'quoteText-xs';
|
1942
|
+
|
1943
|
+
default:
|
1944
|
+
return 'quoteText-md';
|
1945
|
+
}
|
1946
|
+
}
|
1947
|
+
|
1948
|
+
frontend.contentElementTypes.register('quote', {
|
1949
|
+
component: Quote
|
1950
|
+
});
|
1951
|
+
|
1952
|
+
function ownKeys(object, enumerableOnly) {
|
1953
|
+
var keys = Object.keys(object);
|
1954
|
+
|
1955
|
+
if (Object.getOwnPropertySymbols) {
|
1956
|
+
var symbols = Object.getOwnPropertySymbols(object);
|
1957
|
+
if (enumerableOnly) symbols = symbols.filter(function (sym) {
|
1958
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
1959
|
+
});
|
1960
|
+
keys.push.apply(keys, symbols);
|
1961
|
+
}
|
1962
|
+
|
1963
|
+
return keys;
|
1964
|
+
}
|
1965
|
+
|
1966
|
+
function _objectSpread2(target) {
|
1967
|
+
for (var i = 1; i < arguments.length; i++) {
|
1968
|
+
var source = arguments[i] != null ? arguments[i] : {};
|
1969
|
+
|
1970
|
+
if (i % 2) {
|
1971
|
+
ownKeys(Object(source), true).forEach(function (key) {
|
1972
|
+
_defineProperty(target, key, source[key]);
|
1973
|
+
});
|
1974
|
+
} else if (Object.getOwnPropertyDescriptors) {
|
1975
|
+
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
1976
|
+
} else {
|
1977
|
+
ownKeys(Object(source)).forEach(function (key) {
|
1978
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
1979
|
+
});
|
1980
|
+
}
|
1981
|
+
}
|
1982
|
+
|
1983
|
+
return target;
|
1984
|
+
}
|
1985
|
+
|
1986
|
+
var styles$f = {"button":"ScrollButton-module_button__3DeL7","left":"ScrollButton-module_left__3uACk","right":"ScrollButton-module_right__25CLO","disabled":"ScrollButton-module_disabled__3fQR1","icon":"ScrollButton-module_icon__35w1l"};
|
1987
|
+
|
1988
|
+
var size = 40;
|
1989
|
+
function ScrollButton(_ref) {
|
1990
|
+
var direction = _ref.direction,
|
1991
|
+
disabled = _ref.disabled,
|
1992
|
+
onClick = _ref.onClick;
|
1993
|
+
return /*#__PURE__*/React.createElement("button", {
|
1994
|
+
className: classNames(styles$f.button, styles$f[direction], _defineProperty({}, styles$f.disabled, disabled)),
|
1995
|
+
onClick: onClick
|
1996
|
+
}, /*#__PURE__*/React.createElement("div", {
|
1997
|
+
className: styles$f.icon
|
1998
|
+
}, /*#__PURE__*/React.createElement(ThemeIcon, {
|
1999
|
+
name: direction === 'left' ? 'arrowLeft' : 'arrowRight',
|
2000
|
+
width: size,
|
2001
|
+
height: size
|
2002
|
+
})));
|
2003
|
+
}
|
2004
|
+
|
2005
|
+
function useIntersectionObserver(_ref) {
|
2006
|
+
var threshold = _ref.threshold,
|
2007
|
+
onVisibleIndexChange = _ref.onVisibleIndexChange;
|
2008
|
+
var containerRef = useRef();
|
2009
|
+
var childRefs = useRef([]);
|
2010
|
+
var observerRef = useRef();
|
2011
|
+
useEffect(function () {
|
2012
|
+
var observer = observerRef.current = new IntersectionObserver(function (entries) {
|
2013
|
+
var containerElement = containerRef.current;
|
2014
|
+
entries.forEach(function (entry) {
|
2015
|
+
var entryIndex = Array.from(containerElement.children).findIndex(function (child) {
|
2016
|
+
return child === entry.target;
|
2017
|
+
});
|
2018
|
+
|
2019
|
+
if (entry.isIntersecting) {
|
2020
|
+
onVisibleIndexChange(entryIndex);
|
2021
|
+
}
|
2022
|
+
});
|
2023
|
+
}, {
|
2024
|
+
root: containerRef.current,
|
2025
|
+
threshold: threshold
|
2026
|
+
});
|
2027
|
+
childRefs.current.forEach(function (child) {
|
2028
|
+
if (child) {
|
2029
|
+
observer.observe(child);
|
2030
|
+
}
|
2031
|
+
});
|
2032
|
+
return function () {
|
2033
|
+
observer.disconnect();
|
2034
|
+
};
|
2035
|
+
}, [threshold, onVisibleIndexChange]);
|
2036
|
+
|
2037
|
+
var setChildRef = function setChildRef(index) {
|
2038
|
+
return function (ref) {
|
2039
|
+
if (observerRef.current) {
|
2040
|
+
if (ref) {
|
2041
|
+
observerRef.current.observe(ref);
|
2042
|
+
} else {
|
2043
|
+
observerRef.current.unobserve(childRefs.current[index]);
|
2044
|
+
}
|
2045
|
+
}
|
2046
|
+
|
2047
|
+
childRefs.current[index] = ref;
|
2048
|
+
};
|
2049
|
+
};
|
2050
|
+
|
2051
|
+
return {
|
2052
|
+
containerRef: containerRef,
|
2053
|
+
setChildRef: setChildRef
|
2054
|
+
};
|
2055
|
+
}
|
2056
|
+
|
2057
|
+
var styles$g = {"lightContentTextColor":"var(--theme-light-content-text-color, #fff)","contentLinkColor":"var(--content-link-color)","wrapper":"ImageGallery-module_wrapper__2H9en","wide":"ImageGallery-module_wide__xGLuJ","customMargin":"ImageGallery-module_customMargin__1VxM6","button":"ImageGallery-module_button__35bDf","leftButton":"ImageGallery-module_leftButton__3V-J6 ImageGallery-module_button__35bDf","rightButton":"ImageGallery-module_rightButton__ba0q5 ImageGallery-module_button__35bDf","items":"ImageGallery-module_items__1q4QG","item":"ImageGallery-module_item__iqvfP","current":"ImageGallery-module_current__2Mm11","figure":"ImageGallery-module_figure__3zkJb","placeholder":"ImageGallery-module_placeholder__39Vq4"};
|
2058
|
+
|
2059
|
+
function ImageGallery(_ref) {
|
2060
|
+
var configuration = _ref.configuration,
|
2061
|
+
contentElementId = _ref.contentElementId,
|
2062
|
+
contentElementWidth = _ref.contentElementWidth,
|
2063
|
+
customMargin = _ref.customMargin;
|
2064
|
+
|
2065
|
+
var _useState = useState(-1),
|
2066
|
+
_useState2 = _slicedToArray(_useState, 2),
|
2067
|
+
visibleIndex = _useState2[0],
|
2068
|
+
setVisibleIndex = _useState2[1];
|
2069
|
+
|
2070
|
+
var isPhonePlatform = usePhonePlatform();
|
2071
|
+
return /*#__PURE__*/React.createElement(FullscreenViewer, {
|
2072
|
+
contentElementId: contentElementId,
|
2073
|
+
renderChildren: function renderChildren(_ref2) {
|
2074
|
+
var enterFullscreen = _ref2.enterFullscreen,
|
2075
|
+
isFullscreen = _ref2.isFullscreen;
|
2076
|
+
return /*#__PURE__*/React.createElement(Scroller, {
|
2077
|
+
customMargin: customMargin,
|
2078
|
+
configuration: configuration,
|
2079
|
+
contentElementWidth: contentElementWidth,
|
2080
|
+
controlled: isFullscreen,
|
2081
|
+
displayFullscreenToggle: !isPhonePlatform && contentElementWidth !== contentElementWidths.full && configuration.enableFullscreenOnDesktop,
|
2082
|
+
visibleIndex: visibleIndex,
|
2083
|
+
setVisibleIndex: setVisibleIndex,
|
2084
|
+
onFullscreenEnter: enterFullscreen
|
2085
|
+
});
|
2086
|
+
},
|
2087
|
+
renderFullscreenChildren: function renderFullscreenChildren(_ref3) {
|
2088
|
+
var exitFullscreen = _ref3.exitFullscreen;
|
2089
|
+
return /*#__PURE__*/React.createElement(Scroller, {
|
2090
|
+
configuration: configuration,
|
2091
|
+
contentElementWidth: contentElementWidth,
|
2092
|
+
visibleIndex: visibleIndex,
|
2093
|
+
setVisibleIndex: setVisibleIndex,
|
2094
|
+
displayFullscreenToggle: false,
|
2095
|
+
onBump: exitFullscreen,
|
2096
|
+
onFullscreenExit: exitFullscreen
|
2097
|
+
});
|
2098
|
+
}
|
2099
|
+
});
|
2100
|
+
}
|
2101
|
+
|
2102
|
+
function Scroller(_ref4) {
|
2103
|
+
var visibleIndex = _ref4.visibleIndex,
|
2104
|
+
setVisibleIndex = _ref4.setVisibleIndex,
|
2105
|
+
displayFullscreenToggle = _ref4.displayFullscreenToggle,
|
2106
|
+
customMargin = _ref4.customMargin,
|
2107
|
+
onFullscreenEnter = _ref4.onFullscreenEnter,
|
2108
|
+
onFullscreenExit = _ref4.onFullscreenExit,
|
2109
|
+
onBump = _ref4.onBump,
|
2110
|
+
configuration = _ref4.configuration,
|
2111
|
+
contentElementWidth = _ref4.contentElementWidth,
|
2112
|
+
controlled = _ref4.controlled;
|
2113
|
+
var lastVisibleIndex = useRef(null);
|
2114
|
+
|
2115
|
+
var _useContentElementEdi = useContentElementEditorState(),
|
2116
|
+
isSelected = _useContentElementEdi.isSelected,
|
2117
|
+
isEditable = _useContentElementEdi.isEditable;
|
2118
|
+
|
2119
|
+
var items = configuration.items || [];
|
2120
|
+
|
2121
|
+
if (!items.length && isEditable) {
|
2122
|
+
items = [{
|
2123
|
+
id: 1,
|
2124
|
+
placeholder: true
|
2125
|
+
}];
|
2126
|
+
}
|
2127
|
+
|
2128
|
+
var onVisibleIndexChange = useCallback(function (index) {
|
2129
|
+
if (!controlled) {
|
2130
|
+
lastVisibleIndex.current = index;
|
2131
|
+
setVisibleIndex(index);
|
2132
|
+
}
|
2133
|
+
}, [controlled, setVisibleIndex]);
|
2134
|
+
|
2135
|
+
var _useIntersectionObser = useIntersectionObserver({
|
2136
|
+
onVisibleIndexChange: onVisibleIndexChange,
|
2137
|
+
threshold: 0.7
|
2138
|
+
}),
|
2139
|
+
scrollerRef = _useIntersectionObser.containerRef,
|
2140
|
+
setChildRef = _useIntersectionObser.setChildRef;
|
2141
|
+
|
2142
|
+
useEffect(function () {
|
2143
|
+
if (lastVisibleIndex.current !== visibleIndex && visibleIndex >= 0 && (controlled || lastVisibleIndex.current === null)) {
|
2144
|
+
lastVisibleIndex.current = visibleIndex;
|
2145
|
+
var scroller = scrollerRef.current;
|
2146
|
+
var item = scroller.children[visibleIndex];
|
2147
|
+
scroller.style.scrollBehavior = 'auto';
|
2148
|
+
scroller.scrollTo(Math.abs(scroller.offsetLeft - item.offsetLeft), 0);
|
2149
|
+
scroller.style.scrollBehavior = null;
|
2150
|
+
}
|
2151
|
+
}, [visibleIndex, scrollerRef, controlled]);
|
2152
|
+
|
2153
|
+
function scrollBy(delta) {
|
2154
|
+
var scroller = scrollerRef.current;
|
2155
|
+
var child = scroller.children[visibleIndex + delta];
|
2156
|
+
|
2157
|
+
if (child) {
|
2158
|
+
scrollerRef.current.scrollTo(child.offsetLeft - scroller.offsetLeft, 0);
|
2159
|
+
}
|
2160
|
+
}
|
2161
|
+
|
2162
|
+
function handleClick(event) {
|
2163
|
+
if (isEditable && !isSelected) {
|
2164
|
+
return;
|
2165
|
+
}
|
2166
|
+
|
2167
|
+
var rect = scrollerRef.current.getBoundingClientRect();
|
2168
|
+
|
2169
|
+
if ((event.pageX - rect.x) / rect.width < 0.5) {
|
2170
|
+
if (visibleIndex > 0) {
|
2171
|
+
scrollBy(-1);
|
2172
|
+
} else if (onBump) {
|
2173
|
+
onBump();
|
2174
|
+
}
|
2175
|
+
} else {
|
2176
|
+
if (visibleIndex < items.length - 1) {
|
2177
|
+
scrollBy(1);
|
2178
|
+
} else if (onBump) {
|
2179
|
+
onBump();
|
2180
|
+
}
|
2181
|
+
}
|
2182
|
+
}
|
2183
|
+
|
2184
|
+
return /*#__PURE__*/React.createElement("div", {
|
2185
|
+
className: classNames(styles$g.wrapper, _defineProperty({}, styles$g.wide, contentElementWidth === contentElementWidths.lg || contentElementWidth === contentElementWidths.xl), _defineProperty({}, styles$g.customMargin, customMargin))
|
2186
|
+
}, /*#__PURE__*/React.createElement("div", {
|
2187
|
+
className: styles$g.leftButton
|
2188
|
+
}, /*#__PURE__*/React.createElement(ScrollButton, {
|
2189
|
+
direction: "left",
|
2190
|
+
disabled: visibleIndex <= 0,
|
2191
|
+
onClick: function onClick() {
|
2192
|
+
return scrollBy(-1);
|
2193
|
+
}
|
2194
|
+
})), /*#__PURE__*/React.createElement("div", {
|
2195
|
+
className: styles$g.rightButton
|
2196
|
+
}, /*#__PURE__*/React.createElement(ScrollButton, {
|
2197
|
+
direction: "right",
|
2198
|
+
disabled: visibleIndex >= items.length - 1,
|
2199
|
+
onClick: function onClick() {
|
2200
|
+
return scrollBy(1);
|
2201
|
+
}
|
2202
|
+
})), /*#__PURE__*/React.createElement("div", {
|
2203
|
+
className: styles$g.items,
|
2204
|
+
ref: scrollerRef
|
2205
|
+
}, items.map(function (item, index) {
|
2206
|
+
return /*#__PURE__*/React.createElement(Item, {
|
2207
|
+
key: item.id,
|
2208
|
+
ref: setChildRef(index),
|
2209
|
+
item: item,
|
2210
|
+
current: index === visibleIndex,
|
2211
|
+
captions: configuration.captions || {},
|
2212
|
+
onClick: handleClick
|
2213
|
+
}, displayFullscreenToggle && /*#__PURE__*/React.createElement(ToggleFullscreenCornerButton, {
|
2214
|
+
isFullscreen: false,
|
2215
|
+
onEnter: onFullscreenEnter
|
2216
|
+
}));
|
2217
|
+
})));
|
2218
|
+
}
|
2219
|
+
|
2220
|
+
var Item = forwardRef(function (_ref5, ref) {
|
2221
|
+
var _classNames3;
|
2222
|
+
|
2223
|
+
var item = _ref5.item,
|
2224
|
+
captions = _ref5.captions,
|
2225
|
+
current = _ref5.current,
|
2226
|
+
onClick = _ref5.onClick,
|
2227
|
+
children = _ref5.children;
|
2228
|
+
var updateConfiguration = useContentElementConfigurationUpdate();
|
2229
|
+
|
2230
|
+
var _useContentElementLif = useContentElementLifecycle(),
|
2231
|
+
shouldLoad = _useContentElementLif.shouldLoad;
|
2232
|
+
|
2233
|
+
var caption = captions[item.id];
|
2234
|
+
var imageFile = useFile({
|
2235
|
+
collectionName: 'imageFiles',
|
2236
|
+
permaId: item.image
|
2237
|
+
});
|
2238
|
+
|
2239
|
+
var handleCaptionChange = function handleCaptionChange(caption) {
|
2240
|
+
updateConfiguration({
|
2241
|
+
captions: _objectSpread2(_objectSpread2({}, captions), {}, _defineProperty({}, item.id, caption))
|
2242
|
+
});
|
2243
|
+
};
|
2244
|
+
|
2245
|
+
return /*#__PURE__*/React.createElement("div", {
|
2246
|
+
className: classNames(styles$g.item, (_classNames3 = {}, _defineProperty(_classNames3, styles$g.current, current), _defineProperty(_classNames3, styles$g.placeholder, item.placeholder), _classNames3)),
|
2247
|
+
ref: ref
|
2248
|
+
}, /*#__PURE__*/React.createElement("div", {
|
2249
|
+
className: styles$g.figure
|
2250
|
+
}, /*#__PURE__*/React.createElement(FitViewport, {
|
2251
|
+
file: imageFile,
|
2252
|
+
aspectRatio: imageFile ? undefined : 0.75,
|
2253
|
+
scale: 0.8,
|
2254
|
+
opaque: !imageFile
|
2255
|
+
}, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(Figure, {
|
2256
|
+
caption: caption,
|
2257
|
+
onCaptionChange: handleCaptionChange,
|
2258
|
+
addCaptionButtonVisible: current && !item.placeholder,
|
2259
|
+
addCaptionButtonPosition: "inside"
|
2260
|
+
}, /*#__PURE__*/React.createElement(FitViewport.Content, null, /*#__PURE__*/React.createElement("div", {
|
2261
|
+
onClick: onClick
|
2262
|
+
}, /*#__PURE__*/React.createElement(Image, {
|
2263
|
+
imageFile: imageFile,
|
2264
|
+
load: shouldLoad
|
2265
|
+
})), children))))));
|
2266
|
+
});
|
2267
|
+
|
2268
|
+
frontend.contentElementTypes.register('imageGallery', {
|
2269
|
+
component: ImageGallery,
|
2270
|
+
lifecycle: true,
|
2271
|
+
customMargin: true
|
2272
|
+
});
|