Merge pull request #2492 from weseek/imprv/gw3081

Imprv/gw3081

src/client/js/components/Hotkeys/Hotkeys.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import HotkeysDetector from '../HotkeysDetector/HotkeysDetector';
 import StaffCredit from '../StaffCredit/StaffCredit';
 import MirrorMode from '../MirrorMode/MirrorMode';
+import ShowHotkeys from '../PageHotkeys/ShowHotkeys';
 import PageCreate from '../PageHotkeys/PageCreate';
 import PageEdit from '../PageHotkeys/PageEdit';
 
@@ -15,6 +16,7 @@ export default class Hotkeys extends React.Component {
     this.supportClasses = [
       StaffCredit,
       MirrorMode,
+      ShowHotkeys,
       PageCreate,
       PageEdit,
     ];
@@ -39,6 +41,9 @@ export default class Hotkeys extends React.Component {
   // this function generates keymap depending on what keys were selected in this.hotkeyCommand
   keymapSet() {
     let keymap = this.hotkeyList();
+    keymap = keymap.map((value) => {
+      return value.stroke;
+    });
     keymap = keymap.flat();
     keymap = new Set(keymap);
     return Array.from(keymap);
@@ -55,7 +60,7 @@ export default class Hotkeys extends React.Component {
   // activates when one of the hotkey strokes gets determined from HotkeysDetector
   onDetected(strokeDetermined) {
     let viewDetermined = this.supportClasses.filter((value) => {
-      return strokeDetermined.toString() === value.getHotkeyStroke().toString();
+      return strokeDetermined.toString() === value.getHotkeyStroke().stroke.toString();
     });
     viewDetermined = viewDetermined.map((value) => {
       return value.getComponent(this.deleteRender);

src/client/js/components/HotkeysDetector/HotkeysDetector.jsx

@@ -15,38 +15,63 @@ export default class HotkeysDetector extends React.Component {
   }
 
   check(event) {
+
     const target = event.target;
     // ignore when target dom is input
     const inputPattern = /^input|textinput|textarea$/i;
     if (inputPattern.test(target.tagName) || target.isContentEditable) {
       return;
     }
+    this.processingCommands = this.hotkeyList;
 
-    // don't fire when not needed
-    if (!event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey) {
-      console.log(event.key);
-      this.setState({
-        userCommand: this.state.userCommand.concat(event.key),
+    if (event.ctrlKey) {
+      this.processingCommands = this.processingCommands.filter((value) => {
+        return value.ctrlKey;
       });
-
-      // filters the corresponding hotkeys(keys) that the user has pressed so far
-      const tempUserCommand = this.state.userCommand;
-      this.processingCommands = this.hotkeyList.filter((value) => {
-        return value.slice(0, tempUserCommand.length).toString() === tempUserCommand.toString();
+    }
+    else if (event.metaKey) {
+      this.processingCommands = this.processingCommands.filter((value) => {
+        return value.metaKey;
+      });
+    }
+    else if (event.altKey) {
+      this.processingCommands = this.processingCommands.filter((value) => {
+        return value.altKey;
+      });
+    }
+    else if (event.shiftKey) {
+      this.processingCommands = this.processingCommands.filter((value) => {
+        return value.shiftKey;
       });
+    }
+    else {
+      this.processingCommands = this.processingCommands.filter((value) => {
+        return ((!value.ctrlKey) && (!value.metaKey) && (!value.altKey) && (!value.shiftKey));
+      });
+    }
+    this.setState({
+      userCommand: this.state.userCommand.concat(event.key),
+    });
+    // filters the corresponding hotkeys(keys) that the user has pressed so far
+    const tempUserCommand = this.state.userCommand;
+    this.processingCommands = this.processingCommands.filter((value) => {
+      return value.stroke.slice(0, tempUserCommand.length).toString() === tempUserCommand.toString();
+    });
+    this.processingCommands = this.processingCommands.map((value) => {
+      return value.stroke;
+    });
 
-      // executes if there were keymap that matches what the user pressed fully.
-      if ((this.processingCommands.length === 1) && (this.hotkeyList.find(ary => ary.toString() === this.state.userCommand.toString()))) {
-        this.props.onDetected(this.processingCommands[0]);
-        this.setState({
-          userCommand: [],
-        });
-      }
-      else if (this.processingCommands.toString() === [].toString()) {
-        this.setState({
-          userCommand: [],
-        });
-      }
+    // executes if there were keymap that matches what the user pressed fully.
+    if ((this.processingCommands.length === 1) && (this.hotkeyList.find(obj => obj.stroke.toString() === this.state.userCommand.toString()))) {
+      this.props.onDetected(this.processingCommands[0]);
+      this.setState({
+        userCommand: [],
+      });
+    }
+    else if (this.processingCommands.toString() === [].toString()) {
+      this.setState({
+        userCommand: [],
+      });
     }
     return null;
 

src/client/js/components/MirrorMode/MirrorMode.jsx

@@ -13,7 +13,13 @@ export default class MirrorMode extends React.Component {
 
   // when this is called it returns the hotkey stroke
   static getHotkeyStroke() {
-    return ['x', 'x', 'b', 'b', 'a', 'y', 'a', 'y', 'ArrowDown', 'ArrowLeft'];
+    return {
+      stroke: ['x', 'x', 'b', 'b', 'a', 'y', 'a', 'y', 'ArrowDown', 'ArrowLeft'],
+      ctrlKey: false,
+      metaKey: false,
+      altKey: false,
+      shiftKey: false,
+    };
   }
 
   static getComponent() {

src/client/js/components/PageHotkeys/PageCreate.jsx

@@ -14,7 +14,13 @@ export default class PageCreate extends React.Component {
 
   // when this is called it returns the hotkey stroke
   static getHotkeyStroke() {
-    return ['c'];
+    return {
+      stroke: ['c'],
+      ctrlKey: false,
+      metaKey: false,
+      altKey: false,
+      shiftKey: false,
+    };
   }
 
   static getComponent() {

src/client/js/components/PageHotkeys/PageEdit.jsx

@@ -10,7 +10,13 @@ export default class PageEdit extends React.Component {
 
   // when this is called it returns the hotkey stroke
   static getHotkeyStroke() {
-    return ['e'];
+    return {
+      stroke: ['e'],
+      ctrlKey: false,
+      metaKey: false,
+      altKey: false,
+      shiftKey: false,
+    };
   }
 
   static getComponent() {

src/client/js/components/PageHotkeys/ShowHotkeys.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+/**
+ *
+ * @export
+ * @extends {React.Component}
+ */
+
+export default class ShowHotkeys extends React.Component {
+
+  // when this is called it returns the hotkey stroke
+  static getHotkeyStroke() {
+    return {
+      stroke: ['/'],
+      ctrlKey: true,
+      metaKey: true,
+      altKey: false,
+      shiftKey: false,
+    };
+  }
+
+  static getComponent() {
+    return <ShowHotkeys />;
+  }
+
+  componentDidMount() {
+    // show modal to create a page
+    $('#shortcuts-modal').modal('toggle');
+    return null;
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+      </React.Fragment>
+    );
+  }
+
+}

src/client/js/components/StaffCredit/StaffCredit.jsx

@@ -29,7 +29,13 @@ export default class StaffCredit extends React.Component {
 
   // when this is called it returns the hotkey stroke
   static getHotkeyStroke() {
-    return ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
+    return {
+      stroke: ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'],
+      ctrlKey: false,
+      metaKey: false,
+      altKey: false,
+      shiftKey: false,
+    };
   }
 
   static getComponent(onDeleteRender) {

src/client/js/legacy/crowi.js

@@ -85,12 +85,6 @@ Crowi.modifyScrollTop = function() {
   }, timeout);
 };
 
-Crowi.handleKeyCtrlSlashHandler = (event) => {
-  // show modal to create a page
-  $('#shortcuts-modal').modal('toggle');
-  event.preventDefault();
-};
-
 Crowi.initClassesByOS = function() {
   // add classes to cmd-key by OS
   const platform = navigator.platform.toLowerCase();
@@ -400,25 +394,6 @@ window.addEventListener('hashchange', (e) => {
   }
 });
 
-window.addEventListener('keydown', (event) => {
-  const target = event.target;
-
-  // ignore when target dom is input
-  const inputPattern = /^input|textinput|textarea$/i;
-  if (inputPattern.test(target.tagName) || target.isContentEditable) {
-    return;
-  }
-
-  switch (event.key) {
-    case '/':
-      if (event.ctrlKey || event.metaKey) {
-        Crowi.handleKeyCtrlSlashHandler(event);
-      }
-      break;
-    default:
-  }
-});
-
 // adjust min-height of page for print temporarily
 window.onbeforeprint = function() {
   $('#page-wrapper').css('min-height', '0px');