scroller working, leaves unclean code

.vscode/settings.json

@@ -1,14 +1 @@
-{
-  "i18n-ally.localesPaths": [
-    "locales"
-  ],
-  "i18n-ally.keystyle": "nested",
-  "eslint.validate": [
-    "javascript",
-    "svelte"
-  ],
-  "editor.formatOnSave": true,
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  }
-}
+{"i18n-ally.localesPaths":["locales"],"i18n-ally.keystyle":"nested","eslint.validate":["javascript","svelte"],"editor.formatOnSave":true,"editor.codeActionsOnSave":{"source.fixAll.eslint":true}}

assetinfo.json

@@ -1,3 +1 @@
-{
-  "assetid": ["205245"]
-}
+{"assetid":["205245"]}

jsconfig.json

@@ -1,16 +1 @@
-{
-	"compilerOptions": {
-		"target": "es6",
-		"module": "es6",
-		"baseUrl": ".",
-		"paths": {
-			"$app/*": [".svelte/dev/runtime/app/*", ".svelte/build/runtime/app/*"],
-			"$lib/*": ["src/lib/*"],
-			"$utils/*": ["src/utils/*"],
-			"$pkg": ["package.json"],
-			"$imgs": ["src/statics/images/manifest.json"],
-			"$locales/*": ["locales/*"]
-		}
-	},
-	"include": ["src/**/*.js", "src/**/*.svelte"]
-}
+{"compilerOptions":{"target":"es6","module":"es6","baseUrl":".","paths":{"$app/*":[".svelte/dev/runtime/app/*",".svelte/build/runtime/app/*"],"$lib/*":["src/lib/*"],"$utils/*":["src/utils/*"],"$pkg":["package.json"],"$imgs":["src/statics/images/manifest.json"],"$locales/*":["locales/*"]}},"include":["src/**/*.js","src/**/*.svelte"]}

locales/en/content.json

@@ -1 +1 @@
-{"SEOTitle":"My page title for Google","SEODescription":"My page description for Google","ShareTitle":"My page title for Twitter","ShareDescription":"My page description for Twitter","ShareImgPath":"images/reuters-graphics.jpg","Hed":"Reuters Graphics Interactive","Dek":"The beginning of a beautiful page","Kicker":"Global News","Byline":"**Jane Doe** and **John Doe**","Published":"2021-09-01T08:30:00.000Z","Updated":"","blocks":[{"Type":"text","Text":"Pig short ribs jerky, meatloaf turducken ribeye strip steak bacon pastrami tail pancetta chicken.  Pig short ribs jerky, meatloaf turducken ribeye strip steak bacon pastrami tail pancetta chicken. \n\nHam hock turducken kielbasa tri-tip alcatra. Alcatra ball tip swine boudin burgdoggen tail salami shoulder strip steak ground round fatback drumstick rump. Flank venison strip steak shankle pork drumstick ball tip biltong, ham boudin pancetta t-bone prosciutto andouille landjaeger."},{"Type":"graphic","Title":"Turducken andouille","ID":"test-barchart","Chatter":"Pork chislic short loin burgdoggen pork chop capicola flank pancetta.","Size":"normal","Source":"Pork chop prosciutto","Note":"Pork ball tip ribeye, chuck shankle buffalo flank."},{"Type":"text","Text":"## Section header\n\n“Rump salami spare ribs jowl corned beef picanha meatloaf bresaola, porchetta jerky ham hock venison ground round alcatra.”\n\nPork chislic short loin burgdoggen pork chop capicola flank pancetta. Pork chislic short loin burgdoggen pork chop capicola flank pancetta."},{"Type":"photo","Src":"images/shark.jpg","AltText":"describe what is happening in the image (for people using screenreaders)","Caption":"add a caption and source information (for all readers)"},{"Type":"text","Text":"Pork chislic short loin burgdoggen pork chop capicola flank pancetta. Pork chislic short loin burgdoggen pork chop capicola flank pancetta.\n\nPork chislic short loin burgdoggen pork chop capicola flank pancetta. Pork chislic short loin burgdoggen pork chop capicola flank pancetta.\n\n### Tenderloin turkey t-bone\n\nBacon meatball leberkas, tongue alcatra tri-tip sausage chuck pastrami pig tail buffalo pork belly spare ribs. Leberkas tenderloin jowl, tongue spare ribs porchetta ham hock capicola ribeye pork belly pork chop kielbasa.\n\n> Chicken short loin drumstick bacon, pig sausage kevin frankfurter ribeye tail capicola pastrami. Frankfurter meatball kielbasa pork. Pastrami picanha drumstick tongue t-bone.\n>> Friedrich Hamburger\n\nBeef ribs biltong rump hamburger. Chicken filet mignon cupim, pastrami shankle kielbasa pancetta frankfurter bacon sirloin sausage."},{"Type":"scroller","ID":"test1","blurbs":[{"Text":"##### You can add subheads too!\nThis is text for blurb 1. You can **bold** or *italicise* text. You can also add <span class=highlight>span tags</span> in the google doc.\n\nYou can have multiple lines too!  Pig short ribs jerky, meatloaf turducken ribeye strip steak bacon pastrami tail pancetta chicken."},{"Text":"Blurb 2 TKTK. You can have multiple lines."},{"Text":"Blurb 3 TKTK.  Pig short ribs jerky, meatloaf turducken ribeye strip steak bacon pastrami tail pancetta chicken."}]},{"Type":"text","Text":"Pig short ribs jerky, meatloaf turducken ribeye strip steak bacon pastrami tail pancetta chicken.  Pig short ribs jerky, meatloaf turducken ribeye strip steak bacon pastrami tail pancetta chicken."},{"Type":"text","Text":"Pig short ribs jerky, meatloaf turducken ribeye strip steak bacon pastrami tail pancetta chicken.  Pig short ribs jerky, meatloaf turducken ribeye strip steak bacon pastrami tail pancetta chicken."}],"EndNotes":"##### Note\nData is current as of today.\n\n##### Sources\nData, Inc.\n\n##### Edited by\nEditor, Copyeditor"}
+{"SEOTitle":"My page title for Google","SEODescription":"My page description for Google","ShareTitle":"My page title for Twitter","ShareDescription":"My page description for Twitter","ShareImgPath":"images/reuters-graphics.jpg","Hed":"Reuters Graphics Interactive","Dek":"The beginning of a beautiful page","Kicker":"Global News","Byline":"**Jane Doe** and **John Doe**","Published":"2021-09-01T08:30:00.000Z","Updated":"","blocks":[{"Type":"text","Text":"Pig short ribs jerky, meatloaf turducken ribeye strip steak bacon pastrami tail pancetta chicken.  Pig short ribs jerky, meatloaf turducken ribeye strip steak bacon pastrami tail pancetta chicken. \n\nHam hock turducken kielbasa tri-tip alcatra. Alcatra ball tip swine boudin burgdoggen tail salami shoulder strip steak ground round fatback drumstick rump. Flank venison strip steak shankle pork drumstick ball tip biltong, ham boudin pancetta t-bone prosciutto andouille landjaeger."},{"Type":"graphic","Title":"Turducken andouille","ID":"test-chart","Chatter":"Pork chislic short loin burgdoggen pork chop capicola flank pancetta.","Size":"normal","Source":"Pork chop prosciutto","Note":"Pork ball tip ribeye, chuck shankle buffalo flank."},{"Type":"text","Text":"## Section header\n\n“Rump salami spare ribs jowl corned beef picanha meatloaf bresaola, porchetta jerky ham hock venison ground round alcatra.”\n\nPork chislic short loin burgdoggen pork chop capicola flank pancetta. Pork chislic short loin burgdoggen pork chop capicola flank pancetta."},{"Type":"photo","Src":"images/shark.jpg","AltText":"describe what is happening in the image (for people using screenreaders)","Caption":"add a caption and source information (for all readers)"},{"Type":"text","Text":"Pork chislic short loin burgdoggen pork chop capicola flank pancetta. Pork chislic short loin burgdoggen pork chop capicola flank pancetta.\n\nPork chislic short loin burgdoggen pork chop capicola flank pancetta. Pork chislic short loin burgdoggen pork chop capicola flank pancetta.\n\n### Tenderloin turkey t-bone\n\nBacon meatball leberkas, tongue alcatra tri-tip sausage chuck pastrami pig tail buffalo pork belly spare ribs. Leberkas tenderloin jowl, tongue spare ribs porchetta ham hock capicola ribeye pork belly pork chop kielbasa.\n\n> Chicken short loin drumstick bacon, pig sausage kevin frankfurter ribeye tail capicola pastrami. Frankfurter meatball kielbasa pork. Pastrami picanha drumstick tongue t-bone.\n>> Friedrich Hamburger\n\nBeef ribs biltong rump hamburger. Chicken filet mignon cupim, pastrami shankle kielbasa pancetta frankfurter bacon sirloin sausage."},{"Type":"scroller","ID":"test1","blurbs":[{"Text":"##### You can add subheads too!\nThis is text for blurb 1. You can **bold** or *italicise* text. You can also add <span class=highlight>span tags</span> in the google doc.\n\nYou can have multiple lines too!  Pig short ribs jerky, meatloaf turducken ribeye strip steak bacon pastrami tail pancetta chicken."},{"Text":"Blurb 2 TKTK. You can have multiple lines."},{"Text":"Blurb 3 TKTK.  Pig short ribs jerky, meatloaf turducken ribeye strip steak bacon pastrami tail pancetta chicken."}]},{"Type":"text","Text":"Pig short ribs jerky, meatloaf turducken ribeye strip steak bacon pastrami tail pancetta chicken.  Pig short ribs jerky, meatloaf turducken ribeye strip steak bacon pastrami tail pancetta chicken."},{"Type":"text","Text":"Pig short ribs jerky, meatloaf turducken ribeye strip steak bacon pastrami tail pancetta chicken.  Pig short ribs jerky, meatloaf turducken ribeye strip steak bacon pastrami tail pancetta chicken."}],"EndNotes":"##### Note\nData is current as of today.\n\n##### Sources\nData, Inc.\n\n##### Edited by\nEditor, Copyeditor"}

package.json

@@ -98,4 +98,4 @@
     "preview": ""
   },
   "homepage": ""
-}
+}

src/lib/Chart.svelte

@@ -5,6 +5,7 @@
   import marked from 'marked';
 
   export let title;
+  export let id;
   export let chatter;
   export let source;
   export let note;
@@ -17,15 +18,15 @@
   }, 250);
 
   onMount(() => {
-    chart.selection('#basic-barchart').draw();
+    chart.selection(`#${id}`).draw();
     window.addEventListener('resize', resize);
   });
 </script>
 
 <section class="graphic {size}">
   <h3>{title}</h3>
   <p>{chatter}</p>
-  <div id="basic-barchart" class="barchart-container"></div>
+  <div id="{id}" class="barchart-container"></div>
   <aside>
     <p class="note">
       Note: {@html marked.parseInline(note)}

src/lib/Page.svelte

@@ -11,7 +11,6 @@
   } from '@reuters-graphics/graphics-svelte-components';
   import Chart from './Chart.svelte';
   import Scroller from './Scroller/index.svelte';
-  // console.log(content);
 </script>
 
 <article class="container-fluid">
@@ -53,6 +52,7 @@
     {:else if block.Type === 'graphic'}
       <Chart
         title="{block.Title}"
+        id="{block.ID}"
         chatter="{block.Chatter}"
         source="{block.Source}"
         note="{block.Note}"

src/lib/Scroller/Ai2SvelteContainer.svelte

@@ -0,0 +1,35 @@
+<script>
+  /* Add ai2svelte files here. */
+  import Ai2Svelte1 from '../ai2html/step-1.svelte';
+  import Ai2Svelte2 from '../ai2html/step-2.svelte';
+  import Ai2Svelte3 from '../ai2html/step-3.svelte';
+
+  /* Don't touch the code below. */
+  export let index;
+  export let blurbs;
+</script>
+
+<h1>Step: {index}</h1>
+
+<div class="ai2svelte {index === 1 ? 'visible' : 'hidden'}" step="1">
+  <Ai2Svelte1 />
+</div>
+<div class="ai2svelte {index === 2 ? 'visible' : 'hidden'}" step="2">
+  <Ai2Svelte2 />
+</div>
+<div class="ai2svelte {index === 3 ? 'visible' : 'hidden'}" step="3">
+  <Ai2Svelte3 />
+</div>
+
+<style lang="scss">
+  div {
+    width: 100%;
+    position: absolute;
+    transition: 0.5s opacity ease;
+    opacity: 0;
+
+    &.visible {
+      opacity: 1;
+    }
+  }
+</style>

src/lib/Scroller/index.svelte

@@ -1,28 +1,76 @@
 <script>
-  /*
-If you're getting errors running svelte scroller, try: yarn add @sveltejs/svelte-scroller
-If using ai2svelte, make sure you have the ai2svelt.js: https://github.com/reuters-graphics/ai2svelte/blob/master/ai2svelte.js
-AND change the settings in your ai file to what's listed here: https://github.com/reuters-graphics/bluprint_graphics-kit/blob/master/docs/developers/ai.md
+  /* 
+If you're getting errors running svelte scroller, try:
+yarn add @sveltejs/svelte-scroller
+
+If you're getting errors running svelte scroller, try:
+yarn add @sveltejs/svelte-scroller
+
+If using ai2svelte, make sure you have the ai2svelt.js:
+https://github.com/reuters-graphics/ai2svelte/blob/master/ai2svelte.js
+
+AND change the settings in your ai file to what's listed here: 
+https://github.com/reuters-graphics/bluprint_graphics-kit/blob/master/docs/developers/ai.md
+
+In general, you don't need to change the code in this file.
+You can change the css for blurbs in the style section at the bottom.
 */
+
   import Scroller from '@sveltejs/svelte-scroller';
   import marked from 'marked';
-  // import SlideContainer from './SlideContainer.svelte';
+  import Ai2SvelteContainer from './Ai2SvelteContainer.svelte';
 
   export let blurbs; // google doc content
 
-  $: innerWidth = 0; // This makes sure the background is full width and doesn't move when it sticks. If your visuals aren't full width, you can adjust width fo [slot='background'] in the scss
-  let index; // this starts at 0 by default
+  // innerWidth makes sure the background is full width and doesn't move when it sticks.
+  // If your visuals aren't full width, you can adjust width fo [slot='background'] in the scss
+  $: innerWidth = 0;
+  let index = 0; // this starts at 0 by default
   let offset, progress;
+  let ready = false;
+  // let reversedArray;
+
+  // console.log(blurbs);
+
+  import { onMount } from 'svelte';
+  onMount(() => {
+    ready = true;
+    // let ai2SvelteDivs = document.querySelectorAll('.ai2svelte-container > div');
+    // let reversedArray = Array.from(ai2SvelteDivs).reverse();
+
+    // // Add 'step' as an attribute to each div containing ai2svelte
+    // reversedArray.forEach((elem, i) => {
+    //   elem.setAttribute('step', i + 1);
+    // });
+  });
+
+  $: {
+    console.log('index', index + 1);
+
+    // let test = d3.select('.ai2svelte-container');
+
+    // console.log('test', test);
+    // onMount(() => {
+    //   // console.log('index', index + 1);
+    //   // let showThisAi2svelteDiv = document.querySelector(
+    //   //   `.bg > div[step="${index + 1}"]`
+    //   // );
+    //   // showThisAi2svelteDiv.classList.add('show');
+    //   // console.log('showThisAi2svelteDiv', index + 1, showThisAi2svelteDiv);
+    // });
+  }
 </script>
 
 <svelte:window bind:innerWidth />
 
 <Scroller bind:index bind:offset bind:progress>
   <div slot="background" bind:clientWidth="{innerWidth}">
-    <!-- Bind width of div.bg to window innerWidth -->
     <div class="bg" id="bg-{index + 1}" style="width:{innerWidth + 30}px">
-      Section {index + 1} is now active.
-      <!-- <SlideContainer index="{index + 1}" blurbs="{blurbs}" /> -->
+      <!-- Section {index + 1} is now active. -->
+
+      <div class="ai2svelte-container">
+        <Ai2SvelteContainer index="{index + 1}" blurbs="{blurbs}" />
+      </div>
     </div>
   </div>
 
@@ -42,24 +90,30 @@ AND change the settings in your ai file to what's listed here: https://github.co
 <style lang="scss">
   @import '~@reuters-graphics/style-color/scss/all';
 
+  // Ai2svelte style
+  .ai2svelte-container {
+    width: 100%;
+    position: relative;
+  }
+
   [slot='background'] {
     height: 100vh;
     margin-left: -15px;
     // border: 2px solid blue;
   }
   .bg {
     height: 100%;
-    transition: 0.5s background-color ease;
+    // transition: 0.5s opacity ease;
 
-    &#bg-1 {
-      background-color: pink;
-    }
-    &#bg-2 {
-      background-color: lightblue;
-    }
-    &#bg-3 {
-      background-color: lightseagreen;
-    }
+    // &#bg-1 {
+    //   background-color: pink;
+    // }
+    // &#bg-2 {
+    //   background-color: lightblue;
+    // }
+    // &#bg-3 {
+    //   background-color: lightseagreen;
+    // }
   }
 
   [slot='foreground'] {