2021-05-07 11:55:33 +02:00
|
|
|
import log from '@converse/headless/log';
|
2021-01-06 20:43:21 +01:00
|
|
|
import tpl_bookmarks_list from './templates/list.js';
|
2021-01-08 11:20:17 +01:00
|
|
|
import { ElementView } from '@converse/skeletor/src/element.js';
|
2021-01-06 20:43:21 +01:00
|
|
|
import { _converse, api, converse } from '@converse/headless/core';
|
2021-07-15 18:45:16 +02:00
|
|
|
import { initStorage } from '@converse/headless/utils/storage.js';
|
2021-04-14 22:56:59 +02:00
|
|
|
import { render } from 'lit';
|
2021-01-06 20:43:21 +01:00
|
|
|
|
|
|
|
const u = converse.env.utils;
|
|
|
|
|
2021-01-08 11:20:17 +01:00
|
|
|
export default class BookmarksView extends ElementView {
|
|
|
|
|
|
|
|
async initialize () {
|
|
|
|
await api.waitUntil('bookmarksInitialized');
|
2021-01-06 20:43:21 +01:00
|
|
|
|
2021-01-26 09:58:16 +01:00
|
|
|
this.listenTo(_converse.bookmarks, 'add', this.render);
|
|
|
|
this.listenTo(_converse.bookmarks, 'remove', this.render);
|
2021-01-06 20:43:21 +01:00
|
|
|
|
|
|
|
this.listenTo(_converse.chatboxes, 'add', this.render);
|
|
|
|
this.listenTo(_converse.chatboxes, 'remove', this.render);
|
|
|
|
|
2021-05-07 11:55:33 +02:00
|
|
|
const id = `converse.bookmarks-list-model-${_converse.bare_jid}`;
|
2021-01-26 09:58:16 +01:00
|
|
|
this.model = new _converse.BookmarksList({ id });
|
2021-03-23 14:52:08 +01:00
|
|
|
initStorage(this.model, id);
|
2021-05-07 11:55:33 +02:00
|
|
|
|
|
|
|
this.model.fetch({
|
|
|
|
'success': () => this.render(),
|
|
|
|
'error': (model, err) => {
|
|
|
|
log.error(err);
|
|
|
|
this.render();
|
|
|
|
}
|
|
|
|
});
|
2021-01-08 11:20:17 +01:00
|
|
|
}
|
2021-01-06 20:43:21 +01:00
|
|
|
|
2021-01-25 21:40:21 +01:00
|
|
|
render () {
|
|
|
|
render(tpl_bookmarks_list({
|
2021-01-06 20:43:21 +01:00
|
|
|
'toggleBookmarksList': ev => this.toggleBookmarksList(ev),
|
2021-01-26 09:58:16 +01:00
|
|
|
'toggle_state': this.model.get('toggle-state')
|
2021-01-25 21:40:21 +01:00
|
|
|
}), this);
|
2021-01-08 11:20:17 +01:00
|
|
|
}
|
2021-01-06 20:43:21 +01:00
|
|
|
|
|
|
|
toggleBookmarksList (ev) {
|
2021-09-06 21:09:22 +02:00
|
|
|
ev?.preventDefault?.();
|
2021-01-06 20:43:21 +01:00
|
|
|
const icon_el = ev.target.matches('.fa') ? ev.target : ev.target.querySelector('.fa');
|
|
|
|
if (u.hasClass('fa-caret-down', icon_el)) {
|
2021-01-26 09:58:16 +01:00
|
|
|
u.slideIn(this.querySelector('.bookmarks'));
|
|
|
|
this.model.save({ 'toggle-state': _converse.CLOSED });
|
2021-01-06 20:43:21 +01:00
|
|
|
icon_el.classList.remove('fa-caret-down');
|
|
|
|
icon_el.classList.add('fa-caret-right');
|
|
|
|
} else {
|
|
|
|
icon_el.classList.remove('fa-caret-right');
|
|
|
|
icon_el.classList.add('fa-caret-down');
|
2021-01-26 09:58:16 +01:00
|
|
|
u.slideOut(this.querySelector('.bookmarks'));
|
|
|
|
this.model.save({ 'toggle-state': _converse.OPENED });
|
2021-01-06 20:43:21 +01:00
|
|
|
}
|
|
|
|
}
|
2021-01-08 11:20:17 +01:00
|
|
|
}
|
2021-01-06 20:43:21 +01:00
|
|
|
|
2021-01-08 11:20:17 +01:00
|
|
|
api.elements.define('converse-bookmarks', BookmarksView);
|