keeweb
/
keeweb
mirror of https://github.com/keeweb/keeweb.git
1
0
Fork 0
Code Issues Releases Wiki Activity

auto-type-select view

This commit is contained in:
antelle 2019-09-15 23:02:51 +02:00
parent c9ac7f2fa3
commit de2443eb5a
5 changed files with 71 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/scripts/auto-type/index.js
View File

@ -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');

10
app/scripts/view-engine/view.js
View 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 };

132
app/scripts/views/auto-type/auto-type-select-view.js
View File

@ -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 };

3
app/templates/auto-type/auto-type-select-item.hbs
View File

@ -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}}" />

2
app/templates/auto-type/auto-type-select.hbs
View File

@ -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>