auto-type-select view

app/scripts/auto-type/index.js

@@ -230,9 +230,7 @@ const AutoType = {
         }
         this.focusMainWindow();
         evt.filter.ignoreWindowInfo = true;
-        this.selectEntryView = new AutoTypeSelectView({
+        this.selectEntryView = new AutoTypeSelectView({ filter: evt.filter });
-            model: { filter: evt.filter }
-        }).render();
         this.selectEntryView.on('result', result => {
             logger.debug('Entry selected', result);
             this.selectEntryView.off('result');
@@ -248,6 +246,7 @@ const AutoType = {
                 }
             });
         });
+        this.selectEntryView.render();
         this.selectEntryView.on('show-open-files', () => {
             this.selectEntryView.hide();
             Backbone.trigger('open-file');

app/scripts/view-engine/view.js

@@ -26,6 +26,8 @@ class View extends EventEmitter {
         if (options.replace) {
             this.replace = options.replace;
         }
+
+        this.setMaxListeners(100);
     }
 
     render(templateData) {
@@ -186,6 +188,14 @@ class View extends EventEmitter {
         KeyHandler.onKey(key, handler, this, shortcut, modal, noPrevent);
         this.once('remove', () => KeyHandler.offKey(key, handler, this));
     }
+
+    off(event, listener) {
+        if (listener === undefined) {
+            return super.removeAllListeners(event);
+        } else {
+            return super.off(event, listener);
+        }
+    }
 }
 
 export { View };

app/scripts/views/auto-type/auto-type-select-view.js

@@ -1,4 +1,5 @@
 import Backbone from 'backbone';
+import { View } from 'view-engine/view';
 import { Shortcuts } from 'comp/app/shortcuts';
 import { KeyHandler } from 'comp/browser/key-handler';
 import { Keys } from 'const/keys';
@@ -8,58 +9,53 @@ import { StringFormat } from 'util/formatting/string-format';
 import { Locale } from 'util/locale';
 import { Scrollable } from 'view-engine/scrollable';
 import { DropdownView } from 'views/dropdown-view';
+import template from 'templates/auto-type/auto-type-select.hbs';
+import itemTemplate from 'templates/auto-type/auto-type-select-item.hbs';
 
-const AutoTypeSelectView = Backbone.View.extend({
+class AutoTypeSelectView extends View {
-    el: 'body',
+    parent = 'body';
 
-    template: require('templates/auto-type/auto-type-select.hbs'),
+    template = template;
-    itemTemplate: require('templates/auto-type/auto-type-select-item.hbs'),
 
-    events: {
+    itemTemplate = itemTemplate;
+
+    events = {
         'click .at-select__header-filter-clear': 'clearFilterText',
         'click .at-select__item': 'itemClicked',
         'contextmenu .at-select__item': 'itemRightClicked'
-    },
+    };
 
-    result: null,
+    result = null;
-    entries: null,
+    entries = null;
 
-    initialize() {
+    constructor(model) {
-        this.views = {};
+        super(model);
         this.initScroll();
         this.listenTo(Backbone, 'main-window-blur', this.mainWindowBlur);
         this.listenTo(Backbone, 'main-window-will-close', this.mainWindowWillClose);
         this.setupKeys();
-    },
+    }
 
     setupKeys() {
-        KeyHandler.onKey(Keys.DOM_VK_ESCAPE, this.escPressed, this, false, 'auto-type');
+        this.onKey(Keys.DOM_VK_ESCAPE, this.escPressed, false, 'auto-type');
-        KeyHandler.onKey(Keys.DOM_VK_RETURN, this.enterPressed, this, false, 'auto-type');
+        this.onKey(Keys.DOM_VK_RETURN, this.enterPressed, false, 'auto-type');
-        KeyHandler.onKey(
+        this.onKey(
             Keys.DOM_VK_RETURN,
             this.actionEnterPressed,
-            this,
             KeyHandler.SHORTCUT_ACTION,
             'auto-type'
         );
-        KeyHandler.onKey(
+        this.onKey(Keys.DOM_VK_RETURN, this.optEnterPressed, KeyHandler.SHORTCUT_OPT, 'auto-type');
-            Keys.DOM_VK_RETURN,
+        this.onKey(
-            this.optEnterPressed,
-            this,
-            KeyHandler.SHORTCUT_OPT,
-            'auto-type'
-        );
-        KeyHandler.onKey(
             Keys.DOM_VK_RETURN,
             this.shiftEnterPressed,
-            this,
             KeyHandler.SHORTCUT_SHIFT,
             'auto-type'
         );
-        KeyHandler.onKey(Keys.DOM_VK_UP, this.upPressed, this, false, 'auto-type');
+        this.onKey(Keys.DOM_VK_UP, this.upPressed, false, 'auto-type');
-        KeyHandler.onKey(Keys.DOM_VK_DOWN, this.downPressed, this, false, 'auto-type');
+        this.onKey(Keys.DOM_VK_DOWN, this.downPressed, false, 'auto-type');
-        KeyHandler.onKey(Keys.DOM_VK_BACK_SPACE, this.backSpacePressed, this, false, 'auto-type');
+        this.onKey(Keys.DOM_VK_BACK_SPACE, this.backSpacePressed, false, 'auto-type');
-        KeyHandler.onKey(
+        this.onKey(
             Keys.DOM_VK_O,
             this.openKeyPressed,
             this,
@@ -68,21 +64,11 @@ const AutoTypeSelectView = Backbone.View.extend({
         );
         KeyHandler.on('keypress:auto-type', this.keyPressed.bind(this));
         KeyHandler.setModal('auto-type');
-    },
+        this.once('remove', () => {
-
+            KeyHandler.off('keypress:auto-type');
-    removeKeys() {
+            KeyHandler.setModal(null);
-        KeyHandler.offKey(Keys.DOM_VK_ESCAPE, this.escPressed, this);
+        });
-        KeyHandler.offKey(Keys.DOM_VK_RETURN, this.enterPressed, this);
+    }
-        KeyHandler.offKey(Keys.DOM_VK_RETURN, this.actionEnterPressed, this);
-        KeyHandler.offKey(Keys.DOM_VK_RETURN, this.optEnterPressed, this);
-        KeyHandler.offKey(Keys.DOM_VK_RETURN, this.shiftEnterPressed, this);
-        KeyHandler.offKey(Keys.DOM_VK_UP, this.upPressed, this);
-        KeyHandler.offKey(Keys.DOM_VK_DOWN, this.downPressed, this);
-        KeyHandler.offKey(Keys.DOM_VK_BACK_SPACE, this.backSpacePressed, this);
-        KeyHandler.offKey(Keys.DOM_VK_O, this.openKeyPressed, this);
-        KeyHandler.off('keypress:auto-type');
-        KeyHandler.setModal(null);
-    },
 
     render() {
         let topMessage;
@@ -104,7 +90,7 @@ const AutoTypeSelectView = Backbone.View.extend({
             presenter.present(entry);
             itemsHtml += itemTemplate(presenter);
         });
-        this.renderTemplate({
+        super.render({
             filterText: this.model.filter.text,
             topMessage,
             itemsHtml,
@@ -119,25 +105,19 @@ const AutoTypeSelectView = Backbone.View.extend({
             scroller: this.$el.find('.scroller')[0],
             bar: this.$el.find('.scroller__bar')[0]
         });
-        return this;
+    }
-    },
-
-    remove() {
-        this.removeKeys();
-        Backbone.View.prototype.remove.apply(this);
-    },
 
     cancelAndClose() {
         this.result = null;
-        this.trigger('result', this.result);
+        this.emit('result', this.result);
-    },
+    }
 
     closeWithResult(sequence) {
-        this.trigger('result', {
+        this.emit('result', {
             entry: this.result,
             sequence
         });
-    },
+    }
 
     escPressed() {
         if (this.model.filter.text) {
@@ -145,29 +125,29 @@ const AutoTypeSelectView = Backbone.View.extend({
         } else {
             this.cancelAndClose();
         }
-    },
+    }
 
     enterPressed() {
         this.closeWithResult();
-    },
+    }
 
     actionEnterPressed() {
         this.closeWithResult('{PASSWORD}');
-    },
+    }
 
     optEnterPressed() {
         this.closeWithResult('{USERNAME}');
-    },
+    }
 
     openKeyPressed() {
         this.removeKeys();
-        this.trigger('show-open-files');
+        this.emit('show-open-files');
-    },
+    }
 
     shiftEnterPressed(e) {
         const activeItem = this.$el.find('.at-select__item[data-id="' + this.result.id + '"]');
         this.showItemOptions(activeItem, e);
-    },
+    }
 
     upPressed(e) {
         e.preventDefault();
@@ -176,7 +156,7 @@ const AutoTypeSelectView = Backbone.View.extend({
             this.result = this.entries.at(activeIndex);
             this.highlightActive();
         }
-    },
+    }
 
     downPressed(e) {
         e.preventDefault();
@@ -185,7 +165,7 @@ const AutoTypeSelectView = Backbone.View.extend({
             this.result = this.entries.at(activeIndex);
             this.highlightActive();
         }
-    },
+    }
 
     highlightActive() {
         this.$el.find('.at-select__item').removeClass('at-select__item--active');
@@ -198,14 +178,14 @@ const AutoTypeSelectView = Backbone.View.extend({
         } else if (itemRect.bottom > listRect.bottom) {
             this.scroller[0].scrollTop += itemRect.bottom - listRect.bottom;
         }
-    },
+    }
 
     keyPressed(e) {
         if (e.which && e.which !== Keys.DOM_VK_RETURN) {
             this.model.filter.text += String.fromCharCode(e.which);
             this.render();
         }
-    },
+    }
 
     backSpacePressed() {
         if (this.model.filter.text) {
@@ -215,12 +195,12 @@ const AutoTypeSelectView = Backbone.View.extend({
             );
             this.render();
         }
-    },
+    }
 
     clearFilterText() {
         this.model.filter.text = '';
         this.render();
-    },
+    }
 
     itemClicked(e) {
         const itemEl = $(e.target).closest('.at-select__item');
@@ -233,21 +213,21 @@ const AutoTypeSelectView = Backbone.View.extend({
             this.result = this.entries.get(id);
             this.closeWithResult();
         }
-    },
+    }
 
     itemRightClicked(e) {
         const itemEl = $(e.target).closest('.at-select__item');
         this.showItemOptions(itemEl, e);
-    },
+    }
 
     mainWindowBlur() {
         this.cancelAndClose();
-    },
+    }
 
     mainWindowWillClose(e) {
         e.preventDefault();
         this.cancelAndClose();
-    },
+    }
 
     showItemOptions(itemEl, event) {
         if (event) {
@@ -327,22 +307,22 @@ const AutoTypeSelectView = Backbone.View.extend({
         });
 
         this.views.optionsDropdown = view;
-    },
+    }
 
     hideItemOptionsDropdown() {
         if (this.views.optionsDropdown) {
             this.views.optionsDropdown.remove();
             delete this.views.optionsDropdown;
         }
-    },
+    }
 
     itemOptionsDropdownSelect(e) {
         this.hideItemOptionsDropdown();
         const sequence = e.item;
         this.closeWithResult(sequence);
     }
-});
+}
 
-_.extend(AutoTypeSelectView.prototype, Scrollable);
+Object.assign(AutoTypeSelectView.prototype, Scrollable);
 
 export { AutoTypeSelectView };

app/templates/auto-type/auto-type-select-item.hbs

@@ -1,4 +1,5 @@
-<tr class="at-select__item {{#if active}}at-select__item--active{{/if}}" data-id="{{id}}">
+<tr class="at-select__item {{#if active}}at-select__item--active{{/if}}" data-id="{{id}}"
+    id="at-select__item--{{id}}">
     <td>
         {{~#if customIcon~}}
             <img src="{{{customIcon}}}" class="at-select__item-icon at-select__item-icon--custom {{#if color}}{{color}}{{/if}}" />

app/templates/auto-type/auto-type-select.hbs

@@ -10,7 +10,7 @@
         {{#if filterText}}
         <div class="at-select__header-filter">
             <input type="text" readonly value="{{filterText}}" class="at-select__header-filter-input" />
-            <i class="at-select__header-filter-clear fa fa-times" />
+            <i class="at-select__header-filter-clear fa fa-times"></i>
         </div>
         {{/if}}
     </div>