From de2443eb5a9a840d07f85068052648ce4d72cc4f Mon Sep 17 00:00:00 2001 From: antelle Date: Sun, 15 Sep 2019 23:02:51 +0200 Subject: [PATCH] auto-type-select view --- app/scripts/auto-type/index.js | 5 +- app/scripts/view-engine/view.js | 10 ++ .../views/auto-type/auto-type-select-view.js | 132 ++++++++---------- .../auto-type/auto-type-select-item.hbs | 3 +- app/templates/auto-type/auto-type-select.hbs | 2 +- 5 files changed, 71 insertions(+), 81 deletions(-) diff --git a/app/scripts/auto-type/index.js b/app/scripts/auto-type/index.js index 6f11fd47..1db2c620 100644 --- a/app/scripts/auto-type/index.js +++ b/app/scripts/auto-type/index.js @@ -230,9 +230,7 @@ const AutoType = { } this.focusMainWindow(); evt.filter.ignoreWindowInfo = true; - this.selectEntryView = new AutoTypeSelectView({ - model: { filter: evt.filter } - }).render(); + this.selectEntryView = new AutoTypeSelectView({ filter: evt.filter }); 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'); diff --git a/app/scripts/view-engine/view.js b/app/scripts/view-engine/view.js index 7347636b..95029767 100644 --- a/app/scripts/view-engine/view.js +++ b/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 }; diff --git a/app/scripts/views/auto-type/auto-type-select-view.js b/app/scripts/views/auto-type/auto-type-select-view.js index 8efe7c84..8daf1d46 100644 --- a/app/scripts/views/auto-type/auto-type-select-view.js +++ b/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({ - el: 'body', +class AutoTypeSelectView extends View { + parent = 'body'; - template: require('templates/auto-type/auto-type-select.hbs'), - itemTemplate: require('templates/auto-type/auto-type-select-item.hbs'), + template = template; - events: { + itemTemplate = itemTemplate; + + events = { 'click .at-select__header-filter-clear': 'clearFilterText', 'click .at-select__item': 'itemClicked', 'contextmenu .at-select__item': 'itemRightClicked' - }, + }; - result: null, - entries: null, + result = null; + entries = null; - initialize() { - this.views = {}; + constructor(model) { + 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'); - KeyHandler.onKey(Keys.DOM_VK_RETURN, this.enterPressed, this, false, 'auto-type'); - KeyHandler.onKey( + this.onKey(Keys.DOM_VK_ESCAPE, this.escPressed, false, 'auto-type'); + this.onKey(Keys.DOM_VK_RETURN, this.enterPressed, false, 'auto-type'); + this.onKey( Keys.DOM_VK_RETURN, this.actionEnterPressed, - this, KeyHandler.SHORTCUT_ACTION, 'auto-type' ); - KeyHandler.onKey( - Keys.DOM_VK_RETURN, - this.optEnterPressed, - this, - KeyHandler.SHORTCUT_OPT, - 'auto-type' - ); - KeyHandler.onKey( + this.onKey(Keys.DOM_VK_RETURN, this.optEnterPressed, KeyHandler.SHORTCUT_OPT, 'auto-type'); + this.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'); - KeyHandler.onKey(Keys.DOM_VK_DOWN, this.downPressed, this, false, 'auto-type'); - KeyHandler.onKey(Keys.DOM_VK_BACK_SPACE, this.backSpacePressed, this, false, 'auto-type'); - KeyHandler.onKey( + this.onKey(Keys.DOM_VK_UP, this.upPressed, false, 'auto-type'); + this.onKey(Keys.DOM_VK_DOWN, this.downPressed, false, 'auto-type'); + this.onKey(Keys.DOM_VK_BACK_SPACE, this.backSpacePressed, false, 'auto-type'); + 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'); - }, - - removeKeys() { - 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); - }, + this.once('remove', () => { + 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 }; diff --git a/app/templates/auto-type/auto-type-select-item.hbs b/app/templates/auto-type/auto-type-select-item.hbs index d1da36b0..88638c44 100644 --- a/app/templates/auto-type/auto-type-select-item.hbs +++ b/app/templates/auto-type/auto-type-select-item.hbs @@ -1,4 +1,5 @@ - + {{~#if customIcon~}} diff --git a/app/templates/auto-type/auto-type-select.hbs b/app/templates/auto-type/auto-type-select.hbs index 4b4b9f5d..c80319ae 100644 --- a/app/templates/auto-type/auto-type-select.hbs +++ b/app/templates/auto-type/auto-type-select.hbs @@ -10,7 +10,7 @@ {{#if filterText}}
- +
{{/if}}