Button label based on the operating system
[00:01] Now for the keyboard shortcut, I went with Command K, but some people have Windows or Linux computers where they need to use the CTRL key. So let's take the operating system and show the appropriate combination.
[00:16] Here, in setup, we'll create a function called isAppleOS
. We'll need to grab the platform of the user, and for new browsers, we can access navigator?.userAgentData?.platform
, but this is not supported on all browsers, so we'll use navigator?.platform
as backup, and even set a default unknown
value. Then we can return a regex that will check if the platform includes any of the apple OS device names.
[00:50] Now we can use this function to set the value of the keyboard shortcut. We'll do isAppleOS
, then Command K, otherwise is Ctrl+K
. Let's expose it, and then use it in our template. And let's also check the non Apple version by changing this and here it is. Undo and there we go.
-
1Intro00:25
-
2Search modal button02:22
-
Button label based on the operating system01:22
-
4Styling the modal dialog02:29
-
5Open the modal using a keyboard shortcut02:17
-
6Modal dialog transitions03:30
-
7Styling the search form03:15
-
8Show and style the search results06:42
-
9Navigate list items using arrow keys08:42
-
1Intro00:25
-
2Search modal button02:22
-
Button label based on the operating system01:22
-
4Styling the modal dialog02:29
-
5Open the modal using a keyboard shortcut02:17
-
6Modal dialog transitions03:30
-
7Styling the search form03:15
-
8Show and style the search results06:42
-
9Navigate list items using arrow keys08:42