Update Select component event binding

src/commands/view/MoveComponent.js

@@ -1,3 +1,5 @@
+import {on, off} from 'utils/mixins'
+
 const SelectComponent = require('./SelectComponent');
 const SelectPosition = require('./SelectPosition');
 const $ = Backbone.$;
@@ -49,7 +51,7 @@ module.exports = _.extend({}, SelectPosition, SelectComponent, {
     this.sorter.onEndMove = this.onEndMove.bind(this);
     this.stopSelectComponent();
     this.$wrapper.off('mousedown', this.initSorter);
-    this.getContentWindow().on('keydown', this.rollback);
+    on(this.getContentWindow(), 'keydown', this.rollback);
   },
 
   /**
@@ -77,11 +79,11 @@ module.exports = _.extend({}, SelectPosition, SelectComponent, {
     */
 
     this.stopSelectComponent();
-    this.getContentWindow().on('keydown', this.rollback);
+    on(this.getContentWindow(), 'keydown', this.rollback);
   },
 
   onEndMoveFromModel() {
-    this.getContentWindow().off('keydown', this.rollback);
+    off(this.getContentWindow(), 'keydown', this.rollback);
   },
 
   /**
@@ -90,7 +92,7 @@ module.exports = _.extend({}, SelectPosition, SelectComponent, {
    */
   onEndMove() {
     this.enable();
-    this.getContentWindow().off('keydown', this.rollback);
+    off(this.getContentWindow(), 'keydown', this.rollback);
   },
 
   /**

src/commands/view/SelectComponent.js

@@ -1,3 +1,5 @@
+import {on, off} from 'utils/mixins'
+
 const ToolbarView = require('dom_components/view/ToolbarView');
 const Toolbar = require('dom_components/model/Toolbar');
 const key = require('keymaster');
@@ -67,16 +69,6 @@ module.exports = {
     }
   },
 
-  /**
-   * Returns canavs body el
-   */
-  getCanvasBodyEl() {
-    if(!this.$bodyEl) {
-      this.$bodyEl = $(this.getCanvasBody());
-    }
-    return this.$bodyEl;
-  },
-
   /**
    * Start select component event
    * @private
@@ -98,16 +90,15 @@ module.exports = {
    * @private
    * */
   toggleSelectComponent(enable) {
-    var el = '*';
+    const method = enable ? 'on' : 'off';
-    var method = enable ? 'on' : 'off';
+    const methods = {on, off};
-    this.getCanvasBodyEl()
+    const body = this.getCanvasBody();
-      [method]('mouseover', el, this.onHover)
+    const win = this.getContentWindow();
-      [method]('mouseout', el, this.onOut)
+    methods[method](body, 'mouseover', this.onHover);
-      [method]('click', el, this.onClick);
+    methods[method](body, 'mouseout', this.onOut);
-
+    methods[method](body, 'click', this.onClick);
-    var cw = this.getContentWindow();
+    methods[method](win, 'scroll', this.onFrameScroll);
-    cw[method]('scroll', this.onFrameScroll);
+    methods[method](win, 'keydown', this.onKeyPress);
-    cw[method]('keydown', this.onKeyPress);
   },
 
   /**
@@ -556,9 +547,7 @@ module.exports = {
    * @private
    */
   getContentWindow() {
-    if(!this.contWindow)
+    return this.frameEl.contentWindow;
-      this.contWindow = $(this.frameEl.contentWindow);
-    return this.contWindow;
   },
 
   run(editor) {