2016-07-24 22:57:12 +02:00
|
|
|
const Backbone = require('backbone');
|
|
|
|
const Keys = require('../../const/keys');
|
|
|
|
const KeyHandler = require('../../comp/key-handler');
|
2016-07-25 20:27:22 +02:00
|
|
|
const Locale = require('../../util/locale');
|
|
|
|
const AppSettingsModel = require('../../models/app-settings-model');
|
|
|
|
const EntryPresenter = require('../../presenters/entry-presenter');
|
|
|
|
const Scrollable = require('../../mixins/scrollable');
|
2016-07-24 22:57:12 +02:00
|
|
|
|
2017-01-31 07:50:28 +01:00
|
|
|
const AutoTypePopupView = Backbone.View.extend({
|
2016-07-24 22:57:12 +02:00
|
|
|
el: 'body',
|
|
|
|
|
|
|
|
template: require('templates/auto-type/auto-type-select.hbs'),
|
2016-07-25 20:27:22 +02:00
|
|
|
itemTemplate: require('templates/auto-type/auto-type-select-item.hbs'),
|
2016-07-24 22:57:12 +02:00
|
|
|
|
|
|
|
events: {
|
2016-07-25 20:27:22 +02:00
|
|
|
'click .at-select__header-filter-clear': 'clearFilterText',
|
2016-07-26 22:21:20 +02:00
|
|
|
'click .at-select__message-clear-filter': 'clearFilterWindow',
|
|
|
|
'click .at-select__item': 'itemClicked'
|
2016-07-24 22:57:12 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
result: null,
|
2016-07-26 22:21:20 +02:00
|
|
|
entries: null,
|
2016-07-24 22:57:12 +02:00
|
|
|
|
|
|
|
initialize() {
|
2016-07-25 20:27:22 +02:00
|
|
|
this.initScroll();
|
2016-07-24 23:10:03 +02:00
|
|
|
this.listenTo(Backbone, 'main-window-blur', this.mainWindowBlur);
|
2016-07-30 22:51:37 +02:00
|
|
|
this.listenTo(Backbone, 'main-window-will-close', this.mainWindowWillClose);
|
2016-07-24 22:57:12 +02:00
|
|
|
KeyHandler.onKey(Keys.DOM_VK_ESCAPE, this.escPressed, this, false, true);
|
|
|
|
KeyHandler.onKey(Keys.DOM_VK_RETURN, this.enterPressed, this, false, true);
|
|
|
|
KeyHandler.onKey(Keys.DOM_VK_UP, this.upPressed, this, false, true);
|
|
|
|
KeyHandler.onKey(Keys.DOM_VK_DOWN, this.downPressed, this, false, true);
|
2016-07-24 23:53:42 +02:00
|
|
|
KeyHandler.onKey(Keys.DOM_VK_BACK_SPACE, this.backSpacePressed, this, false, true);
|
2016-07-24 22:57:12 +02:00
|
|
|
KeyHandler.on('keypress:auto-type', this.keyPressed.bind(this));
|
|
|
|
KeyHandler.setModal('auto-type');
|
|
|
|
},
|
|
|
|
|
|
|
|
render() {
|
2016-07-25 20:27:22 +02:00
|
|
|
let topMessage, topClearFilterVisible;
|
|
|
|
if (this.model.filter.title || this.model.filter.url) {
|
|
|
|
topMessage = Locale.autoTypeMsgMatchedByWindow.replace('{}',
|
|
|
|
this.model.filter.title || this.model.filter.url);
|
|
|
|
topClearFilterVisible = !this.model.filter.ignoreWindowInfo;
|
|
|
|
} else {
|
|
|
|
topMessage = Locale.autoTypeMsgNoWindow;
|
|
|
|
}
|
2017-01-31 07:50:28 +01:00
|
|
|
const noColor = AppSettingsModel.instance.get('colorfulIcons') ? '' : 'grayscale';
|
2016-07-26 22:21:20 +02:00
|
|
|
this.entries = this.model.filter.getEntries();
|
|
|
|
this.result = this.entries.first();
|
2017-01-31 07:50:28 +01:00
|
|
|
const presenter = new EntryPresenter(null, noColor, this.result && this.result.id);
|
2016-07-25 20:27:22 +02:00
|
|
|
let itemsHtml = '';
|
2017-01-31 07:50:28 +01:00
|
|
|
const itemTemplate = this.itemTemplate;
|
2016-07-26 22:21:20 +02:00
|
|
|
this.entries.forEach(entry => {
|
2016-07-25 20:27:22 +02:00
|
|
|
presenter.present(entry);
|
|
|
|
itemsHtml += itemTemplate(presenter);
|
|
|
|
});
|
2016-07-24 23:53:42 +02:00
|
|
|
this.renderTemplate({
|
2016-07-25 20:27:22 +02:00
|
|
|
filterText: this.model.filter.text,
|
|
|
|
topMessage: topMessage,
|
|
|
|
topClearFilterVisible: topClearFilterVisible,
|
|
|
|
itemsHtml: itemsHtml
|
2016-07-24 23:53:42 +02:00
|
|
|
});
|
2016-07-24 22:57:12 +02:00
|
|
|
document.activeElement.blur();
|
2016-07-25 20:27:22 +02:00
|
|
|
this.createScroll({
|
|
|
|
root: this.$el.find('.at-select__items')[0],
|
|
|
|
scroller: this.$el.find('.scroller')[0],
|
|
|
|
bar: this.$el.find('.scroller__bar')[0]
|
|
|
|
});
|
2016-07-24 22:57:12 +02:00
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
remove() {
|
|
|
|
KeyHandler.offKey(Keys.DOM_VK_ESCAPE, this.escPressed, this);
|
|
|
|
KeyHandler.offKey(Keys.DOM_VK_RETURN, this.enterPressed, this);
|
|
|
|
KeyHandler.offKey(Keys.DOM_VK_UP, this.upPressed, this);
|
|
|
|
KeyHandler.offKey(Keys.DOM_VK_DOWN, this.downPressed, this);
|
2016-07-24 23:53:42 +02:00
|
|
|
KeyHandler.offKey(Keys.DOM_VK_BACK_SPACE, this.backSpacePressed, this);
|
2016-07-24 22:57:12 +02:00
|
|
|
KeyHandler.off('keypress:auto-type');
|
|
|
|
KeyHandler.setModal(null);
|
|
|
|
Backbone.View.prototype.remove.apply(this, arguments);
|
|
|
|
},
|
|
|
|
|
2016-07-24 23:10:03 +02:00
|
|
|
cancelAndClose() {
|
2016-07-24 22:57:12 +02:00
|
|
|
this.result = null;
|
|
|
|
this.trigger('result', this.result);
|
|
|
|
},
|
|
|
|
|
2016-07-26 22:21:20 +02:00
|
|
|
closeWithResult() {
|
|
|
|
this.trigger('result', this.result);
|
|
|
|
},
|
|
|
|
|
2016-07-24 23:10:03 +02:00
|
|
|
escPressed() {
|
2016-07-25 20:27:22 +02:00
|
|
|
if (this.model.filter.text) {
|
|
|
|
this.clearFilterText();
|
|
|
|
} else {
|
|
|
|
this.cancelAndClose();
|
|
|
|
}
|
2016-07-24 23:10:03 +02:00
|
|
|
},
|
|
|
|
|
2016-07-24 22:57:12 +02:00
|
|
|
enterPressed() {
|
2016-07-26 22:21:20 +02:00
|
|
|
this.closeWithResult();
|
2016-07-24 22:57:12 +02:00
|
|
|
},
|
|
|
|
|
2016-07-26 22:21:20 +02:00
|
|
|
upPressed(e) {
|
|
|
|
e.preventDefault();
|
2017-01-31 07:50:28 +01:00
|
|
|
const activeIndex = this.entries.indexOf(this.result) - 1;
|
2016-07-26 22:21:20 +02:00
|
|
|
if (activeIndex >= 0) {
|
|
|
|
this.result = this.entries.at(activeIndex);
|
|
|
|
this.highlightActive();
|
|
|
|
}
|
2016-07-24 22:57:12 +02:00
|
|
|
},
|
|
|
|
|
2016-07-26 22:21:20 +02:00
|
|
|
downPressed(e) {
|
|
|
|
e.preventDefault();
|
2017-01-31 07:50:28 +01:00
|
|
|
const activeIndex = this.entries.indexOf(this.result) + 1;
|
2016-07-26 22:21:20 +02:00
|
|
|
if (activeIndex < this.entries.length) {
|
|
|
|
this.result = this.entries.at(activeIndex);
|
|
|
|
this.highlightActive();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
highlightActive() {
|
|
|
|
this.$el.find('.at-select__item').removeClass('at-select__item--active');
|
2017-01-31 07:50:28 +01:00
|
|
|
const activeItem = this.$el.find('.at-select__item[data-id="' + this.result.id + '"]');
|
2016-07-26 22:21:20 +02:00
|
|
|
activeItem.addClass('at-select__item--active');
|
2017-01-31 07:50:28 +01:00
|
|
|
const itemRect = activeItem[0].getBoundingClientRect();
|
|
|
|
const listRect = this.scroller[0].getBoundingClientRect();
|
2016-07-26 22:21:20 +02:00
|
|
|
if (itemRect.top < listRect.top) {
|
|
|
|
this.scroller[0].scrollTop += itemRect.top - listRect.top;
|
|
|
|
} else if (itemRect.bottom > listRect.bottom) {
|
|
|
|
this.scroller[0].scrollTop += itemRect.bottom - listRect.bottom;
|
|
|
|
}
|
2016-07-24 22:57:12 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
keyPressed(e) {
|
2016-07-24 23:53:42 +02:00
|
|
|
if (e.which) {
|
|
|
|
this.model.filter.text += String.fromCharCode(e.which);
|
|
|
|
this.render();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
backSpacePressed() {
|
|
|
|
if (this.model.filter.text) {
|
|
|
|
this.model.filter.text = this.model.filter.text.substr(0, this.model.filter.text.length - 1);
|
|
|
|
this.render();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
clearFilterText() {
|
|
|
|
this.model.filter.text = '';
|
|
|
|
this.render();
|
2016-07-24 23:10:03 +02:00
|
|
|
},
|
|
|
|
|
2016-07-25 20:27:22 +02:00
|
|
|
clearFilterWindow() {
|
|
|
|
this.model.filter.ignoreWindowInfo = true;
|
|
|
|
this.render();
|
|
|
|
},
|
|
|
|
|
2016-07-26 22:21:20 +02:00
|
|
|
itemClicked(e) {
|
2017-01-31 07:50:28 +01:00
|
|
|
const itemEl = $(e.target).closest('.at-select__item');
|
|
|
|
const id = itemEl.data('id');
|
2016-07-26 22:21:20 +02:00
|
|
|
this.result = this.entries.get(id);
|
|
|
|
this.closeWithResult();
|
2016-07-30 22:51:37 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
mainWindowBlur() {
|
|
|
|
this.cancelAndClose();
|
|
|
|
},
|
|
|
|
|
|
|
|
mainWindowWillClose(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
this.cancelAndClose();
|
2016-07-24 22:57:12 +02:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2016-07-25 20:27:22 +02:00
|
|
|
_.extend(AutoTypePopupView.prototype, Scrollable);
|
|
|
|
|
2016-07-24 22:57:12 +02:00
|
|
|
module.exports = AutoTypePopupView;
|