tr(keymap) use mousetrap instead of keymaster

Have Ctrl+S working even in text area or input fields

Closes [BS-15079](https://bonitasoft.atlassian.net/browse/BS-15079)

frontend/app/js/common/services/keymaster.service.js → frontend/app/js/common/services/key-binding.service.js

@@ -15,11 +15,11 @@
 (function() {
   'use strict';
   /**
-   * This modules wrap the keymaster library (available in window.key)
+   * This modules wrap the Mousetrap library (available in window.Mousetrap)
    * into an angular service
    */
-  angular.module('bonitasoft.designer.common.services').service('keymaster', function($window) {
-    // key is library name taht handle keyboard shortcuts
-    return $window.key;
+  angular.module('bonitasoft.designer.common.services').service('keyBindingService', function($window) {
+    // key is library name that handle keyboard shortcuts
+    return $window.Mousetrap;
   });
 })();

frontend/app/js/custom-widget/custom-widget-editor.controller.js

@@ -19,7 +19,7 @@
     .module('bonitasoft.designer.custom-widget')
     .controller('CustomWidgetEditorCtrl', CustomWidgetEditorCtrl);
 
-  function CustomWidgetEditorCtrl($scope, artifact, artifactRepo, alerts, $uibModal, $window, keymaster, gettextCatalog, $stateParams, $state, BONDS, browserHistoryService) {
+  function CustomWidgetEditorCtrl($scope, artifact, artifactRepo, alerts, $uibModal, $window, keyBindingService, gettextCatalog, $stateParams, $state, BONDS, browserHistoryService) {
 
     $scope.widget = artifact;
     $scope.bonds = BONDS;
@@ -27,7 +27,7 @@
     var saveSuccessMsg = gettextCatalog.getString('Custom widget [ {{name}} ] successfully saved', { name: $scope.widget.name });
     var widgetRepo = artifactRepo;
 
-    keymaster('ctrl+s', function() {
+    keyBindingService.bindGlobal('ctrl+s', function() {
       $scope.$apply(function() {
         $scope.save();
       });
@@ -140,5 +140,10 @@
         size: 'lg'
       });
     };
+
+    $scope.$on('$destroy', function() {
+      keyBindingService.unbind('ctrl+s');
+    });
   }
+
 })();

frontend/app/js/editor/editor.controller.js

@@ -17,7 +17,7 @@
  * common functions to the directives used inside the page.
  */
 
-angular.module('bonitasoft.designer.editor').controller('EditorCtrl', function($scope, $state, $stateParams, $window, artifactRepo, resolutions, artifact, mode, arrays, componentUtils, keymaster, $uibModal, utils, whiteboardService) {
+angular.module('bonitasoft.designer.editor').controller('EditorCtrl', function($scope, $state, $stateParams, $window, artifactRepo, resolutions, artifact, mode, arrays, componentUtils, keyBindingService, $uibModal, utils, whiteboardService) {
 
   'use strict';
 
@@ -43,7 +43,7 @@ angular.module('bonitasoft.designer.editor').controller('EditorCtrl', function($
   /**
    * Adding DEL keyboard shortcut
    */
-  keymaster('del', function() {
+  keyBindingService.bind('del', function() {
     if (!$scope.currentComponent) {
       return;
     }
@@ -53,15 +53,15 @@ angular.module('bonitasoft.designer.editor').controller('EditorCtrl', function($
     });
   });
 
-  keymaster('right', function() {
+  keyBindingService.bind('right', function() {
     moveSelection(+1);
   });
 
-  keymaster('left', function() {
+  keyBindingService.bind('left', function() {
     moveSelection(-1);
   });
 
-  keymaster('ctrl+s', function() {
+  keyBindingService.bindGlobal('ctrl+s', function() {
     $scope.$apply(function() {
       $scope.save();
     });
@@ -81,9 +81,10 @@ angular.module('bonitasoft.designer.editor').controller('EditorCtrl', function($
   }
 
   $scope.$on('$destroy', function() {
-    keymaster.unbind('del');
-    keymaster.unbind('right');
-    keymaster.unbind('left');
+    keyBindingService.unbind('del');
+    keyBindingService.unbind('right');
+    keyBindingService.unbind('left');
+    keyBindingService.unbind('ctrl+s');
   });
 
   /**

frontend/bower.json

@@ -31,8 +31,6 @@
     "stomp-websocket": "2.3.4",
     "angular-moment": "0.9.0",
     "ngUpload": "0.5.16",
-    "keymaster": "~1.6.3",
-    "angular-animate": "1.4.7",
     "angular-ui-validate": "1.2.2",
     "angular-dynamic-locale": "0.1.29",
     "identicon.js": "redboul/identicon.js#1.0.0",

frontend/gulpfile.js

@@ -24,7 +24,8 @@ var paths = {
     'bower_components/angular-gettext/dist/angular-gettext.min.js',
     'bower_components/stomp-websocket/lib/stomp.min.js',
     'bower_components/sockjs/sockjs.min.js',
-    'bower_components/keymaster/keymaster.js',
+    'node_modules/mousetrap/mousetrap.js',
+    'node_modules/mousetrap/plugins/global-bind/mousetrap-global-bind.js',
     'bower_components/angular-moment/angular-moment.min.js',
     'bower_components/angular-dynamic-locale/tmhDynamicLocale.min.js',
     'bower_components/jsSHA/src/sha1.js',

frontend/package.json

@@ -6,11 +6,14 @@
   "engine": {
     "npm": ">=2.0.0"
   },
+  "dependencies": {
+    "babel-polyfill": "6.3.14",
+    "mousetrap": "1.5.3"
+  },
   "devDependencies": {
     "angular-i18n": "1.4.8",
     "babel-core": "6.3.17",
     "babel-preset-bonita": "1.0.1",
-    "babel-polyfill": "6.3.14",
     "bower": "^1.3.12",
     "browser-sync": "~1.7.1",
     "connect": "~3.2.0",
@@ -47,7 +50,6 @@
     "jscs-preset-bonita": "1.0.2",
     "jshint-stylish": "~1.0.0",
     "karma": "=0.13.18",
-    "socket.io": "1.3.7",
     "karma-babel-preprocessor": "6.0.1",
     "karma-chrome-launcher": "~0.1.4",
     "karma-cli": "0.0.4",
@@ -65,6 +67,7 @@
     "protractor": "2.4.0",
     "run-sequence": "~0.3.7",
     "serve-static": "~1.6.2",
+    "socket.io": "1.3.7",
     "source-map-support": "0.4.0",
     "through2": "^0.6.5"
   },
@@ -94,7 +97,9 @@
     "disallowUnusedParams": false
   },
   "babel": {
-    "presets": ["bonita"],
+    "presets": [
+      "bonita"
+    ],
     "sourceMap": "inline"
   }
 }

frontend/test/karma.conf.js

@@ -30,7 +30,8 @@ module.exports = function(config) {
       'bower_components/angular-gettext/dist/angular-gettext.min.js',
       'bower_components/moment/min/moment.min.js',
       'bower_components/angular-moment/angular-moment.min.js',
-      'bower_components/keymaster/keymaster.js',
+      'node_modules/mousetrap/mousetrap.min.js',
+      'node_modules/mousetrap/plugins/global-bind/mousetrap-global-bind.min.js',
       'bower_components/angular-dynamic-locale/tmhDynamicLocale.min.js',
       'bower_components/identicon.js/pnglib.js',
       'bower_components/identicon.js/identicon.js',