Skip to content

Commit 4623740

Browse files
bennadelbennadel
committed
Add OS-specific modifier demo.
1 parent 94dad1e commit 4623740

3 files changed

Lines changed: 178 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Capturing Keyboard Event Modifiers Across Operating Systems In JavaScript](https://bennadel.github.io/JavaScript-Demos/demos/keydown-os-modifier/)
1314
* [Exploring The Interplay Between HTML Entities And TextContent In JavaScript](https://bennadel.github.io/JavaScript-Demos/demos/text-content-entities/)
1415
* [Inserting Text At The Last Known Selection / Caret Location In JavaScript](https://bennadel.github.io/JavaScript-Demos/demos/insert-text-selection/)
1516
* [Rending Emoji Glyphs Using Hexadecimal CodePoints In JavaScript](https://bennadel.github.io/JavaScript-Demos/demos/emoji-glyph-from-hex/)

‎demos/keydown-os-modifier/demo.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
2+
body {
3+
font-family: sans-serif ;
4+
font-size: 18px ;
5+
}
6+
7+
.event {
8+
display: flex ;
9+
justify-content: center ;
10+
margin: 60px 0px 30px 0px ;
11+
padding: 0px 0px 0px 0px ;
12+
}
13+
14+
.event div {
15+
border: 1px solid #cccccc ;
16+
border-radius: 4px 4px 4px 4px ;
17+
display: flex ;
18+
flex-direction: column ;
19+
margin: 0px 15px 0px 15px ;
20+
text-align: center ;
21+
overflow: hidden ;
22+
width: 140px ;
23+
}
24+
25+
.event dt {
26+
background-color: #eaeaea ;
27+
font-weight: bold ;
28+
margin: 0px 0px 0px 0px ;
29+
padding: 10px 0px 10px 0px ;
30+
}
31+
32+
.event dd {
33+
background-color: #fafafa ;
34+
flex: 1 1 auto ;
35+
font-size: 30px ;
36+
margin: 0px 0px 0px 0px ;
37+
padding: 50px 0px 50px 0px ;
38+
white-space: nowrap ;
39+
}

‎demos/keydown-os-modifier/index.htm‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>
6+
Capturing Keyboard Event Modifiers Across Operating Systems In JavaScript
7+
</title>
8+
9+
<link rel="stylesheet" type="text/css" href="./demo.css" />
10+
</head>
11+
<body>
12+
13+
<h1>
14+
Capturing Keyboard Event Modifiers Across Operating Systems In JavaScript
15+
</h1>
16+
17+
<p>
18+
<strong>OS Modifier:</strong>
19+
<code class="osModifier">
20+
<!-- To be populated via JavaScript. -->
21+
</code>
22+
</p>
23+
24+
<dl class="event">
25+
<div class="key">
26+
<dt>Key</dt>
27+
<dd><!-- To be populated via JavaScript. --></dd>
28+
</div>
29+
<div class="modifier">
30+
<dt>Modified</dt>
31+
<dd><!-- To be populated via JavaScript. --></dd>
32+
</div>
33+
</dl>
34+
35+
<script type="text/javascript">
36+
37+
// The "modifier" key is different across the various operating systems (OS).
38+
// Let's calculate both the human-readable key (for UI hints) and the event
39+
// property that we're going to use when checking for a modified key-operation.
40+
var osModifier = buildOsModifier();
41+
42+
// Gather our DOM nodes to populate.
43+
var osModifierNode = document.querySelector( ".osModifier" );
44+
var keyNode = document.querySelector( ".event .key dd" );
45+
var modifierNode = document.querySelector( ".event .modifier dd" );
46+
47+
// Render which modifier key the current OS is using.
48+
osModifierNode.textContent = osModifier.long;
49+
50+
window.addEventListener( "keydown", handleKeydown );
51+
52+
// --------------------------------------------------------------------------- //
53+
// --------------------------------------------------------------------------- //
54+
55+
// I handle the keydown event on the Window.
56+
function handleKeydown( event ) {
57+
58+
// If this is the REFRESH PAGE event, allow the default behavior to happen -
59+
// I need this to work so that building this demo isn't a total pain.
60+
if ( isPageRefreshEvent( event ) ) {
61+
62+
return;
63+
64+
}
65+
66+
// Since we want to capture and render key combinations that have system
67+
// modifiers, we need to prevent the default behavior (otherwise the demo
68+
// will do some funky stuff).
69+
event.preventDefault();
70+
71+
// Render the key properties to the page.
72+
keyNode.textContent = event.key;
73+
// Check the OS-specific property for modification. On the MacOS, this will
74+
// be the "meta" key; and elsewhere, it will be the "control" key.
75+
modifierNode.textContent = event[ osModifier.modifier ]
76+
? "Yes"
77+
: "No"
78+
;
79+
80+
}
81+
82+
83+
// I build the modifier object that will best fit the current operating system.
84+
function buildOsModifier() {
85+
86+
if ( isMacish() ) {
87+
88+
return({
89+
os: "Mac(ish)",
90+
long: "Command", // For human-facing views.
91+
short: "Cmd", // For human-facing views.
92+
modifier: "metaKey" // For event property inspection.
93+
});
94+
95+
} else {
96+
97+
return({
98+
os: "Non-Mac(ish)",
99+
long: "Control", // For human-facing views.
100+
short: "Ctrl", // For human-facing views.
101+
modifier: "ctrlKey" // For event property inspection.
102+
});
103+
104+
}
105+
106+
}
107+
108+
109+
// I determine if the current OS is Mac related (MacOS, iOS, etc).
110+
// --
111+
// CAUTION: The "navigator.platform" property - and other properties within the
112+
// navigator object - are deprecated. As such, we should take care to make sure
113+
// that OS-detection is isolated within a function or service that can be re-used
114+
// across our application. This way, when / if it breaks, we only need to update
115+
// the operating-system detection logic within a single point-of-failure.
116+
function isMacish() {
117+
118+
// Pattern borrowed from TinyKeys library.
119+
// --
120+
// https://github.com/jamiebuilds/tinykeys/blob/e0d23b4f248af59ffbbe52411505c3d681c73045/src/tinykeys.ts#L50-L54
121+
var macOsPattern = /Mac|iPod|iPhone|iPad/;
122+
123+
return( macOsPattern.test( window.navigator.platform ) );
124+
125+
}
126+
127+
128+
// I determine if the given event is for a page-refresh operation.
129+
function isPageRefreshEvent( event ) {
130+
131+
return( ( event.key === "r" ) && event[ osModifier.modifier ] );
132+
133+
}
134+
135+
</script>
136+
137+
</body>
138+
</html>

0 commit comments

Comments
 (0)