Boeing viz/starting waypoints

I'm currently editing this for code explanations - was helping Sarah with a longform issue!

Note; unfortunately I have to run for a while, and this isn't totally, really ready to be PR'd, but some of the logic here needs some explanations, I think.

Added a custom 'header', because I had having issues retaining the full width & height, and thought I needed to insert the div outside the post-body div. When it was added directly to the post through a custom include, the div-wrapper would retain the margins from the post, and be heavily indented/aligned incorrectly. (edit: I'm going to revisit this as I just saw your comment - but it's definitely named incorrectly. After encountering this issue, I looked at how this was addressed on the oceans website, as the oceans intro video is full-screen as well). Should this wrapper instead be nested directly in the post content?
The text boxes are in a wrapper as well, with nested divs. In their current form, they scroll in a single div, but I'm going to stack them, and add a fade transition w/ waypoints. They currently have the incorrect scrolling effect, which is a bit misleading, I think.
In general, I don't think I've been applying the sticky effects correctly, but that will be edited this afternoon.

The Oceans spotlight header is not an appropriate example to use here; the use cases are entirely different. A better example from Oceans is looking at how the Scrollytelling map midway down the page is included as that's the same use case as what you're working with here. Trade Guys has a wrapper class already included in the styles that should get you started with making the content full width. However, you might need to make some calculation adjustments based on the different sized left/right margins on the post page. But re my previous comment, in no circumstances should you need to put any HTML content outside of the post body.
Please review the Codepen I sent you regarding the text. It's fine if you want to transition the opacity as the text comes into view, but the CSS properties you're using for it aren't going to accomplish the effect that we want.
The text container doesn't need to have position sticky on it. The thing that we're stickying is the container holding the plane/map SVGs. The idea is to have that section stick while the text continues to scroll over top of it. If you look at the Codepen, it has a barebones example of how the HTML should be structured and the accompanying CSS to get you started.

Regarding your comments - thank you so much, @jnschrag.

Removed the custom header and all related logic.
Updated the logic for position: sticky (and removed it from the scroll-text class). However, I'm having some trouble with the sticky effect. The idea is that the within the boeing-scroll div, the boeing-svg will stick to the top of the page, while the scroll-text boxes scroll within the div. Once the div reaches the waypoint at the top of the wrapper div, it is replaced by the next text-box. //edit: fixed somewhat.
Also updated the plane svg for proper element groupings. Now the label, part, line, and circle are all in the same group, which will make it easier to toggle the opacity of the parts with each waypoint. I'm going off of the logic that each waypoint will have to be called manually - when the div reaches the top of the screen.
Note: all of these features work best on small-screens: I haven't updated much for larger screens, except for some minor style changes.

@aleesteele

Thank you for submitting this and removing the unnecessary logic. The idea to group the plane parts along with their labels is a good one, and something we discussed early on so I'm glad you're implementing it. However, there are a few syntax bugs in the CSS & JS that are preventing this from working and allowing me to check this more thoroughly.

There's also still some confusion over the fundamental structure of how this should be set up. I know this is something you're still working on per your note above, but since we're running out of time to get this finished, I've created this Codepen which implements the structure and the basic CSS for how this should be set up. Please use this code as a starting point and restructure your code accordingly. I've left comments that hopefully explain a little bit more how this code works.

If you follow the Codepen above, you should only need to use Waypoints to trigger the hiding/showing of the new plane parts, which will simplify your JS quite a bit. You do not need it to trigger the sticky position or to update any text.

I wanted to talk about how to implement the JS part in-person, but since that wasn't possible this week, here is something to consider. Rather than selecting every element and manually calling each new Waypoint, think of how you can use loops to make this task easier. I would approach it like this:

Select all of the elements with a class of scroll-text (these should be paragraphs, btw. Not divs. Or the text inside of it should be inside of a paragraph if there will be multiple paragraphs per part)
For each of the elements with a class of scroll-text, apply a Waypoint
Within each Waypoint, select all of the parts and update their visibility accordingly
You can simplify knowing which parts go with which text by taking advantage of the data attributes, like so:
```
<span class="part" data-part="forward-fuselage">forward fuselage</span>
```
Where data-part="forward-fuselage" can be replaced with the ID of the correct part.

All together, it should look something like this:

// Select all of the scrollytelling text
const paragraphs = Array.from(document.querySelectorAll('.scroll-text'))

// Loop through each of the paragraphs to apply a Waypoint that is triggered when they come into view
paragraphs.forEach(paragraph => {
  // Get all the parts in that paragraph
  const parts = paragraph.querySelectorAll('.part')
  new Waypoint({
    element: paragraph,
    handler: direction => {
      Array.from(parts).forEach(part => {
        // Get Data attribute and use that to select the part of the plane. Then adjust the class as necessary.
      })
    }
  })
})

If you're unclear about any of the code here, please talk with Leeza who can give you further clarity or we can discuss this when we get back.

CSIS-iLab / trade_guys

Boeing viz/starting waypoints #69