2015-10-17 23:49:24 +02:00
|
|
|
'use strict';
|
|
|
|
|
|
|
|
var Backbone = require('backbone'),
|
2015-10-25 10:44:19 +01:00
|
|
|
Resizable = require('../mixins/resizable'),
|
|
|
|
Scrollable = require('../mixins/scrollable'),
|
2015-10-17 23:49:24 +02:00
|
|
|
ListSearchView = require('./list-search-view'),
|
2016-06-11 16:18:11 +02:00
|
|
|
DropdownView = require('./dropdown-view'),
|
2015-10-17 23:49:24 +02:00
|
|
|
EntryPresenter = require('../presenters/entry-presenter'),
|
2015-11-08 09:59:46 +01:00
|
|
|
DragDropInfo = require('../comp/drag-drop-info'),
|
2016-06-11 16:18:11 +02:00
|
|
|
AppSettingsModel = require('../models/app-settings-model'),
|
|
|
|
Locale = require('../util/locale'),
|
|
|
|
Format = require('../util/format');
|
2015-10-17 23:49:24 +02:00
|
|
|
|
|
|
|
var ListView = Backbone.View.extend({
|
2015-12-16 22:50:45 +01:00
|
|
|
template: require('templates/list.hbs'),
|
|
|
|
emptyTemplate: require('templates/list-empty.hbs'),
|
2015-10-17 23:49:24 +02:00
|
|
|
|
|
|
|
events: {
|
2015-11-08 09:59:46 +01:00
|
|
|
'click .list__item': 'itemClick',
|
2016-06-10 21:08:28 +02:00
|
|
|
'click .list__table-options': 'tableOptionsClick',
|
2015-11-08 09:59:46 +01:00
|
|
|
'dragstart .list__item': 'itemDragStart'
|
2015-10-17 23:49:24 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
views: null,
|
|
|
|
|
|
|
|
minWidth: 200,
|
2015-11-21 15:55:42 +01:00
|
|
|
minHeight: 200,
|
2015-10-17 23:49:24 +02:00
|
|
|
maxWidth: 500,
|
2015-11-21 15:55:42 +01:00
|
|
|
maxHeight: 500,
|
2015-10-17 23:49:24 +02:00
|
|
|
|
|
|
|
itemsEl: null,
|
|
|
|
|
2016-06-11 16:18:11 +02:00
|
|
|
tableColumns: [
|
|
|
|
{ val: 'title', name: 'title', enabled: true },
|
|
|
|
{ val: 'user', name: 'user', enabled: true },
|
|
|
|
{ val: 'url', name: 'website', enabled: true },
|
|
|
|
{ val: 'tags', name: 'tags', enabled: true },
|
|
|
|
{ val: 'notes', name: 'notes', enabled: true },
|
|
|
|
{ val: 'groupName', name: 'group', enabled: false },
|
|
|
|
{ val: 'fileName', name: 'file', enabled: false }
|
|
|
|
],
|
|
|
|
|
2015-10-17 23:49:24 +02:00
|
|
|
initialize: function () {
|
|
|
|
this.initScroll();
|
|
|
|
this.views = {};
|
|
|
|
this.views.search = new ListSearchView({ model: this.model });
|
|
|
|
|
|
|
|
this.listenTo(this.views.search, 'select-prev', this.selectPrev);
|
|
|
|
this.listenTo(this.views.search, 'select-next', this.selectNext);
|
|
|
|
this.listenTo(this.views.search, 'create-entry', this.createEntry);
|
2015-10-31 20:09:32 +01:00
|
|
|
this.listenTo(this.views.search, 'create-group', this.createGroup);
|
2015-10-17 23:49:24 +02:00
|
|
|
this.listenTo(this, 'show', this.viewShown);
|
|
|
|
this.listenTo(this, 'hide', this.viewHidden);
|
2015-11-11 19:58:29 +01:00
|
|
|
this.listenTo(this, 'view-resize', this.viewResized);
|
2015-10-17 23:49:24 +02:00
|
|
|
this.listenTo(Backbone, 'filter', this.filterChanged);
|
|
|
|
this.listenTo(Backbone, 'entry-updated', this.entryUpdated);
|
|
|
|
|
2015-11-21 15:55:42 +01:00
|
|
|
this.listenTo(this.model.settings, 'change:tableView', this.setTableView);
|
|
|
|
|
2015-10-17 23:49:24 +02:00
|
|
|
this.items = [];
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function () {
|
|
|
|
if (!this.itemsEl) {
|
|
|
|
this.$el.html(this.template());
|
|
|
|
this.itemsEl = this.$el.find('.list__items>.scroller');
|
|
|
|
this.views.search.setElement(this.$el.find('.list__header')).render();
|
2015-11-21 15:55:42 +01:00
|
|
|
this.setTableView();
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2016-01-17 21:19:42 +01:00
|
|
|
this.createScroll({
|
2015-10-17 23:49:24 +02:00
|
|
|
root: this.$el.find('.list__items')[0],
|
|
|
|
scroller: this.$el.find('.scroller')[0],
|
2016-01-17 21:19:42 +01:00
|
|
|
bar: this.$el.find('.scroller__bar')[0]
|
2015-10-17 23:49:24 +02:00
|
|
|
});
|
|
|
|
}
|
|
|
|
if (this.items.length) {
|
2015-11-21 15:55:42 +01:00
|
|
|
var itemTemplate = this.getItemTemplate();
|
|
|
|
var itemsTemplate = this.getItemsTemplate();
|
2015-12-02 22:12:14 +01:00
|
|
|
var noColor = AppSettingsModel.instance.get('colorfulIcons') ? '' : 'grayscale';
|
2015-12-12 12:04:02 +01:00
|
|
|
var presenter = new EntryPresenter(this.getDescField(), noColor, this.model.activeEntryId);
|
2016-06-11 16:18:11 +02:00
|
|
|
var columns = {};
|
2016-07-17 13:30:38 +02:00
|
|
|
this.tableColumns.forEach(col => {
|
2016-06-11 16:18:11 +02:00
|
|
|
if (col.enabled) {
|
|
|
|
columns[col.val] = true;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
presenter.columns = columns;
|
2015-10-17 23:49:24 +02:00
|
|
|
var itemsHtml = '';
|
2016-07-17 13:30:38 +02:00
|
|
|
this.items.forEach(item => {
|
2015-10-17 23:49:24 +02:00
|
|
|
presenter.present(item);
|
2015-11-21 15:55:42 +01:00
|
|
|
itemsHtml += itemTemplate(presenter);
|
2015-10-17 23:49:24 +02:00
|
|
|
}, this);
|
2016-06-11 16:18:11 +02:00
|
|
|
var html = itemsTemplate({ items: itemsHtml, columns: this.tableColumns });
|
2015-12-12 16:43:43 +01:00
|
|
|
this.itemsEl.html(html);
|
2015-10-17 23:49:24 +02:00
|
|
|
} else {
|
|
|
|
this.itemsEl.html(this.emptyTemplate());
|
|
|
|
}
|
|
|
|
this.pageResized();
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
2015-11-21 15:55:42 +01:00
|
|
|
getItemsTemplate: function() {
|
|
|
|
if (this.model.settings.get('tableView')) {
|
2015-12-16 22:50:45 +01:00
|
|
|
return require('templates/list-table.hbs');
|
2015-11-21 15:55:42 +01:00
|
|
|
} else {
|
|
|
|
return this.renderPlainItems;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
renderPlainItems: function(itemsHtml) {
|
|
|
|
return itemsHtml.items;
|
|
|
|
},
|
|
|
|
|
|
|
|
getItemTemplate: function() {
|
|
|
|
if (this.model.settings.get('tableView')) {
|
2015-12-16 22:50:45 +01:00
|
|
|
return require('templates/list-item-table.hbs');
|
2015-11-21 15:55:42 +01:00
|
|
|
} else {
|
2015-12-16 22:50:45 +01:00
|
|
|
return require('templates/list-item-short.hbs');
|
2015-11-21 15:55:42 +01:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2015-10-17 23:49:24 +02:00
|
|
|
getDescField: function() {
|
|
|
|
return this.model.sort.replace('-', '');
|
|
|
|
},
|
|
|
|
|
|
|
|
itemClick: function(e) {
|
|
|
|
var id = $(e.target).closest('.list__item').attr('id');
|
|
|
|
var item = this.items.get(id);
|
|
|
|
if (!item.active) {
|
|
|
|
this.selectItem(item);
|
|
|
|
}
|
2015-10-26 22:07:19 +01:00
|
|
|
Backbone.trigger('toggle-details', true);
|
2015-10-17 23:49:24 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
selectPrev: function() {
|
2015-12-12 12:04:02 +01:00
|
|
|
var ix = this.items.indexOf(this.items.get(this.model.activeEntryId));
|
2015-10-17 23:49:24 +02:00
|
|
|
if (ix > 0) {
|
|
|
|
this.selectItem(this.items.at(ix - 1));
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
selectNext: function() {
|
2015-12-12 12:04:02 +01:00
|
|
|
var ix = this.items.indexOf(this.items.get(this.model.activeEntryId));
|
2015-10-17 23:49:24 +02:00
|
|
|
if (ix < this.items.length - 1) {
|
|
|
|
this.selectItem(this.items.at(ix + 1));
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
createEntry: function() {
|
|
|
|
var newEntry = this.model.createNewEntry();
|
|
|
|
this.items.unshift(newEntry);
|
|
|
|
this.render();
|
|
|
|
this.selectItem(newEntry);
|
|
|
|
},
|
|
|
|
|
2015-10-31 20:09:32 +01:00
|
|
|
createGroup: function() {
|
|
|
|
var newGroup = this.model.createNewGroup();
|
|
|
|
Backbone.trigger('edit-group', newGroup);
|
|
|
|
},
|
|
|
|
|
2015-10-17 23:49:24 +02:00
|
|
|
selectItem: function(item) {
|
2015-12-12 12:04:02 +01:00
|
|
|
this.model.activeEntryId = item.id;
|
2015-10-17 23:49:24 +02:00
|
|
|
Backbone.trigger('select-entry', item);
|
|
|
|
this.itemsEl.find('.list__item--active').removeClass('list__item--active');
|
2015-12-12 12:04:02 +01:00
|
|
|
var itemEl = document.getElementById(item.id);
|
2015-10-17 23:49:24 +02:00
|
|
|
itemEl.classList.add('list__item--active');
|
|
|
|
var listEl = this.itemsEl[0],
|
|
|
|
itemRect = itemEl.getBoundingClientRect(),
|
|
|
|
listRect = listEl.getBoundingClientRect();
|
|
|
|
if (itemRect.top < listRect.top) {
|
|
|
|
listEl.scrollTop += itemRect.top - listRect.top;
|
|
|
|
} else if (itemRect.bottom > listRect.bottom) {
|
|
|
|
listEl.scrollTop += itemRect.bottom - listRect.bottom;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
viewShown: function() {
|
|
|
|
this.views.search.show();
|
|
|
|
},
|
|
|
|
|
|
|
|
viewHidden: function() {
|
|
|
|
this.views.search.hide();
|
|
|
|
},
|
|
|
|
|
2015-11-21 15:55:42 +01:00
|
|
|
setTableView: function() {
|
|
|
|
var isTable = this.model.settings.get('tableView');
|
|
|
|
this.dragView.setCoord(isTable ? 'y' : 'x');
|
|
|
|
this.setDefaultSize();
|
|
|
|
},
|
|
|
|
|
|
|
|
setDefaultSize: function() {
|
|
|
|
this.setSize(this.model.settings.get('listViewWidth'));
|
|
|
|
},
|
|
|
|
|
|
|
|
setSize: function(size) {
|
|
|
|
this.$el.css({ width: null, height: null });
|
|
|
|
if (size) {
|
|
|
|
this.$el.css('flex', '0 0 ' + size + 'px');
|
|
|
|
} else {
|
|
|
|
this.$el.css('flex', null);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
viewResized: function(size) {
|
|
|
|
this.setSize(size);
|
|
|
|
this.throttleSetViewSizeSetting(size);
|
|
|
|
},
|
|
|
|
|
2016-07-17 13:30:38 +02:00
|
|
|
throttleSetViewSizeSetting: _.throttle(size => {
|
2015-11-11 19:58:29 +01:00
|
|
|
AppSettingsModel.instance.set('listViewWidth', size);
|
|
|
|
}, 1000),
|
|
|
|
|
2015-10-17 23:49:24 +02:00
|
|
|
filterChanged: function(filter) {
|
|
|
|
this.items = filter.entries;
|
|
|
|
this.render();
|
|
|
|
},
|
|
|
|
|
|
|
|
entryUpdated: function() {
|
|
|
|
var scrollTop = this.itemsEl[0].scrollTop;
|
|
|
|
this.render();
|
|
|
|
this.itemsEl[0].scrollTop = scrollTop;
|
2015-11-08 09:59:46 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
itemDragStart: function(e) {
|
|
|
|
e.stopPropagation();
|
|
|
|
var id = $(e.target).closest('.list__item').attr('id');
|
2016-02-17 21:57:12 +01:00
|
|
|
e.originalEvent.dataTransfer.setData('text/entry', id);
|
|
|
|
e.originalEvent.dataTransfer.effectAllowed = 'move';
|
2015-11-08 09:59:46 +01:00
|
|
|
DragDropInfo.dragObject = this.items.get(id);
|
2016-06-10 21:08:28 +02:00
|
|
|
},
|
|
|
|
|
2016-06-11 16:18:11 +02:00
|
|
|
tableOptionsClick: function(e) {
|
|
|
|
e.stopImmediatePropagation();
|
|
|
|
if (this.views.optionsDropdown) {
|
|
|
|
this.hideOptionsDropdown();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
var view = new DropdownView();
|
|
|
|
this.listenTo(view, 'cancel', this.hideOptionsDropdown);
|
|
|
|
this.listenTo(view, 'select', this.optionsDropdownSelect);
|
|
|
|
var targetElRect = this.$el.find('.list__table-options')[0].getBoundingClientRect();
|
2016-07-17 13:30:38 +02:00
|
|
|
var options = this.tableColumns.map(col => ({
|
|
|
|
value: col.val,
|
|
|
|
icon: col.enabled ? 'check-square-o' : 'square-o',
|
|
|
|
text: Format.capFirst(Locale[col.name])
|
|
|
|
}));
|
2016-06-11 16:18:11 +02:00
|
|
|
view.render({
|
|
|
|
position: {
|
|
|
|
top: targetElRect.bottom,
|
|
|
|
left: targetElRect.left
|
|
|
|
},
|
|
|
|
options: options
|
|
|
|
});
|
|
|
|
this.views.optionsDropdown = view;
|
|
|
|
},
|
|
|
|
|
|
|
|
hideOptionsDropdown: function() {
|
|
|
|
if (this.views.optionsDropdown) {
|
|
|
|
this.views.optionsDropdown.remove();
|
|
|
|
delete this.views.optionsDropdown;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
optionsDropdownSelect: function(e) {
|
2016-07-17 13:30:38 +02:00
|
|
|
var col = _.find(this.tableColumns, c => c.val === e.item);
|
2016-06-11 16:18:11 +02:00
|
|
|
col.enabled = !col.enabled;
|
|
|
|
e.el.find('i:first').toggleClass('fa-check-square-o fa-square-o');
|
|
|
|
this.render();
|
2015-10-17 23:49:24 +02:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
_.extend(ListView.prototype, Resizable);
|
|
|
|
_.extend(ListView.prototype, Scrollable);
|
|
|
|
|
|
|
|
module.exports = ListView;
|