Skip to content

Commit

Permalink
add nps-6
Browse files Browse the repository at this point in the history
  • Loading branch information
matkat99 committed Oct 2, 2024
1 parent 7f26426 commit 5d1737d
Show file tree
Hide file tree
Showing 13 changed files with 192 additions and 86 deletions.
Binary file removed public/blog-placeholder-1.jpg
Binary file not shown.
Binary file removed public/blog-placeholder-2.jpg
Binary file not shown.
Binary file removed public/blog-placeholder-3.jpg
Binary file not shown.
Binary file removed public/blog-placeholder-4.jpg
Binary file not shown.
Binary file removed public/blog-placeholder-5.jpg
Binary file not shown.
Binary file removed public/blog-placeholder-about.jpg
Binary file not shown.
Binary file added public/images/nps-menu-lg-open.webp
Binary file not shown.
Binary file added public/images/nps-menu-simple-open.webp
Binary file not shown.
Binary file added public/images/nps-menu-sm-open.webp
Binary file not shown.
2 changes: 1 addition & 1 deletion src/content/prove/nps-2.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ Remember to run your new function as well!

Next we should make a list of the other things we need to do:

1. Set the information in the `intro` section. This will be the park full name, and the description from our data.
1. Set the information in the `intro` section. This will be the park full name, and the description from our data. You can do this in much the same way we inserted data in the header.
2. Create a template function that will create a component consisting of an image, headline, and paragraph. If you check out the real [Yellowstone site](https://www.nps.gov/yell/index.htm) you will notice that the image and headline are also links. You can call this function `mediaCardTemplate(info)`
3. We know that we want to create certain blocks, but they are not directly represented in our data. We could just hard code everything, but what if we want to change the content sections later? We should represent the sections in data...to make it easier to change later if necessary. We will create a new array called `parkInfoLinks` and add the following objects to it:

Expand Down
46 changes: 29 additions & 17 deletions src/content/prove/nps-5.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ Complete the following assignment individually. Feel free however to work togeth

## **01** Review the provided screenshots

Review the following screenshots to understand how the global navigation works for the page. It looks different for the mobile and wide views. Again for this part we will be building a simplified version.
Review the following screenshot to see where we will be when we finish this activity.

import Figure from "../../components/Figure.astro";

<Figure src="/images/nps-conditions-lg.webp" alt="Part 3 finished large screen">Part 3 Finish point large screen</Figure>
<Figure src="/images/nps-conditions-sm.webp" alt="Part 3 finished small screen">Part 3 Finish point small screen</Figure>
<Figure src="/images/nps-menu-simple-open.webp" alt="Menu simple open state">Menu Simple open state</Figure>


Here are a few things in particular to note:

Expand Down Expand Up @@ -200,18 +200,25 @@ function enableNavigation() {

// when the main menu button is clicked:
menuButton.addEventListener("click", (ev) => {
let target = ev.target;
// toggle the show class on the global-nav

// check to see if target is the button or something inside the button

// check to see if we just opened or closed the menu

// if we opened it then set the aria-expanded attribute to true
// if we opened it then set the aria-expanded attribute on the button to true

// if we closed it then set the aria-expanded attribute to false
// if we closed it then set the aria-expanded attribute on the button to false

});
}
```

>Caution!
>
>When we click on the button we might also be clicking on the text inside the button! In that case `ev.target` might not point to what we think it does. Before you try to set the `aria-expanded` attribute you shuold check to make sure we have the right target. Each element has a property called `tagName` that you can use to check. We are looking for a "BUTTON". If `ev.target` isn't a button, it means we clicked on something insdie the button and we can use `Element.closest()` to get back up to the button element we were expecting.
Finally we need to make sure that the text on the button changes as well.

For the button text we could add/remove classes to the elements, but there is actually a better way. We can take advantage of the fact that we are setting `aria-expanded` based on the menu state, and that the elements we want to show and hide are children of the button. We can use a [attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) to write the CSS to swap our labels.
Expand Down Expand Up @@ -240,18 +247,23 @@ function enableNavigation() {

// when the main menu button is clicked:
menuButton.addEventListener("click", (ev) => {
// toggle the show class on the global-nav
document.querySelector(".global-nav").classList.toggle("show");
// check to see if we just opened or closed the menu
if (document.querySelector(".global-nav").classList.contains("show")) {
// if we opened it then set the aria-expanded attribute to true
menuButton.setAttribute("aria-expanded", true);
} else {
// if we closed it then set the aria-expanded attribute to false
menuButton.setAttribute("aria-expanded", false);
}

console.log("toggle");
let target = ev.target;
// toggle the show class on the global-nav
document.querySelector(".global-nav").classList.toggle("show");
// check to see if ev.target is the button or something inside the button
if (target.tagName != "BUTTON") {
target = target.closest("button");
}
// check to see if we just opened or closed the menu
if (document.querySelector(".global-nav").classList.contains("show")) {
// if we opened it then set the aria-expanded attribute to true
target.setAttribute("aria-expanded", true);
} else {
// if we closed it then set the aria-expanded attribute to false
target.setAttribute("aria-expanded", false);
}

console.log("toggle");
});
}
```
Expand Down
Loading

0 comments on commit 5d1737d

Please sign in to comment.