59 lines
1.7 KiB
JavaScript
59 lines
1.7 KiB
JavaScript
import { getPlatform } from './utils/user-agent-platform.js';
|
|
import $ from 'jquery';
|
|
|
|
/**
|
|
* Adds OS-specific class to component
|
|
* @param {string} osClass - OS-specific class to add
|
|
* @param {Object} options - Component options
|
|
* @param {jQuery} options.$component - jQuery element reference
|
|
*/
|
|
function addOSClass(osClass, { $component }) {
|
|
$component.addClass(osClass);
|
|
}
|
|
|
|
/**
|
|
* Updates keybinding display based on detected platform
|
|
* @param {Object} options - Component options
|
|
* @param {jQuery} options.$component - jQuery element reference
|
|
* @param {string} options.platform - Detected platform
|
|
*/
|
|
function updateKeyBindings({ $component, platform }) {
|
|
const osx = $component.data('osx');
|
|
const linux = $component.data('linux');
|
|
const win = $component.data('win');
|
|
|
|
let keybind;
|
|
|
|
if (platform === 'other') {
|
|
if (win !== linux) {
|
|
keybind =
|
|
`<code class="osx">${osx}</code> for macOS, ` +
|
|
`<code>${linux}</code> for Linux, ` +
|
|
`and <code>${win}</code> for Windows`;
|
|
} else {
|
|
keybind =
|
|
`<code>${linux}</code> for Linux and Windows and ` +
|
|
`<code class="osx">${osx}</code> for macOS`;
|
|
}
|
|
} else {
|
|
keybind = `<code>${$component.data(platform)}</code>`;
|
|
}
|
|
|
|
$component.html(keybind);
|
|
}
|
|
|
|
/**
|
|
* Initialize and render platform-specific keybindings
|
|
* @param {Object} options - Component options
|
|
* @param {HTMLElement} options.component - DOM element
|
|
* @returns {void}
|
|
*/
|
|
export default function KeyBinding({ component }) {
|
|
// Initialize keybindings
|
|
const platform = getPlatform();
|
|
const $component = $(component);
|
|
|
|
addOSClass(platform, { $component });
|
|
updateKeyBindings({ $component, platform });
|
|
}
|