From bbb1cf07891afe4e4d44f4820e6c6c4c966b6513 Mon Sep 17 00:00:00 2001 From: Bruno Alves de Faria Date: Wed, 26 Apr 2017 19:31:56 -0300 Subject: [PATCH] Creating user interface to manage the hotkeys --- .../client/classes/HotkeysManager.js | 4 +- .../client/components/dialog.html | 5 + .../ohif-hotkeys/client/components/form.html | 5 + .../ohif-hotkeys/client/components/form.js | 58 +++++ .../ohif-hotkeys/client/components/index.js | 4 + Packages/ohif-hotkeys/client/index.js | 1 + Packages/ohif-hotkeys/main.js | 1 + Packages/ohif-hotkeys/package.js | 5 + .../client/compatibility/jquery.hotkeys.js | 204 ------------------ Packages/ohif-viewerbase/package.js | 4 - 10 files changed, 82 insertions(+), 209 deletions(-) create mode 100644 Packages/ohif-hotkeys/client/components/dialog.html create mode 100644 Packages/ohif-hotkeys/client/components/form.html create mode 100644 Packages/ohif-hotkeys/client/components/form.js create mode 100644 Packages/ohif-hotkeys/client/components/index.js delete mode 100644 Packages/ohif-viewerbase/client/compatibility/jquery.hotkeys.js diff --git a/Packages/ohif-hotkeys/client/classes/HotkeysManager.js b/Packages/ohif-hotkeys/client/classes/HotkeysManager.js index 6b44b17e1..27ee66972 100644 --- a/Packages/ohif-hotkeys/client/classes/HotkeysManager.js +++ b/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) { diff --git a/Packages/ohif-hotkeys/client/components/dialog.html b/Packages/ohif-hotkeys/client/components/dialog.html new file mode 100644 index 000000000..18fb11fca --- /dev/null +++ b/Packages/ohif-hotkeys/client/components/dialog.html @@ -0,0 +1,5 @@ + diff --git a/Packages/ohif-hotkeys/client/components/form.html b/Packages/ohif-hotkeys/client/components/form.html new file mode 100644 index 000000000..ab2fa2de6 --- /dev/null +++ b/Packages/ohif-hotkeys/client/components/form.html @@ -0,0 +1,5 @@ + diff --git a/Packages/ohif-hotkeys/client/components/form.js b/Packages/ohif-hotkeys/client/components/form.js new file mode 100644 index 000000000..2c1141220 --- /dev/null +++ b/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); + } +}); diff --git a/Packages/ohif-hotkeys/client/components/index.js b/Packages/ohif-hotkeys/client/components/index.js new file mode 100644 index 000000000..28804bee3 --- /dev/null +++ b/Packages/ohif-hotkeys/client/components/index.js @@ -0,0 +1,4 @@ +import './dialog.html'; + +import './form.html'; +import './form.js'; diff --git a/Packages/ohif-hotkeys/client/index.js b/Packages/ohif-hotkeys/client/index.js index cf327e497..a3b6ff5b9 100644 --- a/Packages/ohif-hotkeys/client/index.js +++ b/Packages/ohif-hotkeys/client/index.js @@ -1 +1,2 @@ +import './components'; import './lib'; diff --git a/Packages/ohif-hotkeys/main.js b/Packages/ohif-hotkeys/main.js index c473b8b17..9c359fe6e 100644 --- a/Packages/ohif-hotkeys/main.js +++ b/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(); diff --git a/Packages/ohif-hotkeys/package.js b/Packages/ohif-hotkeys/package.js index 2f3f010b2..0985263a7 100644 --- a/Packages/ohif-hotkeys/package.js +++ b/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', diff --git a/Packages/ohif-viewerbase/client/compatibility/jquery.hotkeys.js b/Packages/ohif-viewerbase/client/compatibility/jquery.hotkeys.js deleted file mode 100644 index b791f4529..000000000 --- a/Packages/ohif-viewerbase/client/compatibility/jquery.hotkeys.js +++ /dev/null @@ -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); \ No newline at end of file diff --git a/Packages/ohif-viewerbase/package.js b/Packages/ohif-viewerbase/package.js index 6135750d0..d5cf77355 100644 --- a/Packages/ohif-viewerbase/package.js +++ b/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 });