pageflow 15.3.0 → 15.4.0

data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/install_generator.rb

@@ -24,6 +24,11 @@ module PageflowScrolled
         gsub_file('config/webpacker.yml',
                   'extract_css: false',
                   'extract_css: true')
+
+        inject_into_file('config/webpacker.yml',
+                         after: "- .woff2\n") do
+          "    - .mp3\n    - .webmanifest\n    - .xml\n"
+        end
       end
 
       def editor_pack

data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/packs/media/pageflow-scrolled/themes/default/favicons/mstile-150x150-b864e2984146784ebc748b287926ef50.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/safari-pinned-tab.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="678.000000pt" height="678.000000pt" viewBox="0 0 678.000000 678.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,678.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M3879 5786 c-2 -2 -42 -7 -89 -10 -47 -3 -96 -8 -110 -11 -14 -3 -41
+-8 -60 -11 -41 -7 -113 -28 -190 -56 -54 -19 -220 -97 -230 -108 -3 -3 -21
+-14 -40 -24 -119 -65 -214 -149 -648 -581 -327 -325 -474 -478 -528 -550 -41
+-55 -79 -105 -84 -111 -18 -23 -100 -181 -129 -250 -38 -89 -77 -224 -88 -301
+-10 -70 -9 -306 0 -348 4 -16 10 -46 13 -65 3 -19 10 -43 15 -52 5 -10 7 -18
+5 -18 -10 0 46 -136 86 -210 92 -172 123 -205 1073 -1158 l920 -923 480 482
+c482 483 537 546 634 711 39 67 111 227 111 247 0 6 4 19 10 29 8 16 46 178
+49 212 21 250 -13 446 -110 641 -42 85 -138 230 -181 272 -33 33 -35 46 -10
+73 17 18 74 96 97 132 60 94 142 251 150 287 1 5 7 23 14 39 14 34 49 167 57
+217 14 80 13 296 -1 368 -21 105 -60 221 -105 310 -38 76 -134 224 -167 259
+-10 10 -43 45 -74 78 -163 173 -331 289 -510 355 -109 40 -186 57 -290 64 -26
+1 -51 5 -57 9 -5 3 -11 4 -13 2z m141 -206 c80 -15 167 -44 242 -81 60 -30
+203 -125 235 -156 19 -18 0 -37 -809 -848 -501 -503 -852 -862 -888 -910 -33
+-44 -64 -85 -68 -90 -5 -6 -11 -15 -13 -20 -2 -6 -21 -39 -41 -75 -33 -58
+-102 -211 -113 -252 -2 -5 -4 -10 -5 -13 -1 -3 -3 -8 -4 -12 -2 -5 -8 -26 -14
+-48 -6 -22 -14 -53 -16 -70 -3 -16 -9 -41 -12 -55 -12 -52 -12 -301 1 -355 7
+-30 9 -55 5 -55 -13 0 -435 435 -465 480 -16 25 -35 50 -42 57 -20 22 -112
+217 -123 263 -46 190 -47 336 -4 504 42 161 143 357 258 501 40 50 888 902
+936 940 76 61 273 186 300 191 3 0 30 12 60 26 179 83 395 112 580 78z m693
+-466 c187 -249 246 -497 191 -789 -22 -116 -138 -374 -206 -460 -5 -5 -27 -35
+-50 -65 -23 -30 -240 -255 -482 -498 -502 -505 -448 -449 -507 -527 -159 -209
+-266 -461 -294 -690 -6 -53 -7 -191 0 -235 2 -19 7 -56 10 -82 4 -26 10 -62
+16 -80 7 -27 -35 11 -219 198 -250 253 -253 257 -304 329 -83 117 -161 302
+-175 415 -11 86 -5 255 11 325 9 39 19 81 22 95 3 13 10 30 16 37 6 7 8 13 5
+13 -4 0 6 28 22 63 15 34 34 77 42 95 7 17 17 32 20 32 4 0 9 8 12 19 2 10 31
+58 63 107 50 77 175 207 898 932 462 463 843 842 847 842 3 0 31 -34 62 -76z
+m-34 -1678 c28 -35 51 -68 51 -74 0 -6 4 -12 8 -14 24 -9 127 -231 138 -298 3
+-14 7 -32 10 -40 17 -48 22 -213 9 -310 -10 -72 -48 -204 -80 -273 -14 -31
+-25 -58 -25 -60 0 -7 -82 -151 -90 -157 -3 -3 -18 -25 -34 -49 -43 -66 -61
+-85 -469 -495 l-378 -379 -29 33 c-16 18 -42 51 -57 74 -15 22 -31 42 -35 44
+-5 2 -8 8 -8 13 0 5 -11 26 -24 47 -27 44 -93 204 -100 247 -3 17 -9 51 -14
+76 -21 110 -6 263 42 449 8 29 77 185 98 220 105 174 132 206 532 608 220 221
+401 402 402 402 1 0 25 -29 53 -64z"/>
+</g>
+</svg>

data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/packs/media/pageflow-scrolled/themes/default/favicons/android-chrome-192x192-51c13a8bffeb2de9cad6501969363159.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/packs/media/pageflow-scrolled/themes/default/favicons/android-chrome-512x512-a4f131c6059e0d4b2f15e5f9aecfcf16.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

data/entry_types/scrolled/lib/tasks/pageflow_scrolled_tasks.rake

@@ -7,6 +7,7 @@ namespace :pageflow_scrolled do
 
   namespace :storybook do
     namespace :seed do
+      desc 'Recreate storybook entry and set up storybook JSON seed from it'
       task :setup, [:output] => [:destroy_entry, :create_entry, :generate_json]
 
       desc 'Destroy entry to generate Storybook entry JSON seed from'

data/entry_types/scrolled/package/contentElements-editor.js

@@ -79,8 +79,13 @@ editor.contentElementTypes.register('textBlock', {
     })];
   },
   merge: function merge(configurationA, configurationB) {
+    // Value might still be empty if text block has not been edited
+    var value = (configurationA.value || []).concat(configurationB.value || []);
     return _objectSpread2(_objectSpread2({}, configurationA), {}, {
-      value: configurationA.value.concat(configurationB.value)
+      // Slate.js does not like empty arrays as value.
+      // `inlineEditing/EditableText` sets default value, but only if
+      // `value` is falsy.
+      value: value.length ? value : undefined
     });
   },
   handleDestroy: function handleDestroy(contentElement) {
@@ -464,6 +469,14 @@ editor.contentElementTypes.register('dataWrapperChart', {
         permitHttps: true
       });
       this.view(DatawrapperAdView);
+      this.input('title', TextInputView, {
+        placeholder: I18n.t('pageflow_scrolled.public.chart.default_title')
+      });
+      this.input('backgroundColor', ColorInputView, {
+        defaultValue: '#323d4d'
+      });
+      this.group('ContentElementCaption');
+      this.group('ContentElementPosition');
     });
   }
 });

data/entry_types/scrolled/package/contentElements-frontend.css

@@ -1 +1 @@
-.Heading-module_root__33TFw{margin-top:.2em;margin-bottom:0;padding-top:.3em}@media (orientation:landscape){.Heading-module_first__1PMJX{padding-top:25%}}.BeforeAfter-module_sliderStart__2C5cN{background-color:#fff;position:absolute;z-index:1}.BeforeAfter-module_container__2Lm06{--frame1pos:-8;--frame2pos:16;--frame3pos:-32;--frame4pos:32;--frame1px:calc(var(--frame1pos)*1px);--frame2px:calc(var(--frame2pos)*1px);--frame3px:calc(var(--frame3pos)*1px);--frame4px:calc(var(--frame4pos)*1px)}.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe div div:nth-child(3){-webkit-animation:BeforeAfter-module_SliderLeftRightShake__2mcn5 1.5s cubic-bezier(.36,.07,.19,.97) both;animation:BeforeAfter-module_SliderLeftRightShake__2mcn5 1.5s cubic-bezier(.36,.07,.19,.97) both}.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe div img:nth-child(2){-webkit-animation:BeforeAfter-module_BeforeImageLeftRightShake__38m9V 1.5s cubic-bezier(.36,.07,.19,.97) both;animation:BeforeAfter-module_BeforeImageLeftRightShake__38m9V 1.5s cubic-bezier(.36,.07,.19,.97) both}.BeforeAfter-module_container__2Lm06 div div:nth-child(4) div{transition:opacity .1s ease-out .3s!important}.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe div img:first-child{-webkit-animation:BeforeAfter-module_AfterImageLeftRightShake__3WMf1 1.5s cubic-bezier(.36,.07,.19,.97) both;animation:BeforeAfter-module_AfterImageLeftRightShake__3WMf1 1.5s cubic-bezier(.36,.07,.19,.97) both}.BeforeAfter-module_container__2Lm06 div div:nth-child(5) div{transition:opacity .1s ease-out .3s!important}@-webkit-keyframes BeforeAfter-module_BeforeImageLeftRightShake__38m9V{10%,90%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame1px)),auto,auto)}20%,80%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame2px)),auto,auto)}30%,50%,70%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame3px)),auto,auto)}40%,60%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame4px)),auto,auto)}}@keyframes BeforeAfter-module_BeforeImageLeftRightShake__38m9V{10%,90%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame1px)),auto,auto)}20%,80%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame2px)),auto,auto)}30%,50%,70%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame3px)),auto,auto)}40%,60%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame4px)),auto,auto)}}@-webkit-keyframes BeforeAfter-module_AfterImageLeftRightShake__3WMf1{10%,90%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame1px)))}20%,80%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame2px)))}30%,50%,70%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame3px)))}40%,60%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame4px)))}}@keyframes BeforeAfter-module_AfterImageLeftRightShake__3WMf1{10%,90%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame1px)))}20%,80%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame2px)))}30%,50%,70%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame3px)))}40%,60%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame4px)))}}@-webkit-keyframes BeforeAfter-module_SliderLeftRightShake__2mcn5{10%,90%{transform:translate3d(-20%,0,0)}20%,80%{transform:translate3d(40%,0,0)}30%,50%,70%{transform:translate3d(-80%,0,0)}40%,60%{transform:translate3d(80%,0,0)}}@keyframes BeforeAfter-module_SliderLeftRightShake__2mcn5{10%,90%{transform:translate3d(-20%,0,0)}20%,80%{transform:translate3d(40%,0,0)}30%,50%,70%{transform:translate3d(-80%,0,0)}40%,60%{transform:translate3d(80%,0,0)}}.SoundDisclaimer-module_soundDisclaimer__31hWh{text-align:center;border:1px solid;border-radius:4px;cursor:pointer;font-size:inherit}.SoundDisclaimer-module_soundDisclaimer__31hWh:hover{background:hsla(0,0%,100%,.25)}.TextBlock-module_text__21Hk4 h2,.TextBlock-module_text__21Hk4 li,.TextBlock-module_text__21Hk4 p{margin:1em 0 0}.TextBlock-module_text__21Hk4 a{color:currentColor;word-wrap:break-word}.TextBlock-module_text__21Hk4 ol,.TextBlock-module_text__21Hk4 ul{margin:0;padding-left:20px}.TextBlock-module_text__21Hk4 blockquote{padding:.5em 1em .5em 2em;margin:1em 0 0 .5em;position:relative}.TextBlock-module_text__21Hk4 blockquote:before{content:"\201C";font-size:3em;font-weight:700;color:#aaa;position:absolute;top:0;left:0;line-height:1em}.VideoEmbed-module_embedPlayer__54NKG{background-color:#000;position:absolute;top:0;left:0;bottom:0;right:0}.ExternalLink-module_hidden__3jer0{display:none}.ExternalLink-module_link_item__Blypv{width:45%;max-width:45%;vertical-align:top;margin:2% auto;background-color:#fff;color:#000;text-decoration:none;transition:transform .3s}.ExternalLink-module_link_item__Blypv.ExternalLink-module_invert__1zrgN{background-color:#222;color:#fff}.ExternalLink-module_link_item__Blypv.ExternalLink-module_layout_center__3NRpQ{width:29%;max-width:29%}.ExternalLink-module_link_item__Blypv:hover{transform:scale(1.05)}.ExternalLink-module_link_item__Blypv:hover .ExternalLink-module_link_title__FZJ-0{text-decoration:underline}.ExternalLink-module_link_thumbnail__2_BHq{width:auto;background-repeat:no-repeat;background-size:cover;padding-top:56.25%;position:relative}.ExternalLink-module_link_details__lRhKU{margin:20px}.ExternalLink-module_link_details__lRhKU>.ExternalLink-module_link_title__FZJ-0{font-size:1.2em;font-weight:700;margin-bottom:20px}.ExternalLink-module_link_details__lRhKU>p{width:100%;white-space:normal;line-height:1.3em}.ExternalLink-module_tooltip__18MpC{position:absolute;left:50%;top:80px;width:180px;padding:5px;margin-left:-95px;background-color:#444;color:#fff;border:1px solid #fff;opacity:.9;font-size:13px;text-align:center;white-space:normal}.ExternalLink-module_tooltip__18MpC>span{display:block;color:#fff;text-decoration:underline}.ExternalLinkList-module_ext_links_container__16IIo{display:flex;flex-wrap:wrap;border-collapse:separate;border-spacing:10px;min-height:240px;width:auto;height:auto;pointer-events:all;position:relative;transition:opacity .5s;transition-timing-function:cubic-bezier(.1,.57,.1,1);transition-duration:0ms}.DataWrapperChart-module_container__2eZ15{min-height:200px;background-color:rgba(0,0,0,.5)}.DataWrapperChart-module_container__2eZ15>iframe{width:100%;height:100%;position:relative;top:0}
+.Heading-module_root__33TFw{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-wrap:break-word;margin-top:.2em;margin-bottom:0;padding-top:.3em}@media (orientation:landscape){.Heading-module_first__1PMJX{padding-top:25%}}.BeforeAfter-module_sliderStart__2C5cN{background-color:#fff;position:absolute;z-index:1}.BeforeAfter-module_container__2Lm06{height:100%;--frame1pos:-8;--frame2pos:16;--frame3pos:-32;--frame4pos:32;--frame1px:calc(var(--frame1pos)*1px);--frame2px:calc(var(--frame2pos)*1px);--frame3px:calc(var(--frame3pos)*1px);--frame4px:calc(var(--frame4pos)*1px)}.BeforeAfter-module_container__2Lm06>div{height:100%!important}.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe div div:nth-child(3){-webkit-animation:BeforeAfter-module_SliderLeftRightShake__2mcn5 1.5s cubic-bezier(.36,.07,.19,.97) both;animation:BeforeAfter-module_SliderLeftRightShake__2mcn5 1.5s cubic-bezier(.36,.07,.19,.97) both}.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe div img:nth-child(2){-webkit-animation:BeforeAfter-module_BeforeImageLeftRightShake__38m9V 1.5s cubic-bezier(.36,.07,.19,.97) both;animation:BeforeAfter-module_BeforeImageLeftRightShake__38m9V 1.5s cubic-bezier(.36,.07,.19,.97) both}.BeforeAfter-module_container__2Lm06 div div:nth-child(4) div{transition:opacity .1s ease-out .3s!important}.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe div img:first-child{-webkit-animation:BeforeAfter-module_AfterImageLeftRightShake__3WMf1 1.5s cubic-bezier(.36,.07,.19,.97) both;animation:BeforeAfter-module_AfterImageLeftRightShake__3WMf1 1.5s cubic-bezier(.36,.07,.19,.97) both}.BeforeAfter-module_container__2Lm06 div div:nth-child(5) div{transition:opacity .1s ease-out .3s!important}@-webkit-keyframes BeforeAfter-module_BeforeImageLeftRightShake__38m9V{10%,to{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame1px)),auto,auto)}20%,80%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame2px)),auto,auto)}30%,50%,70%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame3px)),auto,auto)}40%,60%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame4px)),auto,auto)}}@keyframes BeforeAfter-module_BeforeImageLeftRightShake__38m9V{10%,to{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame1px)),auto,auto)}20%,80%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame2px)),auto,auto)}30%,50%,70%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame3px)),auto,auto)}40%,60%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame4px)),auto,auto)}}@-webkit-keyframes BeforeAfter-module_AfterImageLeftRightShake__3WMf1{10%,to{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame1px)))}20%,80%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame2px)))}30%,50%,70%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame3px)))}40%,60%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame4px)))}}@keyframes BeforeAfter-module_AfterImageLeftRightShake__3WMf1{10%,to{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame1px)))}20%,80%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame2px)))}30%,50%,70%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame3px)))}40%,60%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame4px)))}}@-webkit-keyframes BeforeAfter-module_SliderLeftRightShake__2mcn5{10%,to{transform:translate3d(-20%,0,0)}20%,80%{transform:translate3d(40%,0,0)}30%,50%,70%{transform:translate3d(-80%,0,0)}40%,60%{transform:translate3d(80%,0,0)}}@keyframes BeforeAfter-module_SliderLeftRightShake__2mcn5{10%,to{transform:translate3d(-20%,0,0)}20%,80%{transform:translate3d(40%,0,0)}30%,50%,70%{transform:translate3d(-80%,0,0)}40%,60%{transform:translate3d(80%,0,0)}}.SoundDisclaimer-module_soundDisclaimer__31hWh{display:grid;border:1px solid;border-radius:4px;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.SoundDisclaimer-module_unmute__1V4Ab,.SoundDisclaimer-module_unmuted__22CJ5{grid-column:1;grid-row:1;display:flex;align-items:center;transition-property:opacity,visibility;transition-duration:.09s;transition-timing-function:ease-out;opacity:0;visibility:hidden;padding:0 15px}.SoundDisclaimer-module_unmute__1V4Ab{position:relative;border:0;background-color:transparent;font:inherit;color:currentColor;text-align:initial;width:100%;z-index:1;cursor:pointer}.SoundDisclaimer-module_active__11_kc{opacity:1;visibility:visible;transition-delay:.09s;transition-duration:.21s;transition-timing-function:ease-in}.SoundDisclaimer-module_soundDisclaimer__31hWh svg{flex:0 0 25px;fill:currentColor;margin-right:15px}.TextBlock-module_text__21Hk4 h2,.TextBlock-module_text__21Hk4 li,.TextBlock-module_text__21Hk4 p{margin:1em 0 0}.TextBlock-module_text__21Hk4 a{color:currentColor;word-wrap:break-word}.TextBlock-module_text__21Hk4 ol,.TextBlock-module_text__21Hk4 ul{margin:0;padding-left:20px;clear:both}.TextBlock-module_text__21Hk4 blockquote{padding:.5em 1em .5em 2em;margin:1em 0 0 .5em;position:relative;overflow:hidden}.TextBlock-module_text__21Hk4 blockquote:before{content:"\201C";font-size:3em;font-weight:700;color:#aaa;position:absolute;top:0;left:0;line-height:1em}.VideoEmbed-module_VideoEmbed__3BUjc{background-color:#000}.VideoEmbed-module_embedPlayer__54NKG{position:absolute;top:0;left:0;bottom:0;right:0}.ExternalLink-module_hidden__3jer0{display:none}.ExternalLink-module_link_item__Blypv{width:45%;vertical-align:top;margin:2% auto;background-color:#fff;color:#000;text-decoration:none;transition:transform .3s}.ExternalLink-module_link_item__Blypv.ExternalLink-module_invert__1zrgN{background-color:#222;color:#fff}.ExternalLink-module_link_item__Blypv.ExternalLink-module_layout_center__3NRpQ{width:29%}.ExternalLink-module_link_item__Blypv:hover{transform:scale(1.05)}.ExternalLink-module_link_item__Blypv:hover .ExternalLink-module_link_title__FZJ-0{text-decoration:underline}.ExternalLink-module_link_thumbnail__2_BHq{width:auto;background-repeat:no-repeat;background-size:cover;padding-top:56.25%;position:relative}.ExternalLink-module_link_details__lRhKU{margin:20px}.ExternalLink-module_link_details__lRhKU>.ExternalLink-module_link_title__FZJ-0{font-size:1.2em;font-weight:700;margin-bottom:20px}.ExternalLink-module_link_details__lRhKU>p{width:100%;white-space:normal;line-height:1.3em}.ExternalLink-module_tooltip__18MpC{position:absolute;left:50%;top:80px;width:180px;padding:5px;margin-left:-95px;background-color:#444;color:#fff;border:1px solid #fff;opacity:.9;font-size:13px;text-align:center;white-space:normal}.ExternalLink-module_tooltip__18MpC>span{display:block;color:#fff;text-decoration:underline}@media only screen and (max-width:600px){.ExternalLink-module_link_item__Blypv.ExternalLink-module_layout_center__3NRpQ{width:45%}}@media only screen and (max-width:350px){.ExternalLink-module_link_item__Blypv,.ExternalLink-module_link_item__Blypv.ExternalLink-module_layout_center__3NRpQ{width:85%}}.ExternalLinkList-module_ext_links_container__16IIo{display:flex;flex-wrap:wrap;border-collapse:separate;border-spacing:10px;min-height:240px;width:auto;height:auto;pointer-events:auto;position:relative;transition:opacity .5s;transition-timing-function:cubic-bezier(.1,.57,.1,1);transition-duration:0ms}.DataWrapperChart-module_container__2eZ15{min-height:200px;padding:20px 5%}.DataWrapperChart-module_container__2eZ15>iframe{width:100%;height:100%;position:relative;top:0;border:0}

data/entry_types/scrolled/package/contentElements-frontend.js

@@ -1,4 +1,4 @@
-import { useContentElementConfigurationUpdate, useI18n, withShadowClassName, Text, EditableInlineText, frontend, useFile, useContentElementEditorState, ViewportDependentPillarBoxes, useContentElementLifecycle, Figure, Image, usePlayerState, MediaInteractionTracking, VideoPlayer, VideoPlayerControls, AudioPlayer, AudioPlayerControls, EditableText, useDarkBackground } from 'pageflow-scrolled/frontend';
+import { useContentElementConfigurationUpdate, useI18n, withShadowClassName, Text, EditableInlineText, frontend, useFile, useContentElementEditorState, ViewportDependentPillarBoxes, useContentElementLifecycle, Figure, Image, usePlayerState, useAudioFocus, MediaInteractionTracking, VideoPlayerControls, VideoPlayer, AudioPlayerControls, AudioPlayer, useMediaMuted, EditableText, ThirdPartyOptOutInfo, ThirdPartyOptIn, useDarkBackground, textColorForBackgroundColor } from 'pageflow-scrolled/frontend';
 import React, { useRef, useState, useEffect } from 'react';
 import classNames from 'classnames';
 import ReactCompareImage from 'react-compare-image';
@@ -49,7 +49,7 @@ function Heading(_ref) {
     React.createElement(EditableInlineText, {
       value: configuration.value,
       defaultValue: legacyValue,
-      placeholder: t('pageflow_scrolled.inline_editing.type_heading'),
+      placeholder: firstSectionInEntry ? t('pageflow_scrolled.inline_editing.type_title') : t('pageflow_scrolled.inline_editing.type_heading'),
       onChange: function onChange(value) {
         return updateConfiguration({
           value: value
@@ -167,7 +167,7 @@ function BeforeAfter(_ref) {
   var _cx;
 
   var isActive = _ref.isActive,
-      isPrepared = _ref.isPrepared,
+      load = _ref.load,
       position = _ref.position,
       before_id = _ref.before_id,
       before_label = _ref.before_label,
@@ -278,7 +278,7 @@ function BeforeAfter(_ref) {
   );
 
   function renderCompareImage() {
-    if (!isPrepared) {
+    if (!load) {
       return null;
     }
 
@@ -324,12 +324,12 @@ function InitialSliderPositionIndicator(_ref2) {
 function InlineBeforeAfter(props) {
   var _useContentElementLif = useContentElementLifecycle(),
       isActive = _useContentElementLif.isActive,
-      isPrepared = _useContentElementLif.isPrepared;
+      shouldLoad = _useContentElementLif.shouldLoad;
 
   return (
     /*#__PURE__*/
     React.createElement(BeforeAfter, Object.assign({}, props.configuration, {
-      isPrepared: isPrepared,
+      load: shouldLoad,
       isActive: isActive
     }))
   );
@@ -344,7 +344,7 @@ function InlineImage(_ref) {
   var configuration = _ref.configuration;
 
   var _useContentElementLif = useContentElementLifecycle(),
-      isPrepared = _useContentElementLif.isPrepared;
+      shouldLoad = _useContentElementLif.shouldLoad;
 
   var imageFile = useFile({
     collectionName: 'imageFiles',
@@ -363,11 +363,12 @@ function InlineImage(_ref) {
       opaque: !!configuration.caption
     },
     /*#__PURE__*/
-    React.createElement(Image, Object.assign({}, configuration, {
-      isPrepared: isPrepared,
+    React.createElement(Image, {
+      imageFile: imageFile,
+      load: shouldLoad,
       structuredData: true,
       variant: configuration.position === 'full' ? 'large' : 'medium'
-    }))))
+    })))
   );
 }
 
@@ -377,8 +378,17 @@ frontend.contentElementTypes.register('inlineImage', {
 });
 
 function InlineVideo(_ref) {
-  var sectionProps = _ref.sectionProps,
+  var contentElementId = _ref.contentElementId,
+      sectionProps = _ref.sectionProps,
       configuration = _ref.configuration;
+  var videoFile = useFile({
+    collectionName: 'videoFiles',
+    permaId: configuration.id
+  });
+  var posterImageFile = useFile({
+    collectionName: 'imageFiles',
+    permaId: configuration.posterId
+  });
 
   var _usePlayerState = usePlayerState(),
       _usePlayerState2 = _slicedToArray(_usePlayerState, 2),
@@ -399,7 +409,16 @@ function InlineVideo(_ref) {
       playerActions.fadeOutAndPause(400);
     }
   }),
-      isPrepared = _useContentElementLif.isPrepared;
+      shouldLoad = _useContentElementLif.shouldLoad,
+      shouldPrepare = _useContentElementLif.shouldPrepare;
+
+  useAudioFocus({
+    key: contentElementId,
+    request: playerState.shouldPlay,
+    onLost: function onLost() {
+      playerActions.fadeOutAndPause(400);
+    }
+  });
 
   var onPlayerClick = function onPlayerClick() {
     if (isEditable && !isSelected) {
@@ -424,29 +443,29 @@ function InlineVideo(_ref) {
       playerActions: playerActions
     },
     /*#__PURE__*/
+    React.createElement(VideoPlayerControls, {
+      videoFile: videoFile,
+      defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
+      playerState: playerState,
+      playerActions: playerActions,
+      configuration: configuration,
+      sectionProps: sectionProps,
+      onPlayerClick: onPlayerClick
+    },
+    /*#__PURE__*/
     React.createElement(VideoPlayer, {
-      isPrepared: isPrepared,
+      load: shouldPrepare ? 'auto' : shouldLoad ? 'poster' : 'none',
       position: configuration.position,
       controls: configuration.controls,
       playerState: playerState,
       playerActions: playerActions,
-      id: configuration.id,
-      posterId: configuration.posterId,
+      videoFile: videoFile,
+      posterImageFile: posterImageFile,
       defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
       quality: 'high',
       playsInline: true,
-      atmoDuringPlayback: configuration.atmoDuringPlayback,
-      onClick: onPlayerClick
-    }),
-    /*#__PURE__*/
-    React.createElement(VideoPlayerControls, {
-      videoFilePermaId: configuration.id,
-      defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
-      playerState: playerState,
-      playerActions: playerActions,
-      configuration: configuration,
-      sectionProps: sectionProps
-    })))
+      atmoDuringPlayback: configuration.atmoDuringPlayback
+    }))))
   );
 }
 
@@ -456,8 +475,17 @@ frontend.contentElementTypes.register('inlineVideo', {
 });
 
 function InlineAudio(_ref) {
-  var sectionProps = _ref.sectionProps,
+  var contentElementId = _ref.contentElementId,
+      sectionProps = _ref.sectionProps,
       configuration = _ref.configuration;
+  var audioFile = useFile({
+    collectionName: 'audioFiles',
+    permaId: configuration.id
+  });
+  var posterImageFile = useFile({
+    collectionName: 'imageFiles',
+    permaId: configuration.posterId
+  });
 
   var _usePlayerState = usePlayerState(),
       _usePlayerState2 = _slicedToArray(_usePlayerState, 2),
@@ -475,10 +503,19 @@ function InlineAudio(_ref) {
       }
     },
     onDeactivate: function onDeactivate() {
-      playerActions.pause();
+      playerActions.fadeOutAndPause(400);
     }
   }),
-      isPrepared = _useContentElementLif.isPrepared;
+      shouldLoad = _useContentElementLif.shouldLoad,
+      shouldPrepare = _useContentElementLif.shouldPrepare;
+
+  useAudioFocus({
+    key: contentElementId,
+    request: playerState.shouldPlay,
+    onLost: function onLost() {
+      playerActions.fadeOutAndPause(400);
+    }
+  });
 
   var onPlayerClick = function onPlayerClick() {
     if (isEditable && !isSelected) {
@@ -498,29 +535,30 @@ function InlineAudio(_ref) {
       caption: configuration.caption
     },
     /*#__PURE__*/
+    React.createElement(AudioPlayerControls, {
+      audioFile: audioFile,
+      defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
+      playerState: playerState,
+      playerActions: playerActions,
+      standAlone: !posterImageFile,
+      configuration: configuration,
+      sectionProps: sectionProps,
+      onPlayerClick: onPlayerClick
+    },
+    /*#__PURE__*/
     React.createElement(AudioPlayer, {
-      isPrepared: isPrepared,
+      load: shouldPrepare ? 'auto' : shouldLoad ? 'poster' : 'none',
       position: configuration.position,
       controls: configuration.controls,
       playerState: playerState,
       playerActions: playerActions,
-      id: configuration.id,
-      posterId: configuration.posterId,
+      audioFile: audioFile,
+      posterImageFile: posterImageFile,
       defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
       quality: 'high',
       playsInline: true,
-      atmoDuringPlayback: configuration.atmoDuringPlayback,
-      onClick: onPlayerClick
-    }),
-    /*#__PURE__*/
-    React.createElement(AudioPlayerControls, {
-      audioFilePermaId: configuration.id,
-      defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
-      playerState: playerState,
-      playerActions: playerActions,
-      configuration: configuration,
-      sectionProps: sectionProps
-    }))
+      atmoDuringPlayback: configuration.atmoDuringPlayback
+    })))
   );
 }
 
@@ -529,26 +567,154 @@ frontend.contentElementTypes.register('inlineAudio', {
   lifecycle: true
 });
 
-var styles$2 = {"soundDisclaimer":"SoundDisclaimer-module_soundDisclaimer__31hWh"};
+var styles$2 = {"soundDisclaimer":"SoundDisclaimer-module_soundDisclaimer__31hWh","unmute":"SoundDisclaimer-module_unmute__1V4Ab","unmuted":"SoundDisclaimer-module_unmuted__22CJ5","active":"SoundDisclaimer-module_active__11_kc"};
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+var MutedIcon = (function (_ref) {
+  var _ref$styles = _ref.styles,
+      styles = _ref$styles === void 0 ? {} : _ref$styles,
+      props = _objectWithoutProperties(_ref, ["styles"]);
+
+  return React.createElement("svg", _extends({
+    "aria-hidden": "true",
+    "data-prefix": "fas",
+    "data-icon": "volume-mute",
+    className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-volume-mute"] || "fa-volume-mute") + " " + (styles["fa-w-16"] || "fa-w-16"),
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512"
+  }, props), React.createElement("path", {
+    d: "M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zM461.64 256l45.64-45.64c6.3-6.3 6.3-16.52 0-22.82l-22.82-22.82c-6.3-6.3-16.52-6.3-22.82 0L416 210.36l-45.64-45.64c-6.3-6.3-16.52-6.3-22.82 0l-22.82 22.82c-6.3 6.3-6.3 16.52 0 22.82L370.36 256l-45.63 45.63c-6.3 6.3-6.3 16.52 0 22.82l22.82 22.82c6.3 6.3 16.52 6.3 22.82 0L416 301.64l45.64 45.64c6.3 6.3 16.52 6.3 22.82 0l22.82-22.82c6.3-6.3 6.3-16.52 0-22.82L461.64 256z"
+  }));
+});
+
+function _extends$1() {
+  _extends$1 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends$1.apply(this, arguments);
+}
+var UnmutedIcon = (function (_ref) {
+  var _ref$styles = _ref.styles,
+      styles = _ref$styles === void 0 ? {} : _ref$styles,
+      props = _objectWithoutProperties(_ref, ["styles"]);
+
+  return React.createElement("svg", _extends$1({
+    "aria-hidden": "true",
+    "data-prefix": "fas",
+    "data-icon": "volume-mute",
+    className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-volume-mute"] || "fa-volume-mute") + " " + (styles["fa-w-16"] || "fa-w-16"),
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512"
+  }, props), React.createElement("path", {
+    d: "M232.36 64.01a24.007 24.007 0 00-1.176.002c-5.703.15-11.464 2.348-16.155 7.039L126.061 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-14.293-11.514-23.733-23.64-24.01zm149.5 31.994c-8.107-.16-16.098 3.814-20.75 11.217-7.09 11.28-3.78 26.21 7.41 33.36C408.27 165.97 432 209.11 432 256s-23.73 90.03-63.48 115.42c-11.19 7.14-14.5 22.07-7.41 33.36 6.51 10.36 21.12 15.14 33.12 7.46C447.94 377.94 480 319.54 480 256c0-63.53-32.06-121.94-85.77-156.24a23.808 23.808 0 00-12.37-3.756zm-55.032 80.174c-8.51-.046-16.795 4.42-21.209 12.402-6.39 11.61-2.159 26.2 9.451 32.61C327.98 228.28 336 241.63 336 256c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88 0-31.88-17.54-61.32-45.78-76.86a23.987 23.987 0 00-11.402-2.952z"
+  }));
+});
 
 function SoundDisclaimer() {
+  var _useContentElementEdi = useContentElementEditorState(),
+      isEditable = _useContentElementEdi.isEditable,
+      isSelected = _useContentElementEdi.isSelected;
+
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
+  var muted = useMediaMuted();
   return (
     /*#__PURE__*/
     React.createElement("div", {
       className: classNames(styles$2.soundDisclaimer),
+      style: {
+        pointerEvents: isEditable && !isSelected ? 'none' : undefined
+      }
+    },
+    /*#__PURE__*/
+    React.createElement("button", {
+      className: classNames(styles$2.unmute, _defineProperty({}, styles$2.active, muted)),
       onClick: function onClick() {
         return media.mute(false);
       }
     },
     /*#__PURE__*/
+    React.createElement(MutedIcon, null),
+    /*#__PURE__*/
     React.createElement("p", {
       dangerouslySetInnerHTML: {
-        __html: t('pageflow_scrolled.public.sound_disclaimer.help_text')
+        __html: t('pageflow_scrolled.public.sound_disclaimer.help_muted')
       }
-    }))
+    })),
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: classNames(styles$2.unmuted, _defineProperty({}, styles$2.active, !muted))
+    },
+    /*#__PURE__*/
+    React.createElement(UnmutedIcon, null),
+    /*#__PURE__*/
+    React.createElement("p", {
+      dangerouslySetInnerHTML: {
+        __html: t('pageflow_scrolled.public.sound_disclaimer.help_unmuted')
+      }
+    })))
   );
 }
 
@@ -587,7 +753,8 @@ function TextBlock(props) {
 
 frontend.contentElementTypes.register('textBlock', {
   component: TextBlock,
-  customSelectionRect: true
+  customSelectionRect: true,
+  supportsWrappingAroundFloats: true
 });
 
 var styles$4 = {"VideoEmbed":"VideoEmbed-module_VideoEmbed__3BUjc","embedPlayer":"VideoEmbed-module_embedPlayer__54NKG"};
@@ -599,52 +766,20 @@ var aspectRatios = {
   portrait: 1.7777
 };
 function VideoEmbed(_ref) {
-  var configuration = _ref.configuration;
-
-  var _useContentElementLif = useContentElementLifecycle(),
-      isPrepared = _useContentElementLif.isPrepared;
+  var contentElementId = _ref.contentElementId,
+      configuration = _ref.configuration;
 
   var _useContentElementEdi = useContentElementEditorState(),
       isEditable = _useContentElementEdi.isEditable,
-      isSelected = _useContentElementEdi.isSelected; // base64-encoded configuration
-  // => make component re-render on configuration changes
-
-
-  function keyFromConfiguration(config) {
-    return btoa(JSON.stringify(config));
-  }
+      isSelected = _useContentElementEdi.isSelected;
 
-  function renderPlayer() {
-    if (!isPrepared) {
-      return null;
-    }
+  var _useContentElementLif = useContentElementLifecycle(),
+      shouldLoad = _useContentElementLif.shouldLoad;
 
-    return (
-      /*#__PURE__*/
-      React.createElement(ReactPlayer, {
-        className: styles$4.embedPlayer,
-        key: keyFromConfiguration(configuration),
-        url: configuration.videoSource,
-        playing: true,
-        light: true,
-        width: "100%",
-        height: "100%",
-        controls: !configuration.hideControls,
-        config: {
-          youtube: {
-            playerVars: {
-              showinfo: !configuration.hideInfo
-            }
-          },
-          vimeo: {
-            playerOptions: {
-              byline: !configuration.hideInfo
-            }
-          }
-        }
-      })
-    );
-  }
+  var _useState = useState('unplayed'),
+      _useState2 = _slicedToArray(_useState, 2),
+      playerState = _useState2[0],
+      setPlayerState = _useState2[1];
 
   return (
     /*#__PURE__*/
@@ -663,7 +798,82 @@ function VideoEmbed(_ref) {
       aspectRatio: aspectRatios[configuration.aspectRatio || 'wide'],
       position: configuration.position,
       opaque: !!configuration.caption
-    }, renderPlayer())))
+    }, shouldLoad &&
+    /*#__PURE__*/
+    React.createElement(PreparedPlayer, {
+      playerState: playerState,
+      setPlayerState: setPlayerState,
+      contentElementId: contentElementId,
+      configuration: configuration
+    })),
+    /*#__PURE__*/
+    React.createElement(ThirdPartyOptOutInfo, {
+      providerName: "video",
+      hide: playerState === 'playing',
+      contentElementPosition: configuration.position
+    })))
+  );
+}
+
+function PreparedPlayer(_ref2) {
+  var contentElementId = _ref2.contentElementId,
+      configuration = _ref2.configuration,
+      playerState = _ref2.playerState,
+      setPlayerState = _ref2.setPlayerState;
+  useAudioFocus({
+    key: contentElementId,
+    request: playerState === 'playing',
+    onLost: function onLost() {
+      setPlayerState('paused');
+    }
+  }); // base64-encoded configuration
+  // => make component re-render on configuration changes
+
+  function keyFromConfiguration(config) {
+    return btoa(JSON.stringify(config));
+  }
+
+  return (
+    /*#__PURE__*/
+    React.createElement(ThirdPartyOptIn, {
+      providerName: "video"
+    }, function (_ref3) {
+      var consentedHere = _ref3.consentedHere;
+      return (
+        /*#__PURE__*/
+        React.createElement(ReactPlayer, {
+          className: styles$4.embedPlayer,
+          key: keyFromConfiguration(configuration),
+          url: configuration.videoSource,
+          playing: playerState !== 'paused',
+          onPlay: function onPlay() {
+            return setPlayerState('playing');
+          },
+          onPause: function onPause() {
+            return setPlayerState('paused');
+          },
+          onEnded: function onEnded() {
+            return setPlayerState('paused');
+          },
+          light: !consentedHere && playerState === 'unplayed',
+          width: "100%",
+          height: "100%",
+          controls: !configuration.hideControls,
+          config: {
+            youtube: {
+              playerVars: {
+                showinfo: !configuration.hideInfo
+              }
+            },
+            vimeo: {
+              playerOptions: {
+                byline: !configuration.hideInfo
+              }
+            }
+          }
+        })
+      );
+    })
   );
 }
 
@@ -693,6 +903,11 @@ function ExternalLink(props) {
       isEditable = _useContentElementEdi.isEditable,
       isSelected = _useContentElementEdi.isSelected;
 
+  var thumbnailImageFile = useFile({
+    collectionName: 'imageFiles',
+    permaId: props.thumbnail
+  });
+
   var onClick = function onClick(event) {
     if (isEditable) {
       if (!props.open_in_new_tab || !isSelected) {
@@ -735,7 +950,8 @@ function ExternalLink(props) {
       href: props.url || 'about:blank',
       onClick: onClick,
       onMouseLeave: onMouseLeave,
-      target: props.open_in_new_tab ? '_blank' : '_self'
+      target: props.open_in_new_tab ? '_blank' : '_self',
+      rel: props.open_in_new_tab ? 'noopen noreferrer' : undefined
     },
     /*#__PURE__*/
     React.createElement("div", {
@@ -743,8 +959,8 @@ function ExternalLink(props) {
     },
     /*#__PURE__*/
     React.createElement(Image, {
-      id: props.thumbnail,
-      isPrepared: props.isPrepared,
+      imageFile: thumbnailImageFile,
+      load: props.loadImages,
       variant: "linkThumbnailLarge"
     })),
     /*#__PURE__*/
@@ -768,7 +984,7 @@ function ExternalLinkList(props) {
   var linkList = props.configuration.links || [];
 
   var _useContentElementLif = useContentElementLifecycle(),
-      isPrepared = _useContentElementLif.isPrepared;
+      shouldLoad = _useContentElementLif.shouldLoad;
 
   var darkBackground = useDarkBackground();
   return (
@@ -782,7 +998,7 @@ function ExternalLinkList(props) {
           key: link.id,
           invert: !darkBackground,
           sectionProps: props.sectionProps,
-          isPrepared: isPrepared
+          loadImages: shouldLoad
         }))
       );
     }))
@@ -806,7 +1022,7 @@ function useIframeHeight(url) {
     function receive(event) {
       if (typeof event.data['datawrapper-height'] !== 'undefined') {
         for (var chartId in event.data['datawrapper-height']) {
-          if (url.indexOf(chartId) > -1) {
+          if ((url === null || url === void 0 ? void 0 : url.indexOf(chartId)) > -1) {
             setHeight(event.data['datawrapper-height'][chartId] + 'px');
           }
         }
@@ -825,8 +1041,11 @@ var styles$7 = {"container":"DataWrapperChart-module_container__2eZ15"};
 function DataWrapperChart(_ref) {
   var configuration = _ref.configuration;
 
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
   var _useContentElementLif = useContentElementLifecycle(),
-      isPrepared = _useContentElementLif.isPrepared;
+      shouldLoad = _useContentElementLif.shouldLoad;
 
   var _useContentElementEdi = useContentElementEditorState(),
       isEditable = _useContentElementEdi.isEditable,
@@ -836,24 +1055,40 @@ function DataWrapperChart(_ref) {
 
   var srcURL = '';
 
-  if (configuration.url && isPrepared) {
+  if (configuration.url) {
     srcURL = configuration.url.replace(/http(s|):/, '');
   }
 
+  var backgroundColor = configuration.backgroundColor || '#323d4d';
   return (
+    /*#__PURE__*/
+    React.createElement(Figure, {
+      caption: configuration.caption
+    },
     /*#__PURE__*/
     React.createElement("div", {
       className: styles$7.container,
       style: {
         pointerEvents: isEditable && !isSelected ? 'none' : undefined,
+        backgroundColor: backgroundColor,
+        color: textColorForBackgroundColor(backgroundColor),
         height: height
       },
       "data-percy": "hide"
-    }, renderIframe(srcURL))
+    },
+    /*#__PURE__*/
+    React.createElement(ThirdPartyOptIn, {
+      providerName: "datawrapper"
+    }, shouldLoad && renderIframe(srcURL, configuration.title || t('pageflow_scrolled.public.chart.default_title')),
+    /*#__PURE__*/
+    React.createElement(ThirdPartyOptOutInfo, {
+      providerName: "datawrapper",
+      contentElementPosition: configuration.position
+    }))))
   );
 }
 
-function renderIframe(url) {
+function renderIframe(url, title) {
   if (!url) {
     return null;
   }
@@ -862,9 +1097,8 @@ function renderIframe(url) {
     /*#__PURE__*/
     React.createElement("iframe", {
       src: url,
-      scrolling: "auto",
-      frameBorder: "0",
-      align: "aus",
+      title: title,
+      scrolling: "no",
       allowFullScreen: true,
       mozallowfullscreen: "true",
       webkitallowfullscreen: "true"