mirror of
https://github.com/keeweb/keeweb.git
synced 2024-06-26 07:39:04 +02:00
auto-type-select view
This commit is contained in:
parent
c9ac7f2fa3
commit
de2443eb5a
|
@ -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');
|
||||
|
|
|
@ -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 };
|
||||
|
|
|
@ -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);
|
||||
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 };
|
||||
|
|
|
@ -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}}" />
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue
Block a user