{browser.i18n.getMessage("informationLabel")}
++
+
+
+ }
+ />
+ + + {browser.i18n.getMessage("amazonTitleLabel")} + +
+email: {email}
+{browser.i18n.getMessage("informationLabel")}
+
+
+ }
+ />
+ + + {browser.i18n.getMessage("amazonTitleLabel")} + +
+email: {email}
++ + {browserInfo().name === "Firefox" + ? browser.i18n.getMessage("addonPageLabel") + : browser.i18n.getMessage("extensionPageLabel")} + + + + GitHub + +
+ + } + /> + + ); +}; diff --git a/src/options/components/KeyboardShortcutForm.js b/src/options/components/KeyboardShortcutForm.js new file mode 100644 index 0000000..9dc824f --- /dev/null +++ b/src/options/components/KeyboardShortcutForm.js @@ -0,0 +1,154 @@ +import React, { Component } from "react"; +import browserInfo from "browser-info"; +import browser from "webextension-polyfill"; +import ClearIcon from "../icons/clear.svg"; +import RestetIcon from "../icons/reset.svg"; + +const normalizeKey = (key, keyCode) => { + const alphabet = /^([a-z]|[A-Z])$/; + if (alphabet.test(key)) return key.toUpperCase(); + + const digit = /^[0-9]$/; + const func = /^F([0-9]|1[0-2])$/; + const homes = /^(Home|End|PageUp|PageDown|Insert|Delete)$/; + if (digit.test(key) || func.test(key) || homes.test(key)) return key; + + const space = /^\s$/; + if (space.test(key)) return "Space"; + + const arrows = /^(ArrowUp|ArrowDown|ArrowLeft|ArrowRight)$/; + if (arrows.test(key)) return key.split("Arrow")[1]; + + const medias = /^(MediaPlayPause|MediaStop)$/; + if (medias.test(key)) return key; + if (key == "MediaTrackNext") return "MediaNextTrack"; + if (key == "MediaTrackPrevious") return "MediaPrevTrack"; + + const keyCode0 = 48; + if (keyCode0 <= keyCode && keyCode <= keyCode0 + 9) return keyCode - keyCode0; + + if (keyCode == 188) return "Comma"; + if (keyCode == 190) return "Period"; + + return ""; +}; + +export default class KeyboardShortcutForm extends Component { + constructor(props) { + super(props); + this.isMac = browserInfo().os == "OS X"; + this.state = { + shortcut: props.shortcut, + value: props.shortcut, + defaultValue: props.defaultValue, + error: "" + }; + } + + handleFocus(e) { + e.target.select(); + window.document.onkeydown = () => false; + window.document.onkeypress = () => false; + } + + handleBlur(e) { + const shortcut = this.state.shortcut; + this.setState({ error: "", value: shortcut }); + window.document.onkeydown = () => true; + window.document.onkeypress = () => true; + } + + handleChange(e) {} + + handleKeyDown(e) { + if (e.repeat) return; + if (e.key == "Tab") { + window.document.activeElement.blur(); + return; + } + const normalizedKey = normalizeKey(e.key, e.keyCode); + let error = ""; + + const mediaKeys = /^(MediaPlayPause|MediaStop|MediaNextTrack|MediaPrevTrack)$/; + const funcKeys = /^F([0-9]|1[0-2])$/; + const modifierKeys = /^(Control|Alt|Shift|Meta)$/; + + if (mediaKeys.test(normalizedKey) || funcKeys.test(normalizedKey)) error = ""; + else if (modifierKeys.test(e.key)) error = browser.i18n.getMessage("typeLetterMessage"); + else if (!e.ctrlKey && !e.altKey && !e.metaKey) + error = this.isMac + ? browser.i18n.getMessage("includeMacModifierKeysMessage") + : browser.i18n.getMessage("includeModifierKeysMessage"); + else if (normalizedKey == "") error = browser.i18n.getMessage("invalidLetterMessage"); + + const value = `${e.ctrlKey ? (this.isMac ? "MacCtrl+" : "Ctrl+") : ""}${ + e.metaKey && this.isMac ? "Command+" : "" + }${e.altKey ? "Alt+" : ""}${e.shiftKey ? "Shift+" : ""}${normalizedKey}`; + + this.setState({ error: error, value: value || "" }); + const isValidShortcut = value != "" && error == ""; + if (isValidShortcut) this.updateShortcut(value); + } + + handleKeyUp(e) { + if (this.state.error != "") { + this.setState({ value: "" }); + } + } + + async updateShortcut(shortcut) { + try { + await browser.commands.update({ name: this.props.id, shortcut: shortcut }); + this.setState({ shortcut: shortcut || "" }); + } catch (e) { + this.setState({ error: browser.i18n.getMessage("invalidShortcutMessage") }); + } + } + + async clearShortcut() { + await browser.commands.reset(this.props.id).catch(() => {}); + this.setState({ shortcut: "", value: "" }); + } + + async resetShortcut() { + const defaultValue = this.state.defaultValue; + this.updateShortcut(defaultValue); + this.setState({ value: defaultValue || "" }); + } + + render() { + return ( +{this.state.error}
+{browser.i18n.getMessage("keyboardShortcutsLabel")}
+
+ {caption
+ ? props.useRawCaptions
+ ? caption
+ : browser.i18n.getMessage(caption).replace(/
/g, "\n")
+ : ""}
+
{browser.i18n.getMessage("settingsLabel")}
+
+ Simple Translate
+ 
-