Ai2svelte and ai2svelte scroller components

[MinamiFunakoshiTR]

After talking to Samu, who said he often has multiple static ai2html graphics on one page, I decided to build a reusable Ai2svelte.svelte component that pulls in ID's from the google doc and uses that to call ai2svelte components. To do that, I made ai2svelte components load onMount and in async.

This component is now in lib, but it might make sense to put it in graphics-svelte-components. To make this work, I added the Type:ai2svelte block in the master google doc. I am worried the master google doc is getting a bit cluttered.

I also finished making the scroller components, which are ready for you if you are curious. I am going to go through it with Feilding next week when he's back, so no need to touch the stuff in the Scroller folder, though.

[hobbes7878]

Yeah, I'm worried a bit about how much boilerplate we're adding both in the google doc and the rig. Let's discuss tho. I think some of this may be better placed in the svelte components project, as you mention.

[MinamiFunakoshiTR]

Updates from Sept. 28:

• Cleaned up google doc by putting most code blocks in the top skip section
• Made component for Ai2svelte and added it to a new branch in the reuters-components repo as well
• I think we should keep Chart.svelte and Scroller in the lib folder (instead of in reuters-compponents) since they need to be customised
• Added the links to ai2svelte.js and the ai2svelte settings you need for the new rig in the Developer links section at the bottom of the master google doc
• If we're going to onboard more people onto this project, might be worth considering if we should make a ai2svelte .ai template with the right settings

Question:

• The margin-top (or margin-bottom) adds a weird spacing between the graphic note and source in the
  section. Should we make it margin: 0?

[MinamiFunakoshiTR]

EOD Sept. 29

• Made 3 versions of Ai2SvelteContainer.svelte in Scroller/

1. Ai2SvelteContainerStatic.svelte Static version, working

2. Ai2SvelteContainerOnChange.svelte Dynamically imports whenever the index changes. working, but performance not great since we're importing every time the index changes. the files seem to not cache since i see a flash every time i scroll.

3. Ai2SvelteContainer.svelte Not done. Working on dynamically importing all components in one go, instead of when the index changes. I'm having trouble adding the loaded Ai2svelteGraphic component into an array (see lines 12-14). Would be great to talk about how to make this work, and what the best way to set the ai2svelte scroller might be in general.

[MinamiFunakoshiTR]

Sept. 30

• Deleted unnecessary components and all .ai files in project-files/
• Moved Scroller/ and AiContainer/ to inside lib/ai2html
• Restyled the regular ai2html map (Haiti) to make it more abstract. Also changed colour scheme
• Made new dummy maps for the scroller ai2svelte section
• In the master google doc, added the props BlurbPosition: and GraphicSide: and notes
• Made the positions for the scroller background graphic and foreground blurbs customiseable
• Made the size (width) of the scroller background graphic customiseable. Also added "top-0" option to the google doc to make the graphic align with the top of the window. The graphic is vertically centred by default.
• Deleted preview link from package.json
• Added "@sveltejs/svelte-scroller": "^2.0.7", to package.json

[hobbes7878]

Hey, so I checked these out and made some edits. They're working really, really well and are super configurable, especially the scroller, but you're gonna see a lotta new code from me, mostly in the scroller.

Here's some of what I did:

• Renamed the components and some light renaming of props in the Google docs (aesthetic...)
• Refactored the scroller so it's only loading the background component one step before and one step after the active one. This is for Granados, specifically, as he has about 50 steps in his illustrated pieces. New code means we're loading max 3 background images for him, which is a MASSIVE page improvement. Could make that lag configurable, too -- load 2 steps before and after active -- whatever.
• I moved Background and Foreground into their own components. Partially aesthetic but also some code separation.
• I cleared out almost all of your notes for users from both components. My going theory here is that the logic is pretty hardwired and so the only thing folks should be adjusting are styles, and for that they should use a global scss tag and target what they want changed from the outside. Still in the commit history if we later decide we want folks messing around under the hood after all.
• I added a new layout type by setting TextPosition to right opposite or left opposite. So this is the case where you push the graphic to the other side of the text. It's mostly for when we're scrolly-telling charts. Without that opposite it just moves the text alone left or right, which is the my map is busy on the left so I prefer text to the right, example. So anyway, this should cover both use cases now.
• I redid a good chunk of the scroller container SCSS in both foreground and background. The goal here was to make the GraphicSize prop behave exactly like the section.graphic element and respect wide/wider/etc. in background, and use flexbox in the foreground.
• I took out the top-0 layout option. Let's talk more about this, but I don't think we want that the way it was behaving.

Anyway, I'd pull this down and play with the layout props in the content.json file to see how all the layouts work. I did that with Chris today just to check we weren't missing an obvious one. He figured we've got basically all standard use cases covered.

I'm also figured out a new way we could get these two components into the components lib that I want to talk about. One potential benefit of doing so is I actually think with the layout handled the way it is in the scroller now, we could make this a component that handles both AI and D3 backgrounds.

OK, OK. Take a look on Monday, and we'll follow up. I think we're dangerously close to something ridiculously cool that is going to sell this whole rig to APAC. :P

[hobbes7878]

Published a version of both components in the components lib with docs on how to implement w/ archieML Google docs. Scroller now works with both ai2svelte graphics and just regular old Svelte components.

Talk next week if we want to use these in this bluprint:

Ai2svelte Scroller

[hobbes7878]

This is ready to merge into master after you test @MinamiFunakoshiTR.

[MinamiFunakoshiTR]

I saw we had both static/img/graphics and statics/images/graphics in src/. We should have only statics/images -- I think the static/img/graphics folder came into being because I accidentally used the old ai2html setting when running the script and forgot to delete this folder.

I deleted the static/img/graphics folder and renamed the pngs in statics/images/graphics so that everything is lowercase. I also renamed the pngs to ai-scroller- so that the file name matches the component file name and what's in the google doc.

I tested the preview, all looks good.

The components are ready for Sam Granados!