Feat: added story and fade transition

elements/storytelling/src/helpers/render-html-string.js

@@ -128,6 +128,8 @@ export function renderHtmlString(htmlString, sections, initDispatchFunc, that) {
   );
 }
 
+let currentSrc = "";
+
 /**
  * Assign new value for attribute of element
  *
@@ -142,6 +144,20 @@ function assignNewAttrValue(section, index, elementSelector, parent) {
   Object.keys(section.steps[index]).forEach((attr) => {
     element[attr] = section.steps[index][attr];
   });
+
+  if (
+    ["IMG", "VIDEO"].includes(element.tagName) &&
+    element.src !== currentSrc
+  ) {
+    const newSrc = element.src;
+    element.style.opacity = 0.5;
+    element.src = currentSrc || newSrc;
+    currentSrc = newSrc;
+    setTimeout(() => {
+      element.src = currentSrc;
+      element.style.opacity = 1;
+    }, 500);
+  }
 }
 
 /**

elements/storytelling/src/style.eox.js

@@ -314,6 +314,12 @@ ${slider}
     position: sticky;
     top:0;
     z-index: 0;
+    opacity: 1;
+    object-fit: cover;
+    transition: all 0.5s linear;
+    -webkit-transition: all 0.5s linear;
+    -moz-transition: all 0.5s linear;
+    -o-transition: all 0.5s linear;
   }
   .story-telling .tour section-step {
     background: white;

elements/storytelling/stories/index.js

@@ -5,3 +5,4 @@ export { default as MarkdownAsURLStory } from "./markdown-url"; // StoryTelling
 export { default as MarkdownSlotStory } from "./markdown-slot"; // StoryTelling with markdown from the slot
 export { default as MarkdownEditorStory } from "./markdown-editor"; // StoryTelling with editor
 export { default as MarkdownInitEventStory } from "./markdown-init-event"; // StoryTelling with init event
+export { default as MarkdownTourStory } from "./markdown-tour"; // StoryTelling with tour

elements/storytelling/stories/markdown-tour.js

@@ -0,0 +1,31 @@
+/**
+ * Renders storytelling with tour.
+ */
+import { html } from "lit";
+
+export const MarkdownTour = {
+  args: {
+    markdown: `## Map Tour section <!--{ as="img" mode="tour" }-->
+
+### <!--{ src='https://www.gstatic.com/prettyearth/assets/full/14617.jpg' }-->
+#### This is Image tour - one.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+### <!--{ src='https://www.gstatic.com/prettyearth/assets/full/12516.jpg' }-->
+#### This is Image tour - two.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+### <!--{ src='https://www.gstatic.com/prettyearth/assets/full/5046.jpg' }-->
+#### This is Image tour - three.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    `,
+  },
+  render: (args) => html`
+    <eox-storytelling
+      id="markdown-tour"
+      markdown=${args.markdown}
+    ></eox-storytelling>
+  `,
+};
+
+export default MarkdownTour;

elements/storytelling/stories/storytelling.stories.js

@@ -8,6 +8,7 @@ import {
   MarkdownSlotStory,
   MarkdownEditorStory,
   MarkdownInitEventStory,
+  MarkdownTourStory,
 } from "./index";
 import { html } from "lit";
 
@@ -52,3 +53,8 @@ export const MarkdownWithEditor = MarkdownEditorStory;
  * StoryTelling with @init event
  */
 export const MarkdownInitEvent = MarkdownInitEventStory;
+
+/**
+ * StoryTelling with tour.
+ */
+export const MarkdownTour = MarkdownTourStory;