Merge pull request #79 from OptimistikSAS/issue/78

src/editor/EditorStartup.js

@@ -285,21 +285,32 @@ class EditorStartup {
       panning = false;
     });
 
-    $(document).bind('keydown', 'space', function (evt) {
+    document.addEventListener('keydown', (e) => {
+      if (e.target.nodeName !== 'BODY') return;
+      if(e.code.toLowerCase() === 'space'){
         this.svgCanvas.spaceKey = keypan = true;
-      evt.preventDefault();
+        e.preventDefault();  
-    }.bind(this)).bind('keyup', 'space', function (evt) {
+      } else if((e.key.toLowerCase() === 'shift') && (this.svgCanvas.getMode() === 'zoom')){
-      evt.preventDefault();
-      this.svgCanvas.spaceKey = keypan = false;
-    }.bind(this)).bind('keydown', 'shift', function (evt) {
-      if (this.svgCanvas.getMode() === 'zoom') {
         this.workarea.css('cursor', zoomOutIcon);
+        e.preventDefault();  
+      } else {
+        return;
       }
-    }.bind(this)).bind('keyup', 'shift', function (evt) {
+    });
-      if (this.svgCanvas.getMode() === 'zoom') {
+
+    document.addEventListener('keyup', (e) => {
+      if (e.target.nodeName !== 'BODY') return;
+      if(e.code.toLowerCase() === 'space'){
+        this.svgCanvas.spaceKey = keypan = false;
+        e.preventDefault();  
+      } else if((e.key.toLowerCase() === 'shift') && (this.svgCanvas.getMode() === 'zoom')){
         this.workarea.css('cursor', zoomInIcon);
+        e.preventDefault();  
+      } else {
+        return;
       }
-    }.bind(this));
+    });
+
 
     /**
      * @function module:SVGthis.setPanning

src/editor/js-hotkeys/README.md

@@ -1,45 +0,0 @@
-#About
-**jQuery Hotkeys** is a plug-in that lets you easily add and remove handlers for keyboard events anywhere in your code supporting almost any key combination.  
-
-This plugin is based off of the plugin by Tzury Bar Yochay: [jQuery.hotkeys](https://github.com/tzuryby/hotkeys)
-
-The syntax is as follows:
-
-    $(expression).bind(types, keys, handler);
-    $(expression).unbind(types, handler);
-
-    $(document).bind('keydown', 'ctrl+a', fn);
-
-    // e.g. replace '$' sign with 'EUR'
-    $('input.foo').bind('keyup', '$', function(){
-      this.value = this.value.replace('$', 'EUR');
-    });
-
-## Types
-Supported types are `'keydown'`, `'keyup'` and `'keypress'`
-
-## Notes
-
-If you want to use more than one modifiers (e.g. alt+ctrl+z) you should define them by an alphabetical order e.g. alt+ctrl+shift
-
-Hotkeys aren't tracked if you're inside of an input element (unless you explicitly bind the hotkey directly to the input). This helps to avoid conflict with normal user typing.
-
-## jQuery Compatibility
-
-Works with jQuery 1.4.2 and newer.
-
-It known to be working with all the major browsers on all available platforms (Win/Mac/Linux)
-
- * IE 6/7/8
- * FF 1.5/2/3
- * Opera-9
- * Safari-3
- * Chrome-0.2
-
-### Addendum
-
-Firefox is the most liberal one in the manner of letting you capture all short-cuts even those that are built-in in the browser such as `Ctrl-t` for new tab, or `Ctrl-a` for selecting all text. You can always bubble them up to the browser by returning `true` in your handler.
-
-Others, (IE) either let you handle built-in short-cuts, but will add their functionality after your code has executed. Or (Opera/Safari) will *not* pass those events to the DOM at all.
-
-*So, if you bind `Ctrl-Q` or `Alt-F4` and your Safari/Opera window is closed don't be surprised.*

src/editor/js-hotkeys/jquery.hotkeys.min.js

@@ -1,21 +0,0 @@
-// Todo: Update: https://github.com/jeresig/jquery.hotkeys
-/*
- * jQuery Hotkeys Plugin
- * Copyright 2010, John Resig
- * Dual licensed under the MIT or GPL Version 2 licenses.
- *
- * http://github.com/jeresig/jquery.hotkeys
- *
- * Based upon the plugin by Tzury Bar Yochay:
- * http://github.com/tzuryby/hotkeys
- *
- * Original idea by:
- * Binny V A, http://www.openjs.com/scripts/events/keyboard_shortcuts/
-*/
-
-// We *do* want to allow the escape key within textareas (and possibly tab too), so add the condition `n.which !== 27`
-
-export default function(b){b.hotkeys={version:"0.8",specialKeys:{8:"backspace",9:"tab",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",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",191:"/",224:"meta",219:"[",221:"]"},shiftNums:{"`":"~","1":"!","2":"@","3":"#","4":"$","5":"%","6":"^","7":"&","8":"*","9":"(","0":")","-":"_","=":"+",";":": ","'":'"',",":"<",".":">","/":"?","\\":"|"}};function a(d){if(typeof d.data!=="string"){return}var c=d.handler,e=d.data.toLowerCase().split(" ");d.handler=function(n){if(this!==n.target&&(n.which !== 27 && (/textarea|select/i.test(n.target.nodeName)||n.target.type==="text"))){return}var h=n.type!=="keypress"&&b.hotkeys.specialKeys[n.which],o=String.fromCharCode(n.which).toLowerCase(),k,m="",g={};if(n.altKey&&h!=="alt"){m+="alt+"}if(n.ctrlKey&&h!=="ctrl"){m+="ctrl+"}if(n.metaKey&&!n.ctrlKey&&h!=="meta"){m+="meta+"}if(n.shiftKey&&h!=="shift"){m+="shift+"}if(h){g[m+h]=true}else{g[m+o]=true;g[m+b.hotkeys.shiftNums[o]]=true;if(m==="shift+"){g[b.hotkeys.shiftNums[o]]=true}}for(var j=0,f=e.length;j<f;j++){if(g[e[j]]){return c.apply(this,arguments)}}}}b.each(["keydown","keyup","keypress"],function(){b.event.special[this]={add:a}})
-
-return b;
-}

src/editor/svgedit.js

@@ -21,7 +21,6 @@ import {isChrome, isMac, isTouch} from '../common/browser.js';
 import {convertUnit, isValidUnit} from '../common/units.js';
 
 import SvgCanvas from '../svgcanvas/svgcanvas.js';
-import jQueryPluginJSHotkeys from './js-hotkeys/jquery.hotkeys.min.js';
 import ConfigObj from './ConfigObj.js';
 
 import {
@@ -34,7 +33,6 @@ import EditorStartup from './EditorStartup.js';
 const {$id, $qa, isNullish, encode64, decode64, blankPageObjectURL} = SvgCanvas;
 
 // JFH hotkey is used for text input.
-const $ = [jQueryPluginJSHotkeys].reduce((jq, func) => func(jq), jQuery);
 const homePage = 'https://github.com/SVG-Edit/svgedit';
 /**
  *
@@ -938,10 +936,10 @@ class Editor extends EditorStartup {
           };
 
           $(this).mouseup(flyoutAction);
-
+          // TODO: currently not trigger here
-          if (opts.key) {
+          /* if (opts.key) {
             $(document).bind('keydown', opts.key[0] + ' shift+' + opts.key[0], flyoutAction);
-          }
+          } */
           return true;
         });
 
@@ -1420,7 +1418,6 @@ class Editor extends EditorStartup {
             key: btn.key,
             isDefault: Boolean(btn.includeWith && btn.includeWith.isDefault)
           }]; // , refData
-
           // {sel:'#tool_rect', fn: clickRect, evt: 'mouseup', key: 4, parent: '#tools_rect', icon: 'rect'}
 
           const pos = ('position' in opts) ? opts.position : 'last';
@@ -1456,7 +1453,8 @@ class Editor extends EditorStartup {
                 });
               }
               if (btn.key) {
-                $(document).bind('keydown', btn.key, func);
+                // TODO: currently not trigger here
+                // $(document).bind('keydown', btn.key, func);
                 if (btn.title) {
                   button.attr('title', btn.title + ' [' + btn.key + ']');
                 }