Creating user interface to manage the hotkeys

Packages/ohif-hotkeys/client/classes/HotkeysManager.js

@@ -58,9 +58,11 @@ export class HotkeysManager {
     }
 
     load(contextName) {
+        const context = this.getContext(contextName);
+        if (!context) return;
         const definitions = this.retrieve(contextName);
         if (!definitions) return;
-        this.set(contextName, definitions);
+        context.extend(definitions);
     }
 
     set(contextName, contextDefinitions) {

Packages/ohif-hotkeys/client/components/dialog.html

@@ -0,0 +1,5 @@
+<template name="hotkeysDialog">
+    {{#dialogSimple title='Keyboard Shortcuts'}}
+        {{>hotkeysForm}}
+    {{/dialogSimple}}
+</template>

Packages/ohif-hotkeys/client/components/form.html

@@ -0,0 +1,5 @@
+<template name="hotkeysForm">
+    {{#form class='form-themed'}}
+        {{>inputText class='hotkey' label='Window W/L'}}
+    {{/form}}
+</template>

Packages/ohif-hotkeys/client/components/form.js

@@ -0,0 +1,58 @@
+import { Template } from 'meteor/templating';
+import { $ } from 'meteor/jquery';
+import { _ } from 'meteor/underscore';
+
+Template.hotkeysForm.onCreated(() => {
+    const instance = Template.instance();
+
+    const rg = (start, end) => _.range(start, end + 1);
+    instance.allowedKeys = _.union(rg(32, 40), rg(48, 57), rg(65, 90), rg(112, 121), [123]);
+
+    instance.updateInputText = (event, displayPressedKey=false) => {
+        const $target = $(event.currentTarget);
+        const keysPressedArray = instance.getKeysPressedArray(event);
+
+        if (displayPressedKey) {
+            const specialKeyName = jQuery.hotkeys.specialKeys[event.which];
+            const keyName = specialKeyName || event.key;
+            keysPressedArray.push(keyName.toUpperCase());
+        }
+
+        $target.val(keysPressedArray.join('+'));
+    };
+
+    instance.getKeysPressedArray = event => {
+        const keysPressedArray = [];
+
+        if (event.ctrlKey && !event.altKey) {
+            keysPressedArray.push('CTRL');
+        }
+
+        if (event.shiftKey && !event.altKey) {
+            keysPressedArray.push('SHIFT');
+        }
+
+        if (event.altKey && !event.ctrlKey) {
+            keysPressedArray.push('ALT');
+        }
+
+        return keysPressedArray;
+    };
+});
+
+Template.hotkeysForm.events({
+    'keydown .hotkey'(event, instance) {
+        if (instance.allowedKeys.indexOf(event.keyCode) > -1) {
+            instance.updateInputText(event, true);
+            $(event.currentTarget).blur();
+        } else {
+            instance.updateInputText(event);
+        }
+
+        event.preventDefault();
+    },
+
+    'keyup .hotkey'(event, instance) {
+        instance.updateInputText(event);
+    }
+});

Packages/ohif-hotkeys/client/components/index.js

@@ -0,0 +1,4 @@
+import './dialog.html';
+
+import './form.html';
+import './form.js';

Packages/ohif-hotkeys/client/index.js

@@ -1 +1,2 @@
+import './components';
 import './lib';

Packages/ohif-hotkeys/main.js

@@ -1,5 +1,6 @@
 import { OHIF } from 'meteor/ohif:core';
 import { HotkeysManager } from 'meteor/ohif:hotkeys/client/classes/HotkeysManager';
+import 'jquery.hotkeys';
 
 // Create hotkeys namespace using a HotkeysManager class instance
 const hotkeys = new HotkeysManager();

Packages/ohif-hotkeys/package.js

@@ -4,12 +4,17 @@ Package.describe({
     version: '0.0.1'
 });
 
+Npm.depends({
+    'jquery.hotkeys': '0.1.0'
+});
+
 Package.onUse(function(api) {
     api.versionsFrom('1.4');
 
     // Meteor packages
     api.use([
         'ecmascript',
+        'templating',
         'reactive-var',
         'session',
         'iron:router',

Packages/ohif-viewerbase/client/compatibility/jquery.hotkeys.js

@@ -1,204 +0,0 @@
-/*jslint browser: true*/
-/*jslint jquery: true*/
-
-/*
- * jQuery Hotkeys Plugin
- * Copyright 2010, John Resig
- * Dual licensed under the MIT or GPL Version 2 licenses.
- *
- * Based upon the plugin by Tzury Bar Yochay:
- * https://github.com/tzuryby/jquery.hotkeys
- *
- * Original idea by:
- * Binny V A, http://www.openjs.com/scripts/events/keyboard_shortcuts/
- */
-
-/*
- * One small change is: now keys are passed by object { keys: '...' }
- * Might be useful, when you want to pass some other data to your handler
- */
-
-(function(jQuery) {
-
-  jQuery.hotkeys = {
-    version: "0.8",
-
-    specialKeys: {
-      8: "backspace",
-      9: "tab",
-      10: "return",
-      13: "return",
-      16: "shift",
-      17: "ctrl",
-      18: "alt",
-      19: "pause",
-      20: "capslock",
-      27: "esc",
-      32: "space",
-      33: "pageup",
-      34: "pagedown",
-      35: "end",
-      36: "home",
-      37: "left",
-      38: "up",
-      39: "right",
-      40: "down",
-      45: "insert",
-      46: "del",
-      59: ";",
-      61: "=",
-      96: "0",
-      97: "1",
-      98: "2",
-      99: "3",
-      100: "4",
-      101: "5",
-      102: "6",
-      103: "7",
-      104: "8",
-      105: "9",
-      106: "*",
-      107: "+",
-      109: "-",
-      110: ".",
-      111: "/",
-      112: "f1",
-      113: "f2",
-      114: "f3",
-      115: "f4",
-      116: "f5",
-      117: "f6",
-      118: "f7",
-      119: "f8",
-      120: "f9",
-      121: "f10",
-      122: "f11",
-      123: "f12",
-      144: "numlock",
-      145: "scroll",
-      173: "-",
-      186: ";",
-      187: "=",
-      188: ",",
-      189: "-",
-      190: ".",
-      191: "/",
-      192: "`",
-      219: "[",
-      220: "\\",
-      221: "]",
-      222: "'"
-    },
-
-    shiftNums: {
-      "`": "~",
-      "1": "!",
-      "2": "@",
-      "3": "#",
-      "4": "$",
-      "5": "%",
-      "6": "^",
-      "7": "&",
-      "8": "*",
-      "9": "(",
-      "0": ")",
-      "-": "_",
-      "=": "+",
-      ";": ": ",
-      "'": "\"",
-      ",": "<",
-      ".": ">",
-      "/": "?",
-      "\\": "|"
-    },
-
-    // excludes: button, checkbox, file, hidden, image, password, radio, reset, search, submit, url
-    textAcceptingInputTypes: [
-      "text", "password", "number", "email", "url", "range", "date", "month", "week", "time", "datetime",
-      "datetime-local", "search", "color", "tel"],
-
-    // default input types not to bind to unless bound directly
-    textInputTypes: /textarea|input|select/i,
-
-    options: {
-      filterInputAcceptingElements: true,
-      filterTextInputs: true,
-      filterContentEditable: true
-    }
-  };
-
-  function keyHandler(handleObj) {
-    if (typeof handleObj.data === "string") {
-      handleObj.data = {
-        keys: handleObj.data
-      };
-    }
-
-    // Only care when a possible input has been specified
-    if (!handleObj.data || !handleObj.data.keys || typeof handleObj.data.keys !== "string") {
-      return;
-    }
-
-    var origHandler = handleObj.handler,
-      keys = handleObj.data.keys.toLowerCase().split(" ");
-
-    handleObj.handler = function(event) {
-      //      Don't fire in text-accepting inputs that we didn't directly bind to
-      if (this !== event.target &&
-        (jQuery.hotkeys.options.filterInputAcceptingElements &&
-          jQuery.hotkeys.textInputTypes.test(event.target.nodeName) ||
-          (jQuery.hotkeys.options.filterContentEditable && jQuery(event.target).attr('contenteditable')) ||
-          (jQuery.hotkeys.options.filterTextInputs &&
-            jQuery.inArray(event.target.type, jQuery.hotkeys.textAcceptingInputTypes) > -1))) {
-        return;
-      }
-
-      var special = event.type !== "keypress" && jQuery.hotkeys.specialKeys[event.which],
-        character = String.fromCharCode(event.which).toLowerCase(),
-        modif = "",
-        possible = {};
-
-      jQuery.each(["alt", "ctrl", "shift"], function(index, specialKey) {
-
-        if (event[specialKey + 'Key'] && special !== specialKey) {
-          modif += specialKey + '+';
-        }
-      });
-
-      // metaKey is triggered off ctrlKey erronously
-      if (event.metaKey && !event.ctrlKey && special !== "meta") {
-        modif += "meta+";
-      }
-
-      if (event.metaKey && special !== "meta" && modif.indexOf("alt+ctrl+shift+") > -1) {
-        modif = modif.replace("alt+ctrl+shift+", "hyper+");
-      }
-
-      if (special) {
-        possible[modif + special] = true;
-      }
-      else {
-        possible[modif + character] = true;
-        possible[modif + jQuery.hotkeys.shiftNums[character]] = true;
-
-        // "$" can be triggered as "Shift+4" or "Shift+$" or just "$"
-        if (modif === "shift+") {
-          possible[jQuery.hotkeys.shiftNums[character]] = true;
-        }
-      }
-
-      for (var i = 0, l = keys.length; i < l; i++) {
-        if (possible[keys[i]]) {
-          return origHandler.apply(this, arguments);
-        }
-      }
-    };
-  }
-
-  jQuery.each(["keydown", "keyup", "keypress"], function() {
-    jQuery.event.special[this] = {
-      add: keyHandler
-    };
-  });
-
-})(jQuery || this.jQuery || window.jQuery);

Packages/ohif-viewerbase/package.js

@@ -83,10 +83,6 @@ Package.onUse(function(api) {
 
     api.addAssets(assets, 'client');
 
-    // TODO: Use NPM depends for these
-    api.addFiles('client/compatibility/jquery.hotkeys.js', 'client', {
-        bare: true
-    });
     api.addFiles('client/compatibility/dialogPolyfill.js', 'client', {
         bare: true
     });