Actions

[00:00:00]
>> All right, let's move on to actions. Actions are element level lifecycle functions. They're really useful for things like interfacing with third-party libraries. If you have something that you wanna use that is not a Svelte component but it allows you to work with the DOM, then an action is a great way of integrating those.

[00:00:18]
It's useful for things like lazy loaded images, or tooltips, or adding custom event handlers. And in this app here, you can scribble on the canvas. If we pick a color, like orange, close that, and then draw on the canvas, we can scribble. But if you open this menu and then cycle through the options with the tab key, you'll quickly discover that it's highlighted the wrong thing.

[00:00:41]
I wanted to highlight the button, but instead it highlighted the URL bar. And that's because at the moment this modal menu isn't trapping focus. Trapping keyboard focus is an important thing to do when we're trying to build user interfaces that are accessible for keyboard users as well as mouse users.

[00:00:59]
And that's the sort of thing that we can fix with an action. So over in our actions.js file, we have a trapFocus function, and like a transition it receives a node as its first argument and lets you apply some logic. So inside App.svelte we're gonna go ahead and import that.

[00:01:31]
And we'll add it to the menu with use:trapFocus. All right, let's take a look at what's happening in this function. So we begin by storing a reference to whatever element was previously focused, we have a little helper function here that gets all of the focusable elements inside the node.

[00:01:56]
And then we have a key down handler which whenever we press the tab button we'll cycle through those focusable elements. And focus the next one or the previous one, and then when we get to the end it will cycle back to the beginning. And the first thing that we do is we focus the first focusable element inside the menu.

[00:02:17]
So when we open this and if I press the tab key you will see that the orange button is the next focusable element because it was previously focusing the red button. Right now though it doesn't do anything beyond that. If we get to the end of the focusable list and press tab again, then the focus leaves this menu, and that's the part that we wanna fix.

[00:02:38]
So first of all, we want to add an event listener. We want to listen for the keydown event, and we wanna use that handle key down function. And secondly, this is a recurring theme today, when we do some setup work we also want to do some teardown work at the end.

[00:03:00]
So we're gonna return an object with a destroy method that will get called when the element is removed from the DOM. Okay, and finally we wanna reset the focus to the element that was focused before the menu appeared. Just in case an element wasn't focused for some reason, we're gonna use the optional chaining operator and call its focus method.

[00:03:39]
So now when we open the menu and cycle through the options, it will get to the end and then it will go back to the start, right? This is a more accessible menu. Pick a nice blue color, close the menu and go nuts. And just like transitions and everything else you can add parameters to your actions.

[00:04:06]
In this exercise we want to add a tooltip to the button using a library called Tippy.js. So you'll see here that we already have used tooltip, but if you hover over the button, you'll see that the tooltip contains no content. It might be a little bit hard to see in dark mode, perhaps if I, just for the sake of this exercise, switch over to light mode, you can see that a tooltip is appearing, but there's nothing in there.

[00:04:36]
And that's because we're not parsing anything in. Back to dark mode. Close that window. So here's our action, our tooltip function. We're creating the tooltip using Tippy, but we need to pass in some options, let me do that up here. And then where we call the action, We'll parse in some content, and we'll give it a theme, there's a bunch of themes that you get with Tippy, material is one of them.

[00:05:11]
And now if we hover over the button, you'll see that it's rendering a tooltip correctly. Now there is one thing that is not working with this right now, if we change this, To some different text, it won't be reflected in the tooltip, and that's because we're not updating the value inside.

[00:05:31]
And we can fix that by adding an update method to our action. Tippy has a setProps method which takes some options. And so now if I change the text back into Frontmnd Masters, if I hover over, it appears in the tooltip.