hr-design-system-handlebars 1.74.6 → 1.74.7

package/.storybook/preview-head.html

@@ -1,7 +1,8 @@
 <script src="vendor/modernizr/modernizr.cust.js"></script>
-<!--to be sure hyphems work correctly lang Attribute needs to be "de"
-see: https://github.com/storybookjs/storybook/issues/11706 -->
+
 <script>
+    //  to be sure hyphems work correctly lang Attribute needs to be "de"
+    //  see: https://github.com/storybookjs/storybook/issues/11706
     document.documentElement.setAttribute('lang', 'de')
 
     // Javascript workaround damit darkmode nur in der Webview in Delivery funktioniert
@@ -13,4 +14,35 @@ see: https://github.com/storybookjs/storybook/issues/11706 -->
     darkModePreference.addEventListener("change",  setColorScheme);
     setColorScheme(darkModePreference);
     
-</script>
+    // https://github.com/storybookjs/storybook/issues/6113#issuecomment-1183339597
+    // On page change, fire DOMContentLoaded event
+    function pageChange() {
+        console.log("pageChange")
+        window.document.dispatchEvent(new Event('storyWasSwitchedAndIsLoaded', {
+            bubbles: true,
+            cancelable: true
+        }));
+    }
+  
+    function watchForChanges() {
+        const mutationObserver = function(mutationsList) {
+            for (let i = 0, len = mutationsList.length; i < len; i++) {
+                if (mutationsList[i].type == 'childList') {
+                    pageChange();
+                    break;
+                }
+            }
+        };
+  
+        const observer = new MutationObserver(mutationObserver);
+        const config = { childList: true, subtree: false };
+        observer.observe(document.getElementById('storybook-root'), config);
+
+        // Remove event listener, otherwise we will re-run this function when we fire our manual event
+        document.removeEventListener('DOMContentLoaded', watchForChanges);
+    }
+  
+    // Initially create mutation observer
+    document.addEventListener('DOMContentLoaded', watchForChanges);
+
+  </script>

package/.storybook/preview.js

@@ -45,7 +45,6 @@ setConsoleOptions({
     panelInclude: [...panelInclude, /checkcss/],
 });
 
-
 function loadDelayedImages() {
     setTimeout(function () {
         var t,
@@ -70,15 +69,12 @@ function loadDelayedImages() {
     }, 0)
 }
 
-let eventSrcUrl = null
-
-document.addEventListener('DOMContentLoaded', function (event) {
-    console.log('DOM fully loaded and parsed')
-    console.log('Start feature initialization')
-
-    Initializer.run(document, loadFeature)
-    setTimeout(loadDelayedImages, 200)
+document.addEventListener('storyWasSwitchedAndIsLoaded', function (event) {
+    console.log('storyWasSwitchedAndIsLoaded')
+    Initializer.run(document, loadFeature)  
+    setTimeout(loadDelayedImages, 500)
 })
+console.log('preview.js is loaded')
 
 /*if (process.env.NODE_ENV !== 'production') {
     console.log(Initializer)

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.74.7 (Fri Jun 21 2024)
+
+#### 🐛 Bug Fix
+
+- DPE-2945 V2 [#961](https://github.com/mumprod/hr-design-system-handlebars/pull/961) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.74.6 (Fri Jun 21 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -3368,7 +3368,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1718968237262;
+  counter-reset: cnt1718973784359;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3747,7 +3747,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1718968237262 1;
+  counter-increment: cnt1718973784359 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3763,7 +3763,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1718968237262);
+  content: counter(cnt1718973784359);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/views/components/base/image/responsive_image.hbs

@@ -37,11 +37,13 @@
                     <img class="w-full{{~#if ../../_addClassImg}} {{../../_addClassImg}}{{/if}}" src="{{../this.fallback}}" alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}">
                 </noscript>
             {{/unless}}
-            <img {{#with this.sizes}}sizes="{{this}}" {{/with~}}
-                    loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"
-                    {{#if ../../_noDelay}}
+            <img{{#if ../../_isWebview}} data-primary-type="hr-nt:image"
+                        data-image-id="{{nextRandom}}"{{/if}}
+                {{#with this.sizes}} sizes="{{this}}" {{/with~}}
+                loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"
+                {{#if ../../_noDelay}}
                         fetchpriority="high"
-                    {{/if}}
+                 {{/if}}
                  {{#with this.srcset}} {{#if ../../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                 alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}"
@@ -51,4 +53,7 @@
             {{~#with ../../_addClass }}</div>{{/with}}
         {{/with}}
     {{/if}}
+    {{#if ../_isWebview}}
+        <script type="application/json" id="{{getRandom}}">{{{../this.imageJson}}}</script>
+    {{/if}}
 {{/withParam}}

package/dist/views/components/content/copytext/components/image/image.hbs

@@ -6,7 +6,7 @@
                 _type="story"
                 _variant="100-copytext-portrait"
                 _noAr="true"
-                _isWebview=../../_isWebview}}
+                _isWebview=_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
                 _cssClass="my-6 sm480:my-7 sm480:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
@@ -14,7 +14,7 @@
                 _type="story"
                 _variant="copytext-portrait"
                 _noAr="true"
-                _isWebview=../../_isWebview}}
+                _isWebview=_isWebview}}
         {{/if}}
 {{else}}
         {{#if this.showFullSize.isTrue}}
@@ -24,7 +24,7 @@
                 _type="story"
                 _variant="100-copytext"
                 _pictureAddClass="ar-16-9"
-                _isWebview=../../_isWebview}}
+                _isWebview=_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
                 _cssClass="my-6 sm480:my-7 article-full-width sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
@@ -32,7 +32,7 @@
                 _type="story"
                 _variant="copytext"
                 _pictureAddClass="ar-16-9"
-                _isWebview=../../_isWebview}}
+                _isWebview=_isWebview}}
         {{/if}}
     {{/if}}
  

package/dist/views/components/content/copytext/copytext.hbs

@@ -10,7 +10,7 @@
         {{#unless this.isInfoBox}}
             {{~#with this.paragraphBoxItem }}
                 {{~#if this.isImage}}
-                    {{~> components/content/copytext/components/image/image}}    
+                    {{~> components/content/copytext/components/image/image _isWebview=../../_isWebview}}    
                 {{/if~}}
                 {{~#if this.isContentBox}}
                     {{~> components/content/copytext/components/contentbox/contentbox ~}}

package/dist/views/components/page/base/page_header.hbs

@@ -7,9 +7,9 @@
     <h2>
         {{#unless this.label }}  
             {{~#if topline}}
-                <span class="block mb-2 text-base sm480:text-xl font-heading">{{this.topline}}</span>
+                <span class="block mb-2 text-base sm480:text-xl font-heading dark:text-text-dark">{{this.topline}}</span>
             {{/if~}}
         {{/unless~}}
-        <span class="text-3xl font-headingSerif sm480:text-4xl">{{this.title}}</span>
+        <span class="text-3xl font-headingSerif sm480:text-4xl dark:text-text-dark">{{this.title}}</span>
     </h2>
 </header>

package/dist/views/components/page/base/page_wrapper.hbs

@@ -1,5 +1,5 @@
 <div class="grid grid-page">
-    <div class="grid bg-white grid-article">
+    <div class="grid bg-white dark:bg-black grid-article">
         {{> @partial-block }}    
     </div>
 </div>

package/dist/views/components/page/story/story_article.hbs

@@ -15,7 +15,7 @@
                     _type="story"
                     _variant=(if this.showSquareImage.isTrue "100-top-sb-1x1" "100-top-sb")
                     _pictureAddClass=(if this.showSquareImage.isTrue "grid ar-1-1 md:ar-16-9" "ar-16-9")
-                    _isWebview=../../_isWebview
+                    _isWebview=../../../_webview-adjust_context
                     _noDelay=true}}
             {{/if}}
             {{#if this.isVideo}}

package/dist/views_static/components/base/image/responsive_image.hbs

@@ -37,11 +37,13 @@
                     <img class="w-full{{~#if ../../_addClassImg}} {{../../_addClassImg}}{{/if}}" src="{{../this.fallback}}" alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}">
                 </noscript>
             {{/unless}}
-            <img {{#with this.sizes}}sizes="{{this}}" {{/with~}}
-                    loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"
-                    {{#if ../../_noDelay}}
+            <img{{#if ../../_isWebview}} data-primary-type="hr-nt:image"
+                        data-image-id="{{nextRandom}}"{{/if}}
+                {{#with this.sizes}} sizes="{{this}}" {{/with~}}
+                loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"
+                {{#if ../../_noDelay}}
                         fetchpriority="high"
-                    {{/if}}
+                 {{/if}}
                  {{#with this.srcset}} {{#if ../../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                 alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}"
@@ -51,4 +53,7 @@
             {{~#with ../../_addClass }}</div>{{/with}}
         {{/with}}
     {{/if}}
+    {{#if ../_isWebview}}
+        <script type="application/json" id="{{getRandom}}">{{{../this.imageJson}}}</script>
+    {{/if}}
 {{/withParam}}

package/dist/views_static/components/content/copytext/components/image/image.hbs

@@ -6,7 +6,7 @@
                 _type="story"
                 _variant="100-copytext-portrait"
                 _noAr="true"
-                _isWebview=../../_isWebview}}
+                _isWebview=_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
                 _cssClass="my-6 sm480:my-7 sm480:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
@@ -14,7 +14,7 @@
                 _type="story"
                 _variant="copytext-portrait"
                 _noAr="true"
-                _isWebview=../../_isWebview}}
+                _isWebview=_isWebview}}
         {{/if}}
 {{else}}
         {{#if this.showFullSize.isTrue}}
@@ -24,7 +24,7 @@
                 _type="story"
                 _variant="100-copytext"
                 _pictureAddClass="ar-16-9"
-                _isWebview=../../_isWebview}}
+                _isWebview=_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
                 _cssClass="my-6 sm480:my-7 article-full-width sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
@@ -32,7 +32,7 @@
                 _type="story"
                 _variant="copytext"
                 _pictureAddClass="ar-16-9"
-                _isWebview=../../_isWebview}}
+                _isWebview=_isWebview}}
         {{/if}}
     {{/if}}
  

package/dist/views_static/components/content/copytext/copytext.hbs

@@ -10,7 +10,7 @@
         {{#unless this.isInfoBox}}
             {{~#with this.paragraphBoxItem }}
                 {{~#if this.isImage}}
-                    {{~> components/content/copytext/components/image/image}}    
+                    {{~> components/content/copytext/components/image/image _isWebview=../../_isWebview}}    
                 {{/if~}}
                 {{~#if this.isContentBox}}
                     {{~> components/content/copytext/components/contentbox/contentbox ~}}

package/dist/views_static/components/page/base/page_header.hbs

@@ -7,9 +7,9 @@
     <h2>
         {{#unless this.label }}  
             {{~#if topline}}
-                <span class="block mb-2 text-base sm480:text-xl font-heading">{{this.topline}}</span>
+                <span class="block mb-2 text-base sm480:text-xl font-heading dark:text-text-dark">{{this.topline}}</span>
             {{/if~}}
         {{/unless~}}
-        <span class="text-3xl font-headingSerif sm480:text-4xl">{{this.title}}</span>
+        <span class="text-3xl font-headingSerif sm480:text-4xl dark:text-text-dark">{{this.title}}</span>
     </h2>
 </header>

package/dist/views_static/components/page/base/page_wrapper.hbs

@@ -1,5 +1,5 @@
 <div class="grid grid-page">
-    <div class="grid bg-white grid-article">
+    <div class="grid bg-white dark:bg-black grid-article">
         {{> @partial-block }}    
     </div>
 </div>

package/dist/views_static/components/page/story/story_article.hbs

@@ -15,7 +15,7 @@
                     _type="story"
                     _variant=(if this.showSquareImage.isTrue "100-top-sb-1x1" "100-top-sb")
                     _pictureAddClass=(if this.showSquareImage.isTrue "grid ar-1-1 md:ar-16-9" "ar-16-9")
-                    _isWebview=../../_isWebview
+                    _isWebview=../_webview
                     _noDelay=true}}
             {{/if}}
             {{#if this.isVideo}}

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "1.74.6",
+    "version": "1.74.7",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "storybook dev -p 6006 public",

package/src/assets/fixtures/teaser/teaser_images.inc.json

@@ -2,6 +2,7 @@
     "teaser_standard": {
         "alttext": "Lorem ipsum",
         "copyrightWithLinks": "Vorname Nachname",
+        "imageJson": "Beispiel JSON",
         "responsiveImage": {
             "asPicture": false,
             "asImage": true,
@@ -17,6 +18,7 @@
     "teaser_alternative_hero": {
         "alttext": "Lorem ipsum",
         "copyrightWithLinks": "",
+        "imageJson": "Beispiel JSON",
         "responsiveImage": {
             "asPicture": false,
             "asImage": true,
@@ -32,6 +34,7 @@
     "teaser_alternative_100": {
         "alttext": "Lorem ipsum",
         "copyrightWithLinks": "",
+        "imageJson": "Beispiel JSON",
         "responsiveImage": {
             "asPicture": true,
             "asImage": false,
@@ -53,6 +56,7 @@
     "teaser_alternative_50": {
         "alttext": "Lorem ipsum",
         "copyrightWithLinks": "",
+        "imageJson": "Beispiel JSON",
         "responsiveImage": {
             "asPicture": true,
             "asImage": false,
@@ -74,6 +78,7 @@
     "teaser_tabbox_standard_50": {
         "alttext": "Lorem ipsum",
         "copyrightWithLinks": "",
+        "imageJson": "Beispiel JSON",
         "responsiveImage": {
             "asPicture": true,
             "asImage": false,
@@ -95,6 +100,7 @@
     "teaser_tabbox_standard_33": {
         "alttext": "Lorem ipsum",
         "copyrightWithLinks": "",
+        "imageJson": "Beispiel JSON",
         "responsiveImage": {
             "asPicture": true,
             "asImage": false,
@@ -116,6 +122,7 @@
     "teaser_tabbox_standard_25": {
         "alttext": "Lorem ipsum",
         "copyrightWithLinks": "",
+        "imageJson": "Beispiel JSON",
         "responsiveImage": {
             "asPicture": true,
             "asImage": false,
@@ -137,6 +144,7 @@
     "teaser_tabbox_alternative_50": {
         "alttext": "Lorem ipsum",
         "copyrightWithLinks": "",
+        "imageJson": "Beispiel JSON",
         "responsiveImage": {
             "asPicture": true,
             "asImage": false,
@@ -158,6 +166,7 @@
     "teaser_cluster_genre_100": {
         "alttext": "Lorem ipsum",
         "copyrightWithLinks": "",
+        "imageJson": "Beispiel JSON",
         "responsiveImage": {
             "asPicture": true,
             "asImage": false,
@@ -177,6 +186,7 @@
     "teaser_cluster_100": {
         "alttext": "Lorem ipsum",
         "copyrightWithLinks": "",
+        "imageJson": "Beispiel JSON",
         "responsiveImage": {
             "asPicture": false,
             "asImage": true,
@@ -192,6 +202,7 @@
     "teaser_cluster_50": {
         "alttext": "Lorem ipsum",
         "copyrightWithLinks": "",
+        "imageJson": "Beispiel JSON",
         "responsiveImage": {
             "asPicture": false,
             "asImage": true,
@@ -207,6 +218,7 @@
     "teaser_cluster_33": {
         "alttext": "Lorem ipsum",
         "copyrightWithLinks": "",
+        "imageJson": "Beispiel JSON",
         "responsiveImage": {
             "asPicture": false,
             "asImage": true,
@@ -221,6 +233,7 @@
     },
     "teaser_poster_50": {
         "copyrightWithLinks": "",
+        "imageJson": "Beispiel JSON",
         "responsiveImage": {
             "asPicture": false,
             "asImage": true,
@@ -235,6 +248,7 @@
     },
     "teaser_poster_16_to_9": {
         "copyrightWithLinks": "",
+        "imageJson": "Beispiel JSON",
         "responsiveImage": {
             "asPicture": true,
             "asImage": false,
@@ -255,6 +269,7 @@
     },
     "teaser_poster_wide": {
         "copyrightWithLinks": "",
+        "imageJson": "Beispiel JSON",
         "responsiveImage": {
             "asPicture": true,
             "asImage": false,
@@ -275,6 +290,7 @@
     },
     "teaser_poster_33": {
         "copyrightWithLinks": "",
+        "imageJson": "Beispiel JSON",
         "responsiveImage": {
             "asPicture": false,
             "asImage": true,
@@ -289,6 +305,7 @@
     },
     "teaser_podcast": {
         "copyrightWithLinks": "",
+        "imageJson": "Beispiel JSON",
         "responsiveImage": {
             "asPicture": false,
             "asImage": true,
@@ -304,6 +321,7 @@
     "stage_default": {
         "alttext": "Lorem ipsum",
         "copyrightWithLinks": "",
+        "imageJson": "Beispiel JSON",
         "responsiveImage": {
             "asPicture": true,
             "asImage": false,
@@ -325,6 +343,7 @@
     "stage_wide": {
         "alttext": "Lorem ipsum",
         "copyrightWithLinks": "",
+        "imageJson": "Beispiel JSON",
         "responsiveImage": {
             "asPicture": true,
             "asImage": false,
@@ -351,6 +370,7 @@
     "event-teaser_100": {
         "alttext": "Lorem ipsum",
         "copyrightWithLinks": "",
+        "imageJson": "Beispiel JSON",
         "responsiveImage": {
             "asPicture": true,
             "asImage": false,
@@ -372,6 +392,7 @@
     "teaser_25": {
         "alttext": "Lorem ipsum",
         "copyrightWithLinks": "",
+        "imageJson": "Beispiel JSON",
         "responsiveImage": {
             "asPicture": true,
             "asImage": false,
@@ -393,6 +414,7 @@
     "teaser_ticker_hero": {
         "alttext": "Lorem ipsum",
         "copyrightWithLinks": "",
+        "imageJson": "Beispiel JSON",
         "responsiveImage": {
             "asPicture": true,
             "asImage": false,
@@ -419,6 +441,7 @@
         },
         "caption": "Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen",
         "copyrightWithLinks": "Karsten Hufer",
+        "imageJson": "Beispiel JSON",
         "responsiveImage": {
             "asPicture": false,
             "asImage": true,
@@ -441,6 +464,7 @@
         },
         "caption": "Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen",
         "copyrightWithLinks": "Karsten Hufer",
+        "imageJson": "Beispiel JSON",
         "responsiveImage": {
             "asPicture": false,
             "asImage": true,

package/src/stories/views/components/base/image/responsive_image.hbs

@@ -37,11 +37,13 @@
                     <img class="w-full{{~#if ../../_addClassImg}} {{../../_addClassImg}}{{/if}}" src="{{../this.fallback}}" alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}">
                 </noscript>
             {{/unless}}
-            <img {{#with this.sizes}}sizes="{{this}}" {{/with~}}
-                    loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"
-                    {{#if ../../_noDelay}}
+            <img{{#if ../../_isWebview}} data-primary-type="hr-nt:image"
+                        data-image-id="{{nextRandom}}"{{/if}}
+                {{#with this.sizes}} sizes="{{this}}" {{/with~}}
+                loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"
+                {{#if ../../_noDelay}}
                         fetchpriority="high"
-                    {{/if}}
+                 {{/if}}
                  {{#with this.srcset}} {{#if ../../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                 alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}"
@@ -51,4 +53,7 @@
             {{~#with ../../_addClass }}</div>{{/with}}
         {{/with}}
     {{/if}}
+    {{#if ../_isWebview}}
+        <script type="application/json" id="{{getRandom}}">{{{../this.imageJson}}}</script>
+    {{/if}}
 {{/withParam}}

package/src/stories/views/components/content/copytext/components/accordion/fixtures/accordion.json

@@ -1 +1 @@
-{"copytext":{"title":"Akkordeon Titel","copytextParagraph":[{"isHeadline":true,"text":"Das ist der erste Eintrag (mit einer ziemlich langen Headline, die so lang ist, dass sie umbricht)"},{"paragraphBoxItem":{"isImage":true,"Image":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/hasebe-kane-102_v-1to1__medium.jpg","sources":[{"sizes":"(min-width: 768px) 460px, (min-width: 640px) calc(100vw - 8.5rem), calc(100vw - 2.5rem)","srcset":"images/hasebe-kane-102_v-1to1__small.jpg 380w, images/hasebe-kane-102_v-1to1__medium.jpg 480w, images/hasebe-kane-102_v-1to1.jpg 720w, images/hasebe-kane-102_v-1to1__large.jpg 960w"}]}}},"isParagraph":true,"text":{"split":[{"isText":true,"text":"Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen?"},{"isUl":true,"text":"<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt</li>"},{"isOl":true,"text":"<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt</li>"}]}},{"isHeadline":true,"text":"Das ist der zweite Eintrag"},{"paragraphBoxItem":{"isImage":true,"Image":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/buchmesse-fahnen-102_v-1to1__medium.jpg","sources":[{"sizes":"(min-width: 768px) 460px, (min-width: 640px) calc(100vw - 8.5rem), calc(100vw - 2.5rem)","srcset":"images/buchmesse-fahnen-102_v-1to1__small.jpg 380w, images/buchmesse-fahnen-102_v-1to1__medium.jpg 480w, images/buchmesse-fahnen-102_v-1to1.jpg 720w, images/buchmesse-fahnen-102_v-1to1__large.jpg 960w"}]}}},"isParagraph":true,"text":{"split":[{"isText":true,"text":"Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen?"}]}},{"isHeadline":true,"text":"Das ist der dritte Eintrag"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen?"},{"isUl":true,"text":"<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt</li>"}]}}]}}
+{"copytext":{"title":"Akkordeon Titel","copytextParagraph":[{"isHeadline":true,"text":"Das ist der erste Eintrag (mit einer ziemlich langen Headline, die so lang ist, dass sie umbricht)"},{"paragraphBoxItem":{"isImage":true,"Image":{"copyrightWithLinks":"","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/hasebe-kane-102_v-1to1__medium.jpg","sources":[{"sizes":"(min-width: 768px) 460px, (min-width: 640px) calc(100vw - 8.5rem), calc(100vw - 2.5rem)","srcset":"images/hasebe-kane-102_v-1to1__small.jpg 380w, images/hasebe-kane-102_v-1to1__medium.jpg 480w, images/hasebe-kane-102_v-1to1.jpg 720w, images/hasebe-kane-102_v-1to1__large.jpg 960w"}]}}},"isParagraph":true,"text":{"split":[{"isText":true,"text":"Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen?"},{"isUl":true,"text":"<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt</li>"},{"isOl":true,"text":"<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt</li>"}]}},{"isHeadline":true,"text":"Das ist der zweite Eintrag"},{"paragraphBoxItem":{"isImage":true,"Image":{"copyrightWithLinks":"","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/buchmesse-fahnen-102_v-1to1__medium.jpg","sources":[{"sizes":"(min-width: 768px) 460px, (min-width: 640px) calc(100vw - 8.5rem), calc(100vw - 2.5rem)","srcset":"images/buchmesse-fahnen-102_v-1to1__small.jpg 380w, images/buchmesse-fahnen-102_v-1to1__medium.jpg 480w, images/buchmesse-fahnen-102_v-1to1.jpg 720w, images/buchmesse-fahnen-102_v-1to1__large.jpg 960w"}]}}},"isParagraph":true,"text":{"split":[{"isText":true,"text":"Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen?"}]}},{"isHeadline":true,"text":"Das ist der dritte Eintrag"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen?"},{"isUl":true,"text":"<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt</li>"}]}}]}}

package/src/stories/views/components/content/copytext/components/contentbox/fixtures/contentbox.json

@@ -1 +1 @@
-{"copytext":{"title":"Contentbox: Volle Breite, mit Bild über halbe Breite","showFullSize":{"isTrue":true},"copytextParagraph":[{"paragraphBoxItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/buchmesse-fahnen-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/buchmesse-fahnen-102_v-16to9__small.jpg 320w, images/buchmesse-fahnen-102_v-16to9__medium.jpg 480w, images/buchmesse-fahnen-102_v-16to9__medium__extended.jpg 640w, images/buchmesse-fahnen-102_v-16to9.jpg 960w, images/buchmesse-fahnen-102_v-16to9__retina.jpg 1920w"}]}}}],"copytext":{"paragraph":[{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}}]}}}
+{"copytext":{"title":"Contentbox: Volle Breite, mit Bild über halbe Breite","showFullSize":{"isTrue":true},"copytextParagraph":[{"paragraphBoxItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/buchmesse-fahnen-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/buchmesse-fahnen-102_v-16to9__small.jpg 320w, images/buchmesse-fahnen-102_v-16to9__medium.jpg 480w, images/buchmesse-fahnen-102_v-16to9__medium__extended.jpg 640w, images/buchmesse-fahnen-102_v-16to9.jpg 960w, images/buchmesse-fahnen-102_v-16to9__retina.jpg 1920w"}]}}}],"copytext":{"paragraph":[{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}}]}}}

package/src/stories/views/components/content/copytext/components/image/image.hbs

@@ -6,7 +6,7 @@
                 _type="story"
                 _variant="100-copytext-portrait"
                 _noAr="true"
-                _isWebview=../../_isWebview}}
+                _isWebview=_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
                 _cssClass="my-6 sm480:my-7 sm480:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
@@ -14,7 +14,7 @@
                 _type="story"
                 _variant="copytext-portrait"
                 _noAr="true"
-                _isWebview=../../_isWebview}}
+                _isWebview=_isWebview}}
         {{/if}}
 {{else}}
         {{#if this.showFullSize.isTrue}}
@@ -24,7 +24,7 @@
                 _type="story"
                 _variant="100-copytext"
                 _pictureAddClass="ar-16-9"
-                _isWebview=../../_isWebview}}
+                _isWebview=_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
                 _cssClass="my-6 sm480:my-7 article-full-width sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
@@ -32,7 +32,7 @@
                 _type="story"
                 _variant="copytext"
                 _pictureAddClass="ar-16-9"
-                _isWebview=../../_isWebview}}
+                _isWebview=_isWebview}}
         {{/if}}
     {{/if}}
  

package/src/stories/views/components/content/copytext/copytext.hbs

@@ -10,7 +10,7 @@
         {{#unless this.isInfoBox}}
             {{~#with this.paragraphBoxItem }}
                 {{~#if this.isImage}}
-                    {{~> components/content/copytext/components/image/image}}    
+                    {{~> components/content/copytext/components/image/image _isWebview=../../_isWebview}}    
                 {{/if~}}
                 {{~#if this.isContentBox}}
                     {{~> components/content/copytext/components/contentbox/contentbox ~}}

package/src/stories/views/components/content/copytext/copytext.stories.js

@@ -66,7 +66,15 @@ export const WithImage = {
     name: 'Image',
     args: copytext_image_json,
 }
-
+export const WithImageWebview = {
+    render: Template.bind({}),
+    name: 'Image Webview',
+    
+    args: {
+        ...copytext_image_json,
+        _isWebview: true
+    }
+}
 export const WithInfobox = {
     render: Template.bind({}),
     name: 'Infobox',