example hierarchy / navigation

[shiffman]

Now that there is a post for each example, how to cleanly show them? by chapter? Should the sidebar navigation include the numbers? (it's confusing to look at right now b/c the "titles" include the numbers but this will change.)

[scottwooden]

So to confirm. What would be good is:

chapter: 1 number: 03 Title: Stroke and Fill

So it means I can format on the title...

1.03 Shape and Fill

And in the nav I can go

1.03 Shape and Fill

Eventually I want to be able to do this...

Ch 1 01 Shape and Fill 02 asdfasdf 03 asdfasdf

Ch 2 01 asdfasdf 02 asdfasdf 03 asdfasdf

That would need some logic to format. Can look at this on nice to haves list.

[shiffman]

Yes, this sounds right. I will add the sub-number momentarily and update here.

[shiffman]

Ok, there are new example posts in there with chapter, number, and updated "title" that doesn't have the numbering. This should be less confusing to work with. The titles will need massaging but I will do that later.

[scottwooden]

Thanks, I've pushed update with Nav / titles pulling in chapter information

[shiffman]

I was futzing with some stuff and in order to keep things nicely sorted in file systems and on github I've batch renamed all examples and exercises to always use two digits, i.e.

example_3_2_blah is now example_03_02_blah etc.

I'm not sure if this helps or hurts the navigation and organization of the examples. The next thing to fix I suppose is that everything should be sorted by chapter in ascending order.

[scottwooden]

IT'S LOOKING AWESOME.

Yeah that should be fine, doesn't mess up my code in any way.

[shiffman]

Navigation is working great. Let's add chapter titles/headings and perhaps have the left navigation examples fold/unfold under chapter headings. The chapter titles could link to nothing, or the first example, or I could write a short paragraph intro to each chapter (excerpted from the book.)

[shiffman]

Playing with site leads me to believe that left-hand nav should know which chapter / example you are on and show that chapter unfolded and all the others folded. Should be easy to click to "next" example.

[scottwooden]

This is a logic head scratcher for me! Don't know if you want to take a look at the nav.html include.

Basically we need to create a bunch of if statements that say.. For each post...

• If it's the same chapter the page is on, show link,
• If it's not the same chapter and it's the first post of a new chapter, show link
• Otherwise hide.

You might be able to come up with an easy logic, it's giving me a bit of trouble!

[shiffman]

I can take a look yes. To clarify a bit, however, I imagine adding chapter headings to the nav and possibly the root examples/index.html page. I.e. it should look like:

Chapter 01
1-1 stroke fill
1-2 noFill
1-3 rgbcolor
1-4 alpha
1-5 zoog

Chapter 02
2-1 zoog

Chapter 03
3-1 setupdraw
3-2 mouseX mouseY
3-3 zoog mouse
3-4 continuousline
3-5 mouse key events
3-6 interactive zoog
3-7 translated zoog

Then the chapter headings would be links that would fold/unfold the list of examples. Maybe this is all we need since if you unfold a chapter it will stay unfolded as you click the examples? And we could add something that scrolls the nav to the current example being viewed?

Let me know if this helps simplify or makes it more complex.

[scottwooden]

Yeah this sounds good! Makes it simpler. So feel free to have a go and add the logic behind this so it displays appropriately. So ideally in the function we need to add class "hide" to the links we want to hide and keep the chapter specific links open.

I can add the javascript in to collapse and show chapters, and scroll chapters into view.

[shiffman]

I now have chapter headings on examples/index.html and _includes/nav.html. The chapter titles pull from _data/chapters.yml and I'm using some math filtering on post.chapter to display the correct chapter number and title. See:

http://learningprocessing.com/examples/

and the nav on any example page: http://learningprocessing.com/examples/chp01/example-01-01-stroke-fill/

It needs styling and javascript for collapsing/expanding/scrolling.

I'm not sure if I got through all the steps you needed @scottwooden, but let me know what you think so far!

[scottwooden]

Awesome! Okay I've added a some primitive collapse functions. Want to make it a bit nicer in terms of animation and maybe tweak the layout but the basis is there.

[scottwooden]

Oh forgot to add, havent add the scroll to functions yet. I'll sort that out next week too. :)

[shiffman]

An open question I have is that if by opening one chapter, all the other chapters should close. Or you can open and close them as you wish. I'm open to either solution. Main points for me now are:

• [x] design cleanup (font, spacing, etc.)
• [x] animate?
• [x] scroll to?
• [x] add same logic to exercises and videos

[scottwooden]

Okay this been tweaked and polished, let me know your thoughts! A lot clearer now with some structure in hierachy etc.

[shiffman]

This is looking great! Closing and will open new issues for other minor things (like the video sorting problem).