Consolidate Apple OS detection

There were previously two functions that checked for Apple OS.

Converts previous OS module to Styling and modernises the function in Helpers.

assets/js/entry/html.js

@@ -17,7 +17,7 @@ import { initialize as initTooltips } from '../tooltips/tooltips'
 import { initialize as initHintsPage } from '../tooltips/hint-page'
 import { initialize as initCopyButton } from '../copy-button'
 import { initialize as initSettings } from '../settings'
-import { initialize as initOs } from '../os'
+import { initialize as initStyling } from '../styling'
 import { initialize as initTabsets } from '../tabsets'
 import { initialize as initPreview} from '../preview'
 
@@ -31,7 +31,7 @@ onDocumentReady(() => {
   initTooltips()
   initHintsPage()
   initCopyButton()
-  initOs()
+  initStyling()
   initTabsets()
 
   if (isPreview) {

assets/js/helpers.js

@@ -213,10 +213,10 @@ export function getProjectNameAndVersion () {
 }
 
 /**
- * Return `true` if the client's OS is MacOS.
+ * Return `true` if the client's OS is Apple.
  *
  * @return {Boolean}
  */
-export function isMacOS () {
-  return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)
+export function isAppleOS () {
+  return /(Macintosh|iPhone|iPad|iPod)/.test(window.navigator.userAgent)
 }

assets/js/keyboard-shortcuts.js

@@ -1,4 +1,4 @@
-import { isMacOS, qs } from './helpers'
+import { isAppleOS, qs } from './helpers'
 import { toggleSidebar } from './sidebar/sidebar-drawer'
 import { focusSearchInput } from './search-bar'
 import { cycleTheme } from './theme'
@@ -72,7 +72,7 @@ function handleKeyDown (event) {
 
   const matchingShortcut = keyboardShortcuts.find(shortcut => {
     if (shortcut.hasModifier) {
-      if (isMacOS() && event.metaKey) { return shortcut.key === event.key }
+      if (isAppleOS() && event.metaKey) { return shortcut.key === event.key }
       if (event.ctrlKey) { return shortcut.key === event.key }
 
       return false

assets/js/search-bar.js

@@ -10,7 +10,7 @@ import {
   AUTOCOMPLETE_CONTAINER_SELECTOR,
   AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR
 } from './autocomplete/autocomplete-list'
-import { isMacOS, qs } from './helpers'
+import { isAppleOS, qs } from './helpers'
 
 const SEARCH_INPUT_SELECTOR = 'form.search-bar input'
 const SEARCH_CLOSE_BUTTON_SELECTOR = 'form.search-bar .search-close-button'
@@ -67,17 +67,17 @@ function addEventListeners () {
   }
 
   searchInput.addEventListener('keydown', event => {
-    const macOS = isMacOS()
+    const appleOS = isAppleOS()
 
     if (event.key === 'Escape') {
       clearSearch()
       searchInput.blur()
     } else if (event.key === 'Enter') {
       handleAutocompleteFormSubmission(event)
-    } else if (event.key === 'ArrowUp' || (macOS && event.ctrlKey && event.key === 'p')) {
+    } else if (event.key === 'ArrowUp' || (appleOS && event.ctrlKey && event.key === 'p')) {
       moveAutocompleteSelection(-1)
       event.preventDefault()
-    } else if (event.key === 'ArrowDown' || (macOS && event.ctrlKey && event.key === 'n')) {
+    } else if (event.key === 'ArrowDown' || (appleOS && event.ctrlKey && event.key === 'n')) {
       moveAutocompleteSelection(1)
       event.preventDefault()
     } else if (event.key === 'Tab') {

assets/js/styling.js

@@ -0,0 +1,6 @@
+import { isAppleOS } from "./helpers"
+
+export function initialize () {
+  const osClass = isAppleOS() ? 'apple-os' : 'non-apple-os'
+  document.documentElement.classList.add(osClass)
+}