Modifier key refactor (#784)

* Add functions for getting keyboard key information

* Use os + DocumentUtil to get modifier key names

* Remove keyboard modifier info from environment info
This commit is contained in:
toasted-nutbread 2020-09-08 10:53:41 -04:00 committed by GitHub
parent 0a5e832dfd
commit 36fc5abae5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 60 additions and 79 deletions

View File

@ -20,18 +20,18 @@
*/ */
class KeyboardMouseInputField extends EventDispatcher { class KeyboardMouseInputField extends EventDispatcher {
constructor(inputNode, mouseButton, inputNameMap, keySeparator) { constructor(inputNode, mouseButton, os) {
super(); super();
this._inputNode = inputNode; this._inputNode = inputNode;
this._keySeparator = keySeparator; this._mouseButton = mouseButton;
this._keySeparator = ' + ';
this._inputNameMap = new Map(DocumentUtil.getModifierKeys(os));
this._keyPriorities = new Map([ this._keyPriorities = new Map([
['meta', -4], ['meta', -4],
['ctrl', -3], ['ctrl', -3],
['alt', -2], ['alt', -2],
['shift', -1] ['shift', -1]
]); ]);
this._mouseButton = mouseButton;
this._inputNameMap = inputNameMap;
this._mouseInputNamePattern = /^mouse(\d+)$/; this._mouseInputNamePattern = /^mouse(\d+)$/;
this._eventListeners = new EventListenerCollection(); this._eventListeners = new EventListenerCollection();
this._value = ''; this._value = '';

View File

@ -22,6 +22,7 @@
* ClipboardPopupsController * ClipboardPopupsController
* DictionaryController * DictionaryController
* DictionaryImportController * DictionaryImportController
* DocumentUtil
* GenericSettingController * GenericSettingController
* PopupPreviewController * PopupPreviewController
* ProfileController * ProfileController
@ -43,12 +44,12 @@ async function settingsPopulateModifierKeys() {
const scanModifierKeySelect = document.querySelector('#scan-modifier-key'); const scanModifierKeySelect = document.querySelector('#scan-modifier-key');
scanModifierKeySelect.textContent = ''; scanModifierKeySelect.textContent = '';
const environment = await api.getEnvironmentInfo(); const {platform: {os}} = await api.getEnvironmentInfo();
const modifierKeys = [ const modifierKeys = [
{value: 'none', name: 'None'}, ['none', 'None'],
...environment.modifiers.keys DocumentUtil.getModifierKeys(os)
]; ];
for (const {value, name} of modifierKeys) { for (const [value, name] of modifierKeys) {
const option = document.createElement('option'); const option = document.createElement('option');
option.value = value; option.value = value;
option.textContent = name; option.textContent = name;

View File

@ -22,8 +22,7 @@
class ProfileConditionsUI { class ProfileConditionsUI {
constructor(settingsController) { constructor(settingsController) {
this._settingsController = settingsController; this._settingsController = settingsController;
this._keySeparator = ''; this._os = null;
this._keyNames = new Map();
this._conditionGroupsContainer = null; this._conditionGroupsContainer = null;
this._addConditionGroupButton = null; this._addConditionGroupButton = null;
this._children = []; this._children = [];
@ -80,12 +79,12 @@ class ProfileConditionsUI {
return this._settingsController.profileIndex; return this._settingsController.profileIndex;
} }
setKeyInfo(separator, keyNames) { get os() {
this._keySeparator = separator; return this._os;
this._keyNames.clear();
for (const {value, name} of keyNames) {
this._keyNames.set(value, name);
} }
set os(value) {
this._os = value;
} }
prepare(conditionGroups) { prepare(conditionGroups) {
@ -209,7 +208,7 @@ class ProfileConditionsUI {
} }
createKeyboardMouseInputField(inputNode, mouseButton) { createKeyboardMouseInputField(inputNode, mouseButton) {
return new KeyboardMouseInputField(inputNode, mouseButton, this._keyNames, this._keySeparator); return new KeyboardMouseInputField(inputNode, mouseButton, this._os);
} }
// Private // Private

View File

@ -47,8 +47,8 @@ class ProfileController {
// Private // Private
async _onOptionsChanged() { async _onOptionsChanged() {
const {modifiers} = await api.getEnvironmentInfo(); const {platform: {os}} = await api.getEnvironmentInfo();
this._profileConditionsUI.setKeyInfo(modifiers.separator, modifiers.keys); this._profileConditionsUI.os = os;
const optionsFull = await this._settingsController.getOptionsFullMutable(); const optionsFull = await this._settingsController.getOptionsFullMutable();
this._formWrite(optionsFull); this._formWrite(optionsFull);

View File

@ -259,6 +259,46 @@ class DocumentUtil {
return false; return false;
} }
static getModifierKeys(os) {
switch (os) {
case 'win':
return [
['alt', 'Alt'],
['ctrl', 'Ctrl'],
['shift', 'Shift'],
['meta', 'Windows']
];
case 'mac':
return [
['alt', 'Opt'],
['ctrl', 'Ctrl'],
['shift', 'Shift'],
['meta', 'Cmd']
];
case 'linux':
case 'openbsd':
case 'cros':
case 'android':
return [
['alt', 'Alt'],
['ctrl', 'Ctrl'],
['shift', 'Shift'],
['meta', 'Super']
];
default: // 'unknown', etc
return [
['alt', 'Alt'],
['ctrl', 'Ctrl'],
['shift', 'Shift'],
['meta', 'Meta']
];
}
}
static isMetaKeySupported(os, browser) {
return !(browser === 'firefox' || browser === 'firefox-mobile') || os === 'mac';
}
// Private // Private
_setImposterStyle(style, propertyName, value) { _setImposterStyle(style, propertyName, value) {

View File

@ -33,11 +33,9 @@ class Environment {
async _loadEnvironmentInfo() { async _loadEnvironmentInfo() {
const browser = await this._getBrowser(); const browser = await this._getBrowser();
const os = await this._getOperatingSystem(); const os = await this._getOperatingSystem();
const modifierInfo = this._getModifierInfo(browser, os);
return { return {
browser, browser,
platform: {os}, platform: {os}
modifiers: modifierInfo
}; };
} }
@ -91,61 +89,4 @@ class Environment {
return 'chrome'; return 'chrome';
} }
} }
_getModifierInfo(browser, os) {
let osKeys;
let separator;
switch (os) {
case 'win':
separator = ' + ';
osKeys = [
['alt', 'Alt'],
['ctrl', 'Ctrl'],
['shift', 'Shift'],
['meta', 'Windows']
];
break;
case 'mac':
separator = '';
osKeys = [
['alt', '⌥'],
['ctrl', '⌃'],
['shift', '⇧'],
['meta', '⌘']
];
break;
case 'linux':
case 'openbsd':
case 'cros':
case 'android':
separator = ' + ';
osKeys = [
['alt', 'Alt'],
['ctrl', 'Ctrl'],
['shift', 'Shift'],
['meta', 'Super']
];
break;
default: // 'unknown', etc
separator = ' + ';
osKeys = [
['alt', 'Alt'],
['ctrl', 'Ctrl'],
['shift', 'Shift'],
['meta', 'Meta']
];
break;
}
const isFirefox = (browser === 'firefox' || browser === 'firefox-mobile');
const keys = [];
for (const [value, name] of osKeys) {
// Firefox doesn't support event.metaKey on platforms other than macOS
if (value === 'meta' && isFirefox && os !== 'mac') { continue; }
keys.push({value, name});
}
return {keys, separator};
}
} }